Predictive UI

Interfaces that anticipate user intent from behavior patterns, adapting the layout before explicit requests.

The Concept

Traditional interfaces wait for explicit user actions (clicks, searches, commands). Predictive UI observes implicit signals and proactively adapts.

Traditional UI

User hovers → Nothing happens

User dwells → Nothing happens

User clicks → Show related items

Reactive only

Predictive UI

User hovers → Analyze product category

User dwells → Infer high interest

Layout shifts → Surface related items

Before user asks

Behavior Signals

Hover Behavior

Low signal

Quick hovers indicate browsing. Prolonged hovers (>1s) suggest interest. Pattern of hovers reveals category preferences.

{ signal: "hover", productId: "p_001", duration: 1.5, category: "outerwear" }

Dwell Time

High signal

Time spent viewing a product detail indicates serious consideration. 5+ seconds is strong purchase intent signal.

{ signal: "dwell", productId: "p_001", duration: 8.2, priceViewed: true }

Scroll Patterns

Medium signal

Fast scrolling = browsing mode. Slow scrolling = exploration. Scroll-backs indicate missed item interest.

{ signal: "scroll", direction: "up", speed: "slow", viewportProducts: ["p_003", "p_004"] }

Interaction Sequence

Intent signal

Viewing sizes → price → add-to-cart = high purchase intent. Viewing reviews → alternatives = comparison shopping.

{ signal: "sequence", pattern: ["view", "size", "price"], intent: "purchase_likely" }

Example Flow

Predictive Cart Scenario

User adds rain jacket to cart

Client model observes cart addition

Intent inference: "outdoor activity, weather protection"

WebLLM classifies the semantic context

Anticipatory UI: "You might also need..."

Waterproof boots, umbrella surface automatically

User hovers on boots

Quick-add button appears before click

Result: Complementary products suggested without explicit search, reducing friction and increasing cart value.

Implementation Pattern

// Predictive UI behavior tracking
class BehaviorTracker {
  private signals: BehaviorSignal[] = [];
  private model: WebLLMEngine;

  async trackHover(productId: string, duration: number) {
    this.signals.push({ type: 'hover', productId, duration });

    // Infer interest if dwell > 1s
    if (duration > 1000) {
      const intent = await this.model.classify(
        `User showed interest in ${productId}`
      );
      this.predictiveUpdate(intent);
    }
  }

  async trackCartAdd(productId: string) {
    const product = await getProduct(productId);

    // Infer complementary needs
    const suggestions = await this.model.complete({
      prompt: `User bought ${product.name}. Related needs:`,
      maxTokens: 50
    });

    // Surface suggestions proactively
    this.showAnticipatorySuggestions(suggestions);
  }

  private predictiveUpdate(intent: IntentClassification) {
    // Subtle layout shift to surface related items
    layoutEngine.adapt({
      boost: intent.relatedCategories,
      subtle: true,  // Don't be jarring
      revertAfter: 30000  // Revert if no engagement
    });
  }
}

Hybrid Routing

Privacy-First