> ## Documentation Index
> Fetch the complete documentation index at: https://patterns.heurilens.com/llms.txt
> Use this file to discover all available pages before exploring further.

# User Flow

> A measurable UX pattern where users lose direction, confidence, or momentum across multi-step journeys — causing hesitation, looping, and drop-offs.

## What is a user flow in Heurilens?

A user flow is not a diagram of screens.

In Heurilens, a flow is defined as:

**Intent → Steps → Feedback → Next action**

Flow breaks when the user cannot confidently answer:

* Where am I right now?
* What just happened?
* What do I do next?

When those answers are unclear, users do not complain. They pause, backtrack, or abandon.

<Frame>
  <img src="https://mintcdn.com/heurilens/gl-jdYlebDR0ByAq/images/user-flow.png?fit=max&auto=format&n=gl-jdYlebDR0ByAq&q=85&s=4be841d2f47c6f0e30407ab35136cf66" alt="A measurable UX pattern where users lose direction, confidence, or momentum across multi-step journeys — causing hesitation, looping, and drop-offs." className="rounded-xl" noZoom={true} width="1200" height="442" data-path="images/user-flow.png" />
</Frame>

## Flow breakdowns leave behavioral traces

<AccordionGroup>
  <Accordion title="Momentum loss" icon="gauge-low">
    Users slow down unexpectedly between steps, even when the UI is functional. This often appears as long pauses after a click, submit, or navigation event.
  </Accordion>

  <Accordion title="Looping navigation" icon="rotate-right">
    Users revisit the same pages or sections repeatedly. This suggests uncertainty about the correct path forward.
  </Accordion>

  <Accordion title="Dead-end moments" icon="ban">
    Users reach a point where there is no clear next step, recovery path, or confirmation. They often exit immediately after this moment.
  </Accordion>

  <Accordion title="False progress" icon="triangle-exclamation">
    Users believe they progressed, but the system state does not match expectation (e.g., form submits but no confirmation, filters reset, step not saved).
  </Accordion>
</AccordionGroup>

## Flow types Heurilens commonly evaluates

<Tabs>
  <Tab title="Exploration flow">
    Typical intent: “Let me understand what this product offers.”

    Common breakpoints:

    * users skim without committing to a path
    * repeated returning to the same sections
    * unclear relationship between pages (features, pricing, FAQ)
  </Tab>

  <Tab title="Conversion flow">
    Typical intent: “I’m ready to decide.”

    Common breakpoints:

    * hesitation near pricing, plan selection, or checkout
    * back-and-forth between plan comparison and trust content
    * drop-offs after form or payment steps
  </Tab>

  <Tab title="Onboarding flow">
    Typical intent: “Help me start without making mistakes.”

    Common breakpoints:

    * too much configuration too early
    * unclear progress or step completion state
    * missing feedback after a critical setup action
  </Tab>
</Tabs>

## How Heurilens detects flow issues

<Steps>
  <Step title="Journey mapping from page structure">
    Heurilens identifies possible paths between key surfaces (entry → decision → action), based on navigation structure and CTA destinations.
  </Step>

  <Step title="Step clarity and continuity checks">
    The system evaluates whether each step provides: clear state, clear feedback, and a clear next action.
  </Step>

  <Step title="Breakpoints and friction clustering">
    Heurilens flags flow breakpoints where multiple signals cluster: hesitation, loops, exits, and unclear feedback.
  </Step>

  <Step title="Actionable output generation">
    For each breakpoint, Heurilens generates: issue summary, impact, and fix direction tied to related modules.
  </Step>
</Steps>

## Example output from Heurilens (flow breakpoint)

<Card title="Flow Breakpoint Detected" icon="triangle-exclamation">
  Users reach a decision step but hesitate and backtrack repeatedly.

  The next action is not visually or semantically confirmed, causing momentum loss and drop-offs.
</Card>

<CodeGroup>
  ```json Flow breakpoint (example output) theme={null}
  {
    "pattern": "User Flow Breakdown",
    "breakpoint": "Plan selection → Checkout",
    "signals": [
      "long_pause_after_click",
      "backtrack_to_pricing",
      "exit_after_submit_attempt"
    ],
    "likely_causes": [
      "missing confirmation state",
      "unclear next step label",
      "trust cues appear too late"
    ],
    "related_modules": [
      "Interaction Design",
      "Trust Signals",
      "Forms CRO",
      "Visual Hierarchy"
    ],
    "severity": "high"
  }

  click("Select plan")
  pause(6.2)
  navigate("/pricing")
  scroll(40%)
  navigate("/checkout")
  submit("form")
  pause(4.1)
  exit()
  ```
</CodeGroup>

## Example fix direction (targeted)

Sometimes flow issues are not solved by adding more content. They are solved by making the transition moment unambiguous.

```css theme={null}
.checkout-step-indicator {
  position: sticky;
  top: 0;
  font-weight: 600;
}

.primary-action {
  min-height: 48px;
}
```

<Tip>
  A good flow does not feel fast. It feels inevitable. Users should never need to re-decide what to do next.
</Tip>

## How this connects to other modules

Flow is not a standalone problem. A flow break usually comes from one of these sources:

* unclear feedback (Interaction Design)
* weak reassurance (Trust Signals, Emotional Design)
* unclear decision language (UX Writing)
* overwhelming step complexity (Cognitive Load)
* poor structural continuity (Information Architecture)

This is why Heurilens ties each breakpoint to the modules that explain the cause.

<Card title="See user flow breakpoints on your product" icon="sparkles" href="https://heurilens.com/auth/signup">
  Run an analysis and identify where users lose momentum across journeys.
</Card>