user-flows-and-guided-paths

Solid

Related features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as natural, guided paths that feel coherent and fit the product hierarchy. Use wizards for complex sequential tasks. Use when designing flows, onboarding, checkout, setup sequences, or any multi-step user journey.

Web & Frontend 31 stars 5 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 85/100

Stars 20%
50
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# User Flows and Guided Paths Related features that belong together should be experienced as a single coherent journey — not as separate screens the user has to navigate between manually. A well-designed flow feels inevitable: each step leads naturally to the next, the user always knows where they are and what comes next, and the path fits the product's information hierarchy. ## When to Guide vs. When to Let Users Explore | Scenario | Pattern | |---|---| | Linear process with a clear end goal (checkout, signup, setup) | Guided step-by-step flow or wizard | | Complex task that benefits from breaking into stages | Wizard with progress indicator | | Feature discovery across an existing product | Contextual tooltips or coach marks | | User returning to complete something they started | Resume prompt with clear re-entry point | | Open-ended exploration (dashboard, settings) | Free navigation — do not force a flow | Only guide when the task genuinely has a natural order. Forcing a wizard onto a non-sequential task frustrates users who already know what they want. ## The Wizard Pattern Use a wizard when: - The task has 3 or more sequential steps - Later steps depend on decisions made in earlier steps - Doing all steps on one screen would overwhelm the user ### Wizard anatomy ``` [Step indicator: 1 of 4] Step title [Form content for this step] [Back] [Continue →] ``` **Step indicator:** Always show the user where they are in the sequence and how many steps remain. A pr...

Details

Author
dembrandt
Repository
dembrandt/dembrandt-skills
Created
3 months ago
Last Updated
2 days ago
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category