---
title: "Flow"
source: "/reference/flow"
description: "Sustained engagement is more likely when the task, feedback, difficulty, and user capability remain in a productive balance."
---
# Flow

Sustained engagement is more likely when the task, feedback, difficulty, and user capability remain in a productive balance.



### Principle

Sustained engagement is more likely when the task, feedback, difficulty, and user capability remain in a productive balance.

### Why it matters

Flow describes a state of deep involvement rather than a UI metric. Interfaces can support it by reducing unnecessary interruption, providing immediate feedback, preserving context, and matching control depth to user expertise. They can also break it through modal noise, unpredictable latency, forced context switches, or repeated confirmation for low-risk actions.

### Deeper design interpretation

Flow describes sustained, absorbed engagement in a task. Interfaces cannot guarantee that psychological state, but they can support the conditions that make it more likely: clear goals, responsive feedback, continuity, preserved context, and a difficulty level that matches the user's capability.

In product design, the most actionable part is interruption management. Repeated modals, unexpected focus changes, latency, lost selection, notification noise, and forced input-mode switching all break continuity. For expert tools, small interruptions compound because the same workflows repeat many times per day.

Layr should focus on observable continuity rather than claiming that a user is or is not “in flow.”

### What the agent should reason about

Identify the focused task and inspect what breaks its action-feedback loop. Distinguish necessary interruption from habitual use of blocking UI. Low-risk reversible actions often benefit from non-blocking feedback and undo, while high-risk actions may legitimately require deliberate confirmation.

Preservation of context is central: scroll position, selection, cursor, filters, open panels, and draft state can all determine whether users resume smoothly.

### Common failure patterns

- Routine low-risk actions open confirmation dialogs.
- Notifications steal focus during editing.
- Navigation resets filters, scroll, or selected records.
- Keyboard workflows repeatedly require mouse interaction.
- Latency breaks the rhythm of repeated operations.

### Audit questions

- What is the user's focused task?
- Which interruptions are necessary because of consequence?
- Which state should survive navigation or temporary interruption?
- Can recovery or undo replace blocking confirmation for low-risk actions?

### Example agent finding

> **Medium — Moving a document interrupts writing with a blocking confirmation.** The action is reversible and low risk, yet every move opens a modal and steals keyboard focus. Perform the move immediately, preserve editor state, and offer undo; keep stronger confirmation for permanent deletion.

### Agent directive

> Protect continuity in focused work. Reduce interruptions and state loss while preserving safeguards for consequential actions.

### Apply this when

- Editors, coding/design tools, creative software, data analysis, productivity workflows, games, learning tools, and repeated operational tasks.

### Observable signals

- Routine actions trigger blocking confirmations with little risk.
- Focus is stolen by unrelated notifications or auto-opening panels.
- Keyboard users must switch repeatedly to pointer input for common actions.
- State is lost when navigating between related tasks.
- Latency repeatedly interrupts the action-feedback loop.

### Recommended actions

- Keep frequent low-risk actions fast and reversible.
- Preserve selection, scroll, cursor, filters, and work context.
- Use non-blocking feedback for routine successful actions.
- Support keyboard shortcuts or efficient expert paths where appropriate.
- Escalate interruption according to risk rather than using modals by default.

### Do not over-apply

Do not optimize for uninterrupted flow at the expense of safety, informed consent, or error prevention. High-consequence actions may need a deliberate pause.

### Example

**Weak:** A writing tool opens a modal confirmation every time the user moves a document between folders.

**Stronger:** The move happens immediately with an undo option, preserving writing context; permanent deletion still receives stronger safeguards.

### Evaluation notes

- **Default severity:** Medium for repeated productivity cost; high if interruptions cause state loss.
- **Typical confidence:** Medium; flow as a psychological state cannot be inferred directly from UI alone.
- **Primary evidence:** Interruption frequency, focus changes, latency, state persistence, task repetition.
- **Related rules:** Doherty Threshold, Fitts's Law, Peak-End Rule, Paradox of the Active User

### References

- [Laws of UX — Flow](https://lawsofux.com/flow/)

## Related rules

- [Doherty Threshold](/__layr/pages/reference/doherty-threshold.md)
- [Fitts's Law](/__layr/pages/reference/fitts-law.md)
- [Peak-End Rule](/__layr/pages/reference/peak-end-rule.md)
- [Paradox of the Active User](/__layr/pages/reference/paradox-of-the-active-user.md)

## Agent guidance

Review criteria, the finding contract a report must use, and worked examples.

Established principle; Layr interpretation and agent guidance. Category: Motivation, Progress & Experience Memory.

## Retrieve
- Canonical page: https://layr.design/reference/flow
- Markdown for agents: https://layr.design/__layr/pages/reference/flow.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon

## Rule object
```yaml
rule:
  id: "flow"
  title: "Flow"
  category: "Motivation, Progress & Experience Memory"
  origin: established
  canonical_url: "https://layr.design/reference/flow"
  principle: "Sustained engagement is more likely when the task, feedback, difficulty, and user capability remain in a productive balance."
  directive: "Protect continuity in focused work. Reduce interruptions and state loss while preserving safeguards for consequential actions."
  applies_when:
    - "Editors, coding/design tools, creative software, data analysis, productivity workflows, games, learning tools, and repeated operational tasks."
  observable_signals:
    - "Routine actions trigger blocking confirmations with little risk."
    - "Focus is stolen by unrelated notifications or auto-opening panels."
    - "Keyboard users must switch repeatedly to pointer input for common actions."
    - "State is lost when navigating between related tasks."
    - "Latency repeatedly interrupts the action-feedback loop."
  audit_questions:
    - "What is the user's focused task?"
    - "Which interruptions are necessary because of consequence?"
    - "Which state should survive navigation or temporary interruption?"
    - "Can recovery or undo replace blocking confirmation for low-risk actions?"
  recommended_actions:
    - "Keep frequent low-risk actions fast and reversible."
    - "Preserve selection, scroll, cursor, filters, and work context."
    - "Use non-blocking feedback for routine successful actions."
    - "Support keyboard shortcuts or efficient expert paths where appropriate."
    - "Escalate interruption according to risk rather than using modals by default."
  avoid_when:
    - "Do not optimize for uninterrupted flow at the expense of safety, informed consent, or error prevention. High-consequence actions may need a deliberate pause."
  common_failure_patterns:
    - "Routine low-risk actions open confirmation dialogs."
    - "Notifications steal focus during editing."
    - "Navigation resets filters, scroll, or selected records."
    - "Keyboard workflows repeatedly require mouse interaction."
    - "Latency breaks the rhythm of repeated operations."
  evidence_types:
    - "Interruption frequency"
    - "focus changes"
    - "latency"
    - "state persistence"
    - "task repetition"
  default_severity: "Medium for repeated productivity cost; high if interruptions cause state loss."
  typical_confidence: "Medium; flow as a psychological state cannot be inferred directly from UI alone."
  related_rules:
    - { id: "doherty-threshold", title: "Doherty Threshold", url: "https://layr.design/reference/doherty-threshold" }
    - { id: "fitts-law", title: "Fitts's Law", url: "https://layr.design/reference/fitts-law" }
    - { id: "peak-end-rule", title: "Peak-End Rule", url: "https://layr.design/reference/peak-end-rule" }
    - { id: "paradox-of-the-active-user", title: "Paradox of the Active User", url: "https://layr.design/reference/paradox-of-the-active-user" }
```

## What to reason about
Identify the focused task and inspect what breaks its action-feedback loop. Distinguish necessary interruption from habitual use of blocking UI. Low-risk reversible actions often benefit from non-blocking feedback and undo, while high-risk actions may legitimately require deliberate confirmation. Preservation of context is central: scroll position, selection, cursor, filters, open panels, and draft state can all determine whether users resume smoothly.

## Routing
Route a review here when the interface manages progress, interruption, completion, waiting, resumption, or emotionally significant outcomes. Avoid inferring motivation from UI alone; tie findings to observable journey states.

## Review procedure
For every finding:
1. Identify the exact component, state, route, or interaction.
2. State the observable evidence.
3. Name the principle that applies.
4. Explain the user consequence in the current context.
5. Estimate severity from the consequence, frequency, and reversibility.
6. Recommend the smallest change that addresses the issue while preserving the product's existing design system.
7. Lower confidence when intent, frequency, audience, device, or product constraints must be inferred.
8. Do not produce generic advice such as "improve hierarchy" or "make this clearer" without specifying what is wrong and why.

## Finding contract — emit exactly this shape
```yaml
finding:
  rule_id: string
  location: string
  evidence:
    - observable fact
  impact: string
  severity: low | medium | high | critical
  confidence: low | medium | high
  recommendation:
    change: string
    rationale: string
    preserve:
      - existing design-system behavior
      - valid product constraints
```

## Example finding for this rule
Medium — Moving a document interrupts writing with a blocking confirmation. The action is reversible and low risk, yet every move opens a modal and steals keyboard focus. Perform the move immediately, preserve editor state, and offer undo; keep stronger confirmation for permanent deletion.

## Code reference

The same principle as markup. Compare the structure, not the class names.

```html
<!-- weak -->
<div class="example-ui example-ui-weak">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Manuscript</span>
    <span class="scene-chrome-view">Chapter 3</span>
  </div>
  <div class="scene-body">
    <div class="scene-blocked">
      <div class="scene-blocked-under">
        <span class="scene-prose">Every page of this chapter was written in one sitting, and the rhythm matters more than the filing.</span>
        <span class="scene-prose">The next paragraph was about to</span>
      </div>
      <div class="scene-dialog scene-dialog-real">
        <span class="scene-dialog-title">Confirm move?</span>
        <span>Are you sure you want to move this document?</span>
        <div class="scene-row">
          <span class="scene-action">Cancel</span>
          <span class="scene-action scene-action-primary">Confirm</span>
        </div>
      </div>
    </div>
    <span class="scene-note">Blocking dialog on a reversible, low-risk action</span>
  </div>
</div>
```

```html
<!-- stronger -->
<div class="example-ui example-ui-strong">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Manuscript</span>
    <span class="scene-chrome-view">Chapter 3</span>
  </div>
  <div class="scene-body">
    <span class="scene-prose">Every page of this chapter was written in one sitting, and the rhythm matters more than the filing.</span>
    <span class="scene-prose">The next paragraph continues here
      <span class="scene-caret"></span>
    </span>
    <div class="scene-toast">
      <span>Moved to Essays</span>
      <span class="scene-action scene-action-quiet">Undo</span>
    </div>
    <div class="scene-row scene-row-muted">
      <span class="scene-meta">Permanent deletion still asks for confirmation.</span>
    </div>
  </div>
</div>
```

```css
/* declarations these studies depend on */
.example-ui { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 17rem; overflow: hidden; border: var(--border-thin) solid var(--color-border-strong); background: var(--color-background); color: var(--color-text); font-size: var(--text-xs); line-height: var(--leading-snug); }
.example-ui .scene-chrome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface); }
.example-ui .scene-chrome-app { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.example-ui .scene-chrome-view { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-body { display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
.example-ui .scene-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-2); width: 100%; min-width: 0; padding-block: var(--space-1); }
.example-ui .scene-row-muted { color: var(--color-text-tertiary); }
.example-ui .scene-meta { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-note { width: 100%; padding-top: var(--space-2); border-top: var(--border-thin) solid var(--color-border-subtle); color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.example-ui .scene-action { display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-8); padding-inline: var(--space-3); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-surface-raised); color: var(--color-text); font-size: var(--text-xs); font-weight: 550; white-space: nowrap; }
.example-ui .scene-action-primary { border-color: var(--color-primary-bg); background: var(--color-primary-bg); color: var(--color-primary-text); }
.example-ui .scene-action-quiet { border-color: transparent; background: none; color: var(--color-text-secondary); padding-inline: var(--space-1); text-decoration: underline; text-underline-offset: 3px; }
.example-ui .scene-caret { display: inline-block; width: var(--border-thin); height: 1em; margin-left: 1px; background: var(--color-action); }
.example-ui .scene-dialog { display: grid; justify-items: start; gap: var(--space-2); width: 100%; padding: var(--space-3); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface-raised); box-shadow: var(--shadow-floating); }
.example-ui .scene-dialog-real { border-radius: var(--radius-sm); }
.example-ui .scene-dialog-title { font-size: var(--text-sm); font-weight: 600; }
.example-ui .scene-blocked { position: relative; display: grid; gap: var(--space-2); width: 100%; padding: var(--space-2); background: var(--color-backdrop); }
.example-ui .scene-blocked-under { display: grid; justify-items: start; gap: var(--space-2); opacity: 0.35; }
.example-ui .scene-prose { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
.example-ui .scene-toast { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-raised); box-shadow: var(--shadow-floating); }
.example-ui { min-height: 15rem; }

/* resolved values */
:root {
  --border-thin: 1px;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --leading-body: 1.62;
  --leading-snug: 1.35;
  --radius-sm: 4px;
  --radius-xs: 2px;
  --shadow-floating: 0 1px 2px rgb(17 17 15 / 5%), 0 8px 24px rgb(17 17 15 / 8%);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-8: 2rem;
  --text-2xs: 0.6875rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --tracking-label: 0.06em;
}
```

## Weak vs stronger
- Weak: A writing tool opens a modal confirmation every time the user moves a document between folders.
- Stronger: The move happens immediately with an undo option, preserving writing context; permanent deletion still receives stronger safeguards.

## Reporting rules
- Report only what the interface shows as observable evidence; phrase psychological or motivational effects as possible consequences.
- Returning no finding is a valid result when evidence is insufficient.
