Back to list
bfmcneill

flow-optimization

by bfmcneill

0🍴 0📅 Jan 15, 2026

SKILL.md


name: flow-optimization description: Use when designing interactions, workflows, or interfaces where user focus matters. Covers protecting flow state, reducing interruptions, and creating immersive experiences.

Flow Optimization

Flow is the state of complete immersion where users lose track of time and feel in control. Protecting it is a design responsibility.

Evidence Tiers

[Research]   — Peer-reviewed studies, controlled experiments
[Expert]     — Nielsen Norman Group, recognized UX authorities
[Case Study] — Documented examples from major products
[Convention] — Industry practice, limited formal validation

Multiple tags = stronger evidence: [Research][Expert]
Mixed findings noted as: [Research — Mixed]

Flow State Foundations

[Research] Mihaly Csikszentmihalyi developed flow theory through decades of research starting in the 1970s. He studied artists, athletes, surgeons, and chess players to identify common characteristics of optimal experiences.

Conditions for Flow

[Research] Well-replicated findings show flow requires:

ConditionDescription
Clear goalsUser knows what success looks like
Immediate feedbackResults visible right away
Challenge-skill balanceNot too easy, not too hard
Sense of controlUser directs, system responds

When these conditions are met, people report:

  • Intense concentration
  • Merging of action and awareness
  • Loss of self-consciousness
  • Distorted sense of time

Source: Csikszentmihalyi, M. (1990). Flow: The Psychology of Optimal Experience. PMC Research Review


Interruption Cost

[Research — Nuanced] Gloria Mark's research at UC Irvine studied workplace interruptions.

What the research actually shows:

  • Average time spent on any single event before switching: ~3 minutes
  • 82% of interrupted work is resumed the same day
  • Interrupted work correlates with higher stress

Caution: The commonly cited "23 minutes to recover" comes from interviews, not published papers. Mark's actual published research (The Cost of Interrupted Work, CHI 2008) shows different, more complex findings. The cost of interruption varies significantly by context.

Takeaway: Interruptions are costly, but the exact cost depends on task complexity, interruption type, and individual differences.

Source: Mark, Gonzalez, Harris (2008) - The Cost of Interrupted Work


Critical Patterns

flow-1: No Unprompted Interruptions

[Expert] Nielsen Norman's heuristics emphasize user control. Interrupting users with unrequested information violates this principle.

Flow-breaking:

[User is typing]
[Modal appears: "You have 3 unread notifications!"]

Flow-preserving:

[User is typing]
[Subtle badge updates in corner]
[User checks when ready]

Exception: Imminent data loss or security issues.

flow-2: Maintain Context Across Actions

[Convention] Preserve user state when they navigate away and return.

Flow-breaking:

[User fills half a form]
[Clicks link to check something]
[Returns — form is empty]

Flow-preserving:

[User fills half a form]
[Clicks link to check something]
[Returns — form state preserved]

Preserve: scroll position, form state, selection, expanded sections.

[Research] Cognitive Load Theory (Sweller) supports reducing the number of decision points. Each decision consumes working memory.

Flow-breaking:

[Modal 1: Choose format]
[Modal 2: Choose quality]
[Modal 3: Choose destination]

Flow-preserving:

[Single screen with all export options]

flow-4: Escape Hatches Everywhere

[Expert] Nielsen's Heuristic #3: "User control and freedom." Users should always be able to back out, cancel, or undo.

Flow-breaking:

[User clicks wrong option]
[No way back — must restart]

Flow-preserving:

[User clicks wrong option]
[Back button / Undo / Cancel available]

Control creates confidence. Confidence enables flow.


High-Impact Patterns

flow-5: Reduce Mode Switching

[Convention] Keep users in one mental mode. Switching between editing, viewing, and configuring has cognitive cost.

High switching cost:

[Edit in one screen]
[Preview in another]
[Settings in a third]

Low switching cost:

[Edit with live preview]
[Settings in sidebar]

flow-6: Keyboard Shortcuts for Power Users

[Convention] Once users are in flow, hands shouldn't leave keyboard.

  • Provide shortcuts for frequent actions
  • Show hints (e.g., "⌘K to search")
  • Keep shortcuts discoverable but not intrusive

flow-7: Sensible Defaults

[Research] Related to choice overload research (Iyengar & Lepper). Reducing decisions preserves cognitive resources.

Every decision that doesn't need user input is flow preserved:

  • Pre-select the most common option
  • Remember previous choices
  • Infer from context when possible

Anti-Patterns

PatternWhy It Breaks FlowEvidence
Modal dialogs for non-critical infoForces attention shift[Expert] NNg
Auto-playing mediaHijacks audio/visual focus[Convention]
Pagination for continuous contentBreaks reading rhythm[Convention]
Required fields revealed one-by-oneMultiple error cycles[Expert] NNg
Session timeouts without warningLoses work unexpectedly[Convention]

Nuanced Patterns

Hamburger Menus: Trade-offs

Status: Not a myth, but has real costs Evidence: [Research][Expert] — NNg study with 179 participants across 6 sites

What research shows:

  • Discoverability cut almost in half when navigation is hidden
  • Task time increases and perceived difficulty rises
  • However: Most users now recognize the hamburger icon (improved since 2010s)
  • Mobile penalty is smaller than desktop penalty

The trade-off:

  • Hidden nav saves screen space
  • But adds interaction cost (extra tap to see options)
  • Features hidden in hamburger menus are less likely to be discovered

Guidance:

SituationRecommendation
4 or fewer nav itemsShow visible links
5+ nav items on mobileHamburger acceptable, but show key items visibly
DesktopAvoid hamburger; space isn't as constrained
Feature discovery mattersDon't hide in hamburger

Improve hamburger if used:

  • Add "MENU" label next to icon
  • Use contrasting color
  • Place in expected location (top-left or top-right)

Sources:


Key Sources

Score

Total Score

45/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

0/10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

0/5
タグ

1つ以上のタグが設定されている

0/5

Reviews

💬

Reviews coming soon