| 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. | Render a resolved no-data region with a specific heading, cause text, one primary action when available, optional secondary path, and restrained illustration or icon support. | 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. | Help users distinguish legitimate absence from loading, no-results, error, permission, and setup conditions before offering a next step. | 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. | No projects yet heading, short explanation, Create project primary button, Import CSV secondary button, and visible workspace context. | 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. | A blank white table body with no text, object name, or action. | A generic Step 1, Step 2, Done strip wraps one text field and a Finish button with no dependency, preview, review, or cancel state. | 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. | The same empty message appears for loading, search no-results, permission denial, and service failure. | A user clicks Finish before the connector was tested and later discovers the integration never ran. | A user misses a required consent field because it is hidden behind a More options link with no indication it affects submission. |
| Best fit | New users need orientation, setup, personalization, or instruction before the regular interface can deliver value. | The product area can legitimately contain no user data. | 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. | Not-started state that explains what the wizard will configure and how many major steps follow. | 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. | Showing a blank page with no explanation. | Using wizard chrome for a short edit form with no dependent sequence. | Hiding required fields or primary actions to make a page appear shorter. |