Choose onboarding when a new or returning user must understand product value, complete minimal setup, choose initial preferences, or learn a novel workflow before the normal interface is effective.
Choose onboarding when a new or returning user must understand product value, complete minimal setup, choose initial preferences, or learn a novel workflow before the normal interface is effective.
Practice the judgment: Imagine this situation: A five-screen feature tour appears before users can perform the action they installed the product to do. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Onboarding | Empty state | Wizard | Progressive disclosure |
|---|---|---|---|---|
| UI or UX | UI + UX - First-run or new-feature orientation that leads to first value | UI + UX - Resolved no-data content surface | UI + UX - Guided sequential setup assistant | UI + UX - Staged reveal of advanced or secondary task complexity |
| UI guidance | Render onboarding as a short purposeful path with a visible benefit, current step, skip or later path when safe, persistent resume point, and the next product action users can take immediately after finishing. | Keep surrounding context such as table title, filters, or workspace name visible so users know exactly what is empty. | Render a bounded assistant shell with a clear wizard title, current step heading, step list or progress context, step-specific body content, Back, Next or step-specific primary action, Finish, and Cancel or Close. | Render the default task with the essential controls, status, cost, risk, and primary action visible, then provide clearly named reveal controls for advanced settings, rare commands, diagnostics, expert filters, or optional configuration. |
| UX guidance | Use onboarding only when users need orientation, minimal setup, personalization, or instruction before the normal interface can deliver value, and remove steps that merely market features or repeat what the UI already explains. | Move users toward the first useful object or prerequisite, and replace unavailable actions with permission or configuration guidance. | Use a wizard when users must be guided through a dependent setup, creation, import, or configuration task where each step prepares the next one and final finish should be gated. | Use progressive disclosure when exposing every option upfront would overwhelm most users, but hiding advanced controls until users ask for them keeps the main path learnable and reduces accidental errors. |
| Good UI | A project-management app asks for role and team size, creates a sample board, highlights the first Add task action, and lets users skip the tour while keeping a setup checklist available. | Permission variant explains that projects exist only after an admin grants access and offers Request access instead of Create. | A connector setup wizard shows Choose connector, Configure access, Test connection, Review, and Finish in a side step list, with Configure access current and future steps disabled until prerequisites pass. | A backup setup page shows destination, schedule, retention, estimated storage, and Start backup first, then reveals Advanced retention, encryption, bandwidth limit, and dry-run settings with a visible changed-settings summary. |
| Bad UI | A first launch shows six promotional slides about every feature, requires Next on each slide, and lands on an empty dashboard. | Oversized decorative art and vague welcome copy that hides the task. | All steps are visible as visited while hidden required setup is inserted later, so the step count and current heading are dishonest. | A payment form hides currency conversion fees, tax treatment, and the final payer under Advanced options until after submission fails. |
| Good UX | A new admin selects Invite teammates as their goal, imports two sample users, sees progress saved, skips notification setup, and arrives on the team page with the invite action focused. | Users can create the first project, import existing work, or request access depending on the actual cause. | A user selects Zendesk, enters a token, runs a connection test, reviews generated sync settings, goes Back, and the token and test state are preserved or clearly invalidated when changed. | A novice user completes the default backup with recommended retention while an expert opens Advanced retention, changes encryption, sees Advanced settings changed near Start backup, and can reset to recommended. |
| Bad UX | A user is forced to configure integrations, notifications, billing, and profile details before they know whether the product solves their task. | A primary Create button is shown to a read-only user and fails after activation. | A user goes Back to change the connector and the wizard silently keeps review answers from the old connector. | Nested reveals bury a control so deeply that users search, abandon, or change the wrong setting. |
| Best fit | New users need orientation, setup, personalization, or instruction before the regular interface can deliver value. | A next setup, creation, import, sample, or access-request action is available or explainable. | A setup, import, object creation, or configuration task has strict sequencing. | The default task has a safe recommended path for most users. |
| Avoid when | The product is already understandable through the normal interface. | The absence was caused by filters or search. | The task is a short form that users should scan and submit on one page. | The hidden content is required for most users to make the right decision. |
| Required state | First-run welcome state with benefit-focused copy and one clear next action. | First-use empty state before any objects exist. | Current guided step with a clear heading, local controls, and step-specific primary action. | Simple default state with essential controls, visible primary action, and recommended defaults. |
| Accessibility burden | Keep onboarding screens in normal heading order with clear titles and step labels. | Keep the message in normal reading order near the empty region it explains. | Use one clear wizard title and one current step heading; keep browser title, heading, and progress context synchronized. | Use native disclosure controls, buttons with expanded state, or clearly labelled navigation routes for revealed sections. |
| Common misuse | Forcing all users through a feature tour before they can do useful work. | Using marketing copy instead of a task-specific next step. | Letting users finish before required tests, previews, or review pass. | Hiding required fields or primary actions to make a page appear shorter. |