Receba novas skills de Design e Frontend toda segunda
1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.
Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.
Ler descrição completaRecolher descrição
UX Flow
Overview
Part of StyleSeed, this skill designs flows before screens. It uses proven UX patterns to define entry points, exits, screen inventory, and navigation structure so the implementation has a coherent user journey instead of a pile of disconnected pages.
When to Use
Use when planning onboarding, checkout, account management, dashboards, or drill-down flows
Use when a new feature spans multiple screens or modal states
Use when users need a clear path through a task instead of a single isolated page
Use when the UI needs navigation logic before components are built
How It Works
Information Architecture Principles
progressive disclosure: reveal complexity only when needed
Miller's Law: chunk content into manageable groups
Hick's Law: minimize decision overload on each screen
Common Navigation Models
hub and spoke for dashboards and detail views
linear flow for onboarding, forms, and checkout
tab navigation for 3 to 5 top-level areas
Flow Rules
every flow has a clear entry point
every flow has a clear exit or success condition
key features should usually be reachable within three taps from home
non-root screens need back navigation
loading, empty, and error states need explicit recovery paths
Output
Provide:
An ASCII flow diagram
A screen inventory with each screen's purpose
Edge cases for loading, empty, and error states
Recommended page scaffolds and reusable patterns to implement next
Best Practices
Optimize for clarity before density
Let one screen answer one primary question
Keep escape hatches visible for risky or destructive steps
Define state transitions before drawing detailed layouts
