Compare
Choose the right pattern before you build
Use pairwise comparisons when two patterns look similar but behave differently in real product work.
286 comparisons
Comparison library
286 comparisons shown
No comparisons match this filter.
Navigation And Wayfinding
18 Back link vs Breadcrumbs vs Pagination Prefer a Back link when the page is part of a multi-page transaction and users need to return to the previous service page. Breadcrumbs vs Tabs vs Bottom navigation Prefer breadcrumbs when users may land deep in a hierarchical site and need to see or navigate to ancestor pages. Carousel vs Tabs vs Recommendations vs Pagination Choose carousel only when several pieces of peer content must share one constrained visual area and users can safely browse them with previous, next, picker, and pause or play controls. Global navigation vs Breadcrumbs vs Bottom navigation Prefer global navigation when users need repeated access to several top-level sections across a non-linear product, service, or site. Header / top app bar vs Global navigation vs Bottom navigation Prefer a header or top app bar when the interface needs a stable current-view title, a back or menu affordance, primary actions for that view, and an overflow path for secondary actions. In-page anchor navigation vs Breadcrumbs vs Side navigation Prefer in-page anchor navigation when the destinations are headings on the current page and activation should scroll or jump without changing page context. Mega menu vs Global navigation vs Navigation drawer Prefer a mega menu when a primary navigation section has a deep hierarchy with enough links to justify a wide grouped panel rather than a simple dropdown. Navigation drawer vs Side navigation vs Bottom navigation Prefer a navigation drawer when users need occasional access to destinations, account switching, or secondary app sections from a constrained screen. Pagination without current page vs Pagination vs Breadcrumbs vs Step navigation / step indicator vs Feed Flag pagination without current page when a paginated result list has no visible current page, no aria-current or equivalent current text, multiple current-looking pages, or a mismatch between current page, result range, URL, and visible records. Process list / step-by-step navigation vs Step navigation / step indicator vs In-page anchor navigation Prefer a process list when users need a durable overview of an end-to-end journey that combines guidance, transactions, offline actions, costs, or eligibility branches. Recently viewed vs Related links vs Breadcrumbs Prefer recently viewed when users commonly compare, pause, or resume specific items they personally opened, such as products, documents, projects, or records. Related links vs In-page anchor navigation vs Breadcrumbs Prefer related links when the current page is complete but users commonly need a small set of closely related next pages, programs, services, or reference documents. Service navigation vs Global navigation vs Side navigation Prefer service navigation when users must recognize a named service and move among a few top-level service areas or service-level tools. Side navigation vs Global navigation vs Tabs Prefer side navigation when users are inside one product area or content section and need to move among a visible hierarchy of related pages. Skip link vs In-page anchor navigation vs Back link Prefer a skip link when keyboard or assistive-technology users would otherwise encounter repeated header, navigation, breadcrumb, filter, or advertising blocks before the primary content. Step navigation / step indicator vs Back link vs Pagination Prefer step navigation when the user is inside a linear task or form that spans three or more named steps and needs current, completed, and upcoming progress cues. Tabs vs Segmented control vs Pagination Prefer tabs when each choice reveals a peer content panel under the same parent task and only one panel should be visible at a time. Utility navigation vs Global navigation vs Service navigation Prefer utility navigation when the control helps users manage the session, account, support, search, notification, language, or cross-product context rather than choose a content destination.
Search, Browse, And Discovery
19 Advanced search vs Basic search vs Filter panel vs Search scope selector Prefer advanced search when the user needs multiple clauses such as field, operator, value, Boolean joiner, exact phrase, date range, exclusion, proximity, saved syntax, or search-history combination. Basic search vs Command palette Prefer basic search when the result is content the user will read, open, compare, filter, or browse. Browse by category vs Basic search vs Filter panel vs Tabs Prefer browse by category when users do not know the exact term to search for but can recognize a topic, service area, product family, or content type from a curated taxonomy. Faceted search vs No-results recovery Use faceted search before failure, when users need structured narrowing. Filter chips vs Filter panel vs Multi-select Prefer filter chips when users need to toggle a small, visible set of high-frequency filters directly above the content being narrowed. Filter panel vs Faceted search vs No-results recovery Prefer a filter panel when the main design problem is where grouped filters live, how users apply them, how collapsed or mobile panels show active counts, and how results stay connected to the controls. Filter reset that clears unrelated search vs Filter panel vs Basic search vs Filter chips vs Saved search Flag filter reset that clears unrelated search when the control label says Clear filters or Reset filters but the action also clears the submitted query, search box text, search scope, search history item, saved search identity, URL state, sort order, page size, selected view, or layout state. Infinite scroll with no footer access vs Feed vs Pagination vs Card list vs Skip link Flag infinite scroll with no footer access when near-bottom auto-loading keeps pushing footer links, end state, support links, legal links, feedback, or language controls away from the user. Query correction vs Search suggestions vs No-results recovery vs Autocomplete Prefer query correction when the user has already submitted a free-form search and the system has a high-confidence spelling, token, split, join, or phrase correction for that submitted query. Recently searched vs Search suggestions vs Saved search vs Recently viewed Prefer recently searched when the product should show query strings the current user actually submitted so they can rerun or remove them later. Recommendations vs Related links vs Recently viewed vs Browse by category Prefer recommendations when the product predicts or ranks items that may be useful now, such as related products, next services, frequently bought together items, trending content, or personalized suggestions. Saved filter vs Filter panel vs Saved search vs Filter chips Prefer saved filter when the reusable object is only filter criteria such as status, owner, team, priority, stage, date, or tag values applied to a list or dashboard. Saved search vs Basic search vs Filter panel vs Recently viewed Prefer saved search when users repeatedly run the same query, filters, sort, and scope and need a named object they can rerun later. Search history vs Recently searched vs Saved search vs Recently viewed Prefer search history when users need a management surface for stored query activity, including source, time, account or device scope, deletion, pause, export, retention, or privacy review. Search result highlighting vs Basic search vs Search suggestions vs No-results recovery Prefer search result highlighting when users already have results and need to see the exact title, snippet, or metadata fields that matched their query. Search scope selector vs Basic search vs Filter panel vs Tabs Prefer search scope selector when the same query can run against materially different corpora such as this repository, all repositories, current site, hub, organization, current channel, all messages, files, or people. Search suggestions vs Autocomplete Prefer search suggestions when several query paths may be useful. Sort controls vs Filter chips vs Filter panel vs Pagination Prefer sort controls when the user needs the same matching items arranged by relevance, date, name, distance, price, priority, or another meaningful ordering attribute. Typeahead vs Autocomplete vs Search suggestions vs Basic search Prefer typeahead when the product should update result previews or entity hits continuously as the user types, before an explicit final search submit.
Input And Data Entry
33 Address entry vs Text input vs Autocomplete vs Dependent fields Prefer address entry when the user must provide a postal, delivery, billing, service, or eligibility address that downstream systems need as line, locality, region, postal code, and country parts. Autosave form vs Single-page form vs Multi-step form vs Inline edit Prefer autosave form when users spend enough time entering information that losing progress would be costly and the product can safely persist draft changes in the background. Bank details vs Text input vs Input mask vs Review before submit Prefer bank details when the service must store or verify account holder name, bank or building society account number, routing information such as sort code, and any roll number or regional equivalent. Bulk import vs File upload vs Drag-and-drop upload vs Multi-step form Prefer bulk import when the file contains multiple structured records, not just one attachment, and the product must parse rows into domain objects. Character count vs Textarea vs Text input vs Inline validation Prefer character count when a real maximum character or word limit affects whether the value can be accepted and users benefit from seeing remaining capacity while writing. Complete complex form vs Single-page form vs Multi-step form vs Wizard Prefer a complete complex form when related settings, policies, permissions, or enterprise configuration fields need one inspectable editing surface rather than a short one-page submit or a sequential transaction. Conditional reveal fields vs Dependent fields vs Radio group vs Single-question page Prefer conditional reveal fields when a radio, checkbox, or select answer needs one directly related follow-up field that belongs under that answer. Date input vs Input mask vs Text input vs Select Prefer date input when users already know the exact date or can look it up and the task needs day, month, and year as separate understandable parts. Date picker vs Date input vs Select vs Text input Prefer date picker when the user is scheduling an appointment, choosing from availability, or comparing a date against nearby weekdays. Date range picker vs Date picker vs Date input vs Filter panel Prefer date range picker when the answer is a continuous period with a start date, an end date, and visible days between them. Dependent fields vs Select vs Inline validation vs Complete complex form Prefer dependent fields when a controlling field narrows a dependent field's options, requirement, value, availability, validation, or stale state on the same form record. Draft state vs Autosave form vs Inline edit vs Complete complex form Prefer draft state when the main UX problem is lifecycle visibility: an unpublished or inactive version exists alongside a published, active, or previously saved version. Drag-and-drop upload vs File upload vs Multi-step form vs Text input Prefer drag-and-drop upload when users commonly have files open in a desktop file manager and need a large visible target that accepts one or more files. Email address entry vs Text input vs Inline validation vs Error summary Prefer email address entry when the value will be used to send receipts, notifications, account recovery links, sign-in identifiers, invitations, or verification messages. File upload vs Text input vs Single-question page vs Multi-step form Prefer file upload when the service needs the original document, image, scan, certificate, spreadsheet, or media file rather than a typed summary of its contents. Inline edit vs Text input vs Single-page form vs Modal dialog Prefer inline edit when users frequently update one displayed value or one table row and need to keep the surrounding record, list, or table context visible. Inline validation vs Error summary Use inline validation when the user can fix one field locally before page-level recovery is needed. Input mask vs Text input vs Inline validation vs Autocomplete Prefer input mask when the accepted value has a stable character pattern, such as grouped card digits, container numbers, serial keys, or fixed-format codes. Input prefix/suffix vs Input mask vs Text input vs Inline validation Prefer input prefix/suffix when the affix is a stable, commonly understood unit, currency symbol, percentage sign, domain, or icon that clarifies what the user should enter. Multi-step form vs Single-page form vs Single-question page vs Step navigation / step indicator Prefer a multi-step form when a transaction has several ordered pages, sections, or question groups that cannot be reliably completed and recovered on one page. Name entry vs Text input vs Autocomplete vs Select vs Inline validation vs Error summary Prefer name entry when the value identifies a person, appears in correspondence, profile display, official records, verification, payment, booking, application, or support workflows. Password creation vs Password input vs Inline validation vs Error summary Prefer password creation when the task is account registration, password reset, first-time setup, or changing a password to a new reusable secret. Password input vs Text input vs Inline validation vs Error summary Prefer password input when the value is a secret used for authentication, reauthentication, unlocking a protected action, confirming account ownership, or entering a PIN-like memorized secret. Payment card entry vs Bank details vs Input mask vs Review before submit Prefer payment card entry when the user is paying by card and the flow needs card number, expiry, CVC or CID, billing postal code, supported brand detection, processor tokenization, wallet fallback, and card-specific decline or authentication recovery. Phone number entry vs Text input vs Input mask vs Inline validation vs Error summary Prefer phone number entry when the value will be used to call, text, identify, recover, confirm, or route a user through a telephone network. Required field hidden by conditional logic vs Conditional reveal fields vs Dependent fields vs Error summary vs Single-page form vs Review before submit Choose the hidden-required anti-pattern when a field can block submit while hidden, collapsed, disabled, off-screen, absent from the current route, or disconnected from the selected trigger. Review before submit vs Multi-step form vs Complete complex form vs Error summary Prefer review before submit when answers have already been collected and the next action will send, apply, pay, publish, or otherwise commit the transaction. Single-page form vs Single-question page vs Error summary vs Text input Prefer a single-page form when users need to review several related low-risk fields together before one submission. Single-question page vs Text input vs Textarea vs Error summary Prefer a single-question page when one answer or decision deserves a focused screen with heading, hint, answer control, validation, Continue, and Back behavior. Text input vs Autocomplete vs Select vs Radio group Prefer text input when the answer is short, user-authored, and cannot be usefully enumerated as a fixed option list. Textarea vs Text input vs Inline validation vs Error summary Prefer textarea when the expected answer needs sentences, paragraphs, line breaks, or visible review of longer freeform text. Time picker vs Text input vs Select vs Input mask Prefer time picker when the task asks for a specific appointment, meeting, delivery, reminder, or service time from predictable increments. Wizard vs Multi-step form vs Step navigation / step indicator vs Process list / step-by-step navigation Prefer a wizard when users are configuring, creating, importing, or installing something through a guided assistant where later choices depend on earlier selections.
Selection And Choice
17 Action menu vs Menu button vs Button group vs Command palette Prefer an action menu when users need a compact contextual command list for one object, row, card, selected set, or page resource, and the menu content needs grouping, disabled reasons, danger separation, or links. Action sheet vs Action menu vs Bottom sheet vs Confirmation dialog Choose action sheet when a user has intentionally started an action and needs two to five immediate choices such as Save draft, Discard draft, Share, Report, or Cancel. Button group vs Segmented control vs Menu button vs Confirmation dialog Prefer a button group when two to four related actions should remain visible together, such as Save and cancel, Back and continue, or Apply, Reset, and Export for one local task. Checkbox group vs Multi-select Prefer checkbox groups when a short set of independent choices can remain visible and users need to compare or toggle several options directly. Chip selection vs Filter chips vs Checkbox group vs Segmented control Prefer chip selection when users are answering a compact choice question with short labels such as interests, sizes, cuisines, quick preferences, or lightweight categories. Combobox vs Autocomplete vs Select vs Text input Prefer a combobox when users type or open a popup from a single field and must be able to move an active option, accept it, cancel without committing, and keep the submitted value synchronized with the visible label. Inaccessible custom select vs Select vs Autocomplete vs Multi-select Flag inaccessible custom select when a visual dropdown lacks keyboard opening, option navigation, selected state, focus return, accessible value, or submitted form value. Listbox vs Select vs Combobox vs Multi-select Prefer a listbox when the option set must remain visible and the core interaction is moving focus through options, selecting one option, and reviewing the selected row without opening a popup. Menu / menubar vs Menu button vs Mega menu vs Global navigation Prefer a menu or menubar when users need a persistent application command surface such as File, Edit, View, Insert, or Format, where arrow keys move between top-level command groups and submenus. Object picker vs Combobox vs Autocomplete vs Multi-select Prefer object picker when the submitted value is an entity ID, record key, account ID, user ID, group ID, file ID, or project ID rather than only the visible label. Radio group vs Select Prefer radio groups when a short mutually exclusive set should stay visible for comparison before the user commits. Range slider vs Slider vs Text input vs Date range picker Prefer a range slider when users need to set both lower and upper numeric limits on one known scale, such as price, distance, duration, rating, or departure time. Slider vs Text input vs Select vs Toggle switch Prefer a slider when users adjust one value inside a known minimum and maximum and can understand the choice by relative position, intensity, or coarse increments. Spinbutton / numeric stepper vs Slider vs Text input vs Select Prefer a spinbutton when the value is truly incrementable, bounded, and likely to change by a few steps, such as guests, copies, seats, nights, items, minutes, or retry count. Toggle switch vs Checkbox group vs Radio group vs Segmented control Prefer a toggle switch when a single named setting has exactly two states, can be applied immediately, and can be reversed without confirmation. Transfer list vs Multi-select vs Listbox vs Checkbox group Prefer transfer list when the task is explicitly moving items from an available set to a selected set and users need to compare both sets while they work. Tree selection vs Listbox vs Checkbox group vs Transfer list Prefer tree selection when parent-child hierarchy changes what users need to find, reveal, or select, such as folders, nested permissions, product taxonomy, or organization units.
Feedback, Status, And System State
29 Alert vs Inline message vs Toast notification vs Confirmation dialog Choose alert when a current task has a time-sensitive warning, error, or high-priority status change that should be noticed immediately but does not require a modal response. Banner vs Alert vs Inline message vs Toast notification Choose banner when the message applies across a product, service, account, workspace, or whole section and should sit at the top of the related interface while users continue working. Confirmation page vs Success confirmation vs Review before submit vs Notification banner Choose confirmation page when the whole transaction is committed and users need a durable endpoint with completion heading, reference, what happens next, contact or tracking path, and a way to keep a record. Conflict state vs Sync state vs Draft state vs Error state Choose conflict state when the system has at least two competing valid versions of the same object, field, file, record, paragraph, or branch and cannot safely pick a winner without user or policy resolution. Cookie banner vs Banner vs Notification banner vs Site alert Choose cookie banner when the interface must tell users about cookies or similar storage, separate essential from non-essential purposes, collect accept or reject choices, save the preference, and prevent optional tracking before consent. Dead-end empty state vs Empty state vs No-results recovery vs Error state Flag dead-end empty state when the page, table, list, dashboard, or panel has no object name, no cause, no valid next action, or no safe escape. Disabled button with no explanation vs Inline validation vs Error summary Flag disabled button with no explanation when an unavailable action does not show the missing requirement, permission limit, system lock, quota, dependency, or recovery path near the control. Empty state vs No-results recovery vs Error state Prefer empty state when the content area is legitimately blank because nothing has been created, imported, configured, or made available yet. Infinite spinner vs Loading skeleton vs Error state Flag infinite spinner when the interface can remain busy with no named operation, elapsed status, timeout, retry, cancellation, cached fallback, or failure state. Inline message vs Toast notification vs Error state vs Inline validation Choose inline message when the feedback belongs beside a visible row, panel, step, card, table section, or task area and users may need to read it while continuing nearby work. Loading skeleton vs Empty state vs Error state Prefer loading skeleton when asynchronous content is pending and the final layout shape is predictable enough to reserve stable space. Loading spinner vs Loading skeleton vs Infinite spinner vs Error state Choose loading spinner when a specific action or region is actively processing, progress cannot be measured yet, and the wait is expected to resolve quickly enough that a compact busy indicator is sufficient. Meter vs Progress bar vs Slider vs Spinbutton / numeric stepper Choose meter when the value already exists, is read-only in this context, has a meaningful minimum and maximum, and users need to judge whether it is low, normal, high, safe, risky, full, or depleted. Notification banner vs Banner vs Alert vs Error summary Choose notification banner when the message belongs in the page content flow immediately before the H1 and is about a service problem, personal deadline, elsewhere-in-service event, or previous-page outcome. Notification center vs Toast notification vs Alert vs Inline message Choose notification center when users receive many system-generated or collaboration notifications and need to revisit, filter, mark, or act on them after the initial interruption has passed. Offline state vs Error state vs Loading spinner vs Progress bar Choose offline state when the device or app cannot reach the network and users need to know which cached data, local edits, queued actions, and retry paths remain available. Page not found page vs Service unavailable page vs Error state vs Empty state Choose page not found page when the user follows a broken link, mistypes or pastes an incomplete address, opens a removed page, or returns to an expired deep link and the product cannot resolve a valid destination. Permission denied state vs Error state vs Empty state vs Disabled button with no explanation Choose permission denied state when the current authenticated account lacks the role, group membership, share grant, license, policy exception, or admin approval required to view, edit, publish, export, delete, invite, approve, or manage a resource. Phase / beta banner vs Banner vs Notification banner vs Site alert Choose phase / beta banner when every page in a service must show that the service is in alpha, private beta, or public beta and give users a way to provide feedback about the developing service. Progress bar vs Loading spinner vs Loading skeleton vs Step navigation / step indicator Choose progress bar when the system can expose percent complete, bytes transferred, item count, row count, batch count, or a bounded operation stage that moves toward a known finish. Service unavailable page vs Error state vs Offline state vs Site alert Choose service unavailable page when users cannot use the service entry point, transaction, account area, or route because the service is intentionally closed, under maintenance, overloaded, shuttered, or temporarily not ready to handle requests. Site alert vs Banner vs Notification banner vs Alert Choose site alert when urgent information must be visible near the top of every page on a public site or service, such as emergency closure, unavailable service, safety warning, or critical operating status. Step progress vs Step navigation / step indicator vs Progress bar vs Meter Choose step progress when the main question is which workflow stages are complete, current, blocked, skipped, failed, or waiting after validation or system checks. Success confirmation vs Toast notification vs Notification banner vs Alert Choose success confirmation when a completed action changes an important object and users need to verify the exact object, reference, timestamp, or next step before continuing. Sync state vs Offline state vs Progress bar vs Error state Choose sync state when work exists locally and the main question is whether it is queued, uploading, downloaded, accepted by the server, partially synced, failed per item, paused, or ready for conflict review. Toast notification vs Toast-only critical error vs Error state vs Undo Choose toast notification when the user has just completed a low-risk action, background work changed state, or a short status update is useful without blocking the current task. Toast-only critical error vs Error state Choose error state when a failed payment, save, upload, permission check, destructive action, or security step blocks progress or changes whether the current page can be trusted. Toast-only success for completed transaction vs Confirmation page vs Success confirmation vs Toast notification Flag toast-only success for completed transaction when the only proof of a committed transaction is a transient toast, snackbar, flash message, or notification that can disappear before users copy the reference, save a receipt, understand what happens next, or prove completion later. Warning text vs Alert vs Inline message vs Error summary Choose warning text when users need to understand a serious consequence of doing or not doing an action before they continue, such as a fine, loss of eligibility, deletion, or legal responsibility.
Error Prevention And Recovery
21 Ambiguous destructive action copy vs Destructive action confirmation vs Typed confirmation vs Dangerous-action review vs Confirmation fatigue vs Warning text Choose ambiguous destructive action copy when a destructive or safe control says OK, Yes, No, Continue, Confirm, Submit, Done, Remove, Cancel, Clear, Reset, Close, or Dismiss without naming the actual outcome and target. Autosave recovery vs Autosave form vs Draft state vs Retry Use autosave recovery when the latest autosave is failed, stale, conflicted, offline-only, expired, or recoverable from local storage and users need a path to preserve or restore the affected work. Confirmation fatigue vs Confirmation dialog vs Destructive action confirmation vs Undo vs Warning text vs Dangerous-action review Choose the confirmation-fatigue anti-pattern when Save, Close, Filter, Dismiss, Archive, Move, Hide, reorder, or delete-to-trash actions repeatedly open modal prompts even though the exact prior state can be restored or the risk is low. Conflict resolution vs Conflict state vs Review before submit vs Autosave recovery Use conflict resolution when users must step through one or more detected conflicts, decide what survives, preview the resolved result, and commit or defer decisions. Destructive action confirmation vs Confirmation dialog vs Undo vs Warning text Choose destructive action confirmation when the user has invoked Delete, Remove, Cancel subscription, Deactivate account, Reset keys, or a similar destructive command and the UI must stop final commitment until the object, scope, and loss are reviewed. Disabled controls without recovery vs Disabled button with no explanation vs Inline validation vs Error summary vs Permission recovery vs Fallback path Choose disabled controls without recovery when a button, menu item, toggle, toolbar command, form control, or workflow action is unavailable and no reachable next step can change, route around, or truthfully close the blocked state. Exit warning vs Autosave form vs Draft state vs Confirmation dialog Use exit warning when the user has started leaving the current surface and departure would lose unsaved work, unsent files, payment state, authentication context, or another unrecoverable in-progress task. Fake undo vs Undo vs Toast notification vs Restore from trash vs Destructive action confirmation vs Autosave recovery Choose the fake-undo anti-pattern when an Undo, Restore, Revert, or rollback control appears but does not restore the affected object identity, order, relationships, permissions, values, counts, selection, or visible context. Fallback path vs Retry vs Error state vs Service unavailable page Use fallback path when users should switch to a different method such as manual entry, evidence upload, cached data, assisted support, paper route, or alternate channel. Graceful degradation vs Fallback path vs Offline state vs Service unavailable page Use graceful degradation when the current page can still complete its core task after an enhancement layer fails, such as replacing a calendar widget with date fields, a map with a location list, or drag-and-drop with a file input. Merge conflict resolver vs Conflict resolution vs Conflict state vs Review before submit Use merge conflict resolver when the competing values are source-code branches, files, hunks, conflict markers, and a resolution commit in a repository. Permission recovery vs Permission denied state vs Session timeout warning vs Retry Use permission recovery when a denied user can request a role, switch to an authorized account, contact an owner, escalate a policy block, or resume the original task after access changes. Redo vs Undo vs Draft state vs Command palette Use redo when users may undo too far and need to reapply the latest undone operation in the same reversible edit stack. Restore from trash vs Undo vs Destructive action confirmation vs Draft state Use restore from trash when deletion removes an object from normal views but preserves it in a recoverable deleted-items area for a known retention period. Retry vs Error state vs Loading spinner vs Offline state Use retry when the product has a specific failed operation whose original scope can be preserved and safely attempted again. Session timeout warning vs Exit warning vs Autosave form vs Permission denied state Use session timeout warning when an authenticated session is approaching idle expiration, absolute expiration, device-lock policy, or required reauthentication and the user still has work or context to preserve. Typed confirmation vs Destructive action confirmation vs Confirmation dialog vs Password input Choose typed confirmation when one accidental activation could delete or reset a repository, project, workspace, account, production dataset, root credential, or broad permission scope and the user must prove they are targeting the exact object. Undo vs Confirmation dialog Use undo when the system can restore the exact prior state quickly, visibly, and without external side effects. Unsaved changes prompt vs Exit warning vs Autosave form vs Confirmation dialog Use unsaved changes prompt when a user tries to close an editor, cancel edit mode, switch records, change tabs, or replace content while the current edit buffer has unsaved local changes. Validation that clears user input vs Inline validation vs Error summary vs Single-page form vs Autosave recovery vs Error state Choose the validation-clears-input anti-pattern when client validation, server validation, failed submit, formatter rejection, retry, reload, or reauthentication erases safe user-entered values. Version history vs Activity log vs Timeline vs Undo vs Draft state vs Publish workflow vs Comments vs Permission denied state Choose version history when the product stores previous version snapshots that users can browse, name, preview, compare, restore, or cite as a saved state of one document, file, page, configuration, or object.
Disclosure And Attention Management
21 Accordion vs Tabs vs Side navigation vs Filter panel Use accordion when the page has multiple related sections that can be independently revealed without route changes, selected modes, or result-set filtering. Alert dialog vs Alert vs Modal dialog vs Confirmation dialog Choose alert dialog when an important current-workflow message requires users to acknowledge, cancel, retry, sign out, review, or choose a response before continuation is safe. Bottom sheet vs Sheet vs Drawer vs Bottom navigation Choose bottom sheet when mobile users need contextual details, quick controls, or a short picker anchored to the bottom while retaining enough of the map, feed, media, or object behind it for orientation. Carousel auto-advance without pause vs Carousel vs Tabs vs Recommendations vs Pagination Choose the auto-advance anti-pattern label when content rotates on a timer and users cannot pause or stop before the first slide change. Context menu vs Action menu vs Menu button vs Popover Choose context menu when users invoke commands from a specific object, text selection, canvas item, table row, file, or map mark using right click, long press, context-menu key, or Shift+F10. Details panel vs Drawer vs Hover card vs Accordion Choose details panel when selecting a row, card, map item, issue, alert, or record should keep a persistent inspection area visible while users continue browsing nearby objects. Disclosure / details vs Accordion vs Inline message vs Related links Use disclosure details when one short, less-prominent explanation should stay on the same page and users can complete the main task without opening it. Drawer vs Modal dialog vs Navigation drawer vs Filter panel Choose drawer when users need to inspect, edit lightly, or act on page-adjacent detail while preserving the main content as visible context. Drawer with no close or return path vs Drawer vs Modal dialog vs Navigation drawer vs Details panel Flag drawer with no close or return path when the drawer opens from a row, object, filter, or navigation control but lacks a visible close affordance, Escape handling, back-route dismissal, scrim dismissal where appropriate, or predictable focus return. Full-screen takeover vs Modal dialog vs Sheet vs Single-page form Choose full-screen takeover when a task must temporarily occupy the whole viewport for focus, capture, immersive preview, or dense editing, while still needing an explicit exit that returns users to the previous context. Hover card vs Tooltip vs Popover vs Disclosure / details Choose hover card when users need a compact preview of an object behind a link, mention, row, file, person, issue, chart mark, or reference chip before deciding whether to open it. Icon-only ambiguous action vs Confirmation dialog vs Undo Flag icon-only ambiguous action when users cannot identify the action, affected object, or consequence before activating a symbol-only control. Menu button vs Command palette vs Select vs Confirmation dialog Prefer a menu button when one named trigger needs to reveal a compact set of local actions or command-like links tied to the current object, row, toolbar, or view. Modal dialog vs Confirmation dialog Use a modal dialog when the user must complete a short contained task before returning to the page, such as editing one account field or choosing a date. Modal for nonblocking content vs Modal dialog vs Popover vs Drawer vs Inline message Flag modal for nonblocking content when the layer contains read-only help, status, preview, onboarding, marketing, reference metadata, or optional explanation that users can safely ignore while continuing the page task. Popover vs Menu button vs Modal dialog vs Sheet Choose popover when a trigger, field, selected object, or inline marker needs a small nearby surface that keeps the page usable and explains or edits only that local context. Preview panel vs Details panel vs Hover card vs Drawer Choose preview panel when selecting a file, message, attachment, image, video, PDF, or document should render its body or media beside the source list while users keep scanning nearby items. Progressive disclosure vs Disclosure / details vs Accordion vs Wizard Choose progressive disclosure when the product must keep the default path focused on essential actions while revealing advanced settings, rare commands, diagnostics, destructive options, or expert controls only after user intent is clear. Sheet vs Drawer vs Modal dialog vs Alert dialog Choose sheet when users need a temporary child task related to the current context, with enough room for a short form, picker, preview, or review flow and a clear dismissal path. Tooltip vs Popover vs Inline message vs Icon-only ambiguous action Choose tooltip when a focusable trigger already has a usable name and only needs a brief supplemental description that can appear on focus or hover and disappear without changing state. Tooltip-only required information vs Tooltip vs Inline message vs Disclosure / details vs Popover Flag tooltip-only required information when users must read the content to answer a field, satisfy a rule, avoid an error, understand a consequence, meet an eligibility limit, recover from a blocked action, or choose safely.
Data Display And Exploration
23 Activity log vs Timeline vs Notification center vs Search history Choose activity log when users need to inspect, search, filter, export, or investigate recorded events with actor, action, object, timestamp, source, and technical context. Calendar view vs Date picker vs Timeline vs List view Choose calendar view when users need to scan or manage multiple scheduled events across days, weeks, or months and the placement of each event on a date or time grid changes the decision. Card grid vs Card list vs Collection vs Table Choose card grid when users benefit from seeing several peer objects at once and the card's preview, title, price, status, or compact metadata are enough for first-pass selection. Card list vs List view vs Collection vs Browse by category Choose card list when each item needs a bounded container with mixed content such as preview media, title, summary, metadata, status, and one or two item-scoped actions, while a single-column reading order remains important. Chart drilldown vs Data visualization vs Details panel vs Table Choose Chart drilldown when users start from an aggregate mark and need to descend to the next planned level, such as region to country to store, while preserving the same metric, filter scope, and chart question. Collection vs List view vs Browse by category vs Related links Choose collection when the set itself is meaningful: it has a name, description, owner or source, membership, ordering, grouping, sharing, saving, or update behavior. Compare view vs Table vs Card grid vs Details panel Choose Compare view when users have narrowed to a small shortlist of similar offerings and need to weigh attributes side by side before choosing, removing, saving, or acting on one item. Dashboard layout vs Data visualization vs Table vs Saved view Choose dashboard layout when users need to monitor several related KPIs, charts, exception lists, filters, and drill paths together on one page. Data grid vs Table vs Inline edit vs Pagination Choose data grid when users need spreadsheet-like interaction: arrow-key cell navigation, editable cells, selected rows or cells, copy and paste, keyboard-managed widgets, virtualized records, or column operations inside one dense surface. Data visualization vs Table vs Map view vs Activity log Choose Data visualization when users need to see patterns across values: trend, comparison, ranking, distribution, correlation, part-to-whole, uncertainty, or anomaly. Expandable row vs Table vs Details panel vs Accordion Choose expandable row when each visible row already identifies a record and users need occasional row-owned details, history, exceptions, nested attributes, or secondary actions without leaving the data surface. Feed vs Card list vs Recommendations vs Notification center Choose feed when users consume a continuing stream of updates, posts, events, or stories where order, freshness, inserted content, and preserving reading position are central to the experience. Kanban board vs Table vs Calendar view vs List view Choose Kanban board when the main task is to visualize work in progress across workflow states and move cards as their status changes. List view vs Table vs Data grid vs Details panel Choose list view when each item is best understood as a compact object summary with primary text, secondary text, metadata, status, thumbnail or icon, and one or two row-scoped actions. Map view vs List view vs Calendar view vs Table Choose Map view when users need to understand where places, assets, events, incidents, or service areas are relative to each other, to the user, or to a viewport boundary. Master-detail vs Details panel vs List view vs Window splitter Choose master-detail when a list item opens or selects a full detail experience and the layout must adapt between side-by-side panes and stacked list/detail navigation. Saved view vs Saved search vs Saved filter vs Table Choose saved view when the saved object includes display state such as visible columns, column order, layout mode, grouping, density, sort, filters, selected fields, tabs, or default/shared workspace presentation. Summary box vs Alert vs Warning text vs Disclosure / details Choose summary box when users need a compact extract of key facts, evidence, deadlines, eligibility, or next steps from a longer page. Table vs Sort controls vs Filter panel vs Pagination Choose table when users need to compare multiple records by the same visible attributes, scan row and column intersections, or read numeric and textual values in aligned columns. Tag / status tag vs Filter chips vs Chip selection vs Inline message Choose tag when the UI needs a compact read-only label that describes an object's category, state, phase, count, or freshness without becoming an action. Timeline vs Feed vs Process list / step-by-step navigation vs Step navigation / step indicator Choose timeline when users need to understand a case, claim, order, application, or process by reading dated events in time order. Tree grid vs Data grid vs Tree selection vs Table Choose tree grid when rows have parent-child hierarchy and users must compare, edit, select, sort, or act on values across shared columns. Window splitter vs Details panel vs Drawer vs Side navigation Prefer a window splitter when two or more adjacent panes must remain visible and users need to adjust their relative sizes while preserving both panes in the same workspace.
Task And Workflow Patterns
23 Account creation vs Start page vs Onboarding vs Password creation vs Email address entry Choose account creation only when users need a persistent account to regularly access, update, save, or manage service data; avoid accounts for one-off transactions that can use a reference number or emailed link. Approval workflow vs Review before submit vs Permission recovery vs Invite user vs Confirmation dialog vs Activity log vs Notification center Choose approval workflow when work cannot proceed until one or more authorized approvers approve, reject, delegate, reassign, request changes, time out, or cancel a submitted request. Assignment vs Task list vs Review queue vs Approval workflow vs Mentions vs Object picker vs Notification center vs Activity feed vs Permission sharing Choose assignment when the user must set, change, clear, or inspect the responsible person, team, bot, or role for one work item, issue, pull request, document comment, task, or ticket. Booking vs Scheduling vs Checkout vs Date picker vs Time picker vs Date range picker vs Payment collection vs Confirmation page vs Conflict state Choose booking when the primary job is selecting an available service, staff member, resource, class, appointment type, room, seat, or inventory slot from provider-defined availability. Checkout vs Payment card entry vs Review before submit vs Step navigation / step indicator vs Address entry vs Confirmation page Choose checkout when the user is converting a cart or order into a committed purchase and the interface must coordinate item summary, price changes, shipping or pickup, contact details, payment route, discount codes, taxes, fees, terms, final order action, and post-order handoff. Complete multiple tasks vs Step navigation / step indicator vs Process list / step-by-step navigation vs Multi-step form vs Start page vs Review before submit vs Draft state vs Confirmation page Choose complete multiple tasks when a transaction contains several meaningful sections, can be saved, may span sessions, and users need to see what is complete, what is incomplete, and what can be started next. Confirm email vs Email address entry vs Account creation vs Password reset vs Two-factor authentication Choose confirm email when a captured email address must be proven reachable through a confirmation link or code before account activation, sensitive notification, recovery eligibility, invitation acceptance, or mailbox-dependent access continues. Confirm phone vs Phone number entry vs Confirm email vs Two-factor authentication vs Password reset Choose confirm phone when a phone number has already been captured and the product must prove the user can receive a short-lived SMS or voice code before account activation, phone-number change, recovery eligibility, sensitive notification, or contact-route reliance continues. Create user profile vs Account creation vs Onboarding vs Single-page form vs Name entry Choose create user profile when users need to define how they appear to other people, services, directories, public pages, mentions, comments, assignments, or collaboration surfaces. Login vs Sign in vs Password input vs Session timeout warning vs Account creation Choose login when the design problem is what happens after a user submits credentials: pending verification, success, generic failure, remaining attempts, throttling delay, lockout, unlock, support, audit notice, and session creation. Onboarding vs Empty state vs Wizard vs Progressive disclosure 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. Password reset vs Login vs Password creation vs Sign in vs Email address entry Choose password reset when a user cannot authenticate with the existing password and needs a recovery request, neutral request confirmation, reset-link or code delivery, token validation, reset-session expiry, new-password handoff, and post-reset account cleanup. Payment collection vs Checkout vs Payment card entry vs Bank details vs Retry vs Confirmation page Choose payment collection when the product must request, authorize, confirm, retry, cancel, refund, or reconcile money for a known amount or reference outside the full cart-checkout context. Profile setup vs Create user profile vs Onboarding vs Account creation vs Inline edit vs Review before submit Choose profile setup when the user already has a usable account or profile and is guided through missing, stale, recommended, managed, or visibility-sensitive profile fields. Publish workflow vs Approval workflow vs Review queue vs Draft state vs Review before submit vs Confirmation page vs Activity log vs Conflict state Choose publish workflow when the user must move content, product data, site changes, configuration, release notes, or campaign material from draft, staged, scheduled, or approved state into a selected public or live target. Review queue vs Approval workflow vs Saved filter vs Activity log vs Notification center vs Table vs Filter panel Choose review queue when reviewers repeatedly process a changing set of items that require triage, assignment, inspection, decision, bulk action, escalation, or deferral. Scheduling vs Calendar view vs Date picker vs Time picker vs Date range picker vs Notification center vs Conflict state Choose scheduling when the task is coordinating a meeting, event, availability schedule, or recurring time plan across people, calendars, time zones, reminders, locations, rooms, conferencing, buffers, limits, or free/busy conflicts. Settings management vs Complete complex form vs Toggle switch vs Progressive disclosure vs Inline edit vs Profile setup Choose settings management when users need a revisitable place to inspect, search, group, change, save, reset, and recover persistent app, account, workspace, privacy, notification, display, integration, or device configuration. Sign in vs Account creation vs Password input vs Session timeout warning vs Email address entry Choose sign in when a user already has an account or identity provider relationship and needs to start or restore an authenticated session before reaching a protected destination. Start page vs Onboarding vs Browse by category vs Step navigation / step indicator Choose start page when users are about to begin one named service, application, booking, check, or transaction and need to know what it does, who can use it, what they need, what happens next, and how to start. Task list vs Complete multiple tasks vs Step navigation / step indicator vs Process list / step-by-step navigation vs Multi-step form vs Tag / status tag vs List view vs Progress bar vs Review before submit Choose task list when the design problem is the row-level component that names each task, links to the task, exposes an optional short hint, and shows a clear status for that task. Toolbar vs Button group vs Menu button vs Command palette Prefer a toolbar when a view or editor needs a persistent strip of related controls such as Undo, Redo, Bold, Align, Filter, Export, and More, and users benefit from one labelled command region rather than scattered buttons. Two-factor authentication vs Sign in vs Login vs Password reset vs Password input Choose two-factor authentication when a user has passed or started a primary authentication step and must prove possession, inherence, or device control through a second factor before access or a sensitive action continues.
Collaboration And Social Interaction
12 Activity feed vs Feed vs Activity log vs Notification center vs Timeline vs Comments vs Mentions vs Threaded discussion vs Presence Choose activity feed when users need to catch up on recent collaboration or product events such as mentions, replies, reactions, assignments, comments, shares, repository changes, meeting updates, or app events across a workspace, project, team, organization, or object. Change review vs Review before submit vs Approval workflow vs Review queue vs Comments vs Compare view vs Version history vs Activity log vs Permission denied state Choose change review when the primary object is a proposed edit, diff hunk, tracked change, suggested change, or file change that a reviewer can inspect and then accept, reject, apply, batch, mark viewed, comment on, or request changes for. Comments vs Textarea vs Feed vs Activity log vs Notification center vs Review queue Choose comments when users need to attach a note to a specific object, document selection, file line, record, or review target and expect replies, edit history, resolution, moderation, or notifications around that note. Follow / subscribe vs Notification center vs Mentions vs Activity feed vs Threaded discussion vs Settings management vs Saved view vs Comments Choose follow / subscribe when the user's main action is opting into future updates for a concrete target such as a thread, page, space, channel, issue, repository, saved view, or topic. Handoff summary vs Assignment vs Summary box vs Activity log vs Comments vs Notification center vs Approval workflow vs Review queue vs Share dialog vs Permission denied state Choose handoff summary when a receiver is taking over work and needs a concise transfer packet: who is handing off, who receives it, why the handoff happened, current status, what has already been tried, customer or object context, open questions, blockers, risks, next actions, ownership, urgency, and source links. Invite user vs Account creation vs Object picker vs Permission recovery vs Bulk import vs Profile setup vs Review before submit Choose invite user when an authorized inviter sends a trackable invitation that may be pending, accepted, expired, resent, edited, canceled, approved, or denied before another person gains access. Live cursors vs Presence vs Comments vs Mentions vs Threaded discussion vs Notification center vs Activity log vs Sync state vs Offline state vs Tooltip Choose live cursors when collaborators need to see where other people are pointing, selecting, hovering, typing, or focused in the same document, canvas, slide, diagram, whiteboard, code editor, or design file right now. Mentions vs Comments vs Threaded discussion vs Notification center vs Object picker vs Typeahead vs Activity log vs Permission denied state vs Review queue Choose mentions when the user is composing inside an existing surface and needs to reference one or more people, teams, channels, or roles so the chosen recipients receive attention, notification, assignment, or routing behavior. Presence vs Mentions vs Notification center vs Activity log vs Comments vs Threaded discussion vs Settings management vs Permission denied state Choose presence when users need to judge whether another person is currently available, away, busy, offline, in a meeting, focusing, presenting, viewing the same object, or recently active before interrupting, routing, assigning, joining, or waiting. Reactions vs Comments vs Mentions vs Threaded discussion vs Activity feed vs Notification center vs Presence Choose reactions when the user needs to acknowledge, agree, vote lightly, express sentiment, or trigger a known emoji-based workflow without adding a full written reply. Share dialog vs Invite user vs Object picker vs Modal dialog vs Popover vs Permission denied state vs Review before submit vs Confirmation dialog vs Notification center vs Related links Choose share dialog when the user is sharing a concrete file, folder, report, board, document, dashboard, link, or media object and must choose recipients, link scope, role, notification, message, copy-link, expiration, download, or revoke behavior. Threaded discussion vs Comments vs Feed vs Notification center vs Activity log vs Review queue vs Accordion vs Pagination Choose threaded discussion when the interface centers on a topic, post, question, or channel message that can collect replies, nested replies, answer marking, follow or mute state, unread reply counts, and branch-level navigation.
Personalization And Preference
11 Adaptive defaults vs Settings management vs Preference center vs Recommendations Choose adaptive defaults when a field, filter, layout, scope, schedule, channel, or option can start with a likely useful value based on current context, prior user behavior, organization policy, locale, device, role, or recent task history. Custom dashboard vs Dashboard layout vs Saved view vs Preference center Choose custom dashboard when users select widgets, arrange order, resize tiles, save personal or shared layouts, and need reset or copy paths across sessions. Language selector vs Settings management vs Preference center vs Adaptive defaults Choose language selector when multilingual content exists and users need a visible control to move from the current page to an equivalent page or interface in another language. Notification preferences vs Settings management vs Notification center vs Follow / subscribe vs Activity feed vs Toast notification vs Mentions vs Permission denied state Choose notification preferences when the user is configuring delivery rules across notification types, delivery channels, devices, urgency, quiet times, previews, sounds, keywords, digests, or source categories. Pinned items vs Favorites vs Recently viewed vs Saved view Choose pinned items when a small set of known objects must stay at the top, in a featured section, or in a stable user-controlled order. Preference center vs Settings management vs Notification preferences vs Cookie banner vs Notification center Choose preference center when the core job is managing user choices for communications, marketing subscriptions, contact channels, topics, consent purposes, privacy/data sharing, personalization, language, and cookie-related preferences in one returnable hub. Recently used vs Recently viewed vs Favorites vs Pinned items Choose recently used when the list should be written by a real use event such as opening an app, running a tool, selecting a workspace, inserting a file, using a command, or completing work in a document. Recommended next action vs Recommendations vs Task list vs Review queue Choose recommended next action when the system proposes the next concrete workflow step for the current case, conversation, record, or task and the user can accept, dismiss, defer, or inspect why it is suggested. Settings page vs Settings management vs Side navigation vs Tabs vs Navigation drawer vs Profile setup vs Preference center vs Complete complex form Choose settings page when users need a recognizably separate destination for account, app, workspace, security, billing, notification, privacy, integration, device, or display setting sections, with page title, section navigation, current section, and return path. User-controlled density vs Settings management vs Data grid vs Saved view Choose user-controlled density when the user needs to switch between comfortable, standard, compact, or spacious spacing while keeping the same content, order, filters, and task model. User-controlled layout vs Custom dashboard vs Dashboard layout vs Saved view vs Window splitter Choose user-controlled layout when users need to switch between single-pane, side-by-side, stacked, inspector, focus, or compact workspace arrangements while keeping the same task objects, selection, filters, draft, scroll position, and keyboard focus.
AI And Automation UX
23 Agent plan preview vs Task list vs Recommended next action vs Human approval gate vs Step navigation / step indicator Choose agent plan preview when the system has generated or assembled a multi-step agent plan before execution and users need to inspect objective, ordered steps, tool use, data access, dependencies, risks, approval gates, and expected outputs. Agent progress trace vs Agent plan preview vs Streaming response vs Activity log vs Progress bar vs Human approval gate Choose agent progress trace when an agent run has started and users need live multi-step agent execution monitoring with an ordered trace of queued, active, completed, blocked, retrying, failed, skipped, cancelled, and final run states. AI agent acts without approval vs Human approval gate vs Agent plan preview vs Agent progress trace vs Tool-use visibility vs Dangerous-action review Choose AI agent acts without approval when an agent sends, spends, edits, deploys, deletes, publishes, changes access, or calls an external side-effect tool before the user approves the exact payload. AI answer without sources vs Source grounding display vs Citation display vs Confidence / uncertainty display vs Streaming response vs Correction feedback Choose AI answer without sources when a generated answer includes factual, policy, legal, medical, financial, operational, customer-impact, or data-derived claims and the UI provides no citation, grounding, source scope, not-searched label, retrieval failure, or verification path. AI confidence shown as fake precision vs Confidence / uncertainty display vs Meter vs Source grounding display vs Warning text vs Human approval gate Choose AI confidence shown as fake precision when an AI surface displays exact percentages, decimals, probability-looking scores, gauges, stars, or color bands without calibration scope, freshness, threshold, reason, or safe action. AI limitation onboarding vs Onboarding vs Inline message vs Warning text vs Confidence / uncertainty display vs Source grounding display vs Scope clarification vs Human approval gate Choose AI limitation onboarding when first-time, returning, or changed-capability users need an upfront mental model of AI benefit, capability boundary, cannot do limits, data scope, uncertainty, human review, safe trial, feedback, and manual fallback. AI output audit trail vs Activity log vs Source grounding display vs Confidence / uncertainty display vs Editable AI output vs Regenerate / retry vs Agent progress trace vs Human approval gate Choose AI output audit trail when users need durable generated-output lineage and durable proof of prompt snapshot, response snapshot, response ID, model version, source snapshot, tool call record, safety event, confidence at time, user viewed, copied output, edited output, applied output, approved output, rejected output, regenerated output, version chain, export evidence, retention window, redacted content, permission-limited view, and downstream object. Automation rule builder vs Human approval gate vs Approval workflow vs Settings management vs Complete complex form vs Recommended next action Choose automation rule builder when users define a reusable rule with trigger, condition, branch, action, target, owner, activation state, version, test, and future runtime behavior. Chat interface vs Prompt box vs Threaded discussion vs Comments vs Feed Choose chat interface when the primary surface is a conversation transcript with user turns, assistant turns, follow-up prompts, turn-level status, copied or cited responses, and a saved or resumable conversation identity. Citation display vs Chat interface vs Streaming response vs Related links vs Tooltip Choose citation display when users need to inspect claim-level evidence through an inline citation marker, selected citation state, source preview, and open source action. Confidence / uncertainty display vs Source grounding display vs Citation display vs Meter vs Warning text Choose confidence / uncertainty display when users need prediction reliability, calibrated confidence, uncertainty label, review threshold, and action gating for an AI or automated assessment. Correction feedback vs Query correction vs Inline validation vs Comments vs Regenerate / retry vs Editable AI output Choose correction feedback when users correct AI output after it appears: wrong answer, missing source, wrong source, harmful suggestion, outdated answer, unsafe output, biased output, irrelevant answer, selected claim, selected source, expected answer, source correction, private note, feedback reason, feedback receipt, reviewer routed, accepted correction, rejected correction, appeal decision, feedback history, training opt-out, apply to this answer, or apply to future answers. Editable AI output vs Inline edit vs Prompt box vs Streaming response vs Citation display vs Source grounding display Choose editable AI output when the object is generated output after creation and users must revise a generated draft while preserving generated-versus-user-edited status, source mapping, citation preservation, tracked changes, and review required states. Escalate to human vs Handoff summary vs Chat interface vs Review queue vs Human approval gate vs Recommended next action Choose escalate to human when users need a visible route to live agent, support ticket, callback, specialist queue, supervisor review, emergency route, human review, bot-to-human handoff, handback to AI, business-hours fallback, or outside-hours ticket fallback after AI, automation, chatbot, or self-service cannot resolve the task. Human approval gate vs Approval workflow vs Review queue vs Review before submit vs Recommended next action Choose human approval gate when an AI agent, automation, deployment, workflow, or model-driven action must pause at a named checkpoint until an eligible human approves, rejects, edits, or overrides before execution continues. Model update notice vs Notification banner vs Warning text vs Phase / beta banner vs Confidence / uncertainty display vs Source grounding display Choose model update notice when the user must understand current model, new model, replacement model, model version, lifecycle stage, effective date, retirement date, shutdown date, affected usage, migration path, test replacement, rollout, rollback, and whether action is required. Prompt box vs Prompt suggestions vs Command palette vs Search suggestions vs Textarea Choose prompt box when users need to compose, edit, review, attach context to, and intentionally submit a natural-language request to an AI system. Prompt suggestions vs Search suggestions vs Command palette Prefer prompt suggestions when the next step is an editable natural-language AI request and the user needs examples of supported capabilities. Regenerate / retry vs Retry vs Chat interface vs Streaming response vs Prompt box vs Editable AI output Choose regenerate / retry when users need response-level AI reruns: retry same prompt, regenerate answer, new answer versions, continue partial output, partial-output continuation, retry failed sources, source retry, retry failed tools, tool retry, compare versions, restore previous answer, or keep both generated versions. Scope clarification vs Prompt box vs Search scope selector vs Agent plan preview vs Human approval gate vs Chat interface Choose scope clarification when the AI request is ambiguous or risky because it lacks object set, audience, timeframe, source set, workspace, permission, output depth, authority, selected records, visible filtered records, entire workspace, current item, or allowed action scope. Source grounding display vs Citation display vs Chat interface vs Streaming response vs Related links Choose source grounding display when users need whole-answer evidence coverage across source scope, retrieved material, used evidence, and unsupported claims, not just one citation marker. Streaming response vs Chat interface vs Progress bar vs Loading spinner vs Feed Choose streaming response when the product can safely show partial generated text, tokens, tool progress, citations, or structured chunks as events arrive before the final answer is complete. Tool-use visibility vs Agent progress trace vs Source grounding display vs Citation display vs Activity log vs Human approval gate Choose tool-use visibility when users need inspectable AI tool calls with tool name, tool input, tool output, permission scope, target object, side-effect risk, redaction reason, raw payload eligibility, and tool status.
Trust, Safety, And Privacy
21 Age gate vs Consent prompt vs Permission request vs Sensitive-data reveal vs Privacy settings vs Cookie banner Choose age gate when the product must ask for date of birth, age band, declared age, verified age, parent or guardian consent, or age assurance before showing age-restricted content or collecting child data. Audit log vs Activity log vs AI output audit trail vs Version history vs Notification center Use audit log when records must support governed security, compliance, forensic, legal, or privileged-administrator review with retention policy, access scope, custody, export/API/SIEM behavior, and tamper or coverage states. Block / mute vs Report abuse vs Notification preferences vs Follow / subscribe vs Permission denied state vs Comments Choose block / mute when the user wants to stop seeing, hearing from, being contacted by, being mentioned by, or receiving notifications from a person, account, channel, DM, app, bot, word, topic, or conversation by changing a personal visibility and interaction boundary without submitting the item for policy review. Consent prompt vs Cookie banner vs Preference center vs Notification preferences vs Permission sharing vs Human approval gate Choose consent prompt when the decision is a clear affirmative opt-in and active opt-in for a named purpose such as marketing, research participation, AI training, partner sharing, personalized recommendations, health-data use, or survey follow-up. Cookie consent vs Cookie banner vs Consent prompt vs Preference center vs Privacy settings vs Legal acceptance Choose cookie consent when the core design question is whether analytics, advertising, personalization, pixels, local storage, SDKs, tags, or similar technologies may be stored or accessed on the user's device. Dangerous-action review vs Destructive action confirmation vs Typed confirmation vs Human approval gate vs Review before submit vs Security warning Choose dangerous-action review when the action is armed but not yet executed and users need to inspect action verb, target, payload, actor, risk reason, evidence, freshness, permissions, side effects, safer alternatives, and audit before running it. Dark-pattern consent vs Consent prompt vs Cookie consent vs Cookie banner vs Legal acceptance vs Preference center Choose dark-pattern consent when Accept all is one click but Reject all, customize, or withdraw is hidden, delayed, visually de-emphasized, split across screens, or labelled to shame refusal. Data export vs Bulk import vs Audit log vs Table vs Data grid vs Sensitive-data reveal Choose data export when users need a portable copy, archive, direct transfer, or downloadable package of account, workspace, personal, product, activity, or organization data. Delete account vs Destructive action confirmation vs Typed confirmation vs Data export vs Settings management vs Restore from trash Choose delete account when the user intends account-level closure with associated data deletion, including removal or requested removal of associated personal, profile, authentication, app, subscription, and service data. Exit this page quickly vs Security warning vs Sensitive-data reveal vs Session timeout vs Privacy settings vs Back link Choose exit this page quickly when the sensitive service could put someone at risk of abuse, retaliation, stalking, harassment, whistleblowing exposure, or discovery of plans to leave harm, and the user needs a visible immediate route to a neutral website. Hidden destructive account deletion vs Delete account vs Destructive action confirmation vs Typed confirmation vs Data export vs Privacy settings Choose hidden destructive account deletion when users can create an account but cannot find a direct account deletion or erasure request path from account settings, app settings, or the required web resource. Legal acceptance vs Consent prompt vs Review before submit vs Checkbox group vs Confirmation dialog vs Typed confirmation vs Age gate Choose legal acceptance when the user must manifest agreement to terms of service, conditions of sale, service agreement, acceptable-use policy, workplace terms of use, contract amendment, or required legal disclosure before proceeding. Official-site banner vs Banner vs Site alert vs Notification banner vs Security warning vs Service navigation Choose official-site banner when users need to verify that a page belongs to an official government organization and understand the trusted domain and HTTPS indicators before sharing sensitive information. Permission prompt with no context vs Permission request vs Location permission flow vs Consent prompt vs Permission denied state vs Notification preferences Choose permission prompt with no context when the product asks for camera, microphone, location, photos, contacts, notifications, Bluetooth, clipboard, motion, storage, or another powerful feature before the user starts the feature that needs it. Permission request vs Consent prompt vs Permission sharing vs Permission recovery vs Permission denied state vs Notification preferences Choose permission request when a contextual timing decision leads into a system permission prompt for a device resource or powerful browser feature such as camera, microphone, location, photos, contacts, notifications, Bluetooth, clipboard, storage access, or motion sensors. Permission sharing vs Share dialog vs Invite user vs Permission recovery vs Permission denied state vs Object picker vs Approval workflow vs Review before submit vs Confirmation dialog vs Activity log Choose permission sharing when an authorized owner or admin is managing durable access grants for users, groups, guests, anonymous users, service accounts, roles, permission levels, inherited access, unique permissions, role matrices, or revocation across a space, repository, site, folder, board, or dataset. Privacy settings vs Settings management vs Preference center vs Consent prompt vs Permission request vs Data export Choose privacy settings when users need a returnable place to inspect and change privacy controls for saved activity, profile visibility, app access, device permissions, ad personalization, data sharing, location history, connected apps, or privacy dashboard data. Report abuse vs Review queue vs Comments vs Security warning vs Permission denied state vs Notification center Choose report abuse when the user needs to identify a specific post, comment, profile, message, repository, ad, listing, live chat item, or conversation and submit a policy reason, safety category, evidence, affected person, or context for review. Security warning vs Warning text vs Alert vs Permission denied state vs Sensitive-data reveal Choose security warning when phishing, malware, deceptive site, dangerous download, invalid certificate, insecure connection, mixed-content submission, suspicious redirect, file preview risk, unknown publisher, or account-security evidence means proceeding could expose credentials, personal data, device integrity, account access, or organization assets. Sensitive-data reveal vs Password input vs Input mask vs Typed confirmation vs Permission request Choose sensitive-data reveal when the value already exists in the product or is being reviewed and users need masked state, reveal action, hide action, hold-to-reveal, timed reveal, reauthentication, partial reveal, full reveal, copy while hidden, clipboard warning, audit event, redaction boundary, shoulder-surfing warning, expired reveal, screen reader announcement, or mobile compact treatment. Session timeout vs Session timeout warning vs Sign in vs Login vs Permission denied state vs Autosave recovery Use session timeout for the already-expired authenticated-session state when private content must be hidden, authenticated controls must stop, and the next valid action is sign in, reauthentication, restart, or safe task restoration.
Cross-Device And Physical Interaction
15 Camera capture vs File upload vs Permission request vs Sensitive-data reveal vs Full-screen takeover vs Drag-and-drop upload Choose camera capture when users must create new photo or video evidence through a live preview, capture control, framing guidance, camera switch, capture result, review, retake, crop, and submit flow. Drag and drop vs Touch gesture vs Long press vs Drag-and-drop upload vs Kanban board vs Sort controls Choose drag and drop when users move a source to a destination by picking up an object, selected set, tile, card, row, file, or canvas item and dropping it onto a valid destination or insertion position inside the product. Focus traversal vs Keyboard shortcut vs Skip link vs Modal dialog vs Toolbar vs Data grid Choose focus traversal when users need a logical sequential focus order through links, buttons, fields, panels, validation messages, overlays, and return points using Tab and Shift+Tab. Haptic feedback vs Touch gesture vs Toast notification vs Error state vs Confirmation dialog vs Progress bar Choose haptic feedback when a physical pulse should reinforce a specific interaction event such as press, drag threshold, detent, snap, selection, boundary, success, warning, or destructive confirmation, while the same information remains visible or audible elsewhere. Keyboard shortcut vs Command palette vs Menu / menubar vs Toolbar vs Undo vs Redo Choose keyboard shortcut when one memorized key combination directly invokes one command, focuses one surface, or toggles one mode without opening a command browser. Location permission flow vs Permission request vs Map view vs Address entry vs Privacy settings vs Offline state Choose location permission flow when the product needs current device location for a task and must handle pre-prompt rationale, browser or OS prompt timing, allow once, while using, background denial, precise or approximate choice, granted fix, denied state, settings recovery, timeout, unavailable location, cached or stale coordinates, manual fallback, active tracking, stop sharing, and retention. Long press vs Touch gesture vs Context menu vs Tooltip vs Popover vs Action menu Choose long press when users press and hold a target long enough to reveal secondary actions, enter selection mode, open preview, or begin drag pickup. Offline mobile retry vs Offline state vs Retry vs Sync state vs Pull to refresh vs Fallback path Choose offline mobile retry when a mobile user taps Save, Send, Upload, Submit, Check in, or Pay during no connection, flaky connection, app backgrounding, battery saver, metered data, captive portal, or OS-managed background limits and the app can queue or retry that same action safely. Pull to refresh vs Touch gesture vs Feed vs Offline state vs Loading spinner vs Retry Choose pull to refresh when users pull downward from the top of a scrollable content area to refresh the current list, feed, inbox, dashboard, or status surface. QR scan vs Camera capture vs Permission request vs File upload vs Two-factor authentication vs Security warning Choose QR scan when the product must guide users through scanning a visible code, decode the payload, show scan status, handle unsupported detectors, camera permission, torch, focus, distance, glare, no code found, multiple codes, invalid format, duplicate scan, expired payload, offline decode, and safe action preview. Responsive navigation adaptation vs Global navigation vs Bottom navigation vs Navigation drawer vs Side navigation vs Header / top app bar Choose responsive navigation adaptation when viewport width, device posture, orientation, pointer mode, safe areas, or destination count require navigation to move between bottom bar, rail, drawer, side panel, top overflow, or simplified header while preserving the same destination identities. Swipe action vs Touch gesture vs List view vs Action menu vs Undo vs Confirmation dialog Choose swipe action when a horizontal gesture on one row reveals or commits a row-scoped action such as Archive, Mark read, Complete, Pin, Dismiss, or Delete. Touch gesture vs Carousel vs Map view vs Bottom sheet vs Drag-and-drop upload vs Data visualization Choose touch gesture when the design problem is how touch input itself is recognized, previewed, canceled, committed, and made available through non-gesture alternatives. Voice command vs Keyboard shortcut vs Command palette vs Prompt box vs Text input vs Touch gesture Choose voice command when users need hands-free spoken activation, dictation control, or screen-element targeting and the interface can show listening state, recognized phrase, command match, confidence, target, confirmation, and recovery. Wearable glance vs Notification center vs Summary box vs Dashboard layout vs Progress bar vs Notification preferences Choose wearable glance when users look at a wrist or wearable surface for a few seconds and need one compact answer such as next step, current metric, remaining time, alert priority, route cue, medication due, workout pace, battery state, or account-safe status.