{ "catalogLastVerified": "2026-06-13", "source": "https://uxpatternsguide.com", "counts": { "completePatterns": 298, "comparisons": 286, "categories": 14 }, "patterns": [ { "id": "accordion", "name": "Accordion", "aliases": [ "expandable sections", "collapsible sections", "show hide sections", "collapsible content group", "accordion list", "multi-section disclosure" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Grouped show-hide sections for related page content", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Long pages with several related sections can become hard to scan, but hiding content without clear headings, state, and keyboard behavior can make important information harder to find or compare.", "useWhen": "A page has several related sections and users do not need all details visible at once.", "avoidWhen": "There is only one revealable section and a simpler details disclosure is enough.", "requiredStates": [ "All collapsed state with every section title visible.", "One section expanded state with button and controlled panel synchronized.", "Multiple sections expanded state when the accordion supports independent panels.", "Expand all and collapse all state when group controls are present." ], "commonMisuses": [ "Using divs or links as section toggles without button semantics or expanded state.", "Hiding content users must read sequentially before completing a task.", "Making collapsed section labels too vague, such as More, Details, or Information.", "Removing form values or validation messages when another section opens." ], "keywords": [ "accordion", "expandable", "sections", "collapsible", "show", "hide", "content", "group", "list", "multi-section", "disclosure", "attention", "management", "ui-ux", "grouped", "show-hide", "related", "page", "long", "pages", "several", "become", "hard", "scan", "but", "hiding", "without", "clear", "headings", "state", "keyboard", "behavior", "make", "important", "information", "harder", "find", "compare", "under", "explicit" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/accordion.md", "json": "https://uxpatternsguide.com/agent/patterns/accordion.json", "human": "https://uxpatternsguide.com/patterns/accordion/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/accordion-vs-tabs-vs-side-navigation-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/details-panel-vs-drawer-vs-hover-card-vs-accordion.md", "https://uxpatternsguide.com/agent/comparisons/disclosure-details-vs-accordion-vs-inline-message-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/expandable-row-vs-table-vs-details-panel-vs-accordion.md", "https://uxpatternsguide.com/agent/comparisons/progressive-disclosure-vs-disclosure-details-vs-accordion-vs-wizard.md", "https://uxpatternsguide.com/agent/comparisons/threaded-discussion-vs-comments-vs-feed-vs-notification-center.md" ] }, { "id": "account-creation", "name": "Account creation", "aliases": [ "create account", "sign up", "registration", "register account", "new account setup", "account registration", "user registration", "service account setup", "create an account", "join flow" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Persistent account establishment flow", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Accounts can help users return, manage data, and protect access, but unnecessary or confusing account creation adds friction, duplicates accounts, exposes account existence, and can block users before they know whether the service meets their need.", "useWhen": "Users need to save and resume drafts, regularly update their data, manage records, check ongoing status, collaborate, or protect repeated access.", "avoidWhen": "The task is a one-off transaction that can be completed with a reference number, receipt, guest route, or emailed status link.", "requiredStates": [ "Need-for-account state explaining why an account is required or beneficial at this point.", "New-account entry state with clear identifier and new credential labels.", "Already-have-account state with sign-in and recovery routes separated from creation.", "Duplicate or existing-account neutral response state that avoids exposing account existence." ], "commonMisuses": [ "Forcing accounts before users can evaluate a service or complete a one-off transaction.", "Using account creation to collect profile, marketing, or preference data that is not needed to establish the account.", "Presenting create account and sign in as identical forms with unclear labels.", "Revealing This email already exists on a public registration page." ], "keywords": [ "account", "creation", "create", "sign", "registration", "register", "new", "setup", "service", "join", "flow", "task", "workflow", "patterns", "ui-ux", "persistent", "establishment", "accounts", "help", "return", "manage", "data", "protect", "access", "but", "unnecessary", "confusing", "adds", "friction", "duplicates", "exposes", "existence", "block", "before", "they", "know", "whether", "meets", "their", "need" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/account-creation.md", "json": "https://uxpatternsguide.com/agent/patterns/account-creation.json", "human": "https://uxpatternsguide.com/patterns/account-creation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/account-creation-vs-start-page-vs-onboarding-vs-password-creation.md", "https://uxpatternsguide.com/agent/comparisons/confirm-email-vs-email-address-entry-vs-account-creation-vs-password-reset.md", "https://uxpatternsguide.com/agent/comparisons/create-user-profile-vs-account-creation-vs-onboarding-vs-single-page-form.md", "https://uxpatternsguide.com/agent/comparisons/invite-user-vs-account-creation-vs-object-picker-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/login-vs-sign-in-vs-password-input-vs-session-timeout-warning.md", "https://uxpatternsguide.com/agent/comparisons/profile-setup-vs-create-user-profile-vs-onboarding-vs-account-creation.md", "https://uxpatternsguide.com/agent/comparisons/sign-in-vs-account-creation-vs-password-input-vs-session-timeout-warning.md" ] }, { "id": "action-menu", "name": "Action menu", "aliases": [ "actions menu", "contextual action list", "resource actions menu", "row actions menu", "bulk actions menu", "more actions list" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Contextual command list for a resource or selection", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Contextual commands often need to stay compact, but generic overflow menus become junk drawers when they mix unrelated actions, hide scope, omit disabled reasons, and place destructive commands beside safe actions.", "useWhen": "A resource, row, card, selected set, or local page object has several contextual commands.", "avoidWhen": "Only one or two commands are needed and visible buttons would be faster.", "requiredStates": [ "Closed trigger or contextual entry point with resource scope.", "Open menu with accessible name that includes the object or selection scope.", "Sectioned menu state with headings or separators.", "Safe command item state with verb and object label." ], "commonMisuses": [ "Treating the action menu as a junk drawer for every command that does not fit elsewhere.", "Using vague labels such as Open, Manage, More, or Delete without naming the object or result.", "Mixing commands, links, field values, filters, toggles, and form fields without role or visual distinction.", "Leaving disabled actions greyed out with no reason or recovery path." ], "keywords": [ "action", "menu", "actions", "contextual", "list", "resource", "row", "bulk", "more", "selection", "choice", "ui-ux", "command", "commands", "often", "need", "stay", "compact", "but", "generic", "overflow", "menus", "become", "junk", "drawers", "they", "mix", "unrelated", "hide", "scope", "omit", "disabled", "reasons", "place", "destructive", "beside", "safe", "design", "scoped", "name" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/action-menu.md", "json": "https://uxpatternsguide.com/agent/patterns/action-menu.json", "human": "https://uxpatternsguide.com/patterns/action-menu/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/action-menu-vs-menu-button-vs-button-group-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/action-sheet-vs-action-menu-vs-bottom-sheet-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/context-menu-vs-action-menu-vs-menu-button-vs-popover.md", "https://uxpatternsguide.com/agent/comparisons/long-press-vs-touch-gesture-vs-context-menu-vs-tooltip-vs-popover-vs-action-menu.md", "https://uxpatternsguide.com/agent/comparisons/swipe-action-vs-touch-gesture-vs-list-view-vs-action-menu-vs-undo-vs-confirmation-dialog.md" ] }, { "id": "action-sheet", "name": "Action sheet", "aliases": [ "iOS action sheet", "confirmation dialog sheet", "choice sheet", "mobile action sheet", "share choice sheet", "task choice sheet" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Platform-presented action choice sheet", "maturity": "standard", "platforms": [ "mobile", "web", "desktop" ], "problem": "Users sometimes initiate an action that has several legitimate outcomes, but a single confirmation dialog is too narrow and a full sheet or page is too heavy for the immediate choice.", "useWhen": "A user-initiated action has a few immediate valid outcomes.", "avoidWhen": "The user has not initiated an action.", "requiredStates": [ "Resting state with an initiating control or task context.", "Opening state that ties the sheet to the action the user just invoked.", "Visible title, message, or object label when needed to clarify the scope.", "Safe action choice state." ], "commonMisuses": [ "Showing an action sheet before the user starts an action.", "Using an action sheet as an alert for information that has no choice set.", "Adding many options until the sheet scrolls and users can accidentally tap while inspecting.", "Mixing commands with forms, previews, navigation links, search, filters, and settings." ], "keywords": [ "action", "sheet", "ios", "confirmation", "dialog", "choice", "mobile", "share", "task", "selection", "ui-ux", "platform-presented", "sometimes", "initiate", "several", "legitimate", "outcomes", "but", "single", "too", "narrow", "full", "page", "heavy", "immediate", "present", "concise", "initiating", "control", "name", "affected", "object", "show", "few", "relevant", "choices", "separate", "cancel", "destructive", "roles" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/action-sheet.md", "json": "https://uxpatternsguide.com/agent/patterns/action-sheet.json", "human": "https://uxpatternsguide.com/patterns/action-sheet/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/action-sheet-vs-action-menu-vs-bottom-sheet-vs-confirmation-dialog.md" ] }, { "id": "activity-feed", "name": "Activity feed", "aliases": [ "activity stream", "workspace activity", "team activity feed", "recent activity feed", "news feed", "organization news feed", "collaboration activity", "event feed", "work activity hub", "activity view" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Catch-up stream of recent collaboration and work events with actor, verb, object, type, destination, and triage controls", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Teams need a lightweight way to catch up on what happened, but products often blur activity feeds with broad content feeds, notification inboxes, audit logs, timelines, and live presence streams, causing noisy, unactionable, or misleading activity surfaces.", "useWhen": "Users need to catch up on recent collaboration, app, repository, channel, project, meeting, reminder, or task activity.", "avoidWhen": "The surface is primarily content consumption, media browsing, or article-like stream reading.", "requiredStates": [ "Default feed state with actor, verb, object, timestamp, source, type icon, preview, scope, and destination for each activity item.", "Unread, read, cleared, selected, replied, opened, muted, hidden, grouped, collapsed, and expanded item states.", "Filters for all activity, unread, mentions, replies, reactions, channel or project activity, app events, reminders, repository events, and cleared items where supported.", "Dense layout, detailed layout, custom saved view, and mobile compact states." ], "commonMisuses": [ "Using activity feed as an audit log without evidence fields, export, or retention guarantees.", "Using activity feed as a notification center without clear unread, badge, preference, or cleanup semantics.", "Dumping every low-level system event, presence update, typing event, or cursor movement into the feed.", "Hiding actor, object, event type, source app, or timestamp until users open the item." ], "keywords": [ "activity", "feed", "stream", "workspace", "team", "recent", "news", "organization", "collaboration", "event", "work", "hub", "view", "social", "interaction", "ui-ux", "catch-up", "events", "actor", "verb", "object", "type", "destination", "triage", "controls", "teams", "need", "lightweight", "way", "catch", "what", "happened", "but", "products", "often", "blur", "feeds", "broad", "content", "notification" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/activity-feed.md", "json": "https://uxpatternsguide.com/agent/patterns/activity-feed.json", "human": "https://uxpatternsguide.com/patterns/activity-feed/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/follow-subscribe-vs-notification-center-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/notification-preferences-vs-settings-management-vs-notification-center-vs-follow-subscribe.md", "https://uxpatternsguide.com/agent/comparisons/reactions-vs-comments-vs-mentions-vs-activity-feed.md" ] }, { "id": "activity-log", "name": "Activity log", "aliases": [ "audit log", "event log", "admin activity log", "security activity log", "organization activity log", "change log", "access log", "compliance log", "activity history" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Searchable and exportable record of system, user, or administrative events", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Organizations and power users need to understand who did what, to which object, from where, and when, but ordinary timelines, feeds, notifications, and history pages often omit the evidence, scope, retention, and export behavior required for investigation.", "useWhen": "Users need to inspect recorded user, admin, system, security, or integration events.", "avoidWhen": "The goal is only to show a readable milestone history for one case or process.", "requiredStates": [ "Default log state with event records, result count, visible timezone, retention window, and permission scope.", "Filtered and searched states by actor, action, object, app, date range, result, IP, location, or event ID.", "Expanded event detail state with changed fields, source, event ID, request context, and related object route.", "Export queued, export ready, export failed, and export range mismatch states." ], "commonMisuses": [ "Calling a social feed or notification drawer an activity log without event evidence.", "Using vague activity labels that omit actor, action, object, timestamp, or result.", "Hiding retention limits, permission scope, or redaction until after users fail to find records.", "Letting mark-read, dismiss, archive, or personal-history deletion remove administrative evidence." ], "keywords": [ "activity", "log", "audit", "event", "admin", "security", "organization", "change", "access", "compliance", "history", "data", "display", "exploration", "ui-ux", "searchable", "exportable", "record", "system", "administrative", "events", "organizations", "power", "need", "understand", "who", "did", "what", "which", "object", "where", "but", "ordinary", "timelines", "feeds", "notifications", "pages", "often", "omit", "evidence" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/activity-log.md", "json": "https://uxpatternsguide.com/agent/patterns/activity-log.json", "human": "https://uxpatternsguide.com/patterns/activity-log/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/activity-log-vs-timeline-vs-notification-center-vs-search-history.md", "https://uxpatternsguide.com/agent/comparisons/agent-progress-trace-vs-agent-plan-preview-vs-streaming-response-vs-activity-log-vs-progress-bar-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/approval-workflow-vs-review-before-submit-vs-permission-recovery-vs-invite-user.md", "https://uxpatternsguide.com/agent/comparisons/audit-log-vs-activity-log-vs-ai-output-audit-trail-vs-version-history-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/comments-vs-textarea-vs-feed-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/data-visualization-vs-table-vs-map-view-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/presence-vs-mentions-vs-notification-center-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/publish-workflow-vs-approval-workflow-vs-review-queue-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/review-queue-vs-approval-workflow-vs-saved-filter-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/threaded-discussion-vs-comments-vs-feed-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/tool-use-visibility-vs-agent-progress-trace-vs-source-grounding-display-vs-citation-display-vs-activity-log-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/version-history-vs-activity-log-vs-timeline-vs-undo.md" ] }, { "id": "adaptive-defaults", "name": "Adaptive defaults", "aliases": [ "contextual defaults", "smart defaults", "personalized defaults", "dynamic defaults", "suggested default values", "adaptive starting values", "learned defaults", "context-aware defaults", "preselected values", "default recommendations" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "Context-aware starting values for fields, filters, scopes, layouts, schedules, channels, or workflow options", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Repeated setup, forms, filters, scheduling, and workflow choices slow users down, but unlabelled adaptive defaults can cause wrong submissions, privacy leaks, accidental persistence, or loss of trust when users cannot see why a value appeared.", "useWhen": "Users repeatedly choose similar values and the product can explain a likely starting value from current context or prior behavior.", "avoidWhen": "The value is high impact and cannot be reviewed before commit.", "requiredStates": [ "Neutral default state with no personal signal", "Adaptive default state with proposed value, source, scope, and reason", "User-edited state that distinguishes one-time correction from remember-for-next-time", "Remembered correction state" ], "commonMisuses": [ "Preselecting values to increase conversion, spend, sharing, or consent rather than to reduce honest user effort.", "Saving an adapted value as a durable setting without asking.", "Using private history, location, or team behavior as a default source on a shared or public surface without explanation.", "Showing an adaptive value with no source label, no reset path, and no distinction from a required value." ], "keywords": [ "adaptive", "defaults", "contextual", "smart", "personalized", "dynamic", "suggested", "default", "values", "starting", "learned", "context-aware", "preselected", "recommendations", "personalization", "preference", "ui-ux", "fields", "filters", "scopes", "layouts", "schedules", "channels", "workflow", "options", "repeated", "setup", "forms", "scheduling", "choices", "slow", "down", "but", "unlabelled", "cause", "wrong", "submissions", "privacy", "leaks", "accidental" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/adaptive-defaults.md", "json": "https://uxpatternsguide.com/agent/patterns/adaptive-defaults.json", "human": "https://uxpatternsguide.com/patterns/adaptive-defaults/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/adaptive-defaults-vs-settings-management-vs-preference-center-vs-recommendations.md", "https://uxpatternsguide.com/agent/comparisons/language-selector-vs-settings-management-vs-preference-center-vs-adaptive-defaults.md" ] }, { "id": "address-entry", "name": "Address entry", "aliases": [ "postal address form", "mailing address form", "shipping address entry", "billing address entry", "address lookup with manual entry", "structured address fields" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Structured postal or contact address capture flow", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Addresses vary by country, building type, delivery route, and verification data, so simplistic fields, forced lookup, or silent normalization can lose critical delivery and contact information.", "useWhen": "The product needs a complete postal, delivery, billing, service, or official contact address.", "avoidWhen": "The product only needs one short location label, room name, or delivery note.", "requiredStates": [ "Initial state with country or domestic coverage explained and lookup or manual entry available.", "Lookup query state accepting postal-code spacing, casing, and common punctuation variations.", "Lookup results state showing multiple distinguishable addresses and requiring user selection.", "Address not found state with manual entry and support guidance instead of a dead end." ], "commonMisuses": [ "Forcing every address through a domestic postcode or ZIP lookup.", "Using one single-line text input when the business process needs city, postal code, country, or delivery line separately.", "Discarding apartment, suite, flat, unit, room, floor, or organization details after lookup selection.", "Automatically choosing the first lookup result without explicit selection." ], "keywords": [ "address", "entry", "postal", "form", "mailing", "shipping", "billing", "lookup", "manual", "structured", "fields", "input", "data", "ui-ux", "contact", "capture", "flow", "addresses", "vary", "country", "building", "type", "delivery", "route", "verification", "simplistic", "forced", "silent", "normalization", "lose", "critical", "information", "provide", "where", "useful", "always", "include", "editable", "path", "parts" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/address-entry.md", "json": "https://uxpatternsguide.com/agent/patterns/address-entry.json", "human": "https://uxpatternsguide.com/patterns/address-entry/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/address-entry-vs-text-input-vs-autocomplete-vs-dependent-fields.md", "https://uxpatternsguide.com/agent/comparisons/checkout-vs-payment-card-entry-vs-review-before-submit-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/location-permission-flow-vs-permission-request-vs-map-view-vs-address-entry-vs-privacy-settings-vs-offline-state.md" ] }, { "id": "advanced-search", "name": "Advanced search", "aliases": [ "advanced query builder", "fielded search", "Boolean search", "query builder", "search syntax builder", "expert search", "structured search", "search operators" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Structured query builder for fielded, Boolean, grouped, or syntax-backed searches", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to retrieve a precise set of records, messages, files, citations, issues, or code results, but ordinary keyword search and visible filters cannot express fielded conditions, Boolean logic, grouping, or expert syntax safely.", "useWhen": "Expert or repeat users need precise retrieval across fields, operators, phrases, dates, ranges, exclusions, functions, or prior search history.", "avoidWhen": "Most users only need one keyword box and a ranked result list.", "requiredStates": [ "Empty builder state with field, operator, value, and Boolean controls labelled.", "Partially built query state with a generated preview and clear next action.", "Valid query state with result-count preview or ready-to-search status.", "Invalid syntax state for unmatched quotes, unsupported operators, missing values, or broken grouping." ], "commonMisuses": [ "Calling a simple filter drawer advanced search without supporting clauses, Boolean logic, or query preview.", "Hiding generated syntax so users cannot inspect exactly what the builder will submit.", "Returning zero results for parse errors instead of showing the broken clause.", "Mixing search scope, filters, sort, and advanced clauses into one opaque text string with no recoverable controls." ], "keywords": [ "advanced", "search", "query", "builder", "fielded", "boolean", "syntax", "expert", "structured", "operators", "browse", "discovery", "ui-ux", "grouped", "syntax-backed", "searches", "need", "retrieve", "precise", "set", "records", "messages", "files", "citations", "issues", "code", "results", "but", "ordinary", "keyword", "visible", "filters", "cannot", "express", "conditions", "logic", "grouping", "safely", "provide", "surface" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/advanced-search.md", "json": "https://uxpatternsguide.com/agent/patterns/advanced-search.json", "human": "https://uxpatternsguide.com/patterns/advanced-search/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/advanced-search-vs-basic-search-vs-filter-panel-vs-search-scope-selector.md" ] }, { "id": "age-gate", "name": "Age gate", "aliases": [ "age check", "date of birth gate", "age verification", "age assurance", "age screening", "adult content gate", "minor eligibility check", "parental consent gate", "age-restricted access", "child safety gate" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Eligibility and safety boundary that asks for age, age band, date of birth, verified age, or parent authorization before age-sensitive access, data collection, or content exposure", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Age-sensitive products can expose children to unsuitable content, collect child data without the right route, overcollect identity evidence, or deny legitimate users when age checks are vague, easy to game, irreversible, or blended with unrelated consent.", "useWhen": "Age or age band controls whether users may access content, features, commerce, community interaction, personalization, or data collection.", "avoidWhen": "The question is whether an eligible user consents to optional data use; use consent prompt.", "requiredStates": [ "Age prompt state with reason, threshold, and input format.", "Neutral date-of-birth or age-band entry state without adult-default bias.", "Adult allowed state with session or account recognition where appropriate.", "Underage denied or adapted state that does not leak restricted content." ], "commonMisuses": [ "Preselecting Yes, I am over 18 or styling the adult path as the obvious safe answer.", "Showing restricted content behind or before the age gate.", "Collecting identity documents when only an age band is needed.", "Letting users retry unlimited birth dates until one passes." ], "keywords": [ "age", "gate", "check", "date", "birth", "verification", "assurance", "screening", "adult", "content", "minor", "eligibility", "parental", "consent", "age-restricted", "access", "child", "safety", "trust", "privacy", "ui-ux", "boundary", "asks", "band", "verified", "parent", "authorization", "before", "age-sensitive", "data", "collection", "exposure", "products", "expose", "children", "unsuitable", "collect", "without", "right", "route" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/age-gate.md", "json": "https://uxpatternsguide.com/agent/patterns/age-gate.json", "human": "https://uxpatternsguide.com/patterns/age-gate/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/age-gate-vs-consent-prompt-vs-permission-request-vs-sensitive-data-reveal-vs-privacy-settings-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/legal-acceptance-vs-consent-prompt-vs-review-before-submit-vs-checkbox-group-vs-confirmation-dialog-vs-typed-confirmation-vs-age-gate.md" ] }, { "id": "agent-plan-preview", "name": "Agent plan preview", "aliases": [ "AI plan preview", "agent execution plan", "agent task plan", "plan before run", "AI task breakdown", "tool plan preview", "automation plan preview", "agent steps preview", "pre-run agent plan", "AI workflow preview" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Pre-execution preview of an AI agent's proposed multi-step plan, tools, data access, and expected outputs", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI agents can perform multi-step work with tools and side effects, but users often see only a summary or prompt response before execution, leaving them unable to inspect the plan, correct unsafe steps, understand data access, or consent to what will happen.", "useWhen": "An AI agent or automation can show a proposed multi-step plan before execution.", "avoidWhen": "The system cannot generate a reliable plan before execution.", "requiredStates": [ "Draft plan state with objective, ordered steps, planned tools, and expected output.", "Editable step state with edit, remove, reorder, or scope controls where safe.", "Fixed or required step state where policy or dependency prevents editing.", "Optional and conditional step states." ], "commonMisuses": [ "Showing a vague plan summary while hiding planned tool calls, data access, and side effects.", "Calling execution history a plan preview after the work has already run.", "Letting the agent execute a different plan than the one the user reviewed.", "Making every step editable even when policy, dependency, or safety requires fixed steps." ], "keywords": [ "agent", "plan", "preview", "execution", "task", "before", "run", "breakdown", "tool", "automation", "steps", "pre-run", "workflow", "ui-ux", "pre-execution", "proposed", "multi-step", "tools", "data", "access", "expected", "outputs", "agents", "perform", "work", "side", "effects", "but", "often", "see", "summary", "prompt", "response", "leaving", "them", "unable", "inspect", "correct", "unsafe", "understand" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/agent-plan-preview.md", "json": "https://uxpatternsguide.com/agent/patterns/agent-plan-preview.json", "human": "https://uxpatternsguide.com/patterns/agent-plan-preview/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/agent-plan-preview-vs-task-list-vs-recommended-next-action-vs-human-approval-gate-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/agent-progress-trace-vs-agent-plan-preview-vs-streaming-response-vs-activity-log-vs-progress-bar-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/scope-clarification-vs-prompt-box-vs-search-scope-selector-vs-agent-plan-preview-vs-human-approval-gate-vs-chat-interface.md" ] }, { "id": "agent-progress-trace", "name": "Agent progress trace", "aliases": [ "AI agent run trace", "agent run progress", "agent execution trace", "automation run trace", "agent step trace", "AI workflow trace", "agent activity trace", "live agent run timeline", "agent progress log", "run execution timeline" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Live execution trace for an AI agent or automation run after work has started", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI agents and automations can run several steps, tools, approvals, retries, and side effects after a user starts work, but ordinary spinners, progress bars, generated responses, and audit logs often fail to show the live run state users need to monitor, interrupt, or trust the process.", "useWhen": "An agent or automation run has started and spans multiple steps, tools, gates, or side effects.", "avoidWhen": "Execution has not started and users need to inspect or edit a proposed plan.", "requiredStates": [ "Run started state tied to run ID, plan version, objective, and user who started the run.", "Queued, active, completed, skipped, waiting, blocked, retrying, failed, cancelled, and completed run states.", "Current step state with label, purpose, owner, elapsed time, and last event time.", "Tool call pending, tool call running, tool call succeeded, tool call failed, and tool detail available states." ], "commonMisuses": [ "Using one spinner or vague Thinking label for a multi-step agent run.", "Showing a progress bar percentage when the run has no honest measurable total.", "Dumping raw tool logs instead of a user-readable run trace.", "Calling a pre-run plan preview a progress trace before any work has started." ], "keywords": [ "agent", "progress", "trace", "run", "execution", "automation", "step", "workflow", "activity", "live", "timeline", "log", "ui-ux", "after", "work", "started", "agents", "automations", "several", "steps", "tools", "approvals", "retries", "side", "effects", "starts", "but", "ordinary", "spinners", "bars", "generated", "responses", "audit", "logs", "often", "fail", "show", "state", "need", "monitor" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/agent-progress-trace.md", "json": "https://uxpatternsguide.com/agent/patterns/agent-progress-trace.json", "human": "https://uxpatternsguide.com/patterns/agent-progress-trace/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/agent-progress-trace-vs-agent-plan-preview-vs-streaming-response-vs-activity-log-vs-progress-bar-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/tool-use-visibility-vs-agent-progress-trace-vs-source-grounding-display-vs-citation-display-vs-activity-log-vs-human-approval-gate.md" ] }, { "id": "ai-agent-acts-without-approval", "name": "AI agent acts without approval", "aliases": [ "agent executes without approval", "unauthorized AI agent action", "AI agent bypasses approval", "agent side effect without consent", "automation acts without human approval", "AI tool call without authorization", "agent commits before review" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Anti-pattern for agentic side effects executed before human authorization", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI agents can execute real-world side effects before users understand or authorize them, especially when plan previews, progress traces, chat messages, or notifications blur proposed actions with completed actions.", "useWhen": "An AI agent or automation can create side effects that affect customers, money, access, production systems, legal status, public content, sensitive data, or external recipients.", "avoidWhen": "The agent can only perform read-only retrieval and cannot affect external systems or user-visible state.", "requiredStates": [ "Read-only step allowed state with no external side effect.", "Approval required before side effect state.", "Payload preview state with target, action, tool, data, cost, recipients, environment, or access scope.", "Eligible approver and self-review blocked state." ], "commonMisuses": [ "Treating Run agent as permission to execute every hidden side-effect step.", "Sending a customer message or issuing a refund while the UI still says the agent is drafting.", "Showing an approval card after the tool already executed.", "Letting the requester approve their own high-impact automation step." ], "keywords": [ "agent", "acts", "without", "approval", "executes", "unauthorized", "action", "bypasses", "side", "effect", "consent", "automation", "human", "tool", "call", "authorization", "commits", "before", "review", "ui-ux", "anti-pattern", "agentic", "effects", "executed", "agents", "execute", "real-world", "understand", "authorize", "them", "especially", "plan", "previews", "progress", "traces", "chat", "messages", "notifications", "blur", "proposed" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/ai-agent-acts-without-approval.md", "json": "https://uxpatternsguide.com/agent/patterns/ai-agent-acts-without-approval.json", "human": "https://uxpatternsguide.com/patterns/ai-agent-acts-without-approval/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md" ] }, { "id": "ai-answer-without-sources", "name": "AI answer without sources", "aliases": [ "unsourced AI answer", "uncited generated answer", "AI answer with no evidence", "source-free answer", "unverifiable AI answer", "AI answer without citations", "unsupported generated claim" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Unsourced AI answer anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Users receive a confident-looking AI answer that includes factual claims or recommendations but no usable source, source scope, retrieval status, unsupported-claim label, or verification path.", "useWhen": "A generated answer makes source-dependent claims but no source route is visible.", "avoidWhen": "The answer is explicitly creative, brainstorming, stylistic, or personal drafting and does not claim factual support.", "requiredStates": [ "Sourced answer state with citations or grounding visible.", "Not searched state where retrieval was not run and the answer is labelled accordingly.", "No supporting source found state with unsupported claims separated from answer text.", "Retrieval failed state with retry source search path." ], "commonMisuses": [ "Showing a polished answer with no citations or grounding after the user asked for a policy-backed answer.", "Adding a generic disclaimer while still letting users copy or send the unsourced answer as if it were verified.", "Hiding retrieval failure and returning an answer from model memory.", "Showing related links below the answer without saying they were not used as evidence." ], "keywords": [ "answer", "without", "sources", "unsourced", "uncited", "generated", "evidence", "source-free", "unverifiable", "citations", "unsupported", "claim", "automation", "ui-ux", "anti-pattern", "receive", "confident-looking", "includes", "factual", "claims", "recommendations", "but", "usable", "source", "scope", "retrieval", "status", "unsupported-claim", "label", "verification", "path", "treat", "answers", "evidence-dependent", "tasks", "show", "grounding", "was", "used", "searched" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/ai-answer-without-sources.md", "json": "https://uxpatternsguide.com/agent/patterns/ai-answer-without-sources.json", "human": "https://uxpatternsguide.com/patterns/ai-answer-without-sources/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ai-answer-without-sources-vs-source-grounding-display-vs-citation-display-vs-confidence-uncertainty-display-vs-streaming-response-vs-correction-feedback.md" ] }, { "id": "ai-confidence-shown-as-fake-precision", "name": "AI confidence shown as fake precision", "aliases": [ "fake AI confidence percentage", "uncalibrated confidence score", "false precision confidence", "over-precise AI score", "AI probability theater", "exact model certainty", "spurious confidence decimal" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Anti-pattern for uncalibrated or over-exact AI confidence displays", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Users over-trust AI output when the interface presents raw, uncalibrated, stale, or out-of-scope model scores as exact confidence percentages, decimals, probabilities, or certainty levels.", "useWhen": "An AI product displays model certainty, extraction confidence, recommendation score, classifier probability, generated-answer confidence, retrieval rank, or risk score with precision the system cannot justify.", "avoidWhen": "The value is a validated, calibrated confidence range shown with scope, threshold, reason, and review behavior; use confidence / uncertainty display instead.", "requiredStates": [ "Raw score hidden state where an internal score is withheld from the user-facing decision.", "Calibration unavailable state with qualitative reliability label and review path.", "Calibrated range state with task scope, review threshold, and caveat.", "Insufficient evidence state where no numeric confidence is shown because required inputs are missing." ], "commonMisuses": [ "Formatting an uncalibrated model score as 97.42 percent sure.", "Showing 0.873 certainty without saying it is a raw rank, similarity, or heuristic score.", "Using a confidence meter or color band to imply correctness without threshold, calibration, or explanation.", "Keeping old confidence after the user edits input, changes source scope, or the model updates." ], "keywords": [ "confidence", "shown", "fake", "precision", "percentage", "uncalibrated", "score", "false", "over-precise", "probability", "theater", "exact", "model", "certainty", "spurious", "decimal", "automation", "ui-ux", "anti-pattern", "over-exact", "displays", "over-trust", "output", "interface", "presents", "raw", "stale", "out-of-scope", "scores", "percentages", "decimals", "probabilities", "levels", "treat", "remove", "misleading", "exactness", "disclose", "calibration", "status" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/ai-confidence-shown-as-fake-precision.md", "json": "https://uxpatternsguide.com/agent/patterns/ai-confidence-shown-as-fake-precision.json", "human": "https://uxpatternsguide.com/patterns/ai-confidence-shown-as-fake-precision/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ai-confidence-shown-as-fake-precision-vs-confidence-uncertainty-display-vs-meter-vs-source-grounding-display-vs-warning-text-vs-human-approval-gate.md" ] }, { "id": "ai-limitation-onboarding", "name": "AI limitation onboarding", "aliases": [ "AI capability onboarding", "AI limitations onboarding", "AI expectation setting", "AI trust calibration onboarding", "AI first-use disclosure", "AI capability disclosure", "AI boundary onboarding", "AI safe-start guidance", "AI mental model onboarding", "AI transparency onboarding" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "First-use or new-feature onboarding that teaches AI capabilities, limits, uncertainty, user control, and recovery paths", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Users may form fragile mental models of AI features, over-trust confident output, under-trust useful assistance, expect human-like understanding, disclose too much, or abandon the feature after failures when limits are not explained early.", "useWhen": "A user is introduced to an AI feature whose abilities, limits, data scope, uncertainty, or review needs are not obvious from the normal interface.", "avoidWhen": "The product only needs standard setup, account orientation, or a first-value path unrelated to AI capability limits.", "requiredStates": [ "First-run welcome state with user benefit, AI role, and plain-language capability boundary.", "Can do and cannot do state with examples matched to the user's task.", "Data scope state showing included sources, excluded sources, permission limits, and stale data risk.", "Uncertainty state explaining low confidence, missing data, unsupported input, and when output may be wrong." ], "commonMisuses": [ "Using charming human-like copy that implies broad expertise while hiding actual AI limits.", "Showing a one-time disclaimer that users dismiss before they understand what changes in the task.", "Listing broad safety policy text without task-specific examples, safe trial, feedback, or fallback.", "Treating confidence scores, citations, or model names as a replacement for explaining capability boundaries." ], "keywords": [ "limitation", "onboarding", "capability", "limitations", "expectation", "setting", "trust", "calibration", "first-use", "disclosure", "boundary", "safe-start", "guidance", "mental", "model", "transparency", "automation", "ui-ux", "new-feature", "teaches", "capabilities", "limits", "uncertainty", "control", "recovery", "paths", "may", "form", "fragile", "models", "features", "over-trust", "confident", "output", "under-trust", "useful", "assistance", "expect", "human-like", "understanding" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/ai-limitation-onboarding.md", "json": "https://uxpatternsguide.com/agent/patterns/ai-limitation-onboarding.json", "human": "https://uxpatternsguide.com/patterns/ai-limitation-onboarding/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md" ] }, { "id": "ai-output-audit-trail", "name": "AI output audit trail", "aliases": [ "AI answer audit trail", "AI response audit trail", "LLM output audit", "generated output audit log", "prompt response audit trail", "AI provenance log", "AI output history", "AI evidence trail", "AI interaction audit", "AI answer lineage" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Inspectable record of generated AI output, prompt context, model, sources, tools, user actions, versions, and downstream use", "maturity": "emerging", "platforms": [ "web", "desktop", "mobile", "ai" ], "problem": "Generated AI outputs can influence customer communication, approvals, code, policy, security investigations, and business decisions, but without a durable output-level trail teams cannot prove prompt context, source use, model behavior, edits, approvals, or downstream use.", "useWhen": "A generated AI output can influence compliance, customer communication, security, legal, finance, operations, code, policy, or other high-trust work.", "avoidWhen": "Users only need to read the current answer and inspect citations in the moment.", "requiredStates": [ "Generated output state with response ID, timestamp, user, conversation or thread ID, and model version.", "Prompt snapshot state showing the user prompt, system or instruction reference, selected context, and redaction status.", "Response snapshot state preserving the generated content exactly as returned before edits.", "Source snapshot state showing searched, retrieved, used, unavailable, stale, and permission-limited sources as of generation time." ], "commonMisuses": [ "Calling a chat transcript an audit trail when it does not preserve source, tool, model, action, approval, or version evidence.", "Linking to current sources instead of the source snapshot used when the answer was generated.", "Overwriting prior answers during regeneration or edit flows.", "Showing raw sensitive prompt, response, or tool payload data to users without matching permissions." ], "keywords": [ "output", "audit", "trail", "answer", "response", "llm", "generated", "log", "prompt", "provenance", "history", "evidence", "interaction", "lineage", "automation", "ui-ux", "inspectable", "record", "context", "model", "sources", "tools", "actions", "versions", "downstream", "outputs", "influence", "customer", "communication", "approvals", "code", "policy", "security", "investigations", "business", "decisions", "but", "without", "durable", "output-level" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/ai-output-audit-trail.md", "json": "https://uxpatternsguide.com/agent/patterns/ai-output-audit-trail.json", "human": "https://uxpatternsguide.com/patterns/ai-output-audit-trail/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/audit-log-vs-activity-log-vs-ai-output-audit-trail-vs-version-history-vs-notification-center.md" ] }, { "id": "alert", "name": "Alert", "aliases": [ "status alert", "system alert", "warning alert", "error alert", "urgent notice" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Urgent current-task status message", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need immediate notice of a time-sensitive task condition, but moving focus into a dialog or hiding the message in a transient notification would either over-interrupt the task or make the condition too easy to miss.", "useWhen": "A current task has a time-sensitive warning, error, or important status change.", "avoidWhen": "The message belongs beside one object, row, field, or local section.", "requiredStates": [ "No-alert state with the task operating normally.", "Urgent warning or error alert that appears dynamically and is announced without taking focus.", "Advisory or success state that uses calmer status semantics rather than assertive alert semantics.", "Actionable alert with one direct next step such as Save draft, Renew session, Retry sync, or Update payment." ], "commonMisuses": [ "Using a disappearing toast for warnings users must act on before continuing.", "Using a modal dialog for a message that only needs immediate notice and one optional next step.", "Using alert semantics for routine success messages, progress ticks, or page-load content.", "Putting product-wide maintenance or outage messages inside one task alert." ], "keywords": [ "alert", "status", "system", "warning", "error", "urgent", "notice", "feedback", "state", "ui-ux", "current-task", "message", "need", "immediate", "time-sensitive", "task", "condition", "but", "moving", "focus", "dialog", "hiding", "transient", "notification", "would", "either", "over-interrupt", "make", "too", "easy", "miss", "show", "concise", "persistent", "current", "context", "choose", "urgency", "semantics", "consequence" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/alert.md", "json": "https://uxpatternsguide.com/agent/patterns/alert.json", "human": "https://uxpatternsguide.com/patterns/alert/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/alert-dialog-vs-alert-vs-modal-dialog-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/alert-vs-inline-message-vs-toast-notification-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/banner-vs-alert-vs-inline-message-vs-toast-notification.md", "https://uxpatternsguide.com/agent/comparisons/notification-banner-vs-banner-vs-alert-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/notification-center-vs-toast-notification-vs-alert-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/security-warning-vs-warning-text-vs-alert-vs-permission-denied-state-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/site-alert-vs-banner-vs-notification-banner-vs-alert.md", "https://uxpatternsguide.com/agent/comparisons/success-confirmation-vs-toast-notification-vs-notification-banner-vs-alert.md", "https://uxpatternsguide.com/agent/comparisons/summary-box-vs-alert-vs-warning-text-vs-disclosure-details.md", "https://uxpatternsguide.com/agent/comparisons/warning-text-vs-alert-vs-inline-message-vs-error-summary.md" ] }, { "id": "alert-dialog", "name": "Alert dialog", "aliases": [ "alertdialog", "message dialog", "urgent modal alert", "blocking alert", "response-required alert" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Blocking urgent-response modal", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Some urgent conditions require users to read a message and choose a response before they can safely continue the current workflow.", "useWhen": "An urgent current-workflow condition requires acknowledgement, cancellation, retry, sign-out, review, or another explicit response before continuation.", "avoidWhen": "The message is urgent but users can keep working safely after seeing it.", "requiredStates": [ "Normal workflow state with a visible invoking event or system condition.", "Opening state that moves focus into the alert dialog and marks background content inactive.", "Urgent message state with accessible title, associated description, consequence copy, and response-labelled actions.", "Contained keyboard state where Tab and Shift+Tab stay within the dialog until it closes." ], "commonMisuses": [ "Using an alert dialog as a dramatic version of a routine non-modal alert.", "Showing a vague Warning dialog with only OK and no consequence or next step.", "Letting users interact with background controls while the response-required message is visible.", "Opening the dialog automatically on every page load for content that can be shown inline." ], "keywords": [ "alert", "dialog", "alertdialog", "message", "urgent", "modal", "blocking", "response-required", "disclosure", "attention", "management", "ui-ux", "urgent-response", "some", "conditions", "require", "read", "choose", "response", "before", "they", "safely", "continue", "current", "workflow", "open", "specific", "title", "consequence-focused", "description", "contained", "focus", "inactive", "background", "content", "response-labelled", "actions", "predictable", "cancellation", "return" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/alert-dialog.md", "json": "https://uxpatternsguide.com/agent/patterns/alert-dialog.json", "human": "https://uxpatternsguide.com/patterns/alert-dialog/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/alert-dialog-vs-alert-vs-modal-dialog-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/sheet-vs-drawer-vs-modal-dialog-vs-alert-dialog.md" ] }, { "id": "ambiguous-destructive-action-copy", "name": "Ambiguous destructive action copy", "aliases": [ "vague destructive copy", "ambiguous delete labels", "unclear destructive button", "OK delete", "yes no delete prompt", "ambiguous cancel copy", "unclear dangerous action label" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Destructive copy anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can commit destructive or high-consequence actions because the final labels do not say the real outcome, target, scope, or safe alternative.", "useWhen": "Auditing destructive dialogs, action sheets, menu items, command palette actions, delete receipts, account cancellation flows, permission revocation, bulk actions, and high-impact execution reviews.", "avoidWhen": "The issue is not copy ambiguity but missing loss inventory, dependency blocking, or acknowledgement; use destructive action confirmation.", "requiredStates": [ "Clear destructive title state with verb, target, and consequence.", "Clear final action state with destructive verb plus target or count.", "Clear safe action state that names the preserved outcome.", "Ambiguous Cancel state where cancel could mean cancel dialog or cancel service." ], "commonMisuses": [ "A delete prompt uses OK and Cancel without naming what OK will delete.", "A subscription flow has a Cancel button that could mean close the dialog or cancel the subscription.", "A permission dialog uses Remove without saying whether access is revoked or the person is deleted from the workspace.", "A dangerous agent tool review uses Continue for both the next review step and actual execution." ], "keywords": [ "ambiguous", "destructive", "action", "copy", "vague", "delete", "labels", "unclear", "button", "yes", "prompt", "cancel", "dangerous", "label", "error", "prevention", "recovery", "ui-ux", "anti-pattern", "commit", "high-consequence", "actions", "because", "final", "say", "real", "outcome", "target", "scope", "safe", "alternative", "treat", "rewrite", "titles", "primary", "secondary", "status", "each", "control", "names" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/ambiguous-destructive-action-copy.md", "json": "https://uxpatternsguide.com/agent/patterns/ambiguous-destructive-action-copy.json", "human": "https://uxpatternsguide.com/patterns/ambiguous-destructive-action-copy/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ambiguous-destructive-action-copy-vs-destructive-action-confirmation-vs-typed-confirmation-vs-dangerous-action-review-vs-confirmation-fatigue-vs-warning-text.md" ] }, { "id": "approval-workflow", "name": "Approval workflow", "aliases": [ "approval flow", "request approval", "approval process", "approval gate", "manual approval", "approver workflow", "multi-stage approval", "sequential approval", "parallel approval", "approval request" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Routed decision workflow for requests that require authorized approval", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "High-impact work stalls or proceeds unsafely when products hide who must approve, which rule applies, whether approval is sequential or parallel, what approvers are deciding, how rejection or changes return to the requester, and how the final decision is audited.", "useWhen": "A submitted request needs authorized approval before a deployment, purchase, access grant, publication, content change, policy exception, financial action, or workflow step can proceed.", "avoidWhen": "The user only needs to check their own answers before submission.", "requiredStates": [ "Draft or submit-ready request handoff state", "Submitted and awaiting route calculation state", "Pending approver state with current owner or group", "Approver decision state with Approve, Reject, and comment controls" ], "commonMisuses": [ "Showing a generic pending message without the approver, gate, rule, or due date.", "Treating the first approval as final when the rule requires more approvers.", "Letting requesters approve their own protected work without an explicit bypass rule.", "Collecting Approve or Reject without showing the current request version or impact." ], "keywords": [ "approval", "workflow", "flow", "request", "process", "gate", "manual", "approver", "multi-stage", "sequential", "parallel", "task", "patterns", "ui-ux", "routed", "decision", "requests", "require", "authorized", "high-impact", "work", "stalls", "proceeds", "unsafely", "products", "hide", "who", "approve", "which", "rule", "applies", "whether", "what", "approvers", "deciding", "how", "rejection", "changes", "return", "requester" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/approval-workflow.md", "json": "https://uxpatternsguide.com/agent/patterns/approval-workflow.json", "human": "https://uxpatternsguide.com/patterns/approval-workflow/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/approval-workflow-vs-review-before-submit-vs-permission-recovery-vs-invite-user.md", "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/automation-rule-builder-vs-human-approval-gate-vs-approval-workflow-vs-settings-management-vs-complete-complex-form-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/human-approval-gate-vs-approval-workflow-vs-review-queue-vs-review-before-submit-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/publish-workflow-vs-approval-workflow-vs-review-queue-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/review-queue-vs-approval-workflow-vs-saved-filter-vs-activity-log.md" ] }, { "id": "assignment", "name": "Assignment", "aliases": [ "assign owner", "assignee field", "assign task", "reassign task", "work owner", "owner picker", "responsible person", "task assignee", "issue assignee", "assign to me", "unassigned work" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Responsibility control for assigning a work item to eligible people, teams, roles, bots, or no owner", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Work loses accountability when products blur assignee, owner, reviewer, approver, watcher, mention, collaborator, and permission roles, or when assignment changes hide eligibility, notification, workload, unassigned, bulk, and reassignment consequences.", "useWhen": "A user must set, change, or clear who is accountable for a work item.", "avoidWhen": "The user only needs to mention or notify someone in conversation.", "requiredStates": [ "Unassigned item state.", "Assigned to one person state.", "Assigned to multiple people state where product policy allows it.", "Assigned to team, role, bot, or automatic default owner state." ], "commonMisuses": [ "Treating a mention as an assignment.", "Using assignment as an access grant without explaining permission changes.", "Hiding whether the product supports one assignee or many.", "Mixing assignee, reviewer, approver, owner, watcher, and collaborator in one unlabeled people list." ], "keywords": [ "assignment", "assign", "owner", "assignee", "field", "task", "reassign", "work", "picker", "responsible", "person", "issue", "unassigned", "workflow", "patterns", "ui-ux", "responsibility", "control", "assigning", "item", "eligible", "people", "teams", "roles", "bots", "loses", "accountability", "products", "blur", "reviewer", "approver", "watcher", "mention", "collaborator", "permission", "changes", "hide", "eligibility", "notification", "workload" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/assignment.md", "json": "https://uxpatternsguide.com/agent/patterns/assignment.json", "human": "https://uxpatternsguide.com/patterns/assignment/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md" ] }, { "id": "audit-log", "name": "Audit log", "aliases": [ "compliance audit log", "security audit log", "admin audit log", "enterprise audit log", "governance audit log", "audit evidence log", "immutable event log", "audit record search" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Governed audit evidence surface for security, compliance, forensic, and administrative review", "maturity": "established", "platforms": [ "web", "desktop", "mobile", "ai" ], "problem": "Audit-log surfaces fail when they look like ordinary activity histories, hide retention and access boundaries, omit stable evidence fields, allow privileged deletion, or export records that do not match the reviewed scope.", "useWhen": "The product must support security investigations, compliance review, legal discovery, privileged-action review, or enterprise governance.", "avoidWhen": "Users only need recent collaboration updates or a lightweight activity feed.", "requiredStates": [ "Default audit-log search state with visible query, result count, scope, timezone, retention class, and evidence coverage.", "Privileged action record with audit ID, actor session or API key, target object, before and after values, result, and source IP.", "Restricted administrator scope state with hidden or redacted counts and reason.", "Retention policy state showing default, extended, legal hold, expired, and archive-needed boundaries." ], "commonMisuses": [ "Rebranding a recent-activity feed as an audit log without retention, custody, or governed evidence fields.", "Omitting audit ID, actor type, effective time, result, scope, retention, or source system from the visible record.", "Letting privileged users edit, delete, dismiss, or mark audit evidence read without policy and self-auditing.", "Hiding restricted-scope or redacted records so reviewers think no event happened." ], "keywords": [ "audit", "log", "compliance", "security", "admin", "enterprise", "governance", "evidence", "immutable", "event", "record", "search", "trust", "safety", "privacy", "ui-ux", "governed", "surface", "forensic", "administrative", "review", "audit-log", "surfaces", "fail", "they", "look", "like", "ordinary", "activity", "histories", "hide", "retention", "access", "boundaries", "omit", "stable", "fields", "allow", "privileged", "deletion" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/audit-log.md", "json": "https://uxpatternsguide.com/agent/patterns/audit-log.json", "human": "https://uxpatternsguide.com/patterns/audit-log/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/audit-log-vs-activity-log-vs-ai-output-audit-trail-vs-version-history-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/data-export-vs-bulk-import-vs-audit-log-vs-table-vs-sensitive-data-reveal.md" ] }, { "id": "autocomplete", "name": "Autocomplete", "aliases": [ "known-value autocomplete", "combobox autocomplete" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Input widget with suggestion behavior", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to enter a known value quickly without memorizing exact spelling, codes, or names.", "useWhen": "The list is long but values are known.", "avoidWhen": "The task is open-ended query exploration.", "requiredStates": [ "Empty input state.", "Suggestion popup state.", "Highlighted option state.", "Selected value state." ], "commonMisuses": [ "Forcing the first suggestion when the user did not choose it.", "Using autocomplete where users expect broad search results.", "Showing identical labels without disambiguating context." ], "keywords": [ "autocomplete", "known-value", "combobox", "input", "data", "entry", "ui-ux", "widget", "suggestion", "behavior", "need", "enter", "known", "value", "quickly", "without", "memorizing", "exact", "spelling", "codes", "names", "let", "type", "choose", "matching", "values", "while", "keeping", "typed", "visible", "editable", "render", "labeled", "text", "field", "popup", "highlighted", "option", "selected", "no-match" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/autocomplete.md", "json": "https://uxpatternsguide.com/agent/patterns/autocomplete.json", "human": "https://uxpatternsguide.com/patterns/autocomplete/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/address-entry-vs-text-input-vs-autocomplete-vs-dependent-fields.md", "https://uxpatternsguide.com/agent/comparisons/combobox-vs-autocomplete-vs-select-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/inaccessible-custom-select-vs-select-vs-autocomplete-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/input-mask-vs-text-input-vs-inline-validation-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/name-entry-vs-text-input-vs-autocomplete-vs-select-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/object-picker-vs-combobox-vs-autocomplete-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/query-correction-vs-search-suggestions-vs-no-results-recovery-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/search-suggestions-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/text-input-vs-autocomplete-vs-select-vs-radio-group.md", "https://uxpatternsguide.com/agent/comparisons/typeahead-vs-autocomplete-vs-search-suggestions-vs-basic-search.md" ] }, { "id": "automation-rule-builder", "name": "Automation rule builder", "aliases": [ "rule builder", "automation builder", "if this then that builder", "trigger condition action builder", "workflow rule builder", "business rule builder", "no-code automation builder", "conditional automation editor", "flow rule builder", "event rule builder" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Rule authoring surface for defining event triggers, conditions, actions, tests, activation, and runtime safeguards", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Automation rules can create repeated side effects long after authoring, but builder UIs often hide trigger scope, condition logic, action targets, permissions, test evidence, activation state, conflicts, and runtime safeguards.", "useWhen": "Users need to create or edit automations that run later based on events, conditions, schedules, or record changes.", "avoidWhen": "The user only needs to approve one currently paused automation step.", "requiredStates": [ "Empty draft state with rule name, trigger picker, condition builder, action picker, owner, and disabled activation.", "Trigger selected state showing event source, scope, supported fields, repeat behavior, and sample event payload.", "Condition builder state with groups, AND/OR logic, operators, field types, null handling, and plain-language summary.", "Action configured state showing target, payload, recipients, permission requirement, side effects, and rollback or undo availability." ], "commonMisuses": [ "Treating a natural-language automation prompt as complete without showing parsed trigger, conditions, and actions.", "Activating a rule immediately after save without a separate enabled state or preview.", "Hiding which existing records or future events will match the rule.", "Using one broad settings toggle for behavior that needs trigger, condition, action, and scope review." ], "keywords": [ "automation", "rule", "builder", "trigger", "condition", "action", "workflow", "business", "no-code", "conditional", "editor", "flow", "event", "ui-ux", "authoring", "surface", "defining", "triggers", "conditions", "actions", "tests", "activation", "runtime", "safeguards", "rules", "create", "repeated", "side", "effects", "long", "after", "but", "uis", "often", "hide", "scope", "logic", "targets", "permissions", "test" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/automation-rule-builder.md", "json": "https://uxpatternsguide.com/agent/patterns/automation-rule-builder.json", "human": "https://uxpatternsguide.com/patterns/automation-rule-builder/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/automation-rule-builder-vs-human-approval-gate-vs-approval-workflow-vs-settings-management-vs-complete-complex-form-vs-recommended-next-action.md" ] }, { "id": "autosave-form", "name": "Autosave form", "aliases": [ "auto-save form", "autosaving form", "background save form", "autosaved draft form", "save as you go form", "automatic progress save" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Background-saving form progress", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Long or interruption-prone forms lose trust when users cannot tell whether their latest progress is pending, saved, failed, recoverable, or merely stored as a draft awaiting final submission.", "useWhen": "Users spend meaningful time entering form content or application progress.", "avoidWhen": "The form is short enough that a visible manual Save or Submit is clearer.", "requiredStates": [ "Initial state that explains progress will be saved automatically.", "Clean saved state with timestamp or recent-saved wording.", "Dirty pending state after a field changes but before the autosave request starts.", "Saving state with visible background activity." ], "commonMisuses": [ "Removing the Save button while providing no autosave status.", "Showing Saved when only an older change was saved.", "Autosaving sensitive, destructive, financial, password, or permission changes without explicit review.", "Auto-saving the whole form label when validation or persistence is actually field-specific." ], "keywords": [ "autosave", "form", "auto-save", "autosaving", "background", "save", "autosaved", "draft", "you", "automatic", "progress", "input", "data", "entry", "ui-ux", "background-saving", "long", "interruption-prone", "forms", "lose", "trust", "cannot", "tell", "whether", "their", "latest", "pending", "saved", "failed", "recoverable", "merely", "stored", "awaiting", "final", "submission", "persist", "safe", "changes", "automatically", "visible" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/autosave-form.md", "json": "https://uxpatternsguide.com/agent/patterns/autosave-form.json", "human": "https://uxpatternsguide.com/patterns/autosave-form/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/autosave-form-vs-single-page-form-vs-multi-step-form-vs-inline-edit.md", "https://uxpatternsguide.com/agent/comparisons/autosave-recovery-vs-autosave-form-vs-draft-state-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/draft-state-vs-autosave-form-vs-inline-edit-vs-complete-complex-form.md", "https://uxpatternsguide.com/agent/comparisons/exit-warning-vs-autosave-form-vs-draft-state-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-warning-vs-exit-warning-vs-autosave-form-vs-permission-denied-state.md", "https://uxpatternsguide.com/agent/comparisons/unsaved-changes-prompt-vs-exit-warning-vs-autosave-form-vs-confirmation-dialog.md" ] }, { "id": "autosave-recovery", "name": "Autosave recovery", "aliases": [ "failed autosave recovery", "autosave failure recovery", "recover unsaved autosave", "restore local autosave", "autosave conflict recovery", "save recovery panel", "local draft recovery" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Recovery surface for failed or uncertain background saves", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Autosave can fail, stall, expire, conflict, or remain local-only while the interface still suggests progress is safe, causing users to lose text, submit stale data, overwrite versions, or distrust saved-state messaging.", "useWhen": "Autosave failed, stalled, expired, or became uncertain while users still have meaningful local work.", "avoidWhen": "The product does not use autosave or local draft persistence.", "requiredStates": [ "Clean saved state with current server timestamp.", "Dirty or pending local state waiting for autosave.", "Failed autosave state with affected field or section named.", "Local-only saved-on-this-device state." ], "commonMisuses": [ "Leaving a green Saved label visible after a failed or stale autosave.", "Showing only a disappearing toast for work that may be lost.", "Retrying a save after clearing the local value.", "Letting users submit an older server version while the newest local answer failed." ], "keywords": [ "autosave", "recovery", "failed", "failure", "recover", "unsaved", "restore", "local", "conflict", "save", "panel", "draft", "error", "prevention", "ui-ux", "surface", "uncertain", "background", "saves", "fail", "stall", "expire", "remain", "local-only", "while", "interface", "still", "suggests", "progress", "safe", "causing", "lose", "text", "submit", "stale", "data", "overwrite", "versions", "distrust", "saved-state" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/autosave-recovery.md", "json": "https://uxpatternsguide.com/agent/patterns/autosave-recovery.json", "human": "https://uxpatternsguide.com/patterns/autosave-recovery/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/autosave-recovery-vs-autosave-form-vs-draft-state-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/conflict-resolution-vs-conflict-state-vs-review-before-submit-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/fake-undo-vs-undo-vs-toast-notification-vs-restore-from-trash-vs-destructive-action-confirmation-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-vs-session-timeout-warning-vs-sign-in-vs-permission-denied-state-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/validation-that-clears-user-input-vs-inline-validation-vs-error-summary-vs-single-page-form-vs-autosave-recovery-vs-error-state.md" ] }, { "id": "back-link", "name": "Back link", "aliases": [ "back control", "transaction back link", "previous page link", "go back link", "back to previous step" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Single previous-page return link for a transaction", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users in a multi-page transaction need an explicit, predictable way to return to the previous service page without losing progress or interpreting hierarchy navigation.", "useWhen": "A multi-page transaction or form asks users one thing per page.", "avoidWhen": "The page is an informational content page with a stable hierarchy.", "requiredStates": [ "Default transaction page with one Back link before main content.", "Previous-page restored state with valid entered values pre-populated.", "Complex journey state with target-specific back text.", "No safe previous page or no-JavaScript state where the control is hidden or uses a safe route." ], "commonMisuses": [ "Using Back as a breadcrumb or parent-category link.", "Combining Back links with breadcrumbs on the same transaction page.", "Putting Back next to Continue so it looks like a secondary form action.", "Calling browser history when the previous page might be outside the service." ], "keywords": [ "back", "link", "control", "transaction", "previous", "page", "step", "navigation", "wayfinding", "ui-ux", "single", "previous-page", "return", "multi-page", "need", "explicit", "predictable", "way", "service", "without", "losing", "progress", "interpreting", "hierarchy", "provide", "one", "top", "pages", "returns", "its", "last-seen", "state", "clear", "target", "text", "journey", "complex", "safe", "fallback", "behavior" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/back-link.md", "json": "https://uxpatternsguide.com/agent/patterns/back-link.json", "human": "https://uxpatternsguide.com/patterns/back-link/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/back-link-vs-breadcrumbs-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/exit-this-page-quickly-vs-security-warning-vs-sensitive-data-reveal-vs-session-timeout-vs-privacy-settings-vs-back-link.md", "https://uxpatternsguide.com/agent/comparisons/skip-link-vs-in-page-anchor-navigation-vs-back-link.md", "https://uxpatternsguide.com/agent/comparisons/step-navigation-vs-back-link-vs-pagination.md" ] }, { "id": "bank-details", "name": "Bank details", "aliases": [ "bank account details", "bank or building society details", "account details", "ACH bank account entry", "direct debit account details", "payout account details", "sort code and account number" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Secure bank account identification and verification form", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Bank account details are high-consequence, easy to mistype, and region-specific, so generic fields, silent formatting, or unverified collection can misdirect money or expose sensitive information.", "useWhen": "The product needs bank account details to send money, collect money, set up payroll, save payout details, issue refunds, or initiate bank-to-bank payments.", "avoidWhen": "The task is to collect payment card credentials rather than bank account identifiers.", "requiredStates": [ "Initial secure collection state with purpose, account holder name, routing field, account number, optional roll number or regional equivalent, and hints.", "Focused entry state with persistent labels and widths that match expected identifier lengths.", "Pasted value state where spaces, hyphens, and line breaks are normalized without losing digits.", "Missing account holder name error state." ], "commonMisuses": [ "Using one freeform field for all account details.", "Collecting bank details by email or uploaded statement when a structured secure form is available.", "Asking users to identify whether their account is a bank or building society account.", "Making building society roll number required for everyone." ], "keywords": [ "bank", "details", "account", "building", "society", "ach", "entry", "direct", "debit", "payout", "sort", "code", "number", "input", "data", "ui-ux", "secure", "identification", "verification", "form", "high-consequence", "easy", "mistype", "region-specific", "generic", "fields", "silent", "formatting", "unverified", "collection", "misdirect", "money", "expose", "sensitive", "information", "collect", "parts", "grouped", "validate", "each" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/bank-details.md", "json": "https://uxpatternsguide.com/agent/patterns/bank-details.json", "human": "https://uxpatternsguide.com/patterns/bank-details/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/bank-details-vs-text-input-vs-input-mask-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/payment-card-entry-vs-bank-details-vs-input-mask-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/payment-collection-vs-checkout-vs-payment-card-entry-vs-bank-details.md" ] }, { "id": "banner", "name": "Banner", "aliases": [ "top banner", "system banner", "product banner", "service banner", "announcement banner" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Top-of-interface broad-scope message", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to know broad product, service, account, section, or trust information before interpreting several related pages, but task-local messages, toasts, or dialogs would either detach the message from scope or over-interrupt work.", "useWhen": "The message applies across several pages, routes, sections, records, or sessions.", "avoidWhen": "The message affects only one field, object, row, panel, or local task section.", "requiredStates": [ "No-banner state when no broad-scope message applies.", "Informational product or service banner at the top of the related interface.", "Warning or error-tone banner for broad service impact that does not block the current task.", "Official identity or trust banner that stays consistent across every page in its scope." ], "commonMisuses": [ "Using a banner for one field error, one row warning, or one card status.", "Stacking several unrelated banners above the page content.", "Making a banner sticky so it covers navigation, headings, form actions, or reading content.", "Using a banner for a current-task emergency that needs an alert or blocking recovery." ], "keywords": [ "banner", "top", "system", "product", "service", "announcement", "feedback", "status", "state", "ui-ux", "top-of-interface", "broad-scope", "message", "need", "know", "broad", "account", "section", "trust", "information", "before", "interpreting", "several", "related", "pages", "but", "task-local", "messages", "toasts", "dialogs", "would", "either", "detach", "scope", "over-interrupt", "work", "place", "one", "scoped", "interface" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/banner.md", "json": "https://uxpatternsguide.com/agent/patterns/banner.json", "human": "https://uxpatternsguide.com/patterns/banner/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/banner-vs-alert-vs-inline-message-vs-toast-notification.md", "https://uxpatternsguide.com/agent/comparisons/cookie-banner-vs-banner-vs-notification-banner-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/notification-banner-vs-banner-vs-alert-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/official-site-banner-vs-banner-vs-site-alert-vs-notification-banner-vs-security-warning-vs-service-navigation.md", "https://uxpatternsguide.com/agent/comparisons/phase-beta-banner-vs-banner-vs-notification-banner-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/site-alert-vs-banner-vs-notification-banner-vs-alert.md" ] }, { "id": "basic-search", "name": "Basic search", "aliases": [ "keyword search", "site search" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Search input and result list", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to find matching content without browsing every category or page.", "useWhen": "Users know a word, name, or identifier.", "avoidWhen": "The task is choosing a command with side effects.", "requiredStates": [ "Empty query state.", "Loading or updating results state.", "Matching results state.", "No matches state with recovery." ], "commonMisuses": [ "Using placeholder text as the only label.", "Returning no feedback while results update.", "Making search change unrelated filters silently." ], "keywords": [ "basic", "search", "keyword", "site", "browse", "discovery", "ui-ux", "input", "result", "list", "need", "find", "matching", "content", "without", "browsing", "every", "category", "page", "provide", "labeled", "field", "run", "query", "against", "relevant", "show", "count", "matches", "recovery", "paths", "render", "rows", "clear", "action", "keep", "updates", "visually", "close", "caused" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/basic-search.md", "json": "https://uxpatternsguide.com/agent/patterns/basic-search.json", "human": "https://uxpatternsguide.com/patterns/basic-search/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/advanced-search-vs-basic-search-vs-filter-panel-vs-search-scope-selector.md", "https://uxpatternsguide.com/agent/comparisons/basic-search-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/browse-by-category-vs-basic-search-vs-filter-panel-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/filter-reset-that-clears-unrelated-search-vs-filter-panel-vs-basic-search-vs-filter-chips-vs-saved-search.md", "https://uxpatternsguide.com/agent/comparisons/saved-search-vs-basic-search-vs-filter-panel-vs-recently-viewed.md", "https://uxpatternsguide.com/agent/comparisons/search-result-highlighting-vs-basic-search-vs-search-suggestions-vs-no-results-recovery.md", "https://uxpatternsguide.com/agent/comparisons/search-scope-selector-vs-basic-search-vs-filter-panel-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/typeahead-vs-autocomplete-vs-search-suggestions-vs-basic-search.md" ] }, { "id": "block-mute", "name": "Block / mute", "aliases": [ "block user", "mute user", "hide person", "restrict user", "mute channel", "mute direct message", "mute account", "blocked accounts", "muted accounts", "personal safety controls" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Personal boundary control for reducing or stopping visibility, interaction, contact, and notification exposure from people, accounts, conversations, channels, apps, bots, words, or threads", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Personal safety and attention controls become untrustworthy when block, mute, hide, restrict, unfollow, report, and notification settings are blended together, effects are unclear, exceptions are hidden, or reversal paths are hard to find.", "useWhen": "Users need to reduce exposure to a person, account, conversation, channel, app, bot, word, topic, or thread.", "avoidWhen": "The user is submitting harmful content for policy review; use report abuse.", "requiredStates": [ "Block entry point from profile, post, comment, message, repository, or account settings.", "Mute entry point from profile, post, channel, DM, app, bot, thread, word, or notification menu.", "Confirmation state for high-impact block with target identity and consequences.", "Mute without notification to target state." ], "commonMisuses": [ "Using one command for block, mute, hide, report, and unfollow.", "Failing to explain whether the target is notified.", "Hiding the unblock or unmute route after activation.", "Letting muted conversations still produce unexplained badges or mention alerts." ], "keywords": [ "block", "mute", "hide", "person", "restrict", "channel", "direct", "message", "account", "blocked", "accounts", "muted", "personal", "safety", "controls", "trust", "privacy", "ui-ux", "boundary", "control", "reducing", "stopping", "visibility", "interaction", "contact", "notification", "exposure", "people", "conversations", "channels", "apps", "bots", "words", "threads", "attention", "become", "untrustworthy", "unfollow", "report", "settings" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/block-mute.md", "json": "https://uxpatternsguide.com/agent/patterns/block-mute.json", "human": "https://uxpatternsguide.com/patterns/block-mute/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/block-mute-vs-report-abuse-vs-notification-preferences-vs-follow-subscribe-vs-permission-denied-state-vs-comments.md" ] }, { "id": "booking", "name": "Booking", "aliases": [ "appointment booking", "service booking", "reservation booking", "online booking", "book appointment", "book service", "book a slot", "resource booking", "class booking", "booking page", "booking form" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Customer-facing flow for reserving an offered slot, service, resource, appointment, class, or seat", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Booking fails when products treat reservation as simple date and time entry, hiding service type, capacity, staff or resource availability, customer requirements, payment, policy, verification, confirmation, and stale-slot recovery.", "useWhen": "Users reserve an offered appointment, service, class, room, resource, seat, table, pickup window, or visit.", "avoidWhen": "The user only needs one standalone date or time field.", "requiredStates": [ "Service or appointment type selection state.", "Provider, staff, resource, room, seat, or location selection state.", "Available date and slot list state with duration and timezone.", "Unavailable, closed, blocked, sold-out, or capacity-full state." ], "commonMisuses": [ "Treating booking as only a date picker and time picker.", "Showing slots without service duration, staff/resource, timezone, price, or capacity context.", "Taking payment before proving the selected slot can be held.", "Confirming a booking before required intake, consent, email verification, or payment completes." ], "keywords": [ "booking", "appointment", "service", "reservation", "online", "book", "slot", "resource", "class", "page", "form", "task", "workflow", "patterns", "ui-ux", "customer-facing", "flow", "reserving", "offered", "seat", "fails", "products", "treat", "simple", "date", "time", "entry", "hiding", "type", "capacity", "staff", "availability", "customer", "requirements", "payment", "policy", "verification", "confirmation", "stale-slot", "recovery" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/booking.md", "json": "https://uxpatternsguide.com/agent/patterns/booking.json", "human": "https://uxpatternsguide.com/patterns/booking/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md" ] }, { "id": "bottom-navigation", "name": "Bottom navigation", "aliases": [ "bottom nav", "mobile tab bar", "navigation bar", "app tab bar" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Persistent mobile primary navigation", "maturity": "established", "platforms": [ "mobile" ], "problem": "Mobile users need one-tap access to a small set of primary app destinations without stretching to a top menu or losing section context.", "useWhen": "A compact mobile app has three to five high-frequency top-level destinations.", "avoidWhen": "There are fewer than three or more than five primary destinations.", "requiredStates": [ "Default state with all primary destinations visible.", "Selected destination state exposed visually and programmatically.", "Destination changed state with content updated and previous section state preserved.", "Badge or notification state that does not steal focus or shift the bar." ], "commonMisuses": [ "Putting too many destinations into the bar.", "Mixing navigation destinations with commands such as create, delete, filter, or submit.", "Using icon-only labels for unfamiliar sections.", "Resetting scroll, filters, or draft state every time users switch destinations." ], "keywords": [ "bottom", "navigation", "nav", "mobile", "tab", "bar", "app", "wayfinding", "ui-ux", "persistent", "primary", "need", "one-tap", "access", "small", "set", "destinations", "without", "stretching", "top", "menu", "losing", "section", "context", "keep", "three", "five", "top-level", "persistently", "available", "compact", "screens", "clear", "labels", "icons", "selected", "state", "preserved", "inside", "each" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/bottom-navigation.md", "json": "https://uxpatternsguide.com/agent/patterns/bottom-navigation.json", "human": "https://uxpatternsguide.com/patterns/bottom-navigation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/bottom-sheet-vs-sheet-vs-drawer-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/breadcrumbs-vs-tabs-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/global-navigation-vs-breadcrumbs-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/header-vs-global-navigation-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/navigation-drawer-vs-side-navigation-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/responsive-navigation-adaptation-vs-global-navigation-vs-bottom-navigation-vs-navigation-drawer-vs-side-navigation-vs-header.md" ] }, { "id": "bottom-sheet", "name": "Bottom sheet", "aliases": [ "bottom drawer", "bottom panel", "bottom overlay", "modal bottom sheet", "standard bottom sheet", "half sheet", "detent sheet" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Mobile bottom-anchored contextual overlay with detents", "maturity": "standard", "platforms": [ "mobile", "web" ], "problem": "Mobile users need contextual details or controls without leaving the current map, feed, media, object, or task, and the controls should be reachable from the lower part of the screen.", "useWhen": "Mobile users need extra contextual detail or controls while staying oriented to a map, feed, route, media item, or selected object.", "avoidWhen": "The surface contains persistent app destinations or global navigation.", "requiredStates": [ "Closed state with a trigger tied to the current map item, feed card, route, media item, or contextual action.", "Peek state that shows a meaningful title, summary, or first action rather than only a handle.", "Half or medium state that exposes the common controls while leaving enough background context visible.", "Full state for detailed review or longer lists, with clear scroll boundaries." ], "commonMisuses": [ "Using a bottom sheet as hidden global navigation or a dumping ground for unrelated commands.", "Opening a bottom sheet at a height that hides the map, feed, or object the user needs for context.", "Providing a peek state with no meaningful content.", "Letting sheet dragging fight inner list scrolling." ], "keywords": [ "bottom", "sheet", "drawer", "panel", "overlay", "modal", "standard", "half", "detent", "disclosure", "attention", "management", "ui-ux", "mobile", "bottom-anchored", "contextual", "detents", "need", "details", "controls", "without", "leaving", "current", "map", "feed", "media", "object", "task", "should", "reachable", "lower", "part", "screen", "present", "clear", "handle", "useful", "visible", "title", "context" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/bottom-sheet.md", "json": "https://uxpatternsguide.com/agent/patterns/bottom-sheet.json", "human": "https://uxpatternsguide.com/patterns/bottom-sheet/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/action-sheet-vs-action-menu-vs-bottom-sheet-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/bottom-sheet-vs-sheet-vs-drawer-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/touch-gesture-vs-carousel-vs-map-view-vs-bottom-sheet-vs-drag-and-drop-upload-vs-data-visualization.md" ] }, { "id": "breadcrumbs", "name": "Breadcrumbs", "aliases": [ "breadcrumb trail", "hierarchy path", "ancestor trail" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Hierarchy orientation navigation", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users land inside a nested information architecture and need to understand where the current page sits without retracing their path.", "useWhen": "Pages sit inside a clear parent-child hierarchy.", "avoidWhen": "The app has a flat structure with no meaningful parent levels.", "requiredStates": [ "Interior page with full ancestor trail.", "Ancestor links that navigate to parent levels.", "Current page item identified visually and programmatically.", "Long-label or narrow-screen state that preserves at least the direct parent destination." ], "commonMisuses": [ "Showing browsing history instead of hierarchy.", "Using breadcrumbs on a flat app where no ancestor path exists.", "Using breadcrumbs to show steps in a form or checkout journey.", "Duplicating primary navigation with a long list of unrelated destinations." ], "keywords": [ "breadcrumbs", "breadcrumb", "trail", "hierarchy", "path", "ancestor", "navigation", "wayfinding", "ui-ux", "orientation", "land", "inside", "nested", "information", "architecture", "need", "understand", "where", "current", "page", "sits", "without", "retracing", "their", "show", "canonical", "broadest", "relevant", "parent", "links", "clear", "current-page", "item", "render", "labeled", "nav", "ordered", "real", "distinct", "keep" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/breadcrumbs.md", "json": "https://uxpatternsguide.com/agent/patterns/breadcrumbs.json", "human": "https://uxpatternsguide.com/patterns/breadcrumbs/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/back-link-vs-breadcrumbs-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/breadcrumbs-vs-tabs-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/global-navigation-vs-breadcrumbs-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/in-page-anchor-navigation-vs-breadcrumbs-vs-side-navigation.md", "https://uxpatternsguide.com/agent/comparisons/pagination-without-current-page-vs-pagination-vs-breadcrumbs-vs-step-navigation-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/recently-viewed-vs-related-links-vs-breadcrumbs.md", "https://uxpatternsguide.com/agent/comparisons/related-links-vs-in-page-anchor-navigation-vs-breadcrumbs.md" ] }, { "id": "browse-by-category", "name": "Browse by category", "aliases": [ "category browse", "topic browse", "browse topics", "taxonomy navigation", "category landing page", "browse directory", "content taxonomy", "service categories" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Taxonomy-based category navigation for exploring a collection before choosing a destination", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to explore a broad collection of services, articles, products, records, or learning resources, but they may not know the exact term to search for and a flat list is too large to scan.", "useWhen": "Users are exploring a broad catalog, service directory, help center, learning library, product collection, or content repository.", "avoidWhen": "The collection is small enough for a simple list.", "requiredStates": [ "Top-level category state with clear names, descriptions, and enough examples or counts to choose.", "Category selected state showing parent, current category, children, and relevant destinations.", "Subcategory state with a clear route back to parent and siblings.", "Empty or merged category state with explanation and recovery to parent, search, or replacement category." ], "commonMisuses": [ "Using the organization chart as the category taxonomy.", "Showing category cards without descriptions when labels overlap.", "Treating categories as filters while navigating away and losing result context.", "Leaving empty categories visible because the schema still has a category record." ], "keywords": [ "browse", "category", "topic", "topics", "taxonomy", "navigation", "landing", "page", "directory", "content", "service", "categories", "search", "discovery", "ui-ux", "taxonomy-based", "exploring", "collection", "before", "choosing", "destination", "need", "explore", "broad", "services", "articles", "products", "records", "learning", "resources", "but", "they", "may", "know", "exact", "term", "flat", "list", "too", "large" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/browse-by-category.md", "json": "https://uxpatternsguide.com/agent/patterns/browse-by-category.json", "human": "https://uxpatternsguide.com/patterns/browse-by-category/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/browse-by-category-vs-basic-search-vs-filter-panel-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/card-list-vs-list-view-vs-collection-vs-browse-by-category.md", "https://uxpatternsguide.com/agent/comparisons/collection-vs-list-view-vs-browse-by-category-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/recommendations-vs-related-links-vs-recently-viewed-vs-browse-by-category.md", "https://uxpatternsguide.com/agent/comparisons/start-page-vs-onboarding-vs-browse-by-category-vs-step-navigation.md" ] }, { "id": "bulk-import", "name": "Bulk import", "aliases": [ "CSV import", "spreadsheet import", "data import wizard", "batch import", "bulk upload", "record import", "import validator" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Structured file import workflow with mapping, validation, repair, and result reporting", "maturity": "established", "platforms": [ "web", "desktop" ], "problem": "Bulk imports can save hours of repetitive entry, but they can also corrupt many records at once when requirements, mapping, validation, duplicates, overwrite rules, partial success, and result reporting are unclear.", "useWhen": "Users need to create, update, or merge many structured records from CSV, XLSX, TSV, copied spreadsheet data, or another system export.", "avoidWhen": "The task needs one document or image attachment rather than parsed record data.", "requiredStates": [ "Pre-import requirements state with template, accepted file types, encoding, row limit, column limit, required fields, and side effects.", "File selected state showing filename, size, detected sheet, row count, column count, and parsed headers.", "Mapping state with suggested mappings, required-field gaps, unmapped columns, ignored columns, and sample values.", "Mapping error state for duplicate target fields, missing required mappings, unsupported fields, or ambiguous headers." ], "commonMisuses": [ "Treating a spreadsheet import like a generic file attachment with no mapping or row validation.", "Auto-starting the import immediately after upload.", "Hiding duplicate matching, create/update mode, blank overwrite behavior, or notification side effects until after commit.", "Showing only a generic invalid file error instead of row numbers, column names, and fixable reasons." ], "keywords": [ "bulk", "import", "csv", "spreadsheet", "data", "wizard", "batch", "upload", "record", "validator", "input", "entry", "ui-ux", "structured", "file", "workflow", "mapping", "validation", "repair", "result", "reporting", "imports", "save", "hours", "repetitive", "but", "they", "also", "corrupt", "many", "records", "once", "requirements", "duplicates", "overwrite", "rules", "partial", "success", "unclear", "design" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/bulk-import.md", "json": "https://uxpatternsguide.com/agent/patterns/bulk-import.json", "human": "https://uxpatternsguide.com/patterns/bulk-import/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/bulk-import-vs-file-upload-vs-drag-and-drop-upload-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/data-export-vs-bulk-import-vs-audit-log-vs-table-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/invite-user-vs-account-creation-vs-object-picker-vs-permission-recovery.md" ] }, { "id": "button-group", "name": "Button group", "aliases": [ "action button group", "button row", "form action group", "footer action group", "grouped commands" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Grouped visible action buttons", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to choose between a few related commands in one workflow moment, but loose button rows can imply false relationships, create competing primary actions, hide blocked states, and place destructive commands too close to safe progress.", "useWhen": "A form, dialog, panel, card, or workflow footer needs two to four related visible commands.", "avoidWhen": "The controls are mutually exclusive view modes that need a selected state.", "requiredStates": [ "Default group with a clear label or surrounding context.", "Primary, secondary, tertiary, and danger visual hierarchy when those roles are present.", "Focused state for each button in source order.", "Hover or pressed state for pointer and touch feedback." ], "commonMisuses": [ "Putting unrelated actions into one row because the layout has space.", "Using two or more high-emphasis buttons that compete for the same next step.", "Mixing destructive and non-destructive actions with identical visual weight.", "Using button groups as page navigation or content links." ], "keywords": [ "button", "group", "action", "row", "form", "footer", "grouped", "commands", "selection", "choice", "ui-ux", "visible", "buttons", "need", "choose", "between", "few", "related", "one", "workflow", "moment", "but", "loose", "rows", "imply", "false", "relationships", "create", "competing", "primary", "actions", "hide", "blocked", "states", "place", "destructive", "too", "close", "safe", "progress" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/button-group.md", "json": "https://uxpatternsguide.com/agent/patterns/button-group.json", "human": "https://uxpatternsguide.com/patterns/button-group/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/action-menu-vs-menu-button-vs-button-group-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/button-group-vs-segmented-control-vs-menu-button-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/toolbar-vs-button-group-vs-menu-button-vs-command-palette.md" ] }, { "id": "calendar-view", "name": "Calendar view", "aliases": [ "event calendar", "schedule calendar", "month view", "week view", "day view", "agenda calendar", "booking calendar", "resource calendar", "availability calendar" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Date and time grid for scheduled events, availability, and conflicts", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to inspect scheduled events, availability, conflicts, and time ranges in context, but lists, timelines, and date fields hide where items sit on the calendar and how they overlap.", "useWhen": "Users need to scan or manage scheduled events across dates, days, weeks, months, or resources.", "avoidWhen": "Users only need to select one date for a form field.", "requiredStates": [ "Default calendar state with visible range, view mode, timezone, today marker, selected date, and event count.", "Month, week, day, and agenda or selected-day detail states when the product offers multiple modes.", "Previous, next, today, and jump-to-date navigation states.", "Event detail, create event, edit event, drag or resize preview, conflict, save pending, save failed, and undo states when editing is supported." ], "commonMisuses": [ "Using calendar view as a decorative month card for unscheduled content.", "Showing colored dots without event names, counts, or selected-day details.", "Hiding overflowed events in a crowded date cell.", "Letting drag and resize silently create schedule conflicts." ], "keywords": [ "calendar", "view", "event", "schedule", "month", "week", "day", "agenda", "booking", "resource", "availability", "data", "display", "exploration", "ui-ux", "date", "time", "grid", "scheduled", "events", "conflicts", "need", "inspect", "ranges", "context", "but", "lists", "timelines", "fields", "hide", "where", "items", "sit", "how", "they", "overlap", "provide", "navigation", "modes", "blocks" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/calendar-view.md", "json": "https://uxpatternsguide.com/agent/patterns/calendar-view.json", "human": "https://uxpatternsguide.com/patterns/calendar-view/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/calendar-view-vs-date-picker-vs-timeline-vs-list-view.md", "https://uxpatternsguide.com/agent/comparisons/kanban-board-vs-table-vs-calendar-view-vs-list-view.md", "https://uxpatternsguide.com/agent/comparisons/map-view-vs-list-view-vs-calendar-view-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/scheduling-vs-booking-vs-calendar-view-vs-date-picker.md" ] }, { "id": "camera-capture", "name": "Camera capture", "aliases": [ "photo capture", "video capture", "camera input", "scan with camera", "capture photo", "live camera capture" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Permission-gated live camera preview for creating and reviewing new photo or video media", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Camera capture can reduce manual entry and prove visual context, but camera access is permission-gated, privacy-sensitive, hardware-dependent, and failure-prone; without explicit preview, quality review, fallback, and stream cleanup, users can capture the wrong media, expose private surroundings, or get blocked by permission denial.", "useWhen": "Users need to create new photo or video media inside the task.", "avoidWhen": "Existing file upload, text entry, barcode input, or manual confirmation is sufficient.", "requiredStates": [ "Unsupported browser or insecure-context state with upload or manual alternative.", "Camera permission not requested, granted, denied, and revoked states.", "Start capture state with purpose, target object, and privacy explanation.", "Device selection or front/rear camera switch state when multiple cameras are available." ], "commonMisuses": [ "Opening the camera automatically on page load or hover.", "Treating the shutter button as final upload for consequential tasks.", "Hiding the live preview, active camera state, stop control, or selected camera.", "Blocking the workflow when camera permission is denied even though upload or manual entry would work." ], "keywords": [ "camera", "capture", "photo", "video", "input", "scan", "live", "cross-device", "physical", "interaction", "ui-ux", "permission-gated", "preview", "creating", "reviewing", "new", "media", "reduce", "manual", "entry", "prove", "visual", "context", "but", "access", "privacy-sensitive", "hardware-dependent", "failure-prone", "without", "explicit", "quality", "review", "fallback", "stream", "cleanup", "wrong", "expose", "private", "surroundings", "get" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/camera-capture.md", "json": "https://uxpatternsguide.com/agent/patterns/camera-capture.json", "human": "https://uxpatternsguide.com/patterns/camera-capture/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/camera-capture-vs-file-upload-vs-permission-request-vs-sensitive-data-reveal-vs-full-screen-takeover-vs-drag-and-drop-upload.md", "https://uxpatternsguide.com/agent/comparisons/qr-scan-vs-camera-capture-vs-permission-request-vs-file-upload-vs-two-factor-authentication-vs-security-warning.md" ] }, { "id": "card-grid", "name": "Card grid", "aliases": [ "card view", "tile grid", "object grid", "visual card grid", "product grid", "asset grid", "gallery cards", "result tiles", "card gallery", "responsive card layout" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Responsive multi-column grid of peer object cards", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to browse many peer objects where visual preview, compact metadata, and quick selection matter, but a vertical card list is too slow, a table overemphasizes columns, and a named collection would imply membership management that is not present.", "useWhen": "Users browse peer objects where visual preview, compact identity, and quick first-pass selection matter.", "avoidWhen": "Users need dense scanning of many text-heavy records.", "requiredStates": [ "Default grid with heading or label, result count, active view controls, and at least one full row of peer cards.", "Card default, hover, focus, active, selected, saved, unavailable, loading, failed-thumbnail, missing-thumbnail, disabled, and opened states.", "Grid filtered, sorted, searched, compact density, comfortable density, loading-more, paginated, empty, no-results, and failed-load states.", "Responsive one-column, two-column, three-column, and wide multi-column states with stable gutters and preserved card order." ], "commonMisuses": [ "Using card grid as decorative chrome for rows that need dense scanning or aligned comparison.", "Allowing every card to choose its own image ratio, title placement, metadata order, and action area.", "Treating a grid of result cards as a collection without collection identity, owner, count, or membership rules.", "Hiding important card actions behind hover-only affordances that vanish on touch and keyboard." ], "keywords": [ "card", "grid", "view", "tile", "object", "visual", "product", "asset", "gallery", "cards", "result", "tiles", "responsive", "layout", "data", "display", "exploration", "ui-ux", "multi-column", "peer", "need", "browse", "many", "objects", "where", "preview", "compact", "metadata", "quick", "selection", "matter", "but", "vertical", "list", "too", "slow", "table", "overemphasizes", "columns", "named" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/card-grid.md", "json": "https://uxpatternsguide.com/agent/patterns/card-grid.json", "human": "https://uxpatternsguide.com/patterns/card-grid/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/card-grid-vs-card-list-vs-collection-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/compare-view-vs-table-vs-card-grid-vs-details-panel.md" ] }, { "id": "card-list", "name": "Card list", "aliases": [ "vertical card list", "stacked cards", "card feed", "object cards", "content cards", "resource cards", "result cards", "media card list", "card-based list" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Single-column sequence of bounded rich object summaries", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to browse and act on objects that require more context than a compact row can hold, but a grid would weaken reading order, a table would overemphasize columns, and a named collection would imply set-management behavior that is not present.", "useWhen": "Users need to browse rich object summaries with preview, summary text, metadata, status, and actions.", "avoidWhen": "The content is dense and homogeneous enough for a compact list view.", "requiredStates": [ "Default card list with heading or label, result count, and visible card summaries.", "Card default, hover, focus, active, selected, disabled, loading, unavailable, saved, new, updated, and error states.", "Primary card activation state and separate secondary action, overflow menu, save, share, select, and destructive action states.", "Expanded card and collapsed card states when summaries reveal more detail inline." ], "commonMisuses": [ "Using cards as decorative wrappers for dense rows.", "Making the entire card clickable while nesting conflicting buttons or links inside it.", "Changing card anatomy item by item until scanning becomes unpredictable.", "Hiding key metadata behind expansion when users need it to choose among cards." ], "keywords": [ "card", "list", "vertical", "stacked", "cards", "feed", "object", "content", "resource", "result", "media", "card-based", "data", "display", "exploration", "ui-ux", "single-column", "sequence", "bounded", "rich", "summaries", "need", "browse", "act", "objects", "require", "more", "context", "than", "compact", "row", "hold", "but", "grid", "would", "weaken", "reading", "order", "table", "overemphasize" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/card-list.md", "json": "https://uxpatternsguide.com/agent/patterns/card-list.json", "human": "https://uxpatternsguide.com/patterns/card-list/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/card-grid-vs-card-list-vs-collection-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/card-list-vs-list-view-vs-collection-vs-browse-by-category.md", "https://uxpatternsguide.com/agent/comparisons/feed-vs-card-list-vs-recommendations-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/infinite-scroll-with-no-footer-access-vs-feed-vs-pagination-vs-card-list-vs-skip-link.md" ] }, { "id": "carousel", "name": "Carousel", "aliases": [ "slideshow", "slide show", "image rotator", "content carousel", "card carousel", "media carousel", "rotator" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Sequential slide viewer for a small peer content set", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Teams often want several pieces of content to occupy one prominent area, but rotating or poorly controlled carousels can hide important content, interrupt reading, trap focus, and make item position unclear.", "useWhen": "A small set of peer slides must share one constrained display area.", "avoidWhen": "Every item is important or users need to compare items.", "requiredStates": [ "Initial slide state with carousel label, slide identity, current position, and previous or next controls.", "Manual next and previous state with focus preserved on the activated control.", "Direct slide picker state with current slide indicated and picker names exposed.", "Paused rotation state when auto-advance is stopped by user command, focus, or hover." ], "commonMisuses": [ "Auto-advancing slides without a pause or stop control.", "Using unlabeled dots with no current-slide name or state.", "Hiding critical content or required tasks on later slides.", "Using a carousel because multiple stakeholders want homepage priority instead of designing a clear information hierarchy." ], "keywords": [ "carousel", "slideshow", "slide", "show", "image", "rotator", "content", "card", "media", "navigation", "wayfinding", "ui-ux", "sequential", "viewer", "small", "peer", "set", "teams", "often", "want", "several", "pieces", "occupy", "one", "prominent", "area", "but", "rotating", "poorly", "controlled", "carousels", "hide", "important", "interrupt", "reading", "trap", "focus", "make", "item", "position" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/carousel.md", "json": "https://uxpatternsguide.com/agent/patterns/carousel.json", "human": "https://uxpatternsguide.com/patterns/carousel/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/carousel-auto-advance-without-pause-vs-carousel-vs-tabs-vs-recommendations-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/carousel-vs-tabs-vs-recommendations-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/touch-gesture-vs-carousel-vs-map-view-vs-bottom-sheet-vs-drag-and-drop-upload-vs-data-visualization.md" ] }, { "id": "carousel-auto-advance-without-pause", "name": "Carousel auto-advance without pause", "aliases": [ "auto rotating carousel with no pause", "unpausable carousel", "auto forwarding carousel", "rotating hero without stop", "slideshow without pause", "motion carousel trap" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Anti-pattern where timed carousel rotation changes visible content without user control", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Auto-advancing carousels without a reachable pause or stop path interrupt reading, hide controls, move focused or hovered content, create noisy announcements, and can make users miss critical information.", "useWhen": "Use this anti-pattern entry to audit or reject timed carousels that cannot provide immediate pause, stop, focus, hover, reduced-motion, and interaction-stability behavior.", "avoidWhen": "Do not treat this as permission to build an auto-rotating carousel; use the standard carousel pattern when motion is fully controlled or avoided.", "requiredStates": [ "Rotation stopped by default state with visible current slide, total count, and Pause or Start rotation control.", "Pause first state where the stop control is first in the carousel tab order before previous, next, pickers, or slide actions.", "User-start rotation state that begins motion only after an explicit command and exposes how to stop it.", "Focus stop state where keyboard focus inside the carousel stops rotation and preserves focus." ], "commonMisuses": [ "Hiding Pause behind carousel dots, hover-only controls, or an overflow menu.", "Starting rotation automatically because marketing wants movement without testing reading time or assistive technology impact.", "Continuing to rotate while focus is inside a slide, a form field has text, or the pointer is hovering over details.", "Treating a recommendation rail as a decorative carousel and rotating away reasons, dismiss buttons, sponsored labels, or feedback." ], "keywords": [ "carousel", "auto-advance", "without", "pause", "auto", "rotating", "unpausable", "forwarding", "hero", "stop", "slideshow", "motion", "trap", "disclosure", "attention", "management", "ui-ux", "anti-pattern", "where", "timed", "rotation", "changes", "visible", "content", "control", "auto-advancing", "carousels", "reachable", "path", "interrupt", "reading", "hide", "controls", "move", "focused", "hovered", "create", "noisy", "announcements", "make" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/carousel-auto-advance-without-pause.md", "json": "https://uxpatternsguide.com/agent/patterns/carousel-auto-advance-without-pause.json", "human": "https://uxpatternsguide.com/patterns/carousel-auto-advance-without-pause/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/carousel-auto-advance-without-pause-vs-carousel-vs-tabs-vs-recommendations-vs-pagination.md" ] }, { "id": "change-review", "name": "Change review", "aliases": [ "review changes", "suggested edit review", "tracked changes review", "pull request review", "merge request review", "diff review", "redline review", "suggestion review", "accept reject changes", "code review changes" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Review surface for proposed edits, diffs, tracked changes, or suggestions before they become accepted content", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Collaborative products lose quality and trust when proposed edits are hard to inspect, scope is unclear, draft feedback is confused with submitted feedback, stale changes remain actionable, and accept or reject controls apply more broadly than users expect.", "useWhen": "Users inspect and decide on proposed edits, tracked changes, code suggestions, file diffs, or document redlines.", "avoidWhen": "The user only checks their own answers before a transaction.", "requiredStates": [ "Default change review state with original and proposed content visible.", "Single suggested edit or tracked change state.", "Diff hunk with line comment state.", "Pending review comment state before submission." ], "commonMisuses": [ "Showing accept and reject controls without original and proposed content.", "Using approval workflow for every change review even when no routed approver policy exists.", "Calling a review queue change review when reviewers are only choosing which item to open next.", "Making pending comments look submitted." ], "keywords": [ "change", "review", "changes", "suggested", "edit", "tracked", "pull", "request", "merge", "diff", "redline", "suggestion", "accept", "reject", "code", "collaboration", "social", "interaction", "ui-ux", "surface", "proposed", "edits", "diffs", "suggestions", "before", "they", "become", "accepted", "content", "collaborative", "products", "lose", "quality", "trust", "hard", "inspect", "scope", "unclear", "draft", "feedback" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/change-review.md", "json": "https://uxpatternsguide.com/agent/patterns/change-review.json", "human": "https://uxpatternsguide.com/patterns/change-review/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md" ] }, { "id": "character-count", "name": "Character count", "aliases": [ "character counter", "word count", "remaining character counter", "text limit counter", "length counter" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Bounded text-entry length feedback", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to write within a real text limit, but hidden limits, noisy counters, mismatched server rules, or silent truncation make it hard to know whether the draft will be accepted.", "useWhen": "A legal, editorial, messaging, moderation, or display constraint imposes a clear maximum length.", "avoidWhen": "The field has no meaningful maximum length.", "requiredStates": [ "Empty state with visible label, hint, and static maximum message.", "Typing state before threshold where the limit remains available but does not create urgency.", "Near-limit state showing remaining characters or words.", "At-limit state explaining that no characters or words remain." ], "commonMisuses": [ "Adding a counter to an unrestricted writing field because it looks informative.", "Using a character counter when the server counts bytes, normalized characters, words, or rich-text markup.", "Hiding the limit until after submit.", "Interrupting screen reader users with a live count after every keypress." ], "keywords": [ "character", "count", "counter", "word", "remaining", "text", "limit", "length", "input", "data", "entry", "ui-ux", "bounded", "text-entry", "feedback", "need", "write", "within", "real", "but", "hidden", "limits", "noisy", "counters", "mismatched", "server", "rules", "silent", "truncation", "make", "hard", "know", "whether", "draft", "will", "accepted", "expose", "before", "update", "useful" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/character-count.md", "json": "https://uxpatternsguide.com/agent/patterns/character-count.json", "human": "https://uxpatternsguide.com/patterns/character-count/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/character-count-vs-textarea-vs-text-input-vs-inline-validation.md" ] }, { "id": "chart-drilldown", "name": "Chart drilldown", "aliases": [ "drill-down chart", "chart hierarchy drill", "visual drilldown", "aggregate drilldown", "chart drill path", "hierarchical chart exploration", "drill into chart", "drill-up chart" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Interactive chart hierarchy from aggregate marks to child-level data", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users see an aggregate chart mark that raises a follow-up question, but switching to a separate table, report page, or filter panel can break analytic context and make the parent-to-child relationship unclear.", "useWhen": "Users need to investigate an aggregate chart mark by moving to the next planned level of a hierarchy.", "avoidWhen": "The next step is exact row auditing, editing, or export rather than aggregate visual comparison.", "requiredStates": [ "Top-level chart with drillable marks, level label, metric, units, date or filter scope, tooltip, legend, and table alternative.", "Drillable mark focused, hovered, selected, activated, loading child data, child data loaded, child data empty, and terminal leaf states.", "Drilled level with selected parent, child-level title, breadcrumb path, drill-up control, reset-to-root control, inherited filters, and synchronized selected child mark.", "Drill-up, breadcrumb jump, reset, failed child load, stale child data, permission-limited child data, no child data, and export-with-path states." ], "commonMisuses": [ "Replacing a chart with child data without breadcrumbs, selected parent, or drill-up path.", "Using drilldown as a hidden filter that silently narrows the whole dashboard.", "Changing metric, unit, baseline, or time grain during drilldown without disclosure.", "Making every mark look drillable even when some marks have no child data." ], "keywords": [ "chart", "drilldown", "drill-down", "hierarchy", "drill", "visual", "aggregate", "path", "hierarchical", "exploration", "drill-up", "data", "display", "ui-ux", "interactive", "marks", "child-level", "see", "mark", "raises", "follow-up", "question", "but", "switching", "separate", "table", "report", "page", "filter", "panel", "break", "analytic", "context", "make", "parent-to-child", "relationship", "unclear", "provide", "in-chart", "where" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/chart-drilldown.md", "json": "https://uxpatternsguide.com/agent/patterns/chart-drilldown.json", "human": "https://uxpatternsguide.com/patterns/chart-drilldown/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/chart-drilldown-vs-data-visualization-vs-details-panel-vs-table.md" ] }, { "id": "chat-interface", "name": "Chat interface", "aliases": [ "AI chat", "assistant chat", "conversation UI", "chat transcript", "copilot chat", "chat workspace", "message interface", "conversational assistant", "multi-turn assistant", "chat session" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Multi-turn conversation surface with transcript, composer, assistant responses, and conversation history", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI chat can look simple while hiding the durable state that makes a conversation work: turn order, role ownership, carried context, tool use, sources, memory, retention, response status, failed turns, and history controls. Without those boundaries, users lose trust, misread follow-ups, cannot recover from failed or changed answers, and confuse chat with comments, feeds, or a single prompt box.", "useWhen": "The user needs a back-and-forth assistant conversation with follow-up questions and answer refinement.", "avoidWhen": "The task can be completed with a single structured prompt box, form, or command.", "requiredStates": [ "Empty new chat with conversation title, mode, history or retention status, and a labelled composer.", "Typing draft, submitted user message, assistant thinking, streaming response, complete response, stopped generation, failed response, and retry states.", "Follow-up turn that shows whether prior messages, files, tools, memory, selected sources, or web/work mode are included.", "Regenerate, edit follow-up, copy answer, cite source, export transcript, delete chat, and new chat states." ], "commonMisuses": [ "Treating chat as a large textarea plus latest answer with no durable turn identity.", "Auto-scrolling during streaming while the user is reading an older message.", "Letting regenerate overwrite a response and citations with no version history.", "Showing a history-off toggle while the next turn still uses prior messages without explanation." ], "keywords": [ "chat", "interface", "assistant", "conversation", "transcript", "copilot", "workspace", "message", "conversational", "multi-turn", "session", "automation", "ui-ux", "surface", "composer", "responses", "history", "look", "simple", "while", "hiding", "durable", "state", "makes", "work", "turn", "order", "role", "ownership", "carried", "context", "tool", "sources", "memory", "retention", "response", "status", "failed", "turns", "controls" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/chat-interface.md", "json": "https://uxpatternsguide.com/agent/patterns/chat-interface.json", "human": "https://uxpatternsguide.com/patterns/chat-interface/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/chat-interface-vs-prompt-box-vs-threaded-discussion-vs-comments-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/citation-display-vs-chat-interface-vs-streaming-response-vs-related-links-vs-tooltip.md", "https://uxpatternsguide.com/agent/comparisons/escalate-to-human-vs-handoff-summary-vs-chat-interface-vs-review-queue-vs-human-approval-gate-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/regenerate-retry-vs-retry-vs-chat-interface-vs-streaming-response-vs-prompt-box-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/scope-clarification-vs-prompt-box-vs-search-scope-selector-vs-agent-plan-preview-vs-human-approval-gate-vs-chat-interface.md", "https://uxpatternsguide.com/agent/comparisons/source-grounding-display-vs-citation-display-vs-chat-interface-vs-streaming-response-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/streaming-response-vs-chat-interface-vs-progress-bar-vs-loading-spinner-vs-feed.md" ] }, { "id": "checkbox-group", "name": "Checkbox group", "aliases": [ "checkbox list", "multiple choice checkboxes" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Multiple-choice form control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to choose zero, one, or several independent options from a short set that should remain visible while they decide.", "useWhen": "Users can choose zero, one, or many options.", "avoidWhen": "Only one option can be selected.", "requiredStates": [ "Unchecked option state.", "One or more checked option states.", "Focused checkbox state.", "Group validation state when required, limited, or left empty." ], "commonMisuses": [ "Using checkboxes for mutually exclusive choices.", "Hiding selected values after choice.", "Not explaining max-selection limits until submit.", "Scattering related checkboxes without a shared question or legend." ], "keywords": [ "checkbox", "group", "list", "multiple", "choice", "checkboxes", "selection", "ui-ux", "multiple-choice", "form", "control", "need", "choose", "zero", "one", "several", "independent", "options", "short", "set", "should", "remain", "visible", "while", "they", "decide", "show", "native", "labeled", "select-all-that-apply", "hint", "checked", "states", "clickable", "labels", "validation", "minimum", "limit", "applies", "render" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/checkbox-group.md", "json": "https://uxpatternsguide.com/agent/patterns/checkbox-group.json", "human": "https://uxpatternsguide.com/patterns/checkbox-group/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/checkbox-group-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/chip-selection-vs-filter-chips-vs-checkbox-group-vs-segmented-control.md", "https://uxpatternsguide.com/agent/comparisons/legal-acceptance-vs-consent-prompt-vs-review-before-submit-vs-checkbox-group-vs-confirmation-dialog-vs-typed-confirmation-vs-age-gate.md", "https://uxpatternsguide.com/agent/comparisons/toggle-switch-vs-checkbox-group-vs-radio-group-vs-segmented-control.md", "https://uxpatternsguide.com/agent/comparisons/transfer-list-vs-multi-select-vs-listbox-vs-checkbox-group.md", "https://uxpatternsguide.com/agent/comparisons/tree-selection-vs-listbox-vs-checkbox-group-vs-transfer-list.md" ] }, { "id": "checkout", "name": "Checkout", "aliases": [ "purchase checkout", "order checkout", "cart checkout", "ecommerce checkout", "place order flow", "buy flow", "checkout funnel", "guest checkout", "order finalization" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Purchase commitment and order finalization flow", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Purchase flows fail when users cannot see the true total, are forced through unnecessary account creation, lose cart context during payment or shipping errors, or cannot tell when the order is actually committed.", "useWhen": "A user is ready to purchase selected items, services, tickets, subscriptions, donations, or orderable options.", "avoidWhen": "The task is only secure card capture, bank-details entry, address entry, or a final answer review without purchase state.", "requiredStates": [ "Cart summary state with items, quantities, price, shipping, tax, discount, and total due.", "Guest or sign-in choice state that does not block purchase without a clear reason.", "Contact and receipt details state.", "Shipping or pickup address state with delivery eligibility and address-change effects." ], "commonMisuses": [ "Forcing account creation before purchase when guest checkout would work.", "Hiding shipping, tax, fees, or total until after payment details are entered.", "Letting totals change after payment capture without a visible review or acknowledgement.", "Clearing the cart, address, discount, or delivery choice after a payment decline." ], "keywords": [ "checkout", "purchase", "order", "cart", "ecommerce", "place", "flow", "buy", "funnel", "guest", "finalization", "task", "workflow", "patterns", "ui-ux", "commitment", "flows", "fail", "cannot", "see", "true", "total", "forced", "through", "unnecessary", "account", "creation", "lose", "context", "during", "payment", "shipping", "errors", "tell", "actually", "committed", "keeps", "summary", "customer", "details" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/checkout.md", "json": "https://uxpatternsguide.com/agent/patterns/checkout.json", "human": "https://uxpatternsguide.com/patterns/checkout/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/checkout-vs-payment-card-entry-vs-review-before-submit-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/payment-collection-vs-checkout-vs-payment-card-entry-vs-bank-details.md" ] }, { "id": "chip-selection", "name": "Chip selection", "aliases": [ "choice chips", "selectable chips", "selectable tags", "choice tags", "chip group", "tag selection" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Compact selectable chip group for short choice answers", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to make a quick choice from short, visible options, but using chips without a clear selection contract can blur form answers, filters, badges, links, actions, and removable values.", "useWhen": "Users answer a lightweight choice question from a small set of short labels.", "avoidWhen": "The chips filter a result set rather than collect an answer.", "requiredStates": [ "Empty chip group with visible question label and helper text.", "Unselected chip state with visible focus and hit target.", "Selected chip state with checkmark, pressed state, or equivalent selected indicator.", "Single-selection chip group state where selecting one chip deselects the previous chip." ], "commonMisuses": [ "Using chip selection to filter result sets without explaining that the chips are filters.", "Mixing selectable chips, removable tags, read-only badges, links, and action chips in one visual group.", "Using chips for long labels that should be checkbox or radio options.", "Letting selected chips reorder or disappear after selection." ], "keywords": [ "chip", "selection", "choice", "chips", "selectable", "tags", "group", "tag", "ui-ux", "compact", "short", "answers", "need", "make", "quick", "visible", "options", "but", "using", "without", "clear", "contract", "blur", "form", "filters", "badges", "links", "actions", "removable", "values", "provide", "labelled", "explicit", "single", "multiple", "rules", "stable", "order", "selected", "state" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/chip-selection.md", "json": "https://uxpatternsguide.com/agent/patterns/chip-selection.json", "human": "https://uxpatternsguide.com/patterns/chip-selection/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/chip-selection-vs-filter-chips-vs-checkbox-group-vs-segmented-control.md", "https://uxpatternsguide.com/agent/comparisons/tag-vs-filter-chips-vs-chip-selection-vs-inline-message.md" ] }, { "id": "citation-display", "name": "Citation display", "aliases": [ "inline citation", "source citation", "citation marker", "evidence chip", "source preview", "cited answer", "claim citation", "reference marker", "citation panel", "answer sources" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Inline claim-to-source evidence display for generated or summarized content", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Generated answers and summaries often cite sources, but weak displays make citation numbers look trustworthy even when the source is unresolved, unavailable, stale, or not actually tied to the claim being read.", "useWhen": "Users need to verify generated claims, summaries, recommendations, or extracted facts against source material.", "avoidWhen": "The product cannot reliably map claims to sources or label unresolved citations honestly.", "requiredStates": [ "Default answer with cited claims and inline citation markers.", "Selected citation state with source preview, source title, source type, excerpt, date or version, and open source action.", "Multiple citations supporting one claim with clear source ordering and source preview switching.", "Pending citation state during streaming or retrieval before the source is verified." ], "commonMisuses": [ "Displaying a link dump below the answer instead of mapping sources to specific claims.", "Using decorative numbers that do not open a source preview.", "Keeping citations attached after the cited claim changes.", "Hiding citation details in a tooltip that disappears on blur, touch, or scroll." ], "keywords": [ "citation", "display", "inline", "source", "marker", "evidence", "chip", "preview", "cited", "answer", "claim", "reference", "panel", "sources", "automation", "ui-ux", "claim-to-source", "generated", "summarized", "content", "answers", "summaries", "often", "cite", "but", "weak", "displays", "make", "numbers", "look", "trustworthy", "even", "unresolved", "unavailable", "stale", "actually", "tied", "being", "read", "attach" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/citation-display.md", "json": "https://uxpatternsguide.com/agent/patterns/citation-display.json", "human": "https://uxpatternsguide.com/patterns/citation-display/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ai-answer-without-sources-vs-source-grounding-display-vs-citation-display-vs-confidence-uncertainty-display-vs-streaming-response-vs-correction-feedback.md", "https://uxpatternsguide.com/agent/comparisons/citation-display-vs-chat-interface-vs-streaming-response-vs-related-links-vs-tooltip.md", "https://uxpatternsguide.com/agent/comparisons/confidence-uncertainty-display-vs-source-grounding-display-vs-citation-display-vs-meter-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/editable-ai-output-vs-inline-edit-vs-prompt-box-vs-streaming-response-vs-citation-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/source-grounding-display-vs-citation-display-vs-chat-interface-vs-streaming-response-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/tool-use-visibility-vs-agent-progress-trace-vs-source-grounding-display-vs-citation-display-vs-activity-log-vs-human-approval-gate.md" ] }, { "id": "collection", "name": "Collection", "aliases": [ "curated collection", "saved collection", "resource collection", "content collection", "document collection", "item set", "saved set", "asset collection", "reading list", "collection page" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Named, purposeful set of items with collection-level metadata and membership behavior", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to keep, revisit, share, sequence, or manage a purposeful set of items, but a simple list, category page, recommendation rail, or related-links block does not explain the set's purpose, membership, ownership, order, or action scope.", "useWhen": "Users need to save, curate, share, revisit, sequence, or maintain explicit items as a meaningful set.", "avoidWhen": "The set is only a temporary search result or filtered query.", "requiredStates": [ "Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action.", "Item state with stable label, type, status, section, order, preview or summary, and item-scoped actions.", "Manual order, sorted order, sectioned order, filtered view, and no-results states.", "Add item, remove item, reorder item, move between sections, copy collection, share collection, and delete collection states when supported." ], "commonMisuses": [ "Treating any grid of cards as a collection without collection identity or membership behavior.", "Mixing search results, recommendations, recent history, saved items, and editorial links under one collection heading.", "Letting filters or sorts mutate collection membership without an explicit save step.", "Hiding permission-limited or unavailable items without explaining count differences." ], "keywords": [ "collection", "curated", "saved", "resource", "content", "document", "item", "set", "asset", "reading", "list", "page", "data", "display", "exploration", "ui-ux", "named", "purposeful", "items", "collection-level", "metadata", "membership", "behavior", "need", "keep", "revisit", "share", "sequence", "manage", "but", "simple", "category", "recommendation", "rail", "related-links", "block", "does", "explain", "purpose", "ownership" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/collection.md", "json": "https://uxpatternsguide.com/agent/patterns/collection.json", "human": "https://uxpatternsguide.com/patterns/collection/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/card-grid-vs-card-list-vs-collection-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/card-list-vs-list-view-vs-collection-vs-browse-by-category.md", "https://uxpatternsguide.com/agent/comparisons/collection-vs-list-view-vs-browse-by-category-vs-related-links.md" ] }, { "id": "combobox", "name": "Combobox", "aliases": [ "combo box", "editable select", "select-only combobox", "input with popup", "filterable single select" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Single-value input widget with owned popup", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to choose one value from a long, dynamic, or partially known option set, but a plain select is slow to scan and a plain text input cannot expose option ownership, active movement, or a selected value contract.", "useWhen": "Users choose one value from a large, dynamic, or filterable option set.", "avoidWhen": "The list is short enough for native select, radio buttons, or segmented controls.", "requiredStates": [ "Collapsed empty state with label, help text, and popup affordance.", "Focused collapsed state with current value and selected option status.", "Expanded popup state with controlled listbox, grid, tree, or dialog.", "Filtered option state after typing." ], "commonMisuses": [ "Using a custom combobox for a short list where native select, radio buttons, or segmented controls would be simpler.", "Treating highlighted, active, and selected states as the same thing.", "Submitting the last selected option ID after the user changes the visible text.", "Moving DOM focus into popup options for an editable combobox and breaking text editing." ], "keywords": [ "combobox", "combo", "box", "editable", "select", "select-only", "input", "popup", "filterable", "single", "selection", "choice", "ui-ux", "single-value", "widget", "owned", "need", "choose", "one", "value", "long", "dynamic", "partially", "known", "option", "set", "but", "plain", "slow", "scan", "text", "cannot", "expose", "ownership", "active", "movement", "selected", "contract", "provide", "labelled" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/combobox.md", "json": "https://uxpatternsguide.com/agent/patterns/combobox.json", "human": "https://uxpatternsguide.com/patterns/combobox/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/combobox-vs-autocomplete-vs-select-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/listbox-vs-select-vs-combobox-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/object-picker-vs-combobox-vs-autocomplete-vs-multi-select.md" ] }, { "id": "command-palette", "name": "Command palette", "aliases": [ "command menu", "quick switcher", "action palette" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Modal command surface", "maturity": "established", "platforms": [ "web", "desktop" ], "problem": "Experienced users need a fast keyboard-first way to jump to actions, destinations, and objects across a large product.", "useWhen": "Users need to traverse a broad product surface quickly.", "avoidWhen": "The app has only a few obvious actions.", "requiredStates": [ "Closed state with discoverable trigger.", "Open dialog state with focus in the command input.", "Scoped suggested commands state.", "Filtered result state with one active command." ], "commonMisuses": [ "Hiding basic navigation behind a keyboard-only palette.", "Mixing irreversible destructive actions into the same low-friction list.", "Returning vague commands such as Settings without context.", "Treating content search results and side-effect commands as the same kind of row." ], "keywords": [ "command", "palette", "menu", "quick", "switcher", "action", "navigation", "wayfinding", "ui-ux", "modal", "surface", "experienced", "need", "fast", "keyboard-first", "way", "jump", "actions", "destinations", "objects", "across", "large", "product", "open", "searchable", "lists", "supports", "filtering", "clearly", "previews", "what", "each", "does", "render", "compact", "dialog-like", "search", "input", "current", "scope" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/command-palette.md", "json": "https://uxpatternsguide.com/agent/patterns/command-palette.json", "human": "https://uxpatternsguide.com/patterns/command-palette/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/action-menu-vs-menu-button-vs-button-group-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/basic-search-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/keyboard-shortcut-vs-command-palette-vs-menu-menubar-vs-toolbar-vs-undo-vs-redo.md", "https://uxpatternsguide.com/agent/comparisons/menu-button-vs-command-palette-vs-select-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/prompt-box-vs-prompt-suggestions-vs-command-palette-vs-search-suggestions-vs-textarea.md", "https://uxpatternsguide.com/agent/comparisons/prompt-suggestions-vs-search-suggestions-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/redo-vs-undo-vs-draft-state-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/toolbar-vs-button-group-vs-menu-button-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/voice-command-vs-keyboard-shortcut-vs-command-palette-vs-prompt-box-vs-text-input-vs-touch-gesture.md" ] }, { "id": "comments", "name": "Comments", "aliases": [ "comment box", "object comments", "document comments", "review comments", "annotation comments", "comment thread", "comment conversation", "inline comments", "discussion comments" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Object-attached comment composer and comment list with authorship, replies, state, permissions, and moderation", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Collaboration breaks down when feedback is stored as loose notes, global feed items, private messages, or overwritten text fields instead of anchored comments with clear authorship, state, permissions, and recovery.", "useWhen": "Users need object-attached discussion without changing the primary object content directly.", "avoidWhen": "The user is simply entering a long answer into a form field.", "requiredStates": [ "Empty comment list and first-comment composer.", "Draft comment, saving comment, saved comment, failed save, retry, and discarded draft states.", "Open comment with author, timestamp, body, anchor, and item actions.", "Reply state, reply saved state, and focused return to the affected comment." ], "commonMisuses": [ "Using one shared Notes field as a comment system and overwriting prior contributors.", "Treating a comment as a feed item and losing its object or selection anchor.", "Hiding edit, delete, resolve, or moderation actions behind hover-only controls.", "Deleting or hiding comments without warning, permission checks, reason text, or timeline evidence." ], "keywords": [ "comments", "comment", "box", "object", "document", "review", "annotation", "thread", "conversation", "inline", "discussion", "collaboration", "social", "interaction", "ui-ux", "object-attached", "composer", "list", "authorship", "replies", "state", "permissions", "moderation", "breaks", "down", "feedback", "stored", "loose", "notes", "global", "feed", "items", "private", "messages", "overwritten", "text", "fields", "instead", "anchored", "clear" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/comments.md", "json": "https://uxpatternsguide.com/agent/patterns/comments.json", "human": "https://uxpatternsguide.com/patterns/comments/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/block-mute-vs-report-abuse-vs-notification-preferences-vs-follow-subscribe-vs-permission-denied-state-vs-comments.md", "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/chat-interface-vs-prompt-box-vs-threaded-discussion-vs-comments-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/comments-vs-textarea-vs-feed-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/correction-feedback-vs-query-correction-vs-inline-validation-vs-comments-vs-regenerate-retry-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/follow-subscribe-vs-notification-center-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/presence-vs-mentions-vs-notification-center-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/reactions-vs-comments-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/report-abuse-vs-review-queue-vs-comments-vs-security-warning-vs-permission-denied-state-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/threaded-discussion-vs-comments-vs-feed-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/version-history-vs-activity-log-vs-timeline-vs-undo.md" ] }, { "id": "compare-view", "name": "Compare view", "aliases": [ "comparison view", "comparison table", "compare products", "side-by-side comparison", "feature comparison", "shortlist comparison", "comparison matrix", "product compare" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Selected side-by-side attribute comparison of peer items", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to choose among similar offerings with many attributes, but browsing cards, opening detail pages, or scanning a large table forces memory work and makes tradeoffs between nonadjacent items hard to judge.", "useWhen": "Users need to choose among similar offerings using multiple comparable attributes.", "avoidWhen": "Items are unique, nonexclusive, too simple, too cheap, or mostly aesthetic.", "requiredStates": [ "No compared items state with instructions for adding items and a route back to browse.", "One compared item state that explains another item is needed for meaningful comparison.", "Full comparison state with item headers, grouped attribute rows, actions, row labels, and selected-item count.", "Maximum item limit reached state with a clear remove or replace path." ], "commonMisuses": [ "Allowing too many compared items so columns become unreadable.", "Using inconsistent labels, units, or attribute availability across compared items.", "Showing long marketing paragraphs instead of concise comparable values.", "Hiding compare selection behind hover-only controls." ], "keywords": [ "compare", "view", "comparison", "table", "products", "side-by-side", "feature", "shortlist", "matrix", "product", "data", "display", "exploration", "ui-ux", "selected", "attribute", "peer", "items", "need", "choose", "among", "similar", "offerings", "many", "attributes", "but", "browsing", "cards", "opening", "detail", "pages", "scanning", "large", "forces", "memory", "work", "makes", "tradeoffs", "between", "nonadjacent" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/compare-view.md", "json": "https://uxpatternsguide.com/agent/patterns/compare-view.json", "human": "https://uxpatternsguide.com/patterns/compare-view/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/compare-view-vs-table-vs-card-grid-vs-details-panel.md" ] }, { "id": "complete-complex-form", "name": "Complete complex form", "aliases": [ "complex form", "sectioned form", "enterprise configuration form", "long settings form", "policy configuration form", "sectioned settings editor" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Sectioned enterprise configuration form", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Large product settings and policy forms become unsafe when users cannot see section ownership, cross-section dependencies, required fields, validation recovery, or whether the complete configuration is ready to save.", "useWhen": "A product configuration has many related fields across named sections.", "avoidWhen": "The form is a short related set of fields that fits a simple single-page form.", "requiredStates": [ "Initial draft state with named sections, required-field convention, grouped controls, and save unavailable or clearly pending validation.", "Current section state with visible section heading, fields, helper text, and local actions.", "Edited section state that preserves entered values before validation.", "Section complete state derived from required fields, local validation, and dependencies." ], "commonMisuses": [ "Calling a dense settings table a complex form without section status, labels, or validation ownership.", "Splitting tightly related settings across pages so dependencies are invisible during editing.", "Using wizard chrome for ordinary configuration edits that do not need guided setup or finish semantics.", "Hiding required fields or save-blocking errors inside advanced disclosure panels." ], "keywords": [ "complete", "complex", "form", "sectioned", "enterprise", "configuration", "long", "settings", "policy", "editor", "input", "data", "entry", "ui-ux", "large", "product", "forms", "become", "unsafe", "cannot", "see", "section", "ownership", "cross-section", "dependencies", "required", "fields", "validation", "recovery", "whether", "ready", "save", "structure", "related", "named", "sections", "one", "inspectable", "surface", "expose" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/complete-complex-form.md", "json": "https://uxpatternsguide.com/agent/patterns/complete-complex-form.json", "human": "https://uxpatternsguide.com/patterns/complete-complex-form/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/automation-rule-builder-vs-human-approval-gate-vs-approval-workflow-vs-settings-management-vs-complete-complex-form-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/complete-complex-form-vs-single-page-form-vs-multi-step-form-vs-wizard.md", "https://uxpatternsguide.com/agent/comparisons/dependent-fields-vs-select-vs-inline-validation-vs-complete-complex-form.md", "https://uxpatternsguide.com/agent/comparisons/draft-state-vs-autosave-form-vs-inline-edit-vs-complete-complex-form.md", "https://uxpatternsguide.com/agent/comparisons/review-before-submit-vs-multi-step-form-vs-complete-complex-form-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/settings-management-vs-complete-complex-form-vs-toggle-switch-vs-progressive-disclosure.md", "https://uxpatternsguide.com/agent/comparisons/settings-page-vs-settings-management-vs-side-navigation-vs-tabs.md" ] }, { "id": "complete-multiple-tasks", "name": "Complete multiple tasks", "aliases": [ "task hub", "transaction task list", "complete sections", "application task list", "multi-section application", "return to task list", "service task list", "completion hub", "application checklist", "section completion" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Saved transaction hub for completing several sections or tasks over one or more sessions", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Long transactions fail when users cannot see the sections involved, which ones are complete, which can be done next, what is blocked, whether progress is saved, or when the transaction is ready to submit.", "useWhen": "A transaction has several meaningful sections or tasks and progress is saved.", "avoidWhen": "The service is short enough to complete in one simple flow.", "requiredStates": [ "First visit state with task groups, task names, initial statuses, and start guidance.", "Returning session state with saved progress and resume cue.", "Not started task state.", "In progress task state." ], "commonMisuses": [ "Using complete multiple tasks for a service that can be simplified into a single short flow.", "Using it as an answer summary instead of a progress hub.", "Showing a task list when the user must complete every step in one strict order.", "Letting the final action proceed while required tasks are incomplete or stale." ], "keywords": [ "complete", "multiple", "tasks", "task", "hub", "transaction", "list", "sections", "application", "multi-section", "return", "service", "completion", "checklist", "section", "workflow", "patterns", "ui-ux", "saved", "completing", "several", "over", "one", "more", "sessions", "long", "transactions", "fail", "cannot", "see", "involved", "which", "ones", "done", "next", "what", "blocked", "whether", "progress", "ready" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/complete-multiple-tasks.md", "json": "https://uxpatternsguide.com/agent/patterns/complete-multiple-tasks.json", "human": "https://uxpatternsguide.com/patterns/complete-multiple-tasks/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/complete-multiple-tasks-vs-step-navigation-vs-process-list-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md" ] }, { "id": "conditional-reveal-fields", "name": "Conditional reveal fields", "aliases": [ "conditional reveal", "conditionally revealed field", "conditional field", "follow-up field", "radio conditional content", "checkbox conditional content", "show hide form field" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Trigger-owned follow-up form field", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Forms become noisy or misleading when all follow-up fields are always shown, but they become fragile when hidden fields are required, submitted, or revealed without a clear relationship to the triggering answer.", "useWhen": "A selected radio, checkbox, or select option needs one short related follow-up field.", "avoidWhen": "The revealed content is a complete form, separate workflow, or separate submit action.", "requiredStates": [ "Initial state with trigger options visible and no conditional field shown.", "Trigger selected state with the related follow-up field revealed directly under the trigger.", "Revealed field completed state with value included in submission.", "Trigger changed or deselected state where the revealed field hides and its value is cleared or excluded." ], "commonMisuses": [ "Hiding a required field and still validating it after its trigger is unselected.", "Submitting hidden stale values because the field was visually hidden but still active in the model.", "Revealing a complete form or separate task under a single option.", "Placing the revealed field far away from the answer that triggered it." ], "keywords": [ "conditional", "reveal", "fields", "conditionally", "revealed", "field", "follow-up", "radio", "content", "checkbox", "show", "hide", "form", "input", "data", "entry", "ui-ux", "trigger-owned", "forms", "become", "noisy", "misleading", "all", "always", "shown", "but", "they", "fragile", "hidden", "required", "submitted", "without", "clear", "relationship", "triggering", "answer", "short", "related", "owned", "selected" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/conditional-reveal-fields.md", "json": "https://uxpatternsguide.com/agent/patterns/conditional-reveal-fields.json", "human": "https://uxpatternsguide.com/patterns/conditional-reveal-fields/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/conditional-reveal-fields-vs-dependent-fields-vs-radio-group-vs-single-question-page.md", "https://uxpatternsguide.com/agent/comparisons/required-field-hidden-by-conditional-logic-vs-conditional-reveal-fields-vs-dependent-fields-vs-error-summary-vs-single-page-form-vs-review-before-submit.md" ] }, { "id": "confidence-uncertainty-display", "name": "Confidence / uncertainty display", "aliases": [ "confidence display", "uncertainty display", "AI confidence indicator", "model confidence", "prediction reliability", "uncertainty label", "confidence band", "confidence score", "calibration display", "review threshold display" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Calibrated reliability and uncertainty display for AI or automated predictions before user action", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI predictions and automated assessments often look authoritative even when the system is unsure, uncalibrated, out of distribution, stale, missing evidence, or below the threshold for safe action.", "useWhen": "Users must judge whether an AI prediction, classification, recommendation, extraction, risk score, or generated answer is reliable enough to use.", "avoidWhen": "The system cannot estimate uncertainty or calibration honestly.", "requiredStates": [ "High confidence state with calibration scope, reason, and whether direct apply is allowed.", "Medium confidence state with review recommendation, uncertainty reason, and threshold context.", "Low confidence state with apply gated and a review, verify, collect more input, or fallback action.", "Insufficient evidence state when the model cannot assess the input because required signals are absent." ], "commonMisuses": [ "Showing a fake percent or exact decimal for an uncalibrated model score.", "Using color-only confidence badges without text, threshold, reason, or action guidance.", "Treating high confidence as proof, source support, legal approval, or permission.", "Hiding low confidence, insufficient evidence, conflicting signals, or out-of-distribution states behind an action menu." ], "keywords": [ "confidence", "uncertainty", "display", "indicator", "model", "prediction", "reliability", "label", "band", "score", "calibration", "review", "threshold", "automation", "ui-ux", "calibrated", "automated", "predictions", "before", "action", "assessments", "often", "look", "authoritative", "even", "system", "unsure", "uncalibrated", "out", "distribution", "stale", "missing", "evidence", "below", "safe", "show", "honest", "labels", "reasons", "thresholds" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/confidence-uncertainty-display.md", "json": "https://uxpatternsguide.com/agent/patterns/confidence-uncertainty-display.json", "human": "https://uxpatternsguide.com/patterns/confidence-uncertainty-display/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ai-answer-without-sources-vs-source-grounding-display-vs-citation-display-vs-confidence-uncertainty-display-vs-streaming-response-vs-correction-feedback.md", "https://uxpatternsguide.com/agent/comparisons/ai-confidence-shown-as-fake-precision-vs-confidence-uncertainty-display-vs-meter-vs-source-grounding-display-vs-warning-text-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/confidence-uncertainty-display-vs-source-grounding-display-vs-citation-display-vs-meter-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/model-update-notice-vs-notification-banner-vs-warning-text-vs-phase-beta-banner-vs-confidence-uncertainty-display-vs-source-grounding-display.md" ] }, { "id": "confirm-email", "name": "Confirm email", "aliases": [ "email confirmation", "email verification", "verify email address", "confirm email address", "activation email", "email confirmation code", "verify mailbox", "email access confirmation", "account activation email" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Mailbox access confirmation loop", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Services often need proof that a user controls an email address, but confirmation loops can block tasks unnecessarily, trap users with mistyped addresses, leak account state, or confuse email access proof with authentication.", "useWhen": "A user must prove access to a mailbox before account activation, invitation acceptance, recovery eligibility, or sensitive notifications.", "avoidWhen": "The email is only needed for a low-risk receipt, newsletter, or optional contact route.", "requiredStates": [ "Pending sent state with target email address, purpose, next step, expiry, resend, and change-address action.", "Blocking pending state where the task cannot continue until confirmation succeeds.", "Non-blocking pending state where users can continue with limited access while confirmation remains outstanding.", "Code entry state with paste support, autocomplete one-time-code when a short code is used, expiry hint, and submit control." ], "commonMisuses": [ "Forcing email confirmation when the service only needs a low-risk contact or receipt address.", "Hiding the email address that received the confirmation message.", "Providing no resend, change-address, expiry, or support route.", "Treating email syntax validation as verified mailbox access." ], "keywords": [ "confirm", "email", "confirmation", "verification", "verify", "address", "activation", "code", "mailbox", "access", "account", "task", "workflow", "patterns", "ui-ux", "loop", "services", "often", "need", "proof", "controls", "but", "loops", "block", "tasks", "unnecessarily", "trap", "mistyped", "addresses", "leak", "state", "confuse", "authentication", "matters", "show", "target", "delivery", "link", "instructions", "expiry" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/confirm-email.md", "json": "https://uxpatternsguide.com/agent/patterns/confirm-email.json", "human": "https://uxpatternsguide.com/patterns/confirm-email/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/confirm-email-vs-email-address-entry-vs-account-creation-vs-password-reset.md", "https://uxpatternsguide.com/agent/comparisons/confirm-phone-vs-phone-number-entry-vs-confirm-email-vs-two-factor-authentication.md" ] }, { "id": "confirm-phone", "name": "Confirm phone", "aliases": [ "phone confirmation", "phone verification", "verify phone number", "confirm mobile number", "SMS confirmation code", "phone security code", "voice verification code", "verified phone access", "phone OTP" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Phone reachability confirmation loop", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Services need proof that a captured phone route can receive a code, but phone confirmation can trap users with mistyped numbers, delayed messages, expired codes, SMS-only assumptions, and misplaced confidence in phone-based authentication.", "useWhen": "A captured phone number must be proven reachable before activation, contact-route reliance, recovery eligibility, phone-number change, or a sensitive action continues.", "avoidWhen": "The product only needs to collect or review a phone number for low-risk contact.", "requiredStates": [ "Sent-code state with target phone number when safe, channel, purpose, code length, expiry, resend, and change-number or support action.", "Blocking pending state where the task cannot continue until phone access is confirmed.", "Non-blocking pending state where users can continue with limited access while verified-phone state remains pending.", "SMS code-entry state with a labelled input, inputmode numeric, one-time-code autocomplete, paste support, and visible expiry." ], "commonMisuses": [ "Treating phone-number format validation as proof that the user can receive texts or calls.", "Hiding the destination number when users need it to spot a typo.", "Providing no resend, wait time, change-number, voice, no-phone, or support route.", "Forcing SMS for users with landlines, shared phones, inaccessible devices, no cellular signal, or no phone." ], "keywords": [ "confirm", "phone", "confirmation", "verification", "verify", "number", "mobile", "sms", "code", "security", "voice", "verified", "access", "otp", "task", "workflow", "patterns", "ui-ux", "reachability", "loop", "services", "need", "proof", "captured", "route", "receive", "but", "trap", "mistyped", "numbers", "delayed", "messages", "expired", "codes", "sms-only", "assumptions", "misplaced", "confidence", "phone-based", "authentication" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/confirm-phone.md", "json": "https://uxpatternsguide.com/agent/patterns/confirm-phone.json", "human": "https://uxpatternsguide.com/patterns/confirm-phone/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/confirm-phone-vs-phone-number-entry-vs-confirm-email-vs-two-factor-authentication.md" ] }, { "id": "confirmation-dialog", "name": "Confirmation dialog", "aliases": [ "confirm dialog", "destructive confirmation", "alert dialog confirmation", "typed confirmation" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Consequential alert decision", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can accidentally start consequential actions that are costly, security-sensitive, externally visible, or impossible to recover after commitment.", "useWhen": "The action is destructive, irreversible, costly, security-sensitive, privacy-affecting, or externally visible.", "avoidWhen": "The action is routine and easily reversible.", "requiredStates": [ "Pre-action state with an explicit consequential trigger.", "Decision state that names the affected object, scope, and irreversible or costly consequence.", "Safe cancellation state that leaves the object unchanged and returns focus to the trigger.", "Blocked destructive state before required typed text or safety condition is satisfied." ], "commonMisuses": [ "Asking users to confirm every routine action until they stop reading.", "Using vague Are you sure copy without object, scope, or consequence.", "Making the destructive action the easiest accidental target.", "Using confirmation instead of undo for fast reversible actions." ], "keywords": [ "confirmation", "dialog", "confirm", "destructive", "alert", "typed", "error", "prevention", "recovery", "ui-ux", "consequential", "decision", "accidentally", "start", "actions", "costly", "security-sensitive", "externally", "visible", "impossible", "recover", "after", "commitment", "interrupt", "requested", "action", "alert-style", "names", "object", "scope", "consequence", "makes", "cancellation", "safe", "easy", "requires", "explicit", "confirming", "before", "render" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/confirmation-dialog.md", "json": "https://uxpatternsguide.com/agent/patterns/confirmation-dialog.json", "human": "https://uxpatternsguide.com/patterns/confirmation-dialog/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/action-sheet-vs-action-menu-vs-bottom-sheet-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/alert-dialog-vs-alert-vs-modal-dialog-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/alert-vs-inline-message-vs-toast-notification-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/approval-workflow-vs-review-before-submit-vs-permission-recovery-vs-invite-user.md", "https://uxpatternsguide.com/agent/comparisons/button-group-vs-segmented-control-vs-menu-button-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/confirmation-fatigue-vs-confirmation-dialog-vs-destructive-action-confirmation-vs-undo-vs-warning-text-vs-dangerous-action-review.md", "https://uxpatternsguide.com/agent/comparisons/destructive-action-confirmation-vs-confirmation-dialog-vs-undo-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/exit-warning-vs-autosave-form-vs-draft-state-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/haptic-feedback-vs-touch-gesture-vs-toast-notification-vs-error-state-vs-confirmation-dialog-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/icon-only-ambiguous-action-vs-confirmation-dialog-vs-undo.md", "https://uxpatternsguide.com/agent/comparisons/legal-acceptance-vs-consent-prompt-vs-review-before-submit-vs-checkbox-group-vs-confirmation-dialog-vs-typed-confirmation-vs-age-gate.md", "https://uxpatternsguide.com/agent/comparisons/menu-button-vs-command-palette-vs-select-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/modal-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/swipe-action-vs-touch-gesture-vs-list-view-vs-action-menu-vs-undo-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/typed-confirmation-vs-destructive-action-confirmation-vs-confirmation-dialog-vs-password-input.md", "https://uxpatternsguide.com/agent/comparisons/undo-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/unsaved-changes-prompt-vs-exit-warning-vs-autosave-form-vs-confirmation-dialog.md" ] }, { "id": "confirmation-fatigue", "name": "Confirmation fatigue", "aliases": [ "confirmation habituation", "too many confirmations", "are you sure fatigue", "dialog fatigue", "prompt fatigue", "confirmation overload", "routine confirmation spam" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Anti-pattern where repeated low-value confirmations train users to dismiss real risk prompts automatically", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "When products ask users to confirm too many routine actions, users learn that confirmations are meaningless friction. The prompt no longer creates attention when the consequence is genuinely destructive, costly, external, or hard to undo.", "useWhen": "Use this anti-pattern entry to audit products that ask for confirmation on many routine actions or use identical prompts for different levels of risk.", "avoidWhen": "Do not use this entry to remove confirmation from permanent deletion, broad permission changes, external side effects, legal commitments, payments, production commands, or account closure without adding an equally strong safeguard.", "requiredStates": [ "Prompt inventory state showing which actions are confirmed, how often they occur, and what consequence each confirmation prevents.", "Routine reversible action state using status and undo instead of modal confirmation.", "Meaningful confirmation state reserved for uncommon destructive, costly, external, permission, or security-sensitive actions.", "Prompt suppression state where repeated low-risk confirmations are removed or replaced with less interruptive feedback." ], "commonMisuses": [ "Adding a confirmation after every user mistake without asking whether the mistake was reversible.", "Using one generic confirmation component for every action from closing a panel to deleting a workspace.", "Stacking warning text, confirmation dialog, typed confirmation, and undo for a low-risk action.", "Keeping prompts because they feel safer even though users dismiss them unread." ], "keywords": [ "confirmation", "fatigue", "habituation", "too", "many", "confirmations", "you", "sure", "dialog", "prompt", "overload", "routine", "spam", "error", "prevention", "recovery", "ui-ux", "anti-pattern", "where", "repeated", "low-value", "train", "dismiss", "real", "risk", "prompts", "automatically", "products", "ask", "confirm", "actions", "learn", "meaningless", "friction", "longer", "creates", "attention", "consequence", "genuinely", "destructive" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/confirmation-fatigue.md", "json": "https://uxpatternsguide.com/agent/patterns/confirmation-fatigue.json", "human": "https://uxpatternsguide.com/patterns/confirmation-fatigue/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ambiguous-destructive-action-copy-vs-destructive-action-confirmation-vs-typed-confirmation-vs-dangerous-action-review-vs-confirmation-fatigue-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/confirmation-fatigue-vs-confirmation-dialog-vs-destructive-action-confirmation-vs-undo-vs-warning-text-vs-dangerous-action-review.md" ] }, { "id": "confirmation-page", "name": "Confirmation page", "aliases": [ "completion page", "transaction confirmation page", "receipt page", "submitted page", "application complete page", "booking complete page" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Final endpoint page after a transaction is complete", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users finish a transaction but do not know whether it is complete, what reference proves it, what will happen next, how long it will take, who to contact, or how to recover the receipt later.", "useWhen": "A transaction or service journey has ended and users need durable proof plus next-step information.", "avoidWhen": "The user remains inside an ongoing task and only needs local proof near the changed object.", "requiredStates": [ "Submitted state immediately after authoritative commit routes to the confirmation page.", "Completion panel state with success heading and reference or receipt details when available.", "Next-step state that names timing, responsible party, contact route, and whether any user action remains.", "Record-keeping state with save, print, email, copy reference, or downloadable receipt when users may need proof." ], "commonMisuses": [ "Showing a toast or local success strip as the only proof of a completed transaction.", "Using a confirmation page before the transaction is committed.", "Leaving Change links active after final submit.", "Showing a reference number without explaining whether users need to keep it." ], "keywords": [ "confirmation", "page", "completion", "transaction", "receipt", "submitted", "application", "complete", "booking", "feedback", "status", "system", "state", "ui-ux", "final", "endpoint", "after", "finish", "but", "know", "whether", "what", "reference", "proves", "will", "happen", "next", "how", "long", "take", "who", "contact", "recover", "later", "route", "successful", "submit", "dedicated", "gives", "any" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/confirmation-page.md", "json": "https://uxpatternsguide.com/agent/patterns/confirmation-page.json", "human": "https://uxpatternsguide.com/patterns/confirmation-page/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/checkout-vs-payment-card-entry-vs-review-before-submit-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/complete-multiple-tasks-vs-step-navigation-vs-process-list-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/confirmation-page-vs-success-confirmation-vs-review-before-submit-vs-notification-banner.md", "https://uxpatternsguide.com/agent/comparisons/payment-collection-vs-checkout-vs-payment-card-entry-vs-bank-details.md", "https://uxpatternsguide.com/agent/comparisons/publish-workflow-vs-approval-workflow-vs-review-queue-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/toast-only-success-for-completed-transaction-vs-confirmation-page-vs-success-confirmation-vs-toast-notification.md" ] }, { "id": "conflict-resolution", "name": "Conflict resolution", "aliases": [ "resolve conflict", "conflict review workflow", "resolve competing edits", "version resolution", "change conflict resolution", "collaboration conflict workflow", "field conflict resolver" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Guided workflow for reviewing and committing conflict decisions", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can make the wrong decision or lose work when a product detects competing valid changes but provides no guided way to inspect every affected value, choose or merge outcomes, defer unsafe cases, and review the final result before commit.", "useWhen": "A conflict has been detected and a user must choose, merge, save-copy, skip, or commit a result.", "avoidWhen": "The system can safely merge non-overlapping changes without user judgment.", "requiredStates": [ "Conflict list state with unresolved count and current conflict position.", "Side-by-side or inline comparison state for the current conflict.", "Choose local, choose remote, choose existing, or choose incoming state.", "Manual merge edit state with unresolved markers." ], "commonMisuses": [ "Marking conflicts resolved before the user reviews the surviving value.", "Using a single Accept all button without showing affected fields or discarded values.", "Letting users commit with required conflicts still unresolved.", "Using ambiguous Ours and Theirs labels without branch, owner, device, or timestamp context." ], "keywords": [ "conflict", "resolution", "resolve", "review", "workflow", "competing", "edits", "version", "change", "collaboration", "field", "resolver", "error", "prevention", "recovery", "ui-ux", "guided", "reviewing", "committing", "decisions", "make", "wrong", "decision", "lose", "work", "product", "detects", "valid", "changes", "but", "provides", "way", "inspect", "every", "affected", "value", "choose", "merge", "outcomes", "defer" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/conflict-resolution.md", "json": "https://uxpatternsguide.com/agent/patterns/conflict-resolution.json", "human": "https://uxpatternsguide.com/patterns/conflict-resolution/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/conflict-resolution-vs-conflict-state-vs-review-before-submit-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/merge-conflict-resolver-vs-conflict-resolution-vs-conflict-state-vs-review-before-submit.md" ] }, { "id": "conflict-state", "name": "Conflict state", "aliases": [ "edit conflict", "save conflict", "version conflict", "merge conflict", "coauthoring conflict", "conflicting changes", "concurrent edit conflict", "record conflict" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Competing-version resolution state", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can lose trust and data when two or more valid edits target the same object or location and the product cannot safely decide which change should win, merge, or be discarded.", "useWhen": "Concurrent users, devices, branches, or background jobs changed the same object or location.", "avoidWhen": "Only one operation failed and there is no competing valid version.", "requiredStates": [ "No conflict state after automatic safe merge.", "Conflict detected state naming affected object and source versions.", "Side-by-side or inline comparison state for overlapping values.", "Choose mine or choose theirs state with preview." ], "commonMisuses": [ "Treating a conflict as a simple retryable save error.", "Letting newest timestamp win without preserving the losing value.", "Using ambiguous labels such as ours and theirs without explaining source and target.", "Showing a conflict count without the affected fields, values, owners, or timestamps." ], "keywords": [ "conflict", "state", "edit", "save", "version", "merge", "coauthoring", "conflicting", "changes", "concurrent", "record", "feedback", "status", "system", "ui-ux", "competing-version", "resolution", "lose", "trust", "data", "two", "more", "valid", "edits", "target", "same", "object", "location", "product", "cannot", "safely", "decide", "which", "change", "should", "win", "discarded", "present", "preserves", "every" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/conflict-state.md", "json": "https://uxpatternsguide.com/agent/patterns/conflict-state.json", "human": "https://uxpatternsguide.com/patterns/conflict-state/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/conflict-resolution-vs-conflict-state-vs-review-before-submit-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/conflict-state-vs-sync-state-vs-draft-state-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/merge-conflict-resolver-vs-conflict-resolution-vs-conflict-state-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/publish-workflow-vs-approval-workflow-vs-review-queue-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/scheduling-vs-booking-vs-calendar-view-vs-date-picker.md" ] }, { "id": "consent-prompt", "name": "Consent prompt", "aliases": [ "explicit consent prompt", "opt-in consent prompt", "data use consent", "privacy consent prompt", "research consent prompt", "marketing opt-in prompt", "AI training consent prompt", "partner sharing consent prompt", "consent request", "affirmative consent prompt" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Specific opt-in decision for optional data use, participation, communication, sharing, or training", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users are often asked to agree to optional data use, marketing, research, AI training, personalization, or sharing at moments where the purpose, data, consequences, and withdrawal route are unclear, making the recorded agreement weak and the experience untrustworthy.", "useWhen": "The product needs a user's active agreement for optional data use, marketing, research participation, personalization, partner sharing, AI training, or sensitive-data processing.", "avoidWhen": "The choice is only about non-essential cookies or device storage; use cookie banner.", "requiredStates": [ "Pre-consent state with optional processing off and the core task still understandable.", "Specific purpose state naming the requester, data, purpose, benefit, and optionality.", "Accept consent state with clear affirmative action and saved consent record.", "Decline consent state that keeps eligible core workflow available and records refusal without penalty." ], "commonMisuses": [ "Treating continued use, scrolling, closing, or inactivity as consent.", "Using preselected checkboxes for optional processing.", "Bundling marketing, research, partner sharing, personalization, and AI training into one broad choice.", "Hiding decline behind a settings link or making refusal look unsafe." ], "keywords": [ "consent", "prompt", "explicit", "opt-in", "data", "privacy", "research", "marketing", "training", "partner", "sharing", "request", "affirmative", "trust", "safety", "ui-ux", "specific", "decision", "optional", "participation", "communication", "often", "asked", "agree", "personalization", "moments", "where", "purpose", "consequences", "withdrawal", "route", "unclear", "making", "recorded", "agreement", "weak", "experience", "untrustworthy", "provide", "informed" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/consent-prompt.md", "json": "https://uxpatternsguide.com/agent/patterns/consent-prompt.json", "human": "https://uxpatternsguide.com/patterns/consent-prompt/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/age-gate-vs-consent-prompt-vs-permission-request-vs-sensitive-data-reveal-vs-privacy-settings-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/consent-prompt-vs-cookie-banner-vs-preference-center-vs-notification-preferences-vs-permission-sharing-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/cookie-consent-vs-cookie-banner-vs-consent-prompt-vs-preference-center-vs-privacy-settings-vs-legal-acceptance.md", "https://uxpatternsguide.com/agent/comparisons/dark-pattern-consent-vs-consent-prompt-vs-cookie-consent-vs-cookie-banner-vs-legal-acceptance-vs-preference-center.md", "https://uxpatternsguide.com/agent/comparisons/legal-acceptance-vs-consent-prompt-vs-review-before-submit-vs-checkbox-group-vs-confirmation-dialog-vs-typed-confirmation-vs-age-gate.md", "https://uxpatternsguide.com/agent/comparisons/permission-prompt-with-no-context-vs-permission-request-vs-location-permission-flow-vs-consent-prompt-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/permission-request-vs-consent-prompt-vs-permission-sharing-vs-permission-recovery-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/privacy-settings-vs-settings-management-vs-preference-center-vs-consent-prompt-vs-permission-request-vs-data-export.md" ] }, { "id": "context-menu", "name": "Context menu", "aliases": [ "right-click menu", "shortcut menu", "secondary click menu", "long-press menu", "object context menu", "selection context menu" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Location-invoked contextual command menu", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Objects often have secondary commands that experienced users expect near the object, but hiding commands behind pointer-only right click or stale context can make actions undiscoverable, target-ambiguous, or inaccessible.", "useWhen": "Objects or selections have secondary commands that experienced users expect near the target.", "avoidWhen": "The command is primary, urgent, safety-critical, or required for task completion.", "requiredStates": [ "Resting object or selection state before invocation.", "Pointer-invoked open state anchored to the object or pointer coordinate.", "Keyboard-invoked open state anchored to the focused object or selection, not stale pointer coordinates.", "Visible target state showing which object or selected set commands will affect." ], "commonMisuses": [ "Making right click or long press the only way to discover important commands.", "Opening a context menu for the wrong row because selection and pointer target are out of sync.", "Ignoring keyboard context-menu invocation or placing the menu at a stale pointer coordinate.", "Showing different command sets for right click and Shift+F10 on the same object." ], "keywords": [ "context", "menu", "right-click", "shortcut", "secondary", "click", "long-press", "object", "selection", "disclosure", "attention", "management", "ui-ux", "location-invoked", "contextual", "command", "objects", "often", "have", "commands", "experienced", "expect", "near", "but", "hiding", "behind", "pointer-only", "right", "stale", "make", "actions", "undiscoverable", "target-ambiguous", "inaccessible", "provide", "compact", "opens", "invoked", "pointer", "keyboard" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/context-menu.md", "json": "https://uxpatternsguide.com/agent/patterns/context-menu.json", "human": "https://uxpatternsguide.com/patterns/context-menu/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/context-menu-vs-action-menu-vs-menu-button-vs-popover.md", "https://uxpatternsguide.com/agent/comparisons/long-press-vs-touch-gesture-vs-context-menu-vs-tooltip-vs-popover-vs-action-menu.md" ] }, { "id": "cookie-banner", "name": "Cookie banner", "aliases": [ "cookie consent banner", "cookie notice", "tracking consent banner", "cookie preferences banner", "consent management banner", "analytics cookie banner", "privacy cookie banner" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Cookie and tracking consent control", "maturity": "standard", "platforms": [ "web", "mobile" ], "problem": "Users need a real, understandable choice about cookies and similar tracking technologies before optional storage is used, but many banners obscure refusal, set tracking before consent, mix legal text with product notices, or make later withdrawal difficult.", "useWhen": "The service sets non-essential cookies or similar device storage technologies.", "avoidWhen": "The service uses only strictly necessary cookies and can explain them on a cookies page.", "requiredStates": [ "First visit with no saved preference.", "Essential-only service with no banner and a visible cookies page link.", "Accept non-essential cookies state.", "Reject non-essential cookies state." ], "commonMisuses": [ "Accept-only banners.", "Reject hidden behind settings while accept is shown as the only button.", "Preselected non-essential categories.", "Firing optional tracking before consent." ], "keywords": [ "cookie", "banner", "consent", "notice", "tracking", "preferences", "management", "analytics", "privacy", "feedback", "status", "system", "state", "ui-ux", "control", "need", "real", "understandable", "choice", "about", "cookies", "similar", "technologies", "before", "optional", "storage", "used", "but", "many", "banners", "obscure", "refusal", "set", "mix", "legal", "text", "product", "notices", "make", "later" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/cookie-banner.md", "json": "https://uxpatternsguide.com/agent/patterns/cookie-banner.json", "human": "https://uxpatternsguide.com/patterns/cookie-banner/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/age-gate-vs-consent-prompt-vs-permission-request-vs-sensitive-data-reveal-vs-privacy-settings-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/consent-prompt-vs-cookie-banner-vs-preference-center-vs-notification-preferences-vs-permission-sharing-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/cookie-banner-vs-banner-vs-notification-banner-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/cookie-consent-vs-cookie-banner-vs-consent-prompt-vs-preference-center-vs-privacy-settings-vs-legal-acceptance.md", "https://uxpatternsguide.com/agent/comparisons/dark-pattern-consent-vs-consent-prompt-vs-cookie-consent-vs-cookie-banner-vs-legal-acceptance-vs-preference-center.md", "https://uxpatternsguide.com/agent/comparisons/preference-center-vs-settings-management-vs-notification-preferences-vs-cookie-banner.md" ] }, { "id": "cookie-consent", "name": "Cookie consent", "aliases": [ "cookie permission", "cookie choices", "tracking consent", "cookie preference consent", "analytics consent", "advertising cookie consent", "cookie opt-in", "tracking preference" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Purpose-level consent and runtime enforcement model for cookies, local storage, pixels, tags, SDKs, and similar device storage or access", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Cookie consent fails when optional storage runs before choice, accept is easier than reject, categories are preselected, consent is recorded as one vague flag, users cannot withdraw, or runtime tags do not match saved purpose-level choices.", "useWhen": "The product uses cookies, local storage, pixels, tags, SDKs, or similar technologies that are not strictly necessary.", "avoidWhen": "The product only needs to show the first-layer cookie notice; use cookie banner.", "requiredStates": [ "Pre-consent state with optional storage blocked.", "Strictly necessary explanation state.", "Accept all optional purposes state.", "Reject all optional purposes state." ], "commonMisuses": [ "Firing analytics or advertising tags before the user chooses.", "Using one accepted flag instead of purpose-level consent records.", "Preselecting optional categories in the settings layer.", "Making Accept all much easier to find than Reject all." ], "keywords": [ "cookie", "consent", "permission", "choices", "tracking", "preference", "analytics", "advertising", "opt-in", "trust", "safety", "privacy", "ui-ux", "purpose-level", "runtime", "enforcement", "model", "cookies", "local", "storage", "pixels", "tags", "sdks", "similar", "device", "access", "fails", "optional", "runs", "before", "choice", "accept", "easier", "than", "reject", "categories", "preselected", "recorded", "one", "vague" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/cookie-consent.md", "json": "https://uxpatternsguide.com/agent/patterns/cookie-consent.json", "human": "https://uxpatternsguide.com/patterns/cookie-consent/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/cookie-consent-vs-cookie-banner-vs-consent-prompt-vs-preference-center-vs-privacy-settings-vs-legal-acceptance.md", "https://uxpatternsguide.com/agent/comparisons/dark-pattern-consent-vs-consent-prompt-vs-cookie-consent-vs-cookie-banner-vs-legal-acceptance-vs-preference-center.md" ] }, { "id": "correction-feedback", "name": "Correction feedback", "aliases": [ "AI correction feedback", "correct AI answer", "report wrong answer", "answer correction", "model feedback", "assistant feedback", "claim correction", "source correction", "output feedback", "human correction loop" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "AI output correction feedback flow with selected claim, reason, scope, consent, receipt, and review state", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI products need user correction when generated output is wrong, unsafe, unsupported, stale, or mis-scoped, but vague feedback controls often lose the corrected claim, user intent, consent, privacy boundary, and follow-up status.", "useWhen": "Users can identify wrong, unsupported, stale, unsafe, biased, irrelevant, or wrongly sourced AI output after it is generated.", "avoidWhen": "The only need is a lightweight satisfaction signal that will not be used to correct AI behavior or output.", "requiredStates": [ "Initial AI answer state with feedback entry points attached to the answer, individual claims, citations, recommendations, or tool-derived values.", "Wrong answer, missing source, wrong source, harmful suggestion, outdated answer, irrelevant answer, biased or unsafe answer, hallucinated value, and incomplete answer reasons.", "Selected claim, selected source, expected answer, corrected source, private note, attachment, and reviewer-needed states.", "Scope choices such as apply to this answer, apply to future answers, review only, update source, do not train on this feedback, and keep feedback private." ], "commonMisuses": [ "Using a thumbs-down or smiley reaction as the only mechanism for correcting wrong AI output.", "Collecting feedback without tying it to a specific answer, claim, citation, source, tool result, or response version.", "Hiding whether feedback applies to the current answer, future answers, review queues, training data, retrieval sources, or prompt behavior.", "Treating correction text as a new prompt or hidden instruction without showing the user that the answer scope changed." ], "keywords": [ "correction", "feedback", "correct", "answer", "report", "wrong", "model", "assistant", "claim", "source", "output", "human", "loop", "automation", "ui-ux", "flow", "selected", "reason", "scope", "consent", "receipt", "review", "state", "products", "need", "generated", "unsafe", "unsupported", "stale", "mis-scoped", "but", "vague", "controls", "often", "lose", "corrected", "intent", "privacy", "boundary", "follow-up" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/correction-feedback.md", "json": "https://uxpatternsguide.com/agent/patterns/correction-feedback.json", "human": "https://uxpatternsguide.com/patterns/correction-feedback/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ai-answer-without-sources-vs-source-grounding-display-vs-citation-display-vs-confidence-uncertainty-display-vs-streaming-response-vs-correction-feedback.md", "https://uxpatternsguide.com/agent/comparisons/correction-feedback-vs-query-correction-vs-inline-validation-vs-comments-vs-regenerate-retry-vs-editable-ai-output.md" ] }, { "id": "create-user-profile", "name": "Create user profile", "aliases": [ "profile creation", "user profile creation", "create profile", "complete profile", "profile intro", "public profile setup", "member profile setup", "personal profile setup", "collaboration profile", "profile identity" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Visible personal identity and profile presentation setup", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Profile creation turns personal details into visible identity across mentions, directories, comments, assignments, and public pages, so unclear required fields, missing visibility controls, forced optional details, or no preview can expose users or create a misleading profile.", "useWhen": "Users need to create a visible profile for collaboration, community, directory, marketplace, public contribution, support, or social interaction.", "avoidWhen": "The task is only creating credentials, signing in, setting a password, or verifying an email.", "requiredStates": [ "Initial profile purpose state explaining where the profile will appear.", "Required display identity state with clear labels for display name, public name, handle, or full name.", "Optional avatar state with upload, remove, initials fallback, and image-crop or alt-text guidance where relevant.", "Optional bio, role, title, pronouns, location, local time, social link, or status state with skip path." ], "commonMisuses": [ "Forcing optional profile completion before users can do the task they came for.", "Publishing profile data without a preview or visibility explanation.", "Confusing legal name, full name, public name, display name, username, and handle.", "Making profile photo mandatory when initials or a neutral avatar would work." ], "keywords": [ "create", "profile", "creation", "complete", "intro", "public", "setup", "member", "personal", "collaboration", "identity", "task", "workflow", "patterns", "ui-ux", "visible", "presentation", "turns", "details", "across", "mentions", "directories", "comments", "assignments", "pages", "unclear", "required", "fields", "missing", "visibility", "controls", "forced", "optional", "preview", "expose", "misleading", "small", "flow", "explains", "where" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/create-user-profile.md", "json": "https://uxpatternsguide.com/agent/patterns/create-user-profile.json", "human": "https://uxpatternsguide.com/patterns/create-user-profile/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/create-user-profile-vs-account-creation-vs-onboarding-vs-single-page-form.md", "https://uxpatternsguide.com/agent/comparisons/profile-setup-vs-create-user-profile-vs-onboarding-vs-account-creation.md" ] }, { "id": "custom-dashboard", "name": "Custom dashboard", "aliases": [ "personal dashboard", "customizable dashboard", "dashboard builder", "dashboard personalization", "user dashboard", "widget dashboard", "personal analytics dashboard", "dashboard workspace" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "User-configurable dashboard canvas with persisted widget composition", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Different users need different dashboard priorities, but fixed dashboard layouts either bury personally important widgets or make customization risky because users cannot tell what will be saved, who will be affected, or how the layout behaves on smaller screens.", "useWhen": "Users have different monitoring priorities and need a persistent personal or role-based dashboard arrangement.", "avoidWhen": "The dashboard must remain identical for everyone because it encodes a regulated process, operational standard, or safety-critical alert order.", "requiredStates": [ "Read-only dashboard state with current layout name, owner or scope, active widgets, freshness, and customize entry point.", "Customization mode with selected widgets, available widget gallery, unsaved changes, move, resize, remove, save, cancel, and reset controls.", "Personal save, shared save, save as copy, discard changes, reset to default, and restored default states.", "Widget added, widget removed, widget reordered, widget resized, duplicate-widget blocked, and maximum-widget-count states." ], "commonMisuses": [ "Treating a fixed dashboard with filters as a custom dashboard even though users cannot choose widgets, order, or size.", "Letting users drag widgets without save, cancel, reset, keyboard movement, or shared-impact confirmation.", "Saving a personal layout over a team default without owner or audience warning.", "Using customization to hide mandatory operational alerts or compliance widgets with no policy explanation." ], "keywords": [ "custom", "dashboard", "personal", "customizable", "builder", "personalization", "widget", "analytics", "workspace", "preference", "ui-ux", "user-configurable", "canvas", "persisted", "composition", "different", "need", "priorities", "but", "fixed", "layouts", "either", "bury", "personally", "important", "widgets", "make", "customization", "risky", "because", "cannot", "tell", "what", "will", "saved", "who", "affected", "how", "layout", "behaves" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/custom-dashboard.md", "json": "https://uxpatternsguide.com/agent/patterns/custom-dashboard.json", "human": "https://uxpatternsguide.com/patterns/custom-dashboard/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-preference-center.md", "https://uxpatternsguide.com/agent/comparisons/user-controlled-layout-vs-custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-window-splitter.md" ] }, { "id": "dangerous-action-review", "name": "Dangerous-action review", "aliases": [ "high-risk action review", "dangerous operation review", "pre-execution risk review", "high-impact action checkpoint", "risk review before action", "external-effect review", "production action review", "agent dangerous action review" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Pre-execution review of high-impact actions that may affect money, access, production systems, legal status, customers, external recipients, or safety", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "High-impact actions fail safely only when users can inspect what is about to happen; generic confirmations, warnings, and post-action logs often hide scope, payload, evidence, external effects, stale state, and safer alternatives until after the dangerous operation has already run.", "useWhen": "A user, agent, automation, or admin tool is about to execute a high-impact action that can affect money, access, production systems, legal/compliance state, customers, external recipients, sensitive data, or safety.", "avoidWhen": "The risk is narrowly permanent deletion or loss of a named object; use destructive action confirmation.", "requiredStates": [ "Armed action state with verb, target, payload, actor, source, and exact execution boundary.", "Risk inventory state listing money, access, customer, production, legal, security, external-recipient, data, safety, or physical-world effects.", "Evidence and confidence state with source links, gaps, stale checks, and uncertainty stated in task language.", "Freshness revalidation state before execution when payload, target, permission, policy, or external data may have changed." ], "commonMisuses": [ "Using vague Are you sure, Continue, or Proceed copy without naming the dangerous operation.", "Showing a risk warning but hiding the action payload, target, recipients, amount, command, environment, or external effect.", "Treating confidence, risk color, or severity score as a substitute for reviewable evidence.", "Allowing stale email or mobile approvals to execute a changed action." ], "keywords": [ "dangerous-action", "review", "high-risk", "action", "dangerous", "operation", "pre-execution", "risk", "high-impact", "checkpoint", "before", "external-effect", "production", "agent", "trust", "safety", "privacy", "ui-ux", "actions", "may", "affect", "money", "access", "systems", "legal", "status", "customers", "external", "recipients", "fail", "safely", "inspect", "what", "about", "happen", "generic", "confirmations", "warnings", "post-action", "logs" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/dangerous-action-review.md", "json": "https://uxpatternsguide.com/agent/patterns/dangerous-action-review.json", "human": "https://uxpatternsguide.com/patterns/dangerous-action-review/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/ambiguous-destructive-action-copy-vs-destructive-action-confirmation-vs-typed-confirmation-vs-dangerous-action-review-vs-confirmation-fatigue-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/confirmation-fatigue-vs-confirmation-dialog-vs-destructive-action-confirmation-vs-undo-vs-warning-text-vs-dangerous-action-review.md", "https://uxpatternsguide.com/agent/comparisons/dangerous-action-review-vs-destructive-action-confirmation-vs-typed-confirmation-vs-human-approval-gate-vs-review-before-submit-vs-security-warning.md" ] }, { "id": "dark-pattern-consent", "name": "Dark-pattern consent", "aliases": [ "manipulative consent", "deceptive consent", "coerced consent", "forced consent", "consent dark pattern", "hidden decline consent", "preselected consent", "consent obstruction", "accept-all trap", "consent wall" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Anti-pattern where consent, cookie, marketing, sharing, or data-use choices are shaped to obtain agreement without a fair, informed, reversible decision", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Consent decisions become untrustworthy when the interface steers users toward acceptance through unequal visual weight, more steps to refuse, hidden decline, preselected options, bundled purposes, consent walls, repeated nags, misleading legal bundling, or optional processing that starts before the user chooses.", "useWhen": "A UX review, privacy review, legal review, accessibility review, or support report identifies manipulation in a consent, cookie, marketing, sharing, AI training, or data-use choice.", "avoidWhen": "The flow already offers a fair active opt-in for optional non-cookie data use; use consent prompt.", "requiredStates": [ "Accept-dominant state where accept is easier or more visually prominent than reject.", "Hidden reject state where decline is behind another layer, link, scroll, or misleading label.", "Preselected optional purpose state.", "Bundled purposes state for marketing, research, AI training, personalization, partner sharing, or analytics." ], "commonMisuses": [ "Showing Accept all as the only button and hiding Reject all inside Manage settings.", "Preselecting optional marketing, analytics, personalization, or partner-sharing toggles.", "Treating continued browsing, closing, scrolling, swiping, or inactivity as consent.", "Using shame copy such as No, I do not want privacy or I prefer worse service for refusal." ], "keywords": [ "dark-pattern", "consent", "manipulative", "deceptive", "coerced", "forced", "dark", "pattern", "hidden", "decline", "preselected", "obstruction", "accept-all", "trap", "wall", "trust", "safety", "privacy", "ui-ux", "anti-pattern", "where", "cookie", "marketing", "sharing", "data-use", "choices", "shaped", "obtain", "agreement", "without", "fair", "informed", "reversible", "decision", "decisions", "become", "untrustworthy", "interface", "steers", "toward" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/dark-pattern-consent.md", "json": "https://uxpatternsguide.com/agent/patterns/dark-pattern-consent.json", "human": "https://uxpatternsguide.com/patterns/dark-pattern-consent/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/dark-pattern-consent-vs-consent-prompt-vs-cookie-consent-vs-cookie-banner-vs-legal-acceptance-vs-preference-center.md" ] }, { "id": "dashboard-layout", "name": "Dashboard layout", "aliases": [ "analytics dashboard", "monitoring dashboard", "overview dashboard", "metric dashboard", "dashboard grid", "dashboard canvas", "report dashboard", "KPI dashboard", "operational dashboard", "executive dashboard" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Page-level arrangement of coordinated status, metric, and analysis widgets", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to monitor several related metrics, exceptions, and analyses at once, but unstructured dashboard pages bury priority, hide scope and freshness, and make tiles look independent even when filters, snapshots, and drill paths affect interpretation.", "useWhen": "Users need to monitor several related metrics, exceptions, and analyses together.", "avoidWhen": "Only one chart, table, status message, or record list is needed.", "requiredStates": [ "Default dashboard with name, purpose, global scope, active filters, freshness, KPI tier, sections, and widget grid.", "Global filtered, cross-filtered, tile-filtered, cleared-filter, stale-widget, partial-refresh, and mixed-refresh states.", "Widget loading, empty, no-access, error, hidden-by-permission, data-delayed, and source-unavailable states.", "Collapsed section, expanded section, pinned or resized widget, customized layout, reset layout, and saved dashboard state when customization exists." ], "commonMisuses": [ "Filling a page with charts before defining dashboard purpose, audience, hierarchy, and decisions.", "Making every widget the same size even though only a few metrics drive action.", "Hiding global filters, cross-filter state, source, freshness, or stale data.", "Mixing live tiles, pinned snapshots, cached reports, and manual refresh cards with no freshness distinction." ], "keywords": [ "dashboard", "layout", "analytics", "monitoring", "overview", "metric", "grid", "canvas", "report", "kpi", "operational", "executive", "data", "display", "exploration", "ui-ux", "page-level", "arrangement", "coordinated", "status", "analysis", "widgets", "need", "monitor", "several", "related", "metrics", "exceptions", "analyses", "once", "but", "unstructured", "pages", "bury", "priority", "hide", "scope", "freshness", "make", "tiles" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/dashboard-layout.md", "json": "https://uxpatternsguide.com/agent/patterns/dashboard-layout.json", "human": "https://uxpatternsguide.com/patterns/dashboard-layout/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-preference-center.md", "https://uxpatternsguide.com/agent/comparisons/dashboard-layout-vs-data-visualization-vs-table-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/user-controlled-layout-vs-custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-window-splitter.md", "https://uxpatternsguide.com/agent/comparisons/wearable-glance-vs-notification-center-vs-summary-box-vs-dashboard-layout-vs-progress-bar-vs-notification-preferences.md" ] }, { "id": "data-export", "name": "Data export", "aliases": [ "download my data", "personal data export", "data portability export", "export archive", "account data download", "DSR export", "organization data export", "export evidence package" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "User or administrator workflow for selecting, preparing, securing, downloading, transferring, and verifying data export packages", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Data export workflows become risky when they hide scope, confuse export with deletion or import, omit format and portability limits, expose sensitive archives through weak links, or provide no recovery when a long-running export is partial, delayed, expired, or failed.", "useWhen": "Users need to download or transfer a copy of account, workspace, personal, product, activity, or organization data.", "avoidWhen": "The user is importing records into the product; use bulk import.", "requiredStates": [ "Eligible data categories and unavailable categories state.", "Category selection, date range, account, workspace, format, and destination state.", "Identity verification, permission check, approval required, or policy blocked state.", "Export requested, queued, preparing, estimating size, compressing, and packaging states." ], "commonMisuses": [ "Using one Export all button with no scope, format, account, destination, date range, or size estimate.", "Confusing export with delete account, privacy preference changes, migration import, or audit-log investigation.", "Leaving sensitive export archives available forever or downloadable by any signed-in user with the link.", "Claiming the export is complete when categories failed, were redacted, or were outside retention." ], "keywords": [ "data", "export", "download", "personal", "portability", "archive", "account", "dsr", "organization", "evidence", "package", "trust", "safety", "privacy", "ui-ux", "administrator", "workflow", "selecting", "preparing", "securing", "downloading", "transferring", "verifying", "packages", "workflows", "become", "risky", "they", "hide", "scope", "confuse", "deletion", "import", "omit", "format", "limits", "expose", "sensitive", "archives", "through" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/data-export.md", "json": "https://uxpatternsguide.com/agent/patterns/data-export.json", "human": "https://uxpatternsguide.com/patterns/data-export/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/data-export-vs-bulk-import-vs-audit-log-vs-table-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-settings-management-vs-restore-from-trash.md", "https://uxpatternsguide.com/agent/comparisons/hidden-destructive-account-deletion-vs-delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-privacy-settings.md", "https://uxpatternsguide.com/agent/comparisons/privacy-settings-vs-settings-management-vs-preference-center-vs-consent-prompt-vs-permission-request-vs-data-export.md" ] }, { "id": "data-grid", "name": "Data grid", "aliases": [ "interactive data table", "spreadsheet grid", "editable grid", "cell grid", "row grid", "record grid", "virtualized grid" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Interactive row-and-column data workspace", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to inspect, select, edit, sort, filter, copy, or operate on many records in rows and columns, but a basic table becomes slow or unsafe when every cell, widget, and row action is placed in normal tab order or when editing has no grid focus contract.", "useWhen": "Users repeatedly inspect or update many records in shared columns.", "avoidWhen": "The data is read-only and ordinary table navigation is enough.", "requiredStates": [ "Default navigation state with labelled grid, column headers, row headers or row identifiers, focused cell, and row count context.", "Focused-cell state that distinguishes focus from selection and survives movement across rows and columns.", "Selected row, selected cell, selected range, and bulk-selected states when selection is supported.", "Edit mode for a cell or row, with clear entry, focused editor, dirty draft, save, cancel, and validation states." ], "commonMisuses": [ "Using role grid on a static table only to make it sound richer.", "Putting hundreds of inputs, menus, and links into normal tab order instead of implementing managed focus.", "Calling a dense settings form a data grid even though fields do not share row and column meaning.", "Letting arrow keys both navigate cells and operate the active cell editor without an edit-mode boundary." ], "keywords": [ "data", "grid", "interactive", "table", "spreadsheet", "editable", "cell", "row", "record", "virtualized", "display", "exploration", "ui-ux", "row-and-column", "workspace", "need", "inspect", "select", "edit", "sort", "filter", "copy", "operate", "many", "records", "rows", "columns", "but", "basic", "becomes", "slow", "unsafe", "every", "widget", "action", "placed", "normal", "tab", "order", "editing" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/data-grid.md", "json": "https://uxpatternsguide.com/agent/patterns/data-grid.json", "human": "https://uxpatternsguide.com/patterns/data-grid/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/data-export-vs-bulk-import-vs-audit-log-vs-table-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/data-grid-vs-table-vs-inline-edit-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/focus-traversal-vs-keyboard-shortcut-vs-skip-link-vs-modal-dialog-vs-toolbar-vs-data-grid.md", "https://uxpatternsguide.com/agent/comparisons/list-view-vs-table-vs-data-grid-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/tree-grid-vs-data-grid-vs-tree-selection-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/user-controlled-density-vs-settings-management-vs-data-grid-vs-saved-view.md" ] }, { "id": "data-visualization", "name": "Data visualization", "aliases": [ "chart", "graph", "visual analytics", "data chart", "analytic visualization", "business chart", "metric visualization", "plot", "visual data display" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Encoded visual analysis of quantitative or categorical data", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to understand patterns, magnitude, trend, distribution, composition, relationship, anomaly, or uncertainty in data, but raw tables and summaries make those patterns slow or impossible to see.", "useWhen": "Users need to see trends, comparisons, rankings, distributions, relationships, composition, anomalies, or uncertainty.", "avoidWhen": "The data question is a single number, a record list, a geographic location, or an event audit trail.", "requiredStates": [ "Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative.", "Selected mark, focused mark, tooltip open, tooltip dismissed, annotation visible, legend item highlighted, and table row synchronized states.", "Filtered, grouped, faceted, sorted, normalized, compared-to-target, and highlighted-series states.", "Loading, empty data, no matching data, missing values, partial data, stale data, sampled data, and permission-limited data states." ], "commonMisuses": [ "Using decorative charts that do not answer a data question.", "Choosing a chart type that mismatches the data relationship.", "Hiding axes, units, baseline, scale type, or aggregation.", "Using color alone for category, status, threshold, or anomaly." ], "keywords": [ "data", "visualization", "chart", "graph", "visual", "analytics", "analytic", "business", "metric", "plot", "display", "exploration", "ui-ux", "encoded", "analysis", "quantitative", "categorical", "need", "understand", "patterns", "magnitude", "trend", "distribution", "composition", "relationship", "anomaly", "uncertainty", "but", "raw", "tables", "summaries", "make", "those", "slow", "impossible", "see", "provide", "honest", "appropriate", "type" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/data-visualization.md", "json": "https://uxpatternsguide.com/agent/patterns/data-visualization.json", "human": "https://uxpatternsguide.com/patterns/data-visualization/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/chart-drilldown-vs-data-visualization-vs-details-panel-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/dashboard-layout-vs-data-visualization-vs-table-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/data-visualization-vs-table-vs-map-view-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/touch-gesture-vs-carousel-vs-map-view-vs-bottom-sheet-vs-drag-and-drop-upload-vs-data-visualization.md" ] }, { "id": "date-input", "name": "Date input", "aliases": [ "manual date input", "memorable date", "day month year input", "split date fields", "date of birth input" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Grouped manual exact-date entry", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users often know an exact date, but a single ambiguous field, rigid mask, long year selector, or calendar widget can make entry slower, harder to correct, or inaccessible.", "useWhen": "Users already know the exact date or can look it up easily.", "avoidWhen": "Users are unlikely to know the exact date.", "requiredStates": [ "Empty untouched grouped date fields with legend, hint, and visible part labels.", "Focused day, month, or year field without auto-advancing to the next part.", "Partially filled date that preserves other parts while the user edits one part.", "Month-name typed state normalized for validation and canonical storage." ], "commonMisuses": [ "Using one freeform field with disappearing format instructions.", "Using a date picker for a birthday or document date users already know.", "Auto-tabbing between day, month, and year fields.", "Rejecting month names even though users naturally type Jan or January." ], "keywords": [ "date", "input", "manual", "memorable", "day", "month", "year", "split", "fields", "birth", "data", "entry", "ui-ux", "grouped", "exact-date", "often", "know", "exact", "but", "single", "ambiguous", "field", "rigid", "mask", "long", "selector", "calendar", "widget", "make", "slower", "harder", "correct", "inaccessible", "ask", "question", "once", "group", "visible", "under", "provide" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/date-input.md", "json": "https://uxpatternsguide.com/agent/patterns/date-input.json", "human": "https://uxpatternsguide.com/patterns/date-input/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/date-input-vs-input-mask-vs-text-input-vs-select.md", "https://uxpatternsguide.com/agent/comparisons/date-picker-vs-date-input-vs-select-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/date-range-picker-vs-date-picker-vs-date-input-vs-filter-panel.md" ] }, { "id": "date-picker", "name": "Date picker", "aliases": [ "calendar picker", "single date picker", "appointment date picker", "calendar date selector", "booking date picker" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Single-date text field with attached calendar menu", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Scheduling dates often depend on weekdays, nearby alternatives, booking windows, and unavailable days, but a plain field hides that context and a poorly built calendar can block typing, focus, and recovery.", "useWhen": "Users are scheduling, booking, planning, or selecting a recent or future date.", "avoidWhen": "Users already know the exact date and do not need calendar context.", "requiredStates": [ "Closed labelled text field with visible date-format hint and calendar button.", "Open calendar menu with month and year heading, weekday row, previous and next controls, and active focus.", "Today state that is visually distinct from selected date.", "Selected date state synchronized with the text field." ], "commonMisuses": [ "Using a calendar picker for a date of birth or other remembered historic date.", "Removing manual date typing and forcing pointer-only calendar selection.", "Showing only disabled colors without text explaining why a date cannot be selected.", "Letting unavailable dates be selected and failing late on submit." ], "keywords": [ "date", "picker", "calendar", "single", "appointment", "selector", "booking", "input", "data", "entry", "ui-ux", "single-date", "text", "field", "attached", "menu", "scheduling", "dates", "often", "depend", "weekdays", "nearby", "alternatives", "windows", "unavailable", "days", "but", "plain", "hides", "context", "poorly", "built", "block", "typing", "focus", "recovery", "pair", "labelled", "accessible", "exposes" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/date-picker.md", "json": "https://uxpatternsguide.com/agent/patterns/date-picker.json", "human": "https://uxpatternsguide.com/patterns/date-picker/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/calendar-view-vs-date-picker-vs-timeline-vs-list-view.md", "https://uxpatternsguide.com/agent/comparisons/date-picker-vs-date-input-vs-select-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/date-range-picker-vs-date-picker-vs-date-input-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/scheduling-vs-booking-vs-calendar-view-vs-date-picker.md" ] }, { "id": "date-range-picker", "name": "Date range picker", "aliases": [ "calendar range picker", "start end date picker", "date period picker", "booking range picker", "reporting range selector" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Two date fields with attached range calendar and apply controls", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Range tasks require users to understand two dates as one continuous span, but separate single-date controls hide included days, invalid order, presets, and whether changes have already affected the underlying data.", "useWhen": "Users need to select a reporting, analytics, booking, scheduling, campaign, or eligibility period.", "avoidWhen": "The task asks for only one exact date.", "requiredStates": [ "Empty start and end fields with visible labels, date-format hints, and a calendar trigger.", "Open calendar with start endpoint active and no end selected.", "Hover or keyboard preview state showing the possible in-range days before end selection.", "Complete selected range with start date, end date, and all included days visibly connected." ], "commonMisuses": [ "Using two unrelated single-date pickers that do not validate order or show included days.", "Collapsing the range into one unlabeled field with ambiguous dash-separated dates.", "Refreshing analytics results before the user applies a complete range.", "Hiding custom range entry behind presets only." ], "keywords": [ "date", "range", "picker", "calendar", "start", "end", "period", "booking", "reporting", "selector", "input", "data", "entry", "ui-ux", "two", "fields", "attached", "apply", "controls", "tasks", "require", "understand", "dates", "one", "continuous", "span", "but", "separate", "single-date", "hide", "included", "days", "invalid", "order", "presets", "whether", "changes", "have", "already", "affected" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/date-range-picker.md", "json": "https://uxpatternsguide.com/agent/patterns/date-range-picker.json", "human": "https://uxpatternsguide.com/patterns/date-range-picker/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/date-range-picker-vs-date-picker-vs-date-input-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/range-slider-vs-slider-vs-text-input-vs-date-range-picker.md", "https://uxpatternsguide.com/agent/comparisons/scheduling-vs-booking-vs-calendar-view-vs-date-picker.md" ] }, { "id": "dead-end-empty-state", "name": "Dead-end empty state", "aliases": [ "blank dead end", "actionless empty state", "empty page with no action", "orphan empty panel" ], "category": "Feedback, Status, And System State", "patternType": "ux", "surfaceType": "Actionless blank-state anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users reach a blank or nearly blank area and cannot tell what is missing, why it is missing, or what they can do next.", "useWhen": "Auditing generated UIs, dashboards, tables, lists, or panels for blank states that strand users.", "avoidWhen": "The surface already explains the cause and offers a valid next step.", "requiredStates": [ "Unexplained blank state that is being audited as the anti-pattern.", "Diagnosed first-use or legitimate absence state with object-specific copy and valid action.", "Filtered or searched no-results state with visible criteria and recovery controls.", "Permission or prerequisite state with explanation and request/setup path." ], "commonMisuses": [ "Blank table body with no heading, count, cause, or action.", "Friendly illustration plus vague text such as Nothing here yet with no task path.", "Create button shown to a read-only user and failing after activation.", "No-results caused by filters but active criteria are hidden above the fold." ], "keywords": [ "dead-end", "empty", "state", "blank", "dead", "end", "actionless", "page", "action", "orphan", "panel", "feedback", "status", "system", "blank-state", "anti-pattern", "reach", "nearly", "area", "cannot", "tell", "what", "missing", "why", "they", "next", "treat", "surface", "determine", "actual", "cause", "replace", "legitimate", "no-results", "recovery", "error", "permission", "explanation", "setup", "step" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/dead-end-empty-state.md", "json": "https://uxpatternsguide.com/agent/patterns/dead-end-empty-state.json", "human": "https://uxpatternsguide.com/patterns/dead-end-empty-state/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/dead-end-empty-state-vs-empty-state-vs-no-results-recovery-vs-error-state.md" ] }, { "id": "delete-account", "name": "Delete account", "aliases": [ "account deletion", "close account", "delete my account", "account closure", "erase account data", "remove account", "data deletion request", "right to erasure account flow" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Account-level closure and associated personal data deletion workflow", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Account deletion is high-risk when the path is hidden, confused with deactivation or data export, omits signed-in identity, hides billing and linked-service consequences, gives no retention or recovery explanation, or claims erasure before the deletion request is actually completed.", "useWhen": "Users can create an account and need a self-serve or direct request path to close it and delete associated data.", "avoidWhen": "The task is simply signing out, removing an account from one device, deleting one service, unsubscribing from email, disabling notifications, or changing a privacy preference.", "requiredStates": [ "Discoverable account deletion entry point in account settings or a direct web deletion resource.", "Account identity review state showing email, username, provider, workspace, organization, or child account.", "Data and service scope state listing deleted, retained, public, third-party, subscription, billing, and linked-service effects.", "Download or export data first state that clearly says export does not delete the account." ], "commonMisuses": [ "Offering only deactivate, disable, sign out, remove from device, unsubscribe, or contact support when users need account deletion.", "Hiding account deletion behind unrelated settings, FAQs, email support, a vague privacy page, or an unlabeled Delete button.", "Combining data export and account deletion into one ambiguous control.", "Failing to name the signed-in account, provider, child account, or workspace before deletion." ], "keywords": [ "delete", "account", "deletion", "close", "closure", "erase", "data", "remove", "request", "right", "erasure", "flow", "trust", "safety", "privacy", "ui-ux", "account-level", "associated", "personal", "workflow", "high-risk", "path", "hidden", "confused", "deactivation", "export", "omits", "signed-in", "identity", "hides", "billing", "linked-service", "consequences", "gives", "retention", "recovery", "explanation", "claims", "before", "actually" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/delete-account.md", "json": "https://uxpatternsguide.com/agent/patterns/delete-account.json", "human": "https://uxpatternsguide.com/patterns/delete-account/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-settings-management-vs-restore-from-trash.md", "https://uxpatternsguide.com/agent/comparisons/hidden-destructive-account-deletion-vs-delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-privacy-settings.md" ] }, { "id": "dependent-fields", "name": "Dependent fields", "aliases": [ "field dependency", "dependent picklist", "dependent dropdown", "controlling field", "controlled field", "cascading fields", "parent child fields" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Controlling and dependent form fields", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Forms with related fields produce invalid, confusing, or stale data when users can choose downstream values before the upstream answer that defines which values are possible.", "useWhen": "A downstream field's valid values or requirement depend on a previous answer.", "avoidWhen": "The choices are independent and users need to compare them together.", "requiredStates": [ "No controlling answer selected, with dependent field unavailable or empty and prerequisite helper text.", "Controlling answer selected, with dependent options filtered to the valid subset.", "Dependent answer selected and valid for the current controlling answer.", "Controlling answer changed, causing previous dependent value to clear or become explicitly stale." ], "commonMisuses": [ "Leaving a stale dependent value selected after the controlling field changes.", "Disabling the dependent field with no explanation of the prerequisite.", "Putting the dependent field before its controller in DOM or tab order.", "Using dependent fields to hide independent options that users need to compare." ], "keywords": [ "dependent", "fields", "field", "dependency", "picklist", "dropdown", "controlling", "controlled", "cascading", "parent", "child", "input", "data", "entry", "ui-ux", "form", "forms", "related", "produce", "invalid", "confusing", "stale", "choose", "downstream", "values", "before", "upstream", "answer", "defines", "which", "possible", "model", "relationship", "explicitly", "updates", "options", "availability", "requirement", "helper", "text" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/dependent-fields.md", "json": "https://uxpatternsguide.com/agent/patterns/dependent-fields.json", "human": "https://uxpatternsguide.com/patterns/dependent-fields/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/address-entry-vs-text-input-vs-autocomplete-vs-dependent-fields.md", "https://uxpatternsguide.com/agent/comparisons/conditional-reveal-fields-vs-dependent-fields-vs-radio-group-vs-single-question-page.md", "https://uxpatternsguide.com/agent/comparisons/dependent-fields-vs-select-vs-inline-validation-vs-complete-complex-form.md", "https://uxpatternsguide.com/agent/comparisons/required-field-hidden-by-conditional-logic-vs-conditional-reveal-fields-vs-dependent-fields-vs-error-summary-vs-single-page-form-vs-review-before-submit.md" ] }, { "id": "destructive-action-confirmation", "name": "Destructive action confirmation", "aliases": [ "delete confirmation", "destructive confirmation", "danger confirmation", "remove confirmation", "cancel subscription confirmation", "deactivate account confirmation", "permanent delete review" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Final destructive commit review", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can permanently delete, remove, deactivate, reset, or cancel valuable objects without understanding exactly what will be lost, especially when the final prompt uses vague labels, hides affected scope, or treats reversible cleanup like irreversible destruction.", "useWhen": "A user has initiated a destructive command that can permanently remove, revoke, reset, deactivate, or cancel something valuable.", "avoidWhen": "The action is a routine reversible archive, hide, dismiss, move, reorder, or trash move.", "requiredStates": [ "Idle state where the destructive command is visible but not committed.", "Review state that names the destructive verb, target object, and affected scope.", "Dependency-blocked state where deletion cannot continue until related jobs, locks, billing, or permissions are resolved.", "Acknowledgement-required state for permanent loss or external effects." ], "commonMisuses": [ "Using a vague Are you sure prompt that does not name the object, count, or consequence.", "Labelling the destructive commit OK, Yes, Continue, or Confirm.", "Making the destructive action the default Enter target before the user reviews the loss.", "Using the same severe confirmation for reversible archive, hide, dismiss, and move-to-trash actions." ], "keywords": [ "destructive", "action", "confirmation", "delete", "danger", "remove", "cancel", "subscription", "deactivate", "account", "permanent", "review", "error", "prevention", "recovery", "ui-ux", "final", "commit", "permanently", "reset", "valuable", "objects", "without", "understanding", "exactly", "what", "will", "lost", "especially", "prompt", "uses", "vague", "labels", "hides", "affected", "scope", "treats", "reversible", "cleanup", "like" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/destructive-action-confirmation.md", "json": "https://uxpatternsguide.com/agent/patterns/destructive-action-confirmation.json", "human": "https://uxpatternsguide.com/patterns/destructive-action-confirmation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ambiguous-destructive-action-copy-vs-destructive-action-confirmation-vs-typed-confirmation-vs-dangerous-action-review-vs-confirmation-fatigue-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/confirmation-fatigue-vs-confirmation-dialog-vs-destructive-action-confirmation-vs-undo-vs-warning-text-vs-dangerous-action-review.md", "https://uxpatternsguide.com/agent/comparisons/dangerous-action-review-vs-destructive-action-confirmation-vs-typed-confirmation-vs-human-approval-gate-vs-review-before-submit-vs-security-warning.md", "https://uxpatternsguide.com/agent/comparisons/delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-settings-management-vs-restore-from-trash.md", "https://uxpatternsguide.com/agent/comparisons/destructive-action-confirmation-vs-confirmation-dialog-vs-undo-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/fake-undo-vs-undo-vs-toast-notification-vs-restore-from-trash-vs-destructive-action-confirmation-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/hidden-destructive-account-deletion-vs-delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-privacy-settings.md", "https://uxpatternsguide.com/agent/comparisons/restore-from-trash-vs-undo-vs-destructive-action-confirmation-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/typed-confirmation-vs-destructive-action-confirmation-vs-confirmation-dialog-vs-password-input.md" ] }, { "id": "details-panel", "name": "Details panel", "aliases": [ "detail panel", "inspector panel", "properties panel", "selection details", "object details pane", "record inspector" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Persistent selected-object inspection panel", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Dense workspaces often show many objects in a list, table, map, board, or feed, and users need to inspect selected-object detail repeatedly without losing the surrounding context or navigating to a full page for every item.", "useWhen": "Users repeatedly inspect selected records, tickets, alerts, files, assets, tasks, comments, or locations while staying in a work surface.", "avoidWhen": "The content is just a short temporary preview before navigation.", "requiredStates": [ "No selection state with a clear prompt or preserved last-selection rule.", "Selected-object state with source item highlighted and panel title naming the same object.", "Keyboard list-navigation state where focus can move through objects without being stolen by the panel.", "Updated-selection state where metadata, status, activity, and actions refresh together." ], "commonMisuses": [ "Showing a details panel with no selected-object identity.", "Keeping the previous ticket summary in the persistent panel after the highlighted row has moved to a different ticket.", "Stealing focus into the panel on every arrow-key movement through a list.", "Mixing object details with filters, navigation, global settings, and unrelated commands." ], "keywords": [ "details", "panel", "detail", "inspector", "properties", "selection", "object", "pane", "record", "disclosure", "attention", "management", "ui-ux", "persistent", "selected-object", "inspection", "dense", "workspaces", "often", "show", "many", "objects", "list", "table", "map", "board", "feed", "need", "inspect", "repeatedly", "without", "losing", "surrounding", "context", "navigating", "full", "page", "every", "item", "provide" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/details-panel.md", "json": "https://uxpatternsguide.com/agent/patterns/details-panel.json", "human": "https://uxpatternsguide.com/patterns/details-panel/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/chart-drilldown-vs-data-visualization-vs-details-panel-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/compare-view-vs-table-vs-card-grid-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/details-panel-vs-drawer-vs-hover-card-vs-accordion.md", "https://uxpatternsguide.com/agent/comparisons/drawer-with-no-close-or-return-path-vs-drawer-vs-modal-dialog-vs-navigation-drawer-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/expandable-row-vs-table-vs-details-panel-vs-accordion.md", "https://uxpatternsguide.com/agent/comparisons/list-view-vs-table-vs-data-grid-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/master-detail-vs-details-panel-vs-list-view-vs-window-splitter.md", "https://uxpatternsguide.com/agent/comparisons/preview-panel-vs-details-panel-vs-hover-card-vs-drawer.md", "https://uxpatternsguide.com/agent/comparisons/window-splitter-vs-details-panel-vs-drawer-vs-side-navigation.md" ] }, { "id": "disabled-button-no-explanation", "name": "Disabled button with no explanation", "aliases": [ "mystery disabled button", "blocked action", "unexplained unavailable action", "greyed-out dead end" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Blocked action anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users see an unavailable action but cannot tell which field, permission, prerequisite, system state, or safety rule blocks it.", "useWhen": "Use this anti-pattern entry to audit disabled submit, continue, create, save, delete, publish, invite, export, payment, and setup actions.", "avoidWhen": "The action remains available and returns actionable validation after activation.", "requiredStates": [ "Unavailable action state with visible reason and affected requirement.", "Partially eligible state that shows which requirements are complete and which remain.", "Actionable recovery state such as edit field, accept terms, request access, retry later, or contact owner.", "Eligible state where the action becomes available or an enabled submit can validate remaining issues." ], "commonMisuses": [ "Greying out Continue until every field is valid without showing the missing or invalid answers.", "Putting the only explanation in a tooltip attached to a disabled button that keyboard and touch users cannot open.", "Using disabled state to hide permission, quota, account lock, or system dependency problems.", "Changing the button from disabled to enabled silently after a requirement changes elsewhere on the page." ], "keywords": [ "disabled", "button", "explanation", "mystery", "blocked", "action", "unexplained", "unavailable", "greyed-out", "dead", "end", "feedback", "status", "system", "state", "ui-ux", "anti-pattern", "see", "but", "cannot", "tell", "which", "field", "permission", "prerequisite", "safety", "rule", "blocks", "treat", "make", "blocking", "requirement", "visible", "near", "keep", "recovery", "controls", "reachable", "allow", "return" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/disabled-button-no-explanation.md", "json": "https://uxpatternsguide.com/agent/patterns/disabled-button-no-explanation.json", "human": "https://uxpatternsguide.com/patterns/disabled-button-no-explanation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/disabled-button-no-explanation-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/disabled-controls-without-recovery-vs-disabled-button-no-explanation-vs-inline-validation-vs-error-summary-vs-permission-recovery-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/permission-denied-state-vs-error-state-vs-empty-state-vs-disabled-button-no-explanation.md" ] }, { "id": "disabled-controls-without-recovery", "name": "Disabled controls without recovery", "aliases": [ "dead disabled controls", "unrecoverable disabled action", "blocked control with no route", "disabled trap", "inert primary action" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Blocked-control anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users encounter disabled buttons, menu items, toggles, form controls, or workflow actions that block progress without a usable route to meet the requirement, request access, resolve a dependency, recover from state, or choose a safe alternate path.", "useWhen": "Auditing disabled primary actions, toolbar commands, menu items, toggles, form controls, checkout actions, invite flows, publish controls, exports, destructive actions, and workflow steps.", "avoidWhen": "The control is briefly disabled only to prevent duplicate submission and visible progress explains the temporary state.", "requiredStates": [ "Prerequisite map state that shows each requirement and whether it is met.", "Missing fields state with visible correction targets.", "Permission request state with current account, required role, owner or admin path, and pending outcome.", "Dependency unlock state that names the upstream setup step and link." ], "commonMisuses": [ "A Continue button remains disabled until all fields are valid but no field or checklist names the missing work.", "A disabled Invite teammate action hides that billing setup, owner approval, or admin policy is required.", "A disabled menu item has a title tooltip as the only explanation, so touch and keyboard users never see the recovery step.", "A Save button is disabled during processing with no progress, timeout, retry, or draft preservation." ], "keywords": [ "disabled", "controls", "without", "recovery", "dead", "unrecoverable", "action", "blocked", "control", "route", "trap", "inert", "primary", "error", "prevention", "ui-ux", "blocked-control", "anti-pattern", "encounter", "buttons", "menu", "items", "toggles", "form", "workflow", "actions", "block", "progress", "usable", "meet", "requirement", "request", "access", "resolve", "dependency", "recover", "state", "choose", "safe", "alternate" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/disabled-controls-without-recovery.md", "json": "https://uxpatternsguide.com/agent/patterns/disabled-controls-without-recovery.json", "human": "https://uxpatternsguide.com/patterns/disabled-controls-without-recovery/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/disabled-controls-without-recovery-vs-disabled-button-no-explanation-vs-inline-validation-vs-error-summary-vs-permission-recovery-vs-fallback-path.md" ] }, { "id": "disclosure-details", "name": "Disclosure / details", "aliases": [ "details disclosure", "show hide", "show more", "twisty", "details summary", "progressive reveal" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Single in-place reveal for optional supporting content", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Some tasks need optional supporting explanation, but showing every note inline can bury the main path while hiding important help behind vague or unstable controls can make users miss the context they need.", "useWhen": "One short supporting explanation belongs in place beside the content it clarifies.", "avoidWhen": "The content is required to make the right decision.", "requiredStates": [ "Closed state with a specific summary label and hidden supporting content.", "Open state with revealed content immediately after the summary in reading order.", "Focused summary state with visible focus indication.", "Validation-opened state where an error or help link opens the disclosure without losing nearby form values." ], "commonMisuses": [ "Using vague summaries such as More, Details, or Click here.", "Hiding content most users must read before continuing.", "Putting validation errors only inside a closed disclosure.", "Using many details controls as an accordion without multi-section structure or summaries." ], "keywords": [ "disclosure", "details", "show", "hide", "more", "twisty", "summary", "progressive", "reveal", "attention", "management", "ui-ux", "single", "in-place", "optional", "supporting", "content", "some", "tasks", "need", "explanation", "but", "showing", "every", "note", "inline", "bury", "main", "path", "while", "hiding", "important", "help", "behind", "vague", "unstable", "controls", "make", "miss", "context" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/disclosure-details.md", "json": "https://uxpatternsguide.com/agent/patterns/disclosure-details.json", "human": "https://uxpatternsguide.com/patterns/disclosure-details/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/disclosure-details-vs-accordion-vs-inline-message-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/hover-card-vs-tooltip-vs-popover-vs-disclosure-details.md", "https://uxpatternsguide.com/agent/comparisons/progressive-disclosure-vs-disclosure-details-vs-accordion-vs-wizard.md", "https://uxpatternsguide.com/agent/comparisons/summary-box-vs-alert-vs-warning-text-vs-disclosure-details.md", "https://uxpatternsguide.com/agent/comparisons/tooltip-only-required-information-vs-tooltip-vs-inline-message-vs-disclosure-details-vs-popover.md" ] }, { "id": "draft-state", "name": "Draft state", "aliases": [ "draft mode", "unpublished changes", "saved draft", "content draft", "object draft", "inactive version", "unpublished version" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Unpublished object version lifecycle", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users lose trust in draft-capable products when they cannot tell whether they are editing a draft or the active version, who can see the changes, how to resume them, and what publish or discard will affect.", "useWhen": "Users create or edit objects that should not become visible, active, submitted, or externally effective until a later action.", "avoidWhen": "The change is a small one-field edit that should be saved or canceled immediately.", "requiredStates": [ "Published or active state with no draft.", "Published or active state with an available draft.", "Draft editor state with draft label and last-saved time.", "Unpublished changes state for an already-published object." ], "commonMisuses": [ "Using Saved to mean both saved draft and published content.", "Opening the draft silently when users expected to view the active version.", "Hiding draft labels in lists so users cannot find unpublished work later.", "Making Publish and Save draft adjacent buttons with identical visual weight and vague labels." ], "keywords": [ "draft", "state", "mode", "unpublished", "changes", "saved", "content", "object", "inactive", "version", "input", "data", "entry", "ui-ux", "lifecycle", "lose", "trust", "draft-capable", "products", "they", "cannot", "tell", "whether", "editing", "active", "who", "see", "how", "resume", "them", "what", "publish", "discard", "will", "affect", "expose", "separate", "recoverable", "clear", "labels" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/draft-state.md", "json": "https://uxpatternsguide.com/agent/patterns/draft-state.json", "human": "https://uxpatternsguide.com/patterns/draft-state/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/autosave-recovery-vs-autosave-form-vs-draft-state-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/complete-multiple-tasks-vs-step-navigation-vs-process-list-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/conflict-state-vs-sync-state-vs-draft-state-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/draft-state-vs-autosave-form-vs-inline-edit-vs-complete-complex-form.md", "https://uxpatternsguide.com/agent/comparisons/exit-warning-vs-autosave-form-vs-draft-state-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/publish-workflow-vs-approval-workflow-vs-review-queue-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/redo-vs-undo-vs-draft-state-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/restore-from-trash-vs-undo-vs-destructive-action-confirmation-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/version-history-vs-activity-log-vs-timeline-vs-undo.md" ] }, { "id": "drag-and-drop", "name": "Drag and drop", "aliases": [ "drag drop", "drag-and-drop interaction", "object drag", "move by dragging", "reorder by drag", "drop target interaction", "direct manipulation move" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Pointer or touch movement that picks up an object and drops it onto a valid destination", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Drag and drop makes movement feel direct, but it often hides destination rules, conflicts with scroll and selection, fails for keyboard or assistive technology users, and can change data before users understand the destination or consequence.", "useWhen": "Users need spatial or ordered movement between clear sources and destinations.", "avoidWhen": "The action is rare, destructive, high-impact, or hard to preview before release.", "requiredStates": [ "Idle state with draggable object identity and visible drag handle or move affordance.", "Pickup state that confirms which object or selected set is being moved.", "Dragging state with preview, source placeholder, and object count.", "Valid target hover state with destination name and insertion or placement indicator." ], "commonMisuses": [ "Making drag the only way to move, reorder, assign, or change status.", "Showing no valid target, invalid target, insertion, or destination feedback before drop.", "Letting any pointer movement drag when users intended to scroll or select text.", "Dropping into hidden, filtered, full, locked, or permission-denied destinations without explanation." ], "keywords": [ "drag", "drop", "drag-and-drop", "interaction", "object", "move", "dragging", "reorder", "target", "direct", "manipulation", "cross-device", "physical", "ui-ux", "pointer", "touch", "movement", "picks", "drops", "onto", "valid", "destination", "makes", "feel", "but", "often", "hides", "rules", "conflicts", "scroll", "selection", "fails", "keyboard", "assistive", "technology", "change", "data", "before", "understand", "consequence" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/drag-and-drop.md", "json": "https://uxpatternsguide.com/agent/patterns/drag-and-drop.json", "human": "https://uxpatternsguide.com/patterns/drag-and-drop/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-vs-touch-gesture-vs-long-press-vs-drag-and-drop-upload-vs-kanban-board-vs-sort-controls.md" ] }, { "id": "drag-and-drop-upload", "name": "Drag-and-drop upload", "aliases": [ "drop zone upload", "drag upload", "drag and drop file upload", "file drop zone", "drop target uploader", "desktop drop upload" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Drop-zone file upload enhancement with file input fallback", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Drag-and-drop upload can make desktop attachment workflows faster, but it fails when the target is ambiguous, the page swallows drops, non-file drags are accepted, or the drop zone replaces accessible file selection.", "useWhen": "Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target.", "avoidWhen": "The main audience is mobile-only or cannot reasonably drag files from the operating system.", "requiredStates": [ "Idle drop zone with visible label, requirements, and choose-file fallback.", "Drag enter state announcing that files are over the upload area.", "Valid drag-over state showing the target will copy or accept the files.", "Invalid drag-over state for links, text, folders, unsupported formats, or too many files." ], "commonMisuses": [ "Replacing the normal file chooser with a drop zone that only pointer users can operate.", "Letting dropped files outside the target open in the browser and erase unsaved progress.", "Showing a dashed box that does not change state during drag enter, drag over, or invalid drag.", "Accepting links or text as if they were files." ], "keywords": [ "drag-and-drop", "upload", "drop", "zone", "drag", "file", "target", "uploader", "desktop", "input", "data", "entry", "ui-ux", "drop-zone", "enhancement", "fallback", "make", "attachment", "workflows", "faster", "but", "fails", "ambiguous", "page", "swallows", "drops", "non-file", "drags", "accepted", "replaces", "accessible", "selection", "provide", "clear", "top", "real", "picker", "expose", "states", "prevent" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/drag-and-drop-upload.md", "json": "https://uxpatternsguide.com/agent/patterns/drag-and-drop-upload.json", "human": "https://uxpatternsguide.com/patterns/drag-and-drop-upload/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/bulk-import-vs-file-upload-vs-drag-and-drop-upload-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/camera-capture-vs-file-upload-vs-permission-request-vs-sensitive-data-reveal-vs-full-screen-takeover-vs-drag-and-drop-upload.md", "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-vs-touch-gesture-vs-long-press-vs-drag-and-drop-upload-vs-kanban-board-vs-sort-controls.md", "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-upload-vs-file-upload-vs-multi-step-form-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/touch-gesture-vs-carousel-vs-map-view-vs-bottom-sheet-vs-drag-and-drop-upload-vs-data-visualization.md" ] }, { "id": "drawer", "name": "Drawer", "aliases": [ "side drawer", "side panel", "slide-out panel", "edge panel", "context drawer", "details drawer" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Supplemental edge panel for current-context detail or light actions", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need supplemental detail or light actions related to the current page, but a full page would break context and a modal would over-block comparison with the underlying content.", "useWhen": "Users need to inspect object detail, metadata, comments, history, or light actions while staying on the current page.", "avoidWhen": "The surface is mainly app navigation or destination switching.", "requiredStates": [ "Closed state with a clear opener tied to a specific object or page section.", "Opening state that identifies the selected object and moves focus to the drawer heading or first useful control.", "Open drawer state with visible title, object identity, close control, and supplemental content.", "Pinned or non-modal comparison state when background content remains intentionally usable." ], "commonMisuses": [ "Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help.", "Opening a drawer with no close control or keyboard dismissal.", "Treating a drawer like a modal while the page behind it remains partly interactive by accident.", "Covering the exact content users need for comparison without a pinned or resized state." ], "keywords": [ "drawer", "side", "panel", "slide-out", "edge", "context", "details", "disclosure", "attention", "management", "ui-ux", "supplemental", "current-context", "detail", "light", "actions", "need", "related", "current", "page", "but", "full", "would", "break", "modal", "over-block", "comparison", "underlying", "content", "open", "edge-aligned", "keeps", "parent", "visible", "identifies", "selected", "object", "task", "supports", "close" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/drawer.md", "json": "https://uxpatternsguide.com/agent/patterns/drawer.json", "human": "https://uxpatternsguide.com/patterns/drawer/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/bottom-sheet-vs-sheet-vs-drawer-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/details-panel-vs-drawer-vs-hover-card-vs-accordion.md", "https://uxpatternsguide.com/agent/comparisons/drawer-vs-modal-dialog-vs-navigation-drawer-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/drawer-with-no-close-or-return-path-vs-drawer-vs-modal-dialog-vs-navigation-drawer-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/modal-for-nonblocking-content-vs-modal-dialog-vs-popover-vs-drawer-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/preview-panel-vs-details-panel-vs-hover-card-vs-drawer.md", "https://uxpatternsguide.com/agent/comparisons/sheet-vs-drawer-vs-modal-dialog-vs-alert-dialog.md", "https://uxpatternsguide.com/agent/comparisons/window-splitter-vs-details-panel-vs-drawer-vs-side-navigation.md" ] }, { "id": "drawer-with-no-close-or-return-path", "name": "Drawer with no close or return path", "aliases": [ "drawer without close", "inescapable drawer", "stuck drawer", "drawer missing escape", "drawer missing focus return", "mobile drawer no back", "side panel no close" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Unrecoverable drawer anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "A drawer opens from the current page but lacks a reliable way to dismiss it and return to the exact context that launched it.", "useWhen": "Use this anti-pattern to review temporary drawers, inspectors, side sheets, and mobile drawer layouts for missing close and return behavior.", "avoidWhen": "The surface is a permanent side panel or details panel and is not meant to close.", "requiredStates": [ "Closed state with a clear opener and remembered return target.", "Open state with selected-object title, labelled close button, and visible relationship to the originating context.", "Keyboard dismissal state where Escape closes or opens a scoped discard review.", "Browser back or route dismissal state that closes the drawer without losing page context." ], "commonMisuses": [ "Hiding close in an overflow menu or offscreen toolbar.", "Relying on swipe-only dismissal for mobile drawers.", "Letting Escape do nothing because the drawer was implemented as a plain div.", "Closing the drawer while focus moves to the page header or disappears." ], "keywords": [ "drawer", "close", "return", "path", "without", "inescapable", "stuck", "missing", "escape", "focus", "mobile", "back", "side", "panel", "disclosure", "attention", "management", "ui-ux", "unrecoverable", "anti-pattern", "opens", "current", "page", "but", "lacks", "reliable", "way", "dismiss", "exact", "context", "launched", "treat", "paths", "every", "temporary", "needs", "visible", "keyboard", "route", "dismissal" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/drawer-with-no-close-or-return-path.md", "json": "https://uxpatternsguide.com/agent/patterns/drawer-with-no-close-or-return-path.json", "human": "https://uxpatternsguide.com/patterns/drawer-with-no-close-or-return-path/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/drawer-with-no-close-or-return-path-vs-drawer-vs-modal-dialog-vs-navigation-drawer-vs-details-panel.md" ] }, { "id": "editable-ai-output", "name": "Editable AI output", "aliases": [ "AI editable draft", "editable generated answer", "editable assistant output", "AI draft editor", "generated draft editing", "AI output revision", "editable response with citations", "source-aware AI editing", "assistant draft review", "AI answer edit mode" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Editable generated draft with provenance, review, and apply controls", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Generated output often needs human revision before use, but ordinary editing can erase provenance, hide which claims were generated or user edited, break citations, obscure unsafe or unsupported edits, and make it unclear whether the final output was reviewed before being applied.", "useWhen": "Generated content is expected to be revised before it is copied, saved, sent, published, or applied.", "avoidWhen": "Users only need to write or revise the request before generation.", "requiredStates": [ "Generated draft state with original generated content, creation time, model or run reference, and source coverage visible.", "User-edited state that marks changed text separately from original generated text.", "Source mapping state that shows which edited claims still map to citations, retrieved sources, or tool outputs.", "Citation preservation state for unchanged or still-supported claims." ], "commonMisuses": [ "Letting users edit a final-looking AI answer without generated-versus-user-edited status.", "Dropping all citations when one paragraph is edited.", "Preserving citation markers on claims that no longer match the cited source.", "Treating answer editing as prompt editing and hiding the generated baseline." ], "keywords": [ "editable", "output", "draft", "generated", "answer", "assistant", "editor", "editing", "revision", "response", "citations", "source-aware", "review", "edit", "mode", "automation", "ui-ux", "provenance", "apply", "controls", "often", "needs", "human", "before", "but", "ordinary", "erase", "hide", "which", "claims", "were", "edited", "break", "obscure", "unsafe", "unsupported", "edits", "make", "unclear", "whether" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/editable-ai-output.md", "json": "https://uxpatternsguide.com/agent/patterns/editable-ai-output.json", "human": "https://uxpatternsguide.com/patterns/editable-ai-output/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/correction-feedback-vs-query-correction-vs-inline-validation-vs-comments-vs-regenerate-retry-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/editable-ai-output-vs-inline-edit-vs-prompt-box-vs-streaming-response-vs-citation-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/regenerate-retry-vs-retry-vs-chat-interface-vs-streaming-response-vs-prompt-box-vs-editable-ai-output.md" ] }, { "id": "email-address-entry", "name": "Email address entry", "aliases": [ "email input", "email address field", "contact email field", "sign-in email field", "email capture", "email contact details", "mailbox address entry" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Contactable email address capture field", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Email addresses look simple but are easy to mistype, may be long or uncommon, often come from password managers or copy and paste, and can affect account recovery, receipts, notifications, and access confirmation.", "useWhen": "The product must capture an email address for contact, receipt, notification, invitation, account identifier, recovery, or verification.", "avoidWhen": "The value is a username, label, reference, organization name, or other short text that may not be an email address.", "requiredStates": [ "Initial state with label, purpose hint, type email, autocomplete email, spellcheck false, and adequate width.", "Focused state with email keyboard and normal typing, paste, selection, undo, and autofill behavior.", "Pasted address state preserving plus tags, case where relevant for display, subdomains, and long domains.", "Missing required email state with field-specific error text." ], "commonMisuses": [ "Using a plain text input without email autocomplete or email keyboard support.", "Blocking paste or browser autofill.", "Rejecting plus-addressed, long, subdomain, or uncommon-domain addresses with a narrow regex.", "Silently correcting a provider typo and sending mail to the changed address." ], "keywords": [ "email", "address", "entry", "input", "field", "contact", "sign-in", "capture", "details", "mailbox", "data", "ui-ux", "contactable", "addresses", "look", "simple", "but", "easy", "mistype", "may", "long", "uncommon", "often", "come", "password", "managers", "copy", "paste", "affect", "account", "recovery", "receipts", "notifications", "access", "confirmation", "email-specific", "clear", "purpose", "autofill", "support" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/email-address-entry.md", "json": "https://uxpatternsguide.com/agent/patterns/email-address-entry.json", "human": "https://uxpatternsguide.com/patterns/email-address-entry/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/account-creation-vs-start-page-vs-onboarding-vs-password-creation.md", "https://uxpatternsguide.com/agent/comparisons/confirm-email-vs-email-address-entry-vs-account-creation-vs-password-reset.md", "https://uxpatternsguide.com/agent/comparisons/email-address-entry-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/password-reset-vs-login-vs-password-creation-vs-email-address-entry.md", "https://uxpatternsguide.com/agent/comparisons/sign-in-vs-account-creation-vs-password-input-vs-session-timeout-warning.md" ] }, { "id": "empty-state", "name": "Empty state", "aliases": [ "blank slate", "first-use empty state", "no data state", "zero state" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Resolved no-data content surface", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users encounter a resolved content area where no objects are available and need to know whether that is expected, why it happened, and what action is possible now.", "useWhen": "The product area can legitimately contain no user data.", "avoidWhen": "The absence was caused by filters or search.", "requiredStates": [ "First-use empty state before any objects exist.", "Configured but currently empty state after cleanup or deletion.", "Permission-limited state where creation is unavailable and request-access or explanation is shown.", "Prerequisite or setup-empty state where configuration must happen before data appears." ], "commonMisuses": [ "Showing a blank page with no explanation.", "Using marketing copy instead of a task-specific next step.", "Telling users to create something they do not have permission to create.", "Showing empty state while content is still loading." ], "keywords": [ "empty", "state", "blank", "slate", "first-use", "data", "zero", "feedback", "status", "system", "ui-ux", "resolved", "no-data", "content", "surface", "encounter", "area", "where", "objects", "available", "need", "know", "whether", "expected", "why", "happened", "what", "action", "possible", "now", "explain", "legitimate", "absence", "context", "name", "missing", "object", "prerequisite", "provide", "one" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/empty-state.md", "json": "https://uxpatternsguide.com/agent/patterns/empty-state.json", "human": "https://uxpatternsguide.com/patterns/empty-state/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/dead-end-empty-state-vs-empty-state-vs-no-results-recovery-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/empty-state-vs-no-results-recovery-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/loading-skeleton-vs-empty-state-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/onboarding-vs-empty-state-vs-wizard-vs-progressive-disclosure.md", "https://uxpatternsguide.com/agent/comparisons/page-not-found-page-vs-service-unavailable-page-vs-error-state-vs-empty-state.md", "https://uxpatternsguide.com/agent/comparisons/permission-denied-state-vs-error-state-vs-empty-state-vs-disabled-button-no-explanation.md" ] }, { "id": "error-state", "name": "Error state", "aliases": [ "failure state", "recoverable error", "failed content state", "section error" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Recoverable failure surface", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users expected content, saving, sync, or progress, but the system failed and they need to understand what failed, what remains safe, and how to recover.", "useWhen": "A system or task failure blocks expected content or action.", "avoidWhen": "Nothing exists yet and the state is expected.", "requiredStates": [ "Normal expected state before failure.", "Pending or retrying state after recovery action starts.", "Failed state with affected content, cause, and recovery action.", "Recovered state after retry or fallback succeeds." ], "commonMisuses": [ "Using a transient toast for critical errors.", "Showing generic copy such as Something went wrong without recovery.", "Clearing user input after a failed save.", "Replacing failed expected content with an empty state." ], "keywords": [ "error", "state", "failure", "recoverable", "failed", "content", "section", "feedback", "status", "system", "ui-ux", "surface", "expected", "saving", "sync", "progress", "but", "they", "need", "understand", "what", "remains", "safe", "how", "recover", "keep", "visible", "near", "affected", "task", "explain", "terms", "preserve", "context", "offer", "recovery", "path", "such", "retry", "edit" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/error-state.md", "json": "https://uxpatternsguide.com/agent/patterns/error-state.json", "human": "https://uxpatternsguide.com/patterns/error-state/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/conflict-state-vs-sync-state-vs-draft-state-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/dead-end-empty-state-vs-empty-state-vs-no-results-recovery-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/empty-state-vs-no-results-recovery-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/fallback-path-vs-retry-vs-error-state-vs-service-unavailable-page.md", "https://uxpatternsguide.com/agent/comparisons/haptic-feedback-vs-touch-gesture-vs-toast-notification-vs-error-state-vs-confirmation-dialog-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/infinite-spinner-vs-loading-skeleton-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/inline-message-vs-toast-notification-vs-error-state-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/loading-skeleton-vs-empty-state-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/loading-spinner-vs-loading-skeleton-vs-infinite-spinner-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/offline-state-vs-error-state-vs-loading-spinner-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/page-not-found-page-vs-service-unavailable-page-vs-error-state-vs-empty-state.md", "https://uxpatternsguide.com/agent/comparisons/permission-denied-state-vs-error-state-vs-empty-state-vs-disabled-button-no-explanation.md", "https://uxpatternsguide.com/agent/comparisons/retry-vs-error-state-vs-loading-spinner-vs-offline-state.md", "https://uxpatternsguide.com/agent/comparisons/service-unavailable-page-vs-error-state-vs-offline-state-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/sync-state-vs-offline-state-vs-progress-bar-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/toast-notification-vs-toast-only-critical-error-vs-error-state-vs-undo.md", "https://uxpatternsguide.com/agent/comparisons/toast-only-critical-error-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/validation-that-clears-user-input-vs-inline-validation-vs-error-summary-vs-single-page-form-vs-autosave-recovery-vs-error-state.md" ] }, { "id": "error-summary", "name": "Error summary", "aliases": [ "form error summary", "validation summary" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Form recovery summary", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users submit a page or step with validation errors and need an immediate overview plus a route to each answer that must be fixed.", "useWhen": "Form submission can produce one or more errors.", "avoidWhen": "A single local field issue can be corrected before submit without page-level orientation.", "requiredStates": [ "Neutral form before submit with no summary.", "Failed-submit state with summary visible near the form heading.", "Summary-link navigation to the affected field or first invalid grouped input.", "Corrected form state with the summary removed or replaced by a success outcome." ], "commonMisuses": [ "Showing a red banner or toast with no links to the invalid answers.", "Replacing field-level messages with only a top-level summary.", "Using vague summary messages that do not identify the answer or correction." ], "keywords": [ "error", "summary", "form", "validation", "prevention", "recovery", "ui-ux", "submit", "page", "step", "errors", "need", "immediate", "overview", "plus", "route", "each", "answer", "fixed", "show", "focused", "near", "heading", "clear", "title", "linked", "messages", "repeat", "matching", "affected", "fields", "render", "top-of-form", "block", "list", "field-level", "place", "after", "failed", "unrelated" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/error-summary.md", "json": "https://uxpatternsguide.com/agent/patterns/error-summary.json", "human": "https://uxpatternsguide.com/patterns/error-summary/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/disabled-button-no-explanation-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/disabled-controls-without-recovery-vs-disabled-button-no-explanation-vs-inline-validation-vs-error-summary-vs-permission-recovery-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/email-address-entry-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/name-entry-vs-text-input-vs-autocomplete-vs-select-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/notification-banner-vs-banner-vs-alert-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/password-creation-vs-password-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/password-input-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/phone-number-entry-vs-text-input-vs-input-mask-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/required-field-hidden-by-conditional-logic-vs-conditional-reveal-fields-vs-dependent-fields-vs-error-summary-vs-single-page-form-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/review-before-submit-vs-multi-step-form-vs-complete-complex-form-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/single-page-form-vs-single-question-page-vs-error-summary-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/single-question-page-vs-text-input-vs-textarea-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/textarea-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/validation-that-clears-user-input-vs-inline-validation-vs-error-summary-vs-single-page-form-vs-autosave-recovery-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/warning-text-vs-alert-vs-inline-message-vs-error-summary.md" ] }, { "id": "escalate-to-human", "name": "Escalate to human", "aliases": [ "talk to a human", "contact a human agent", "live agent escalation", "human support escalation", "agent handoff trigger", "request human help", "transfer to human", "human takeover", "escalate from AI", "bot to human escalation" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Control and recovery path that transfers an AI, automation, or self-service case to a human channel or queue", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI and automation can fail, reach policy limits, or encounter situations that need human judgment, but products often hide the path to a person, over-deflect users back to AI, or transfer without explaining destination, wait, context sharing, status, and fallback.", "useWhen": "Users need a person because AI, automation, self-service, or scripted support cannot resolve the situation safely or acceptably.", "avoidWhen": "The task is fully resolved by self-service and a human route would be decorative or misleading.", "requiredStates": [ "Available human route state with reason, destination, estimated wait, and shared context summary.", "User-requested human state after phrases such as talk to a person, agent, representative, supervisor, or human help.", "System-suggested escalation state after repeated failure, low confidence, policy block, high risk, user distress, or unavailable automation.", "Route choice state for live agent, ticket, callback, specialist queue, supervisor review, emergency route, or business-hours fallback." ], "commonMisuses": [ "Hiding the human route after the AI fails repeatedly.", "Using Talk to human as a button that only restarts the bot.", "Showing a transfer spinner without destination, queue, wait, or acceptance status.", "Sharing transcript, account data, or sensitive notes with a human route without disclosure or consent where required." ], "keywords": [ "escalate", "human", "talk", "contact", "agent", "live", "escalation", "support", "handoff", "trigger", "request", "help", "transfer", "takeover", "bot", "automation", "ui-ux", "control", "recovery", "path", "transfers", "self-service", "case", "channel", "queue", "fail", "reach", "policy", "limits", "encounter", "situations", "need", "judgment", "but", "products", "often", "hide", "person", "over-deflect", "back" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/escalate-to-human.md", "json": "https://uxpatternsguide.com/agent/patterns/escalate-to-human.json", "human": "https://uxpatternsguide.com/patterns/escalate-to-human/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/escalate-to-human-vs-handoff-summary-vs-chat-interface-vs-review-queue-vs-human-approval-gate-vs-recommended-next-action.md" ] }, { "id": "exit-this-page-quickly", "name": "Exit this page quickly", "aliases": [ "quick exit", "safe exit", "leave site quickly", "escape button", "hide this page", "quick escape", "exit button", "leave this website" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Persistent safety escape control for sensitive pages where being seen on the current content could put the user at risk", "maturity": "domain-specific", "platforms": [ "web", "mobile" ], "problem": "Sensitive services can endanger users when another person can see the page, when the exit path is hidden, slow, misleading, inaccessible, or routed through sensitive history, or when the product overstates what quick exit can protect.", "useWhen": "The user may be harmed if someone nearby sees them viewing or using the current sensitive service.", "avoidWhen": "The page is ordinary low-risk content where a prominent emergency exit would create alarm or confusion.", "requiredStates": [ "Persistent visible exit control on sensitive pages.", "Secondary assistive-technology activation link or equivalent reachable control.", "Immediate content-covering loading or transition state.", "Neutral destination redirect state." ], "commonMisuses": [ "Using an ordinary Back link or footer Close link as the safety exit.", "Hiding the exit control below sensitive content or making it reachable only after scrolling.", "Showing a confirmation dialog, survey, animation, or analytics wait before hiding content.", "Overpromising that quick exit clears browser history or protects a monitored device." ], "keywords": [ "exit", "page", "quickly", "quick", "safe", "leave", "site", "escape", "button", "hide", "website", "trust", "safety", "privacy", "ui-ux", "persistent", "control", "sensitive", "pages", "where", "being", "seen", "current", "content", "could", "put", "risk", "services", "endanger", "another", "person", "see", "path", "hidden", "slow", "misleading", "inaccessible", "routed", "through", "history" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/exit-this-page-quickly.md", "json": "https://uxpatternsguide.com/agent/patterns/exit-this-page-quickly.json", "human": "https://uxpatternsguide.com/patterns/exit-this-page-quickly/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/exit-this-page-quickly-vs-security-warning-vs-sensitive-data-reveal-vs-session-timeout-vs-privacy-settings-vs-back-link.md" ] }, { "id": "exit-warning", "name": "Exit warning", "aliases": [ "leave page warning", "navigation guard", "unsaved changes warning", "dirty form exit guard", "beforeunload warning", "departure warning" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Attempted-departure safeguard for unrecoverable in-progress work", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users can accidentally leave a page, close a tab, reload, follow a link, sign out, or move to another route while work is dirty, pending, failed, or session-bound, causing data or context loss that cannot be recovered.", "useWhen": "Users have unsaved or pending changes that cannot be recovered if they leave.", "avoidWhen": "The page is clean, read-only, or all changes are safely saved and recoverable.", "requiredStates": [ "Clean state with no exit warning attached.", "Dirty unsaved state with local unsaved-work status.", "Pending autosave or upload state.", "Failed save state with retry before leaving." ], "commonMisuses": [ "Warning on every navigation regardless of whether work is dirty.", "Using exit warnings for retention, growth, ads, or survey prompts instead of preventing user-facing loss.", "Leaving beforeunload listeners attached after save, harming navigation and browser-cache behavior.", "Showing a vague Are you sure? message without naming the affected work or consequence." ], "keywords": [ "exit", "warning", "leave", "page", "navigation", "guard", "unsaved", "changes", "dirty", "form", "beforeunload", "departure", "error", "prevention", "recovery", "ui-ux", "attempted-departure", "safeguard", "unrecoverable", "in-progress", "work", "accidentally", "close", "tab", "reload", "follow", "link", "sign", "out", "move", "another", "route", "while", "pending", "failed", "session-bound", "causing", "data", "context", "loss" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/exit-warning.md", "json": "https://uxpatternsguide.com/agent/patterns/exit-warning.json", "human": "https://uxpatternsguide.com/patterns/exit-warning/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/exit-warning-vs-autosave-form-vs-draft-state-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-warning-vs-exit-warning-vs-autosave-form-vs-permission-denied-state.md", "https://uxpatternsguide.com/agent/comparisons/unsaved-changes-prompt-vs-exit-warning-vs-autosave-form-vs-confirmation-dialog.md" ] }, { "id": "expandable-row", "name": "Expandable row", "aliases": [ "expanded row", "collapsible row", "row expansion", "row detail", "master row detail", "expandable table row", "collapsible table row", "row disclosure", "inline row detail" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Row-owned inline detail disclosure inside a table or list", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Dense tables and lists often need row-specific explanation, history, or secondary attributes, but adding every detail as a column makes scanning harder while sending users to separate pages breaks row context for quick triage.", "useWhen": "A row has supplemental detail that is useful for some records but would make the default table or list too dense.", "avoidWhen": "The hidden data is a core column users must compare across rows.", "requiredStates": [ "Collapsed row with row identity, key values, and a labelled expand control.", "Expanded row with detail region immediately after the owning row and a labelled collapse control.", "Focused expand control, keyboard activated expansion, and focus return after collapse.", "Row with no additional detail or permission-limited detail." ], "commonMisuses": [ "Hiding primary columns or required decision data inside collapsed detail.", "Tracking expansion by row index so a different record appears expanded after sorting or filtering.", "Using a chevron-only button with no row identity or expanded state.", "Showing expand controls on rows with no additional content." ], "keywords": [ "expandable", "row", "expanded", "collapsible", "expansion", "detail", "master", "table", "disclosure", "inline", "data", "display", "exploration", "ui-ux", "row-owned", "inside", "list", "dense", "tables", "lists", "often", "need", "row-specific", "explanation", "history", "secondary", "attributes", "but", "adding", "every", "column", "makes", "scanning", "harder", "while", "sending", "separate", "pages", "breaks", "context" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/expandable-row.md", "json": "https://uxpatternsguide.com/agent/patterns/expandable-row.json", "human": "https://uxpatternsguide.com/patterns/expandable-row/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/expandable-row-vs-table-vs-details-panel-vs-accordion.md" ] }, { "id": "faceted-search", "name": "Faceted search", "aliases": [ "facets", "filtering", "guided filtering" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Filter and results exploration surface", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to narrow a large result set using multiple meaningful attributes.", "useWhen": "The data set has structured attributes users understand.", "avoidWhen": "The result set is small enough that filtering adds complexity.", "requiredStates": [ "Unfiltered state with result count and available facets.", "Filtered state with applied constraints visible.", "Zero-result state with clear recovery actions.", "Facet loading or disabled state when counts are recalculating." ], "commonMisuses": [ "Using internal database labels as facets.", "Hiding applied filters in a collapsed drawer.", "Letting filters produce zero results without a path to broaden." ], "keywords": [ "faceted", "search", "facets", "filtering", "guided", "browse", "discovery", "ui-ux", "filter", "results", "exploration", "surface", "need", "narrow", "large", "result", "set", "using", "multiple", "meaningful", "attributes", "expose", "dimensions", "near", "let", "combine", "constraints", "make", "applied", "filters", "visible", "removable", "render", "controls", "active", "chips", "counts", "list", "clear", "no-results" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/faceted-search.md", "json": "https://uxpatternsguide.com/agent/patterns/faceted-search.json", "human": "https://uxpatternsguide.com/patterns/faceted-search/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/faceted-search-vs-no-results-recovery.md", "https://uxpatternsguide.com/agent/comparisons/filter-panel-vs-faceted-search-vs-no-results-recovery.md" ] }, { "id": "fake-undo", "name": "Fake undo", "aliases": [ "undo that does not restore", "misleading undo", "fake restore", "broken undo", "nonfunctional undo", "partial undo", "undo placebo", "toast undo that lies" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Anti-pattern where a recovery affordance promises undo but cannot restore the prior state", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Undo creates strong user trust, but products sometimes expose an undo label before they can actually reverse the action. The result is worse than no recovery because users believe a harmful change was undone when data, permissions, order, messages, or external effects remain changed.", "useWhen": "Use this anti-pattern entry to audit products that show Undo, Restore, Revert, or rollback controls without proving exact reversal.", "avoidWhen": "Do not flag a clearly labelled partial recovery, restore-from-trash, request-recovery, or recreate flow as fake undo if it does not claim full reversal.", "requiredStates": [ "Pre-action state with enough identity, relationship, order, permission, and context captured for reversal.", "Completed recoverable state that names the affected action and exact target.", "Undo available state with a visible, keyboard-reachable recovery control.", "Restored state showing the object, values, relationships, counts, selection, and focus context returned." ], "commonMisuses": [ "Showing Undo after an action that has already sent email, money, permissions, or webhooks outside the product.", "Restoring only a visible row while losing comments, labels, sharing, order, or ownership.", "Letting a second action overwrite the first action's undo payload.", "Using a disappearing toast as the only recovery path for an important object." ], "keywords": [ "fake", "undo", "does", "restore", "misleading", "broken", "nonfunctional", "partial", "placebo", "toast", "lies", "error", "prevention", "recovery", "ui-ux", "anti-pattern", "where", "affordance", "promises", "but", "cannot", "prior", "state", "creates", "strong", "trust", "products", "sometimes", "expose", "label", "before", "they", "actually", "reverse", "action", "result", "worse", "than", "because", "believe" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/fake-undo.md", "json": "https://uxpatternsguide.com/agent/patterns/fake-undo.json", "human": "https://uxpatternsguide.com/patterns/fake-undo/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/fake-undo-vs-undo-vs-toast-notification-vs-restore-from-trash-vs-destructive-action-confirmation-vs-autosave-recovery.md" ] }, { "id": "fallback-path", "name": "Fallback path", "aliases": [ "alternate path", "backup route", "manual fallback", "assisted route", "alternate completion route", "fallback journey" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "User-directed alternate route when the primary path cannot complete", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can be blocked by a lookup miss, unavailable dependency, unsupported device, digital exclusion, missing record, file or identity check problem, or channel constraint even though the task still needs a way to complete.", "useWhen": "A primary lookup, verification, upload, payment, search, device feature, online-only step, or channel can fail while the user still needs to finish.", "avoidWhen": "The only honest next step is retrying the same operation after a transient failure.", "requiredStates": [ "Primary path available state.", "Primary path blocked or unsupported state with cause.", "Fallback offered state with method, scope, and tradeoff.", "Fallback selected state showing what data carries over." ], "commonMisuses": [ "Hiding manual entry or support until users repeatedly fail.", "Calling Retry a fallback even though it repeats the same broken operation.", "Offering a download or phone number without an application reference or completion contract.", "Clearing typed data, selected files, or uploaded evidence when users switch paths." ], "keywords": [ "fallback", "path", "alternate", "backup", "route", "manual", "assisted", "completion", "journey", "error", "prevention", "recovery", "ui-ux", "user-directed", "primary", "cannot", "complete", "blocked", "lookup", "miss", "unavailable", "dependency", "unsupported", "device", "digital", "exclusion", "missing", "record", "file", "identity", "check", "problem", "channel", "constraint", "even", "though", "task", "still", "needs", "way" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/fallback-path.md", "json": "https://uxpatternsguide.com/agent/patterns/fallback-path.json", "human": "https://uxpatternsguide.com/patterns/fallback-path/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/disabled-controls-without-recovery-vs-disabled-button-no-explanation-vs-inline-validation-vs-error-summary-vs-permission-recovery-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/fallback-path-vs-retry-vs-error-state-vs-service-unavailable-page.md", "https://uxpatternsguide.com/agent/comparisons/graceful-degradation-vs-fallback-path-vs-offline-state-vs-service-unavailable-page.md", "https://uxpatternsguide.com/agent/comparisons/offline-mobile-retry-vs-offline-state-vs-retry-vs-sync-state-vs-pull-to-refresh-vs-fallback-path.md" ] }, { "id": "favorites", "name": "Favorites", "aliases": [ "starred items", "saved favorites", "favorite files", "favorite folders", "starred repositories", "liked items", "bookmarked items", "quick access favorites" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "User-marked preferred items gathered into a recognizable return-access list", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need a durable way to mark preferred or personally important items for return access, but recency, search ranking, recommendations, and pinned prominence do not reliably express personal affinity.", "useWhen": "Users need to mark preferred or personally important objects for later return.", "avoidWhen": "The goal is to keep a small set at the top or in a stable user-defined order.", "requiredStates": [ "No favorites state with a path to favorite eligible items.", "Favoritable item state, favorited item state, favorite pending, unfavorite pending, and failed-save states.", "Favorites list or filter with item name, type, location, owner, scope, and last-known availability.", "Personal favorite, synced favorite, public or counted favorite, shared favorite, and policy-limited favorite states when those scopes exist." ], "commonMisuses": [ "Using a star icon with no label or selected state.", "Treating favorites as pins, recents, subscriptions, saved searches, recommendations, ratings, or votes without explaining the effect.", "Removing, archiving, hiding, or deleting the item when users only meant to unfavorite it.", "Offering favorite buttons without any reliable Favorites list or filter." ], "keywords": [ "favorites", "starred", "items", "saved", "favorite", "files", "folders", "repositories", "liked", "bookmarked", "quick", "access", "personalization", "preference", "ui-ux", "user-marked", "preferred", "gathered", "recognizable", "return-access", "list", "need", "durable", "way", "mark", "personally", "important", "return", "but", "recency", "search", "ranking", "recommendations", "pinned", "prominence", "reliably", "express", "personal", "affinity", "provide" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/favorites.md", "json": "https://uxpatternsguide.com/agent/patterns/favorites.json", "human": "https://uxpatternsguide.com/patterns/favorites/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/pinned-items-vs-favorites-vs-recently-viewed-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/recently-used-vs-recently-viewed-vs-favorites-vs-pinned-items.md" ] }, { "id": "feed", "name": "Feed", "aliases": [ "content feed", "activity feed", "news feed", "social feed", "stream", "update stream", "post feed", "story feed", "infinite feed" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Dynamic stream of article-like updates that may load or insert content at either end", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to consume a changing stream of updates, posts, events, or stories, but dynamic insertion, infinite loading, mixed ranking, and unlabeled stream items can destroy orientation and trust.", "useWhen": "Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity.", "avoidWhen": "The content is a finite set of objects that users need to filter, sort, select, compare, or manage.", "requiredStates": [ "Default feed with heading, order label, rendered item count or range, and article-like items.", "New item waiting, live updates paused, jump to latest, loaded newer, and loaded older states.", "Loading more, busy, end-of-feed, failed-load, retry, offline, and partial-load states.", "Unread, read, new, updated, removed, muted, hidden, saved, liked, replied, and shared item states when supported." ], "commonMisuses": [ "Calling any vertical card list a feed even when it is a bounded object collection.", "Auto-prepending new content and moving the reader away from the item they were reading.", "Mixing ranked, sponsored, recommended, and chronological items without labels.", "Using infinite scroll when users need a footer, exact position, task completion, or a known end." ], "keywords": [ "feed", "content", "activity", "news", "social", "stream", "update", "post", "story", "infinite", "data", "display", "exploration", "ui-ux", "dynamic", "article-like", "updates", "may", "load", "insert", "either", "end", "need", "consume", "changing", "posts", "events", "stories", "but", "insertion", "loading", "mixed", "ranking", "unlabeled", "items", "destroy", "orientation", "trust", "present", "labelled" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/feed.md", "json": "https://uxpatternsguide.com/agent/patterns/feed.json", "human": "https://uxpatternsguide.com/patterns/feed/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/chat-interface-vs-prompt-box-vs-threaded-discussion-vs-comments-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/comments-vs-textarea-vs-feed-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/feed-vs-card-list-vs-recommendations-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/infinite-scroll-with-no-footer-access-vs-feed-vs-pagination-vs-card-list-vs-skip-link.md", "https://uxpatternsguide.com/agent/comparisons/pagination-without-current-page-vs-pagination-vs-breadcrumbs-vs-step-navigation-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/pull-to-refresh-vs-touch-gesture-vs-feed-vs-offline-state-vs-loading-spinner-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/streaming-response-vs-chat-interface-vs-progress-bar-vs-loading-spinner-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/threaded-discussion-vs-comments-vs-feed-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/timeline-vs-feed-vs-process-list-vs-step-navigation.md" ] }, { "id": "file-upload", "name": "File upload", "aliases": [ "file input", "file attachment", "document upload", "evidence upload", "attachment picker", "upload control" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "File selection and attachment control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to attach documents, images, or other files, but upload controls often hide requirements, lose selected files after errors, blur the difference between local selection and completed upload, or block keyboard and mobile users.", "useWhen": "The service needs a document, image, scan, spreadsheet, media file, or other original file.", "avoidWhen": "A typed answer, reference number, checkbox, or declaration would satisfy the task.", "requiredStates": [ "Empty labelled state with requirements hint and choose-file action.", "File chooser invoked state with focus returning to the upload control.", "Selected but not uploaded state showing filename, size, type, and remove action.", "Uploading state with progress or pending indicator tied to the file." ], "commonMisuses": [ "Asking for a file when a typed reference number or simple answer would be enough.", "Showing selected filename as if the final service submission has already happened.", "Hiding accepted formats and maximum file size until after the user fails.", "Clearing the selected file and unrelated form answers after a recoverable error." ], "keywords": [ "file", "upload", "input", "attachment", "document", "evidence", "picker", "control", "data", "entry", "ui-ux", "selection", "need", "attach", "documents", "images", "other", "files", "but", "controls", "often", "hide", "requirements", "lose", "selected", "after", "errors", "blur", "difference", "between", "local", "completed", "block", "keyboard", "mobile", "provide", "labelled", "states", "front", "uses" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/file-upload.md", "json": "https://uxpatternsguide.com/agent/patterns/file-upload.json", "human": "https://uxpatternsguide.com/patterns/file-upload/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/bulk-import-vs-file-upload-vs-drag-and-drop-upload-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/camera-capture-vs-file-upload-vs-permission-request-vs-sensitive-data-reveal-vs-full-screen-takeover-vs-drag-and-drop-upload.md", "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-upload-vs-file-upload-vs-multi-step-form-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/file-upload-vs-text-input-vs-single-question-page-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/qr-scan-vs-camera-capture-vs-permission-request-vs-file-upload-vs-two-factor-authentication-vs-security-warning.md" ] }, { "id": "filter-chips", "name": "Filter chips", "aliases": [ "filter chip", "filter tags", "filter pills", "applied filter chips", "removable filters", "selectable tags" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Compact chip set for toggling or removing result filters", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need quick visibility and control over simple filters, but compact chip UI can become ambiguous, unstable, inaccessible, or confused with decorative tags and badges.", "useWhen": "A few common filters should stay visible and directly toggleable near the content.", "avoidWhen": "There are many criteria, ranges, dates, or grouped fields that need a panel or form.", "requiredStates": [ "Unselected chip set state with no active filters and a clear result count.", "Selected chip state with visible selected indicator and updated result count.", "Applied dismissible chip state with category-value label and remove affordance.", "Focused chip or remove-control state for keyboard operation." ], "commonMisuses": [ "Using a lone chip as a generic Filter button.", "Styling decorative tags, status badges, and removable filters the same way.", "Reordering all selected chips to the front after each click.", "Using vague labels such as New, Hot, 1, or More without category or result meaning." ], "keywords": [ "filter", "chips", "chip", "tags", "pills", "applied", "removable", "filters", "selectable", "search", "browse", "discovery", "ui-ux", "compact", "set", "toggling", "removing", "result", "need", "quick", "visibility", "control", "over", "simple", "but", "become", "ambiguous", "unstable", "inaccessible", "confused", "decorative", "badges", "provide", "labelled", "where", "each", "clearly", "represents", "value", "selected" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/filter-chips.md", "json": "https://uxpatternsguide.com/agent/patterns/filter-chips.json", "human": "https://uxpatternsguide.com/patterns/filter-chips/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/chip-selection-vs-filter-chips-vs-checkbox-group-vs-segmented-control.md", "https://uxpatternsguide.com/agent/comparisons/filter-chips-vs-filter-panel-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/filter-reset-that-clears-unrelated-search-vs-filter-panel-vs-basic-search-vs-filter-chips-vs-saved-search.md", "https://uxpatternsguide.com/agent/comparisons/saved-filter-vs-filter-panel-vs-saved-search-vs-filter-chips.md", "https://uxpatternsguide.com/agent/comparisons/sort-controls-vs-filter-chips-vs-filter-panel-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/tag-vs-filter-chips-vs-chip-selection-vs-inline-message.md" ] }, { "id": "filter-panel", "name": "Filter panel", "aliases": [ "filters panel", "filter sidebar", "filter drawer", "filter accordion", "filter rail", "refine panel", "narrow results panel" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Grouped filter control panel for narrowing a current result set", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to narrow a visible result set using several criteria, but the controls, applied state, result count, and reset behavior can become disconnected.", "useWhen": "Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.", "avoidWhen": "The result set is small enough that scanning is faster than filtering.", "requiredStates": [ "Default state with no user-applied filters and an explicit result count.", "Draft state where selected filter controls have changed but batch results have not yet updated.", "Applied state with active-filter count, result count, and removable applied criteria near the results.", "Collapsed or mobile-panel state that still exposes the active-filter count and a way back to results." ], "commonMisuses": [ "Hiding active filters inside a closed panel with no count, chips, or result-state summary.", "Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set.", "Resetting search query, sort order, page size, or view density when users clear filters.", "Combining pending draft selections with already-applied result counts without explaining the mismatch." ], "keywords": [ "filter", "panel", "filters", "sidebar", "drawer", "accordion", "rail", "refine", "narrow", "results", "search", "browse", "discovery", "ui-ux", "grouped", "control", "narrowing", "current", "result", "set", "need", "visible", "using", "several", "criteria", "but", "controls", "applied", "state", "count", "reset", "behavior", "become", "disconnected", "provide", "labelled", "groups", "preserves", "selected", "values" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/filter-panel.md", "json": "https://uxpatternsguide.com/agent/patterns/filter-panel.json", "human": "https://uxpatternsguide.com/patterns/filter-panel/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/accordion-vs-tabs-vs-side-navigation-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/advanced-search-vs-basic-search-vs-filter-panel-vs-search-scope-selector.md", "https://uxpatternsguide.com/agent/comparisons/browse-by-category-vs-basic-search-vs-filter-panel-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/date-range-picker-vs-date-picker-vs-date-input-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/drawer-vs-modal-dialog-vs-navigation-drawer-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/filter-chips-vs-filter-panel-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/filter-panel-vs-faceted-search-vs-no-results-recovery.md", "https://uxpatternsguide.com/agent/comparisons/filter-reset-that-clears-unrelated-search-vs-filter-panel-vs-basic-search-vs-filter-chips-vs-saved-search.md", "https://uxpatternsguide.com/agent/comparisons/review-queue-vs-approval-workflow-vs-saved-filter-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/saved-filter-vs-filter-panel-vs-saved-search-vs-filter-chips.md", "https://uxpatternsguide.com/agent/comparisons/saved-search-vs-basic-search-vs-filter-panel-vs-recently-viewed.md", "https://uxpatternsguide.com/agent/comparisons/search-scope-selector-vs-basic-search-vs-filter-panel-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/sort-controls-vs-filter-chips-vs-filter-panel-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/table-vs-sort-controls-vs-filter-panel-vs-pagination.md" ] }, { "id": "filter-reset-that-clears-unrelated-search", "name": "Filter reset that clears unrelated search", "aliases": [ "clear filters clears search", "filter reset wipes query", "reset filters loses search", "clear all over-resets", "unscoped filter reset", "filter clear loses sort", "filter reset destroys context" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Over-broad filter reset anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to loosen or remove filters, but the reset action silently clears unrelated search or result state that should remain independent.", "useWhen": "Use this anti-pattern to review search result pages, list filters, dashboard filters, saved filters, saved searches, mobile filter drawers, no-results recovery, and generated clear/reset actions.", "avoidWhen": "The action is intentionally a full Start over reset and the UI clearly lists search, filters, sort, scope, and view state as affected.", "requiredStates": [ "Default state with visible query, filters, sort, scope, and result count separated by ownership.", "Clear one filter state that removes only one criterion and preserves query and sort.", "Clear all filters state that removes all filter criteria and keeps the submitted query.", "Clear search state that removes query text without pretending it is a filter reset." ], "commonMisuses": [ "Implementing Clear filters by reinitializing the whole search page state object.", "Using one Reset button for draft filters, applied filters, query, sort, and saved search.", "Treating query text as just another filter chip without showing the difference.", "Clearing search history or saved search identity when only visible filters were reset." ], "keywords": [ "filter", "reset", "clears", "unrelated", "search", "clear", "filters", "wipes", "query", "loses", "all", "over-resets", "unscoped", "sort", "destroys", "context", "browse", "discovery", "ui-ux", "over-broad", "anti-pattern", "need", "loosen", "remove", "but", "action", "silently", "result", "state", "should", "remain", "independent", "treat", "make", "scope", "explicit", "preserve", "separate", "show", "affected" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/filter-reset-that-clears-unrelated-search.md", "json": "https://uxpatternsguide.com/agent/patterns/filter-reset-that-clears-unrelated-search.json", "human": "https://uxpatternsguide.com/patterns/filter-reset-that-clears-unrelated-search/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/filter-reset-that-clears-unrelated-search-vs-filter-panel-vs-basic-search-vs-filter-chips-vs-saved-search.md" ] }, { "id": "focus-traversal", "name": "Focus traversal", "aliases": [ "focus order", "tab order", "sequential focus navigation", "keyboard traversal", "focus movement", "focus path" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Sequential keyboard focus path through interactive controls and state changes", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users who navigate by keyboard, switch, screen reader, or other sequential focus methods can lose their place when focus order disagrees with reading order, focus indicators are hidden, overlays leave hidden controls in the tab sequence, constrained regions create a keyboard trap, or state changes remove the focused element without a recovery target.", "useWhen": "A workflow has multiple focusable elements, dynamic content, or overlays that users traverse with keyboard or assistive technology.", "avoidWhen": "The concern is a single command accelerator rather than focus movement.", "requiredStates": [ "Initial page focus state after route change or page load.", "Skip link or bypass entry state where repeated blocks are present.", "Normal forward Tab order state.", "Reverse Shift+Tab order state." ], "commonMisuses": [ "Using positive tabindex values to force a visual order instead of fixing DOM order.", "Suppressing outline or focus ring without an equivalent visible indicator.", "Leaving hidden drawers, collapsed panels, or inactive tabs in the tab sequence.", "Moving focus unexpectedly on hover, scroll, animation, autosave, polling, or non-user-initiated updates." ], "keywords": [ "focus", "traversal", "order", "tab", "sequential", "navigation", "keyboard", "movement", "path", "cross-device", "physical", "interaction", "ui-ux", "through", "interactive", "controls", "state", "changes", "who", "navigate", "switch", "screen", "reader", "other", "methods", "lose", "their", "place", "disagrees", "reading", "indicators", "hidden", "overlays", "leave", "sequence", "constrained", "regions", "create", "trap", "remove" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/focus-traversal.md", "json": "https://uxpatternsguide.com/agent/patterns/focus-traversal.json", "human": "https://uxpatternsguide.com/patterns/focus-traversal/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/focus-traversal-vs-keyboard-shortcut-vs-skip-link-vs-modal-dialog-vs-toolbar-vs-data-grid.md" ] }, { "id": "follow-subscribe", "name": "Follow / subscribe", "aliases": [ "follow", "subscribe", "watch", "unfollow", "unsubscribe", "watching", "follow thread", "follow channel", "subscribe to updates", "watch page", "watch repository", "notification subscription" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Per-object opt-in control for future updates from a thread, page, channel, space, repository, saved view, or topic", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to stay informed about future changes to selected work without repeatedly revisiting it, but follow and subscribe controls become noisy or untrustworthy when they hide target scope, delivery channel, auto-follow reasons, included events, permission limits, digest timing, or the unsubscribe path.", "useWhen": "Users need future updates from a specific object, thread, channel, space, repository, topic, saved view, or query.", "avoidWhen": "The user only needs quick return access without updates.", "requiredStates": [ "Not following state.", "Following state.", "Watching broader parent scope state.", "Auto-followed because replied, mentioned, authored, assigned, or created state." ], "commonMisuses": [ "Using Follow as a bookmark with no future update delivery.", "Using Subscribe as a mailing-list opt-in without showing which object or event types are included.", "Hiding Unfollow in global notification settings only.", "Automatically following users without showing why they are receiving updates." ], "keywords": [ "follow", "subscribe", "watch", "unfollow", "unsubscribe", "watching", "thread", "channel", "updates", "page", "repository", "notification", "subscription", "collaboration", "social", "interaction", "ui-ux", "per-object", "opt-in", "control", "future", "space", "saved", "view", "topic", "need", "stay", "informed", "about", "changes", "selected", "work", "without", "repeatedly", "revisiting", "but", "controls", "become", "noisy", "untrustworthy" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/follow-subscribe.md", "json": "https://uxpatternsguide.com/agent/patterns/follow-subscribe.json", "human": "https://uxpatternsguide.com/patterns/follow-subscribe/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/block-mute-vs-report-abuse-vs-notification-preferences-vs-follow-subscribe-vs-permission-denied-state-vs-comments.md", "https://uxpatternsguide.com/agent/comparisons/follow-subscribe-vs-notification-center-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/notification-preferences-vs-settings-management-vs-notification-center-vs-follow-subscribe.md" ] }, { "id": "full-screen-takeover", "name": "Full-screen takeover", "aliases": [ "full-screen dialog", "full-screen modal", "full-page overlay", "takeover modal", "immersive overlay", "temporary full-screen mode" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Temporary full-viewport modal task mode", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Some temporary tasks need the whole viewport for focus, capture, dense content, or immersive preview, but ordinary full pages break the return path and compact modals, sheets, or drawers do not provide enough space.", "useWhen": "A temporary task needs the whole viewport for capture, immersive preview, focused setup, scanning, or dense editing.", "avoidWhen": "The task is short enough for a compact modal dialog.", "requiredStates": [ "Closed parent state with the selected object, filters, scroll, and opener visible.", "Opening state that moves focus into the takeover title, first field, camera control, or main task start.", "Open takeover state with full-viewport layout, task title, exit control, primary action, and blocked parent content.", "Internal step or subview state when Back means previous takeover step rather than leaving the entire mode." ], "commonMisuses": [ "Using a full-screen takeover as a dramatic wrapper for a short confirmation, single text field, or routine message.", "Making the takeover look like a normal page while route history and browser back behave like an overlay.", "Providing both Back and Close controls that exit different amounts of the flow without clear labels.", "Stacking another full-screen overlay, sheet, or browser inside the takeover." ], "keywords": [ "full-screen", "takeover", "dialog", "modal", "full-page", "overlay", "immersive", "temporary", "mode", "disclosure", "attention", "management", "ui-ux", "full-viewport", "task", "some", "tasks", "need", "whole", "viewport", "focus", "capture", "dense", "content", "preview", "but", "ordinary", "full", "pages", "break", "return", "path", "compact", "modals", "sheets", "drawers", "provide", "enough", "space", "present" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/full-screen-takeover.md", "json": "https://uxpatternsguide.com/agent/patterns/full-screen-takeover.json", "human": "https://uxpatternsguide.com/patterns/full-screen-takeover/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/camera-capture-vs-file-upload-vs-permission-request-vs-sensitive-data-reveal-vs-full-screen-takeover-vs-drag-and-drop-upload.md", "https://uxpatternsguide.com/agent/comparisons/full-screen-takeover-vs-modal-dialog-vs-sheet-vs-single-page-form.md" ] }, { "id": "global-navigation", "name": "Global navigation", "aliases": [ "primary navigation", "main navigation", "top-level navigation", "service navigation", "global header navigation" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Persistent top-level navigation shell", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need a stable way to understand where they are and move between the most important product, site, or service sections without losing orientation.", "useWhen": "Users revisit several top-level product or service areas.", "avoidWhen": "The flow has a single ordered transaction where navigation would distract or cause abandonment.", "requiredStates": [ "Default state with product or service identity and top-level links.", "Current section state that matches the page or route.", "Overflow or narrow viewport state where hidden links remain reachable.", "Utility state for account, help, search, language, or switcher controls separated from main links." ], "commonMisuses": [ "Listing every page or admin object in the global nav.", "Mixing account settings, sign out, help, and language controls into the same row as product destinations.", "Highlighting a nav item that does not match the displayed content.", "Using a hamburger menu on desktop to hide primary destinations without a strong space or complexity reason." ], "keywords": [ "global", "navigation", "primary", "main", "top-level", "service", "header", "wayfinding", "ui-ux", "persistent", "shell", "need", "stable", "way", "understand", "where", "they", "move", "between", "most", "important", "product", "site", "sections", "without", "losing", "orientation", "provide", "scoped", "names", "shows", "current", "section", "separates", "utility", "actions", "adapts", "overflow", "hiding", "place" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/global-navigation.md", "json": "https://uxpatternsguide.com/agent/patterns/global-navigation.json", "human": "https://uxpatternsguide.com/patterns/global-navigation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/global-navigation-vs-breadcrumbs-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/header-vs-global-navigation-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/mega-menu-vs-global-navigation-vs-navigation-drawer.md", "https://uxpatternsguide.com/agent/comparisons/menu-menubar-vs-menu-button-vs-mega-menu-vs-global-navigation.md", "https://uxpatternsguide.com/agent/comparisons/responsive-navigation-adaptation-vs-global-navigation-vs-bottom-navigation-vs-navigation-drawer-vs-side-navigation-vs-header.md", "https://uxpatternsguide.com/agent/comparisons/service-navigation-vs-global-navigation-vs-side-navigation.md", "https://uxpatternsguide.com/agent/comparisons/side-navigation-vs-global-navigation-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/utility-navigation-vs-global-navigation-vs-service-navigation.md" ] }, { "id": "graceful-degradation", "name": "Graceful degradation", "aliases": [ "degraded mode", "reduced capability mode", "enhancement failure recovery", "baseline experience", "no JavaScript recovery", "feature fallback" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Reduced-capability same-surface experience that preserves the core task", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Modern interfaces often rely on JavaScript, CSS, browser APIs, device sensors, heavy media, third-party widgets, or high network performance, and a single missing layer can block users even when the underlying task has a simpler path.", "useWhen": "A richer UI control, script, API, media layer, device capability, or third-party widget improves the task but is not essential to the outcome.", "avoidWhen": "The missing capability is legally, security, or domain required and no simpler route can complete the task.", "requiredStates": [ "Enhanced available state with the richer control active.", "Reduced-capability state naming the unavailable enhancement.", "Core path available state with baseline controls and primary action enabled.", "Unsupported browser or device capability state." ], "commonMisuses": [ "Treating JavaScript as mandatory for form submission when server-validated fields could submit the task.", "Leaving a blank widget, spinner, disabled button, or invisible error when an enhancement fails.", "Hiding baseline controls after enhancement loads, then failing to restore them when the enhanced layer breaks.", "Calling a separate support route graceful degradation instead of identifying it as a fallback path." ], "keywords": [ "graceful", "degradation", "degraded", "mode", "reduced", "capability", "enhancement", "failure", "recovery", "baseline", "experience", "javascript", "feature", "fallback", "error", "prevention", "ui-ux", "reduced-capability", "same-surface", "preserves", "core", "task", "modern", "interfaces", "often", "rely", "css", "browser", "apis", "device", "sensors", "heavy", "media", "third-party", "widgets", "high", "network", "performance", "single", "missing" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/graceful-degradation.md", "json": "https://uxpatternsguide.com/agent/patterns/graceful-degradation.json", "human": "https://uxpatternsguide.com/patterns/graceful-degradation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/graceful-degradation-vs-fallback-path-vs-offline-state-vs-service-unavailable-page.md" ] }, { "id": "handoff-summary", "name": "Handoff summary", "aliases": [ "handover summary", "transfer summary", "handoff note", "handover note", "shift handoff", "conversation handoff", "case handoff", "support transfer summary", "agent handoff summary", "SBAR handoff", "I-PASS handoff" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Concise transfer packet for responsibility, conversation, case, or task context", "maturity": "established", "platforms": [ "web", "desktop", "mobile", "ai" ], "problem": "Transfers fail when the receiver gets only an assignment, notification, transcript, or link and must reconstruct status, previous attempts, unresolved questions, risks, and next steps under time pressure.", "useWhen": "Responsibility, context, or conversation control transfers to another person, team, queue, shift, AI agent, live agent, or system.", "avoidWhen": "There is no receiver taking over context or responsibility.", "requiredStates": [ "Default handoff summary with sender, receiver, reason, status, and source object.", "AI-to-human conversation handoff with transcript link, collected variables, attempted steps, and escalation reason.", "Human-to-human shift or case handoff with open tasks, deadlines, and contingency notes.", "Generated summary state with timestamp, source coverage, and edit or regenerate affordance." ], "commonMisuses": [ "Sending only an assignment notification and calling it a handoff.", "Dumping the full transcript without current status, next action, or risk summary.", "Using an ordinary page summary instead of transfer-specific receiver context.", "Omitting who owns the next action after handoff." ], "keywords": [ "handoff", "summary", "handover", "transfer", "note", "shift", "conversation", "case", "support", "agent", "sbar", "i-pass", "collaboration", "social", "interaction", "ui-ux", "concise", "packet", "responsibility", "task", "context", "transfers", "fail", "receiver", "gets", "assignment", "notification", "transcript", "link", "reconstruct", "status", "previous", "attempts", "unresolved", "questions", "risks", "next", "steps", "under", "time" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/handoff-summary.md", "json": "https://uxpatternsguide.com/agent/patterns/handoff-summary.json", "human": "https://uxpatternsguide.com/patterns/handoff-summary/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/escalate-to-human-vs-handoff-summary-vs-chat-interface-vs-review-queue-vs-human-approval-gate-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md" ] }, { "id": "haptic-feedback", "name": "Haptic feedback", "aliases": [ "tactile feedback", "vibration feedback", "vibrate feedback", "impact feedback", "selection haptic", "haptic tap", "detent feedback", "force feedback" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Tactile feedback vocabulary for physical interaction events", "maturity": "standard", "platforms": [ "web", "mobile", "desktop", "game" ], "problem": "Tactile feedback can make digital interactions feel immediate and physical, but haptics are hardware-dependent, settings-dependent, platform-specific, easy to overuse, and inaccessible when they carry meaning without visible or audible backup.", "useWhen": "A tactile pulse reinforces a direct manipulation, boundary, threshold, selection, successful action, recoverable warning, or physical game/control event.", "avoidWhen": "The feedback is required for comprehension and no visible or audible equivalent exists.", "requiredStates": [ "Capability unavailable, unsupported browser, no vibration hardware, or no controller rumble state.", "User haptics disabled, reduced feedback, notification silence, or battery-sensitive state.", "Light press or button down feedback state.", "Selection changed feedback state." ], "commonMisuses": [ "Using haptics as the only error, warning, or success message.", "Playing the same strong vibration for every tap and outcome.", "Looping vibration during progress, loading, or background work.", "Ignoring system haptic or vibration preferences." ], "keywords": [ "haptic", "feedback", "tactile", "vibration", "vibrate", "impact", "selection", "tap", "detent", "force", "cross-device", "physical", "interaction", "ui-ux", "vocabulary", "events", "make", "digital", "interactions", "feel", "immediate", "but", "haptics", "hardware-dependent", "settings-dependent", "platform-specific", "easy", "overuse", "inaccessible", "they", "carry", "meaning", "without", "visible", "audible", "backup", "create", "small", "optional", "mapped" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/haptic-feedback.md", "json": "https://uxpatternsguide.com/agent/patterns/haptic-feedback.json", "human": "https://uxpatternsguide.com/patterns/haptic-feedback/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/haptic-feedback-vs-touch-gesture-vs-toast-notification-vs-error-state-vs-confirmation-dialog-vs-progress-bar.md" ] }, { "id": "header", "name": "Header / top app bar", "aliases": [ "top app bar", "app header", "navigation bar", "toolbar", "top toolbar", "application bar" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Current-view top bar with title, navigation affordance, actions, and overflow", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to know which screen or view they are in and need fast access to the few navigation and action controls that apply to that current view.", "useWhen": "A screen needs a current title plus back, close, menu, search, save, share, edit, or overflow actions.", "avoidWhen": "The interface only needs top-level destination switching and no current-view actions.", "requiredStates": [ "Default state with current view title and correct leading affordance.", "Primary action state with one to three visible current-view commands.", "Overflow open state with secondary commands grouped and keyboard reachable.", "Contextual selection or edit state with changed title and changed command set." ], "commonMisuses": [ "Using the top app bar as a dumping ground for every global destination and account utility.", "Showing stale titles or actions after route changes.", "Putting destructive or rare commands as unlabeled visible icons.", "Changing the meaning of the leading icon between back, menu, and close without clear context." ], "keywords": [ "header", "top", "app", "bar", "navigation", "toolbar", "application", "wayfinding", "ui-ux", "current-view", "title", "affordance", "actions", "overflow", "need", "know", "which", "screen", "view", "they", "fast", "access", "few", "action", "controls", "apply", "current", "place", "consistent", "above", "content", "names", "gives", "correct", "leading", "exposes", "highest-priority", "moves", "secondary", "commands" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/header.md", "json": "https://uxpatternsguide.com/agent/patterns/header.json", "human": "https://uxpatternsguide.com/patterns/header/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/header-vs-global-navigation-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/responsive-navigation-adaptation-vs-global-navigation-vs-bottom-navigation-vs-navigation-drawer-vs-side-navigation-vs-header.md" ] }, { "id": "hidden-destructive-account-deletion", "name": "Hidden destructive account deletion", "aliases": [ "hidden account deletion", "buried delete account", "hard to find delete account", "delete account dark pattern", "support-only account deletion", "deactivation instead of deletion", "export instead of deletion", "uninstall blocks deletion", "account deletion obstruction" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Anti-pattern where account deletion or associated data erasure is hidden, disguised, obstructed, or committed without a fair account-level review", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Account deletion becomes deceptive or unsafe when the product hides the deletion path, substitutes deactivation or export, requires vague support contact without status, omits a web route after uninstall, or commits account-level destruction without naming account identity, affected data, retained data, billing, linked apps, and recovery limits.", "useWhen": "Auditing a product that supports account creation and may be hiding, obstructing, disguising, or underspecifying account deletion.", "avoidWhen": "The account deletion workflow is already discoverable and complete; use delete account.", "requiredStates": [ "Hidden settings state where Delete account is absent or buried behind unrelated privacy/support copy.", "Deactivation-only state where login is disabled but account record and associated data remain.", "Support-only state with no direct request URL, expected timing, identity status, case ID, or receipt.", "Export-confusion state where Download data is presented as if it deletes source data." ], "commonMisuses": [ "Hiding account deletion in a privacy policy, FAQ, support article, or exact-match help search.", "Offering only deactivation and keeping account data active.", "Presenting data export as the end of the account deletion process.", "Requiring users to email support with no identity check, expected response time, request ID, or status." ], "keywords": [ "hidden", "destructive", "account", "deletion", "buried", "delete", "hard", "find", "dark", "pattern", "support-only", "deactivation", "instead", "export", "uninstall", "blocks", "obstruction", "trust", "safety", "privacy", "ui-ux", "anti-pattern", "where", "associated", "data", "erasure", "disguised", "obstructed", "committed", "without", "fair", "account-level", "review", "becomes", "deceptive", "unsafe", "product", "hides", "path", "substitutes" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/hidden-destructive-account-deletion.md", "json": "https://uxpatternsguide.com/agent/patterns/hidden-destructive-account-deletion.json", "human": "https://uxpatternsguide.com/patterns/hidden-destructive-account-deletion/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/hidden-destructive-account-deletion-vs-delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-privacy-settings.md" ] }, { "id": "hover-card", "name": "Hover card", "aliases": [ "hover preview", "rich hover preview", "link preview card", "profile hover card", "entity preview card", "reference preview" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Rich preview surface on hover or focus", "maturity": "standard", "platforms": [ "web", "desktop" ], "problem": "Dense interfaces often contain links, mentions, files, issues, and references that users need to inspect before opening, but navigating away for every object slows comparison and short tooltips cannot carry enough context.", "useWhen": "Users need to inspect object metadata before choosing whether to open a link, mention, file, row, issue, or reference.", "avoidWhen": "The content is only a short description that belongs in a tooltip.", "requiredStates": [ "Resting trigger state with visible or accessible object identity.", "Pointer hover pending state with a short open delay to avoid flicker while scanning.", "Open hover card state anchored to the current trigger.", "Pointer bridge or hoverable state where moving into the card does not immediately close it." ], "commonMisuses": [ "Using a hover card as the only place for required instructions or validation help.", "Putting forms, filters, destructive commands, or multi-step workflows inside the card.", "Opening on hover only with no keyboard or explicit route to the same preview.", "Closing as soon as the pointer leaves the trigger, before users can inspect the card." ], "keywords": [ "hover", "card", "preview", "rich", "link", "profile", "entity", "reference", "disclosure", "attention", "management", "ui-ux", "surface", "focus", "dense", "interfaces", "often", "contain", "links", "mentions", "files", "issues", "references", "need", "inspect", "before", "opening", "but", "navigating", "away", "every", "object", "slows", "comparison", "short", "tooltips", "cannot", "carry", "enough", "context" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/hover-card.md", "json": "https://uxpatternsguide.com/agent/patterns/hover-card.json", "human": "https://uxpatternsguide.com/patterns/hover-card/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/details-panel-vs-drawer-vs-hover-card-vs-accordion.md", "https://uxpatternsguide.com/agent/comparisons/hover-card-vs-tooltip-vs-popover-vs-disclosure-details.md", "https://uxpatternsguide.com/agent/comparisons/preview-panel-vs-details-panel-vs-hover-card-vs-drawer.md" ] }, { "id": "human-approval-gate", "name": "Human approval gate", "aliases": [ "human-in-the-loop approval", "human approval checkpoint", "manual approval gate", "automation approval gate", "agent approval gate", "run approval", "approval checkpoint", "manual resume gate", "human authorization gate", "human review gate" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Runtime checkpoint that pauses AI or automation until an eligible human authorizes the next step", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI agents and automations can make high-impact changes faster than users can inspect them, and ordinary approval pages, queues, or logs often fail to show the live step that is armed, the payload that will execute, or the conditions that make approval valid.", "useWhen": "An AI agent, workflow, deployment, or automation is ready to perform a high-impact step and must pause for human authorization.", "avoidWhen": "The action has already happened and users only need an audit log.", "requiredStates": [ "Paused gate state with proposed action, payload snapshot, reason for gate, and run context.", "Eligible approver state with role, separation-of-duties rule, and decision controls.", "Not eligible or self-review-blocked state with request-access, delegate, or escalation path.", "Approve and resume state that revalidates freshness before executing the gated step." ], "commonMisuses": [ "Showing Approve without the exact action, payload, target, risk, or resume consequence.", "Using a post-action audit record as if it were a pre-action human gate.", "Letting stale notifications approve changed automation state.", "Allowing any viewer or the automation requester to approve when policy requires an eligible independent reviewer." ], "keywords": [ "human", "approval", "gate", "human-in-the-loop", "checkpoint", "manual", "automation", "agent", "run", "resume", "authorization", "review", "ui-ux", "runtime", "pauses", "until", "eligible", "authorizes", "next", "step", "agents", "automations", "make", "high-impact", "changes", "faster", "than", "inspect", "them", "ordinary", "pages", "queues", "logs", "often", "fail", "show", "live", "armed", "payload", "will" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/human-approval-gate.md", "json": "https://uxpatternsguide.com/agent/patterns/human-approval-gate.json", "human": "https://uxpatternsguide.com/patterns/human-approval-gate/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/agent-plan-preview-vs-task-list-vs-recommended-next-action-vs-human-approval-gate-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/agent-progress-trace-vs-agent-plan-preview-vs-streaming-response-vs-activity-log-vs-progress-bar-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/ai-confidence-shown-as-fake-precision-vs-confidence-uncertainty-display-vs-meter-vs-source-grounding-display-vs-warning-text-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/automation-rule-builder-vs-human-approval-gate-vs-approval-workflow-vs-settings-management-vs-complete-complex-form-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/consent-prompt-vs-cookie-banner-vs-preference-center-vs-notification-preferences-vs-permission-sharing-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/dangerous-action-review-vs-destructive-action-confirmation-vs-typed-confirmation-vs-human-approval-gate-vs-review-before-submit-vs-security-warning.md", "https://uxpatternsguide.com/agent/comparisons/escalate-to-human-vs-handoff-summary-vs-chat-interface-vs-review-queue-vs-human-approval-gate-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/human-approval-gate-vs-approval-workflow-vs-review-queue-vs-review-before-submit-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/scope-clarification-vs-prompt-box-vs-search-scope-selector-vs-agent-plan-preview-vs-human-approval-gate-vs-chat-interface.md", "https://uxpatternsguide.com/agent/comparisons/tool-use-visibility-vs-agent-progress-trace-vs-source-grounding-display-vs-citation-display-vs-activity-log-vs-human-approval-gate.md" ] }, { "id": "icon-only-ambiguous-action", "name": "Icon-only ambiguous action", "aliases": [ "mystery icon", "unlabeled icon button", "ambiguous toolbar action", "symbol-only destructive action" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Ambiguous action anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users must guess what an icon-only control does, which slows action selection, hides risk, and can leave keyboard and assistive technology users without an action name.", "useWhen": "Use this anti-pattern entry to audit toolbars, row actions, cards, command bars, mobile action sheets, and generated UIs with symbol-only controls.", "avoidWhen": "The icon is paired with visible text that names the action.", "requiredStates": [ "Default state where the action name is visible or programmatically exposed before activation.", "Hover, focus, and touch-accessible help state for compact actions that still need supplemental explanation.", "Activated state that confirms the named action, affected object, and result.", "Risk review state for destructive or privacy-sensitive actions." ], "commonMisuses": [ "Using a trash, tray, box, arrow, or exclamation icon for archive, delete, download, export, and warning actions without visible words.", "Providing an accessible name such as icon, more, or button instead of the action and object.", "Putting the only explanation in a tooltip that appears on hover but not focus or touch.", "Using the same icon for Archive on one page and Delete on another." ], "keywords": [ "icon-only", "ambiguous", "action", "mystery", "icon", "unlabeled", "button", "toolbar", "symbol-only", "destructive", "disclosure", "attention", "management", "ui-ux", "anti-pattern", "guess", "what", "control", "does", "which", "slows", "selection", "hides", "risk", "leave", "keyboard", "assistive", "technology", "without", "name", "treat", "actions", "visible", "text", "meaning", "obvious", "reserve", "controls", "familiar", "low-risk" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/icon-only-ambiguous-action.md", "json": "https://uxpatternsguide.com/agent/patterns/icon-only-ambiguous-action.json", "human": "https://uxpatternsguide.com/patterns/icon-only-ambiguous-action/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/icon-only-ambiguous-action-vs-confirmation-dialog-vs-undo.md", "https://uxpatternsguide.com/agent/comparisons/tooltip-vs-popover-vs-inline-message-vs-icon-only-ambiguous-action.md" ] }, { "id": "in-page-anchor-navigation", "name": "In-page anchor navigation", "aliases": [ "on this page", "jump links", "anchor links", "table of contents", "page contents", "same-page navigation" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Same-page section jump links for long content", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users on a long page need to understand what sections are available and jump to the section they need without moving to another page or interpreting the content as hierarchy.", "useWhen": "A long content page has several meaningful sections users may want to jump to.", "avoidWhen": "The page is short enough that the headings are already visible.", "requiredStates": [ "Default state with a labelled same-page navigation list near or beside long content.", "Active section state that matches the heading currently reached or visible.", "Hash-linked or deep-linked state where the correct section is indicated on load.", "Keyboard activation state where focus lands on or near the destination heading." ], "commonMisuses": [ "Using in-page anchors as a substitute for side navigation across different pages.", "Adding a contents list to a short page where all headings are already visible.", "Letting anchor labels drift from destination headings.", "Changing the visible section without moving keyboard focus or active state." ], "keywords": [ "in-page", "anchor", "navigation", "page", "jump", "links", "table", "contents", "same-page", "wayfinding", "ui-ux", "section", "long", "content", "need", "understand", "what", "sections", "available", "they", "without", "moving", "another", "interpreting", "hierarchy", "provide", "style", "set", "generated", "aligned", "major", "headings", "active", "state", "focus", "behavior", "confirms", "destination", "render", "labelled" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/in-page-anchor-navigation.md", "json": "https://uxpatternsguide.com/agent/patterns/in-page-anchor-navigation.json", "human": "https://uxpatternsguide.com/patterns/in-page-anchor-navigation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/in-page-anchor-navigation-vs-breadcrumbs-vs-side-navigation.md", "https://uxpatternsguide.com/agent/comparisons/process-list-vs-step-navigation-vs-in-page-anchor-navigation.md", "https://uxpatternsguide.com/agent/comparisons/related-links-vs-in-page-anchor-navigation-vs-breadcrumbs.md", "https://uxpatternsguide.com/agent/comparisons/skip-link-vs-in-page-anchor-navigation-vs-back-link.md" ] }, { "id": "inaccessible-custom-select", "name": "Inaccessible custom select", "aliases": [ "broken dropdown", "fake select", "div select", "click-only dropdown" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Broken custom widget anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "A visual dropdown looks like a select control but lacks the semantics, keyboard support, selected state, focus behavior, or form value exposure users expect.", "useWhen": "Use this anti-pattern entry to audit custom dropdowns, styled select replacements, portal menus, command-palette-like selectors, and generated UIs that imitate native controls.", "avoidWhen": "The implementation uses native select with persistent label, selected value, validation, and no auto-submit.", "requiredStates": [ "Closed state with persistent label, current value, and collapsed state.", "Open popup state with reachable options and visible active option.", "Selected option state that remains visible after the popup closes.", "Validation state when no valid option has been selected." ], "commonMisuses": [ "Using divs with click handlers and no role, label, expanded state, or option semantics.", "Updating the visual label but not the form value that submits to the server.", "Closing the menu before keyboard or assistive technology users can inspect options.", "Losing focus when the popup is rendered in a portal or dismissed with Escape." ], "keywords": [ "inaccessible", "custom", "select", "broken", "dropdown", "fake", "div", "click-only", "selection", "choice", "ui-ux", "widget", "anti-pattern", "visual", "looks", "like", "control", "but", "lacks", "semantics", "keyboard", "support", "selected", "state", "focus", "behavior", "form", "value", "exposure", "expect", "treat", "native", "simple", "single-choice", "lists", "implement", "complete", "accessible", "listbox", "combobox" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/inaccessible-custom-select.md", "json": "https://uxpatternsguide.com/agent/patterns/inaccessible-custom-select.json", "human": "https://uxpatternsguide.com/patterns/inaccessible-custom-select/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/inaccessible-custom-select-vs-select-vs-autocomplete-vs-multi-select.md" ] }, { "id": "infinite-scroll-with-no-footer-access", "name": "Infinite scroll with no footer access", "aliases": [ "endless scroll hides footer", "infinite loading trap", "footer unreachable under feed", "scroll trap feed", "auto-load blocks footer", "endless results no end state", "infinite scroll no bottom" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Endless loading footer-access anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Automatic infinite loading can make the page bottom unreachable, preventing users from reaching footer utilities, legal links, support routes, feedback, language controls, or a reliable end state.", "useWhen": "Use this anti-pattern to review feeds, search results, product grids, media streams, activity streams, catalogs, and generated infinite-scroll pages.", "avoidWhen": "The stream is short, finite, and the footer remains reachable without racing the loader.", "requiredStates": [ "Default stream with loaded item count, order label, and visible footer-access plan.", "Auto-load paused after a small number of batches with a Load more control and footer visible.", "Jump to footer or footer utility shortcut state.", "End-of-feed state with footer reachable and no spinner loop." ], "commonMisuses": [ "Putting Privacy, Terms, Accessibility, Contact, Cookies, or language links only in a footer that infinite scroll prevents users from reaching.", "Appending items every time the footer comes into view.", "Using a spinner at the bottom as the only end-of-feed indicator.", "Adding a Back to top control while still making the footer unreachable." ], "keywords": [ "infinite", "scroll", "footer", "access", "endless", "hides", "loading", "trap", "unreachable", "under", "feed", "auto-load", "blocks", "results", "end", "state", "bottom", "search", "browse", "discovery", "ui-ux", "footer-access", "anti-pattern", "automatic", "make", "page", "preventing", "reaching", "utilities", "legal", "links", "support", "routes", "feedback", "language", "controls", "reliable", "flag", "endless-loading", "provide" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/infinite-scroll-with-no-footer-access.md", "json": "https://uxpatternsguide.com/agent/patterns/infinite-scroll-with-no-footer-access.json", "human": "https://uxpatternsguide.com/patterns/infinite-scroll-with-no-footer-access/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/infinite-scroll-with-no-footer-access-vs-feed-vs-pagination-vs-card-list-vs-skip-link.md" ] }, { "id": "infinite-spinner", "name": "Infinite spinner", "aliases": [ "endless loading", "spinner purgatory", "unbounded loading", "permanent busy state" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Unbounded loading anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users are left in an unbounded busy state when a request, save, import, sync, or report generation may never complete and the UI offers no timeout, fallback, cancellation, retry, or failure explanation.", "useWhen": "Use this anti-pattern entry to audit loading, saving, syncing, uploading, report generation, billing retrieval, AI generation, and import flows that can hang.", "avoidWhen": "A short spinner is clearly labeled, tied to a specific action, and guaranteed to transition quickly.", "requiredStates": [ "Initial pending state that names the operation and affected object.", "Extended-wait state after a defined threshold with elapsed context or reason for delay.", "Timed-out or still-working state with retry, cancel, cached fallback, or background continuation.", "Recovered state after the data, save, import, or report resolves." ], "commonMisuses": [ "Animating a full-page spinner forever after a request times out.", "Replacing a failed API response with a loading state because error handling is missing.", "Disabling the only button with a spinner and no explanation, timeout, or alternate action.", "Showing a skeleton and spinner together while neither resolves to content or error." ], "keywords": [ "infinite", "spinner", "endless", "loading", "purgatory", "unbounded", "permanent", "busy", "state", "feedback", "status", "system", "ui-ux", "anti-pattern", "left", "request", "save", "import", "sync", "report", "generation", "may", "never", "complete", "offers", "timeout", "fallback", "cancellation", "retry", "failure", "explanation", "treat", "name", "operation", "bound", "wait", "preserve", "affected", "context", "transition" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/infinite-spinner.md", "json": "https://uxpatternsguide.com/agent/patterns/infinite-spinner.json", "human": "https://uxpatternsguide.com/patterns/infinite-spinner/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/infinite-spinner-vs-loading-skeleton-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/loading-spinner-vs-loading-skeleton-vs-infinite-spinner-vs-error-state.md" ] }, { "id": "inline-edit", "name": "Inline edit", "aliases": [ "edit in place", "in-place edit", "inline editing", "editable value", "editable row", "editable table cell" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "In-place value or row editing", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Small edits become slow or risky when users must open a separate form for one visible value, or when in-place editing hides whether the value is read-only, changed, saved, invalid, or cancelable.", "useWhen": "Users frequently update one visible value or one row property.", "avoidWhen": "The edit affects multiple dependent fields or needs a review step.", "requiredStates": [ "Read state with displayed value and discoverable edit affordance.", "Read-only or unavailable state for values that cannot be edited.", "Edit mode with focused input and adjacent Save and Cancel controls.", "Unchanged draft state where Save is disabled or explained." ], "commonMisuses": [ "Using inline edit for high-impact changes that need a review or confirmation step.", "Making static text secretly editable with no visible affordance.", "Removing Cancel, so users cannot restore the original value.", "Saving every keystroke while presenting the interaction as explicit save/cancel inline edit." ], "keywords": [ "inline", "edit", "place", "in-place", "editing", "editable", "value", "row", "table", "cell", "input", "data", "entry", "ui-ux", "small", "edits", "become", "slow", "risky", "open", "separate", "form", "one", "visible", "hides", "whether", "read-only", "changed", "saved", "invalid", "cancelable", "let", "displayed", "switch", "local", "control", "clear", "trigger", "save", "cancel" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/inline-edit.md", "json": "https://uxpatternsguide.com/agent/patterns/inline-edit.json", "human": "https://uxpatternsguide.com/patterns/inline-edit/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/autosave-form-vs-single-page-form-vs-multi-step-form-vs-inline-edit.md", "https://uxpatternsguide.com/agent/comparisons/data-grid-vs-table-vs-inline-edit-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/draft-state-vs-autosave-form-vs-inline-edit-vs-complete-complex-form.md", "https://uxpatternsguide.com/agent/comparisons/editable-ai-output-vs-inline-edit-vs-prompt-box-vs-streaming-response-vs-citation-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/inline-edit-vs-text-input-vs-single-page-form-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/profile-setup-vs-create-user-profile-vs-onboarding-vs-account-creation.md", "https://uxpatternsguide.com/agent/comparisons/settings-management-vs-complete-complex-form-vs-toggle-switch-vs-progressive-disclosure.md" ] }, { "id": "inline-message", "name": "Inline message", "aliases": [ "inline notification", "contextual message", "section message", "inline alert" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Contextual in-flow feedback", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need status, warning, success, or next-step information that belongs to a specific visible object or section, and a transient or page-level message would disconnect it from the affected context.", "useWhen": "A visible object or section has local status, warning, success, or next-step information.", "avoidWhen": "The message is a one-field validation correction.", "requiredStates": [ "Neutral local context with no message.", "Informational inline message attached to the relevant object or section.", "Warning or error-tone inline message for a local condition that does not replace the whole section.", "Actionable inline message with one local action or disclosure." ], "commonMisuses": [ "Using an inline message for a single field error that should be connected to that input.", "Placing a local warning at the top of the page or inside a global banner.", "Using a toast for context users must reference beside an object.", "Replacing a full error state with a small inline note after content fails to load." ], "keywords": [ "inline", "message", "notification", "contextual", "section", "alert", "feedback", "status", "system", "state", "ui-ux", "in-flow", "need", "warning", "success", "next-step", "information", "belongs", "specific", "visible", "object", "transient", "page-level", "would", "disconnect", "affected", "context", "place", "concise", "persistent", "inside", "relevant", "local", "expose", "right", "urgency", "semantics", "offer", "most", "one" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/inline-message.md", "json": "https://uxpatternsguide.com/agent/patterns/inline-message.json", "human": "https://uxpatternsguide.com/patterns/inline-message/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/alert-vs-inline-message-vs-toast-notification-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/banner-vs-alert-vs-inline-message-vs-toast-notification.md", "https://uxpatternsguide.com/agent/comparisons/disclosure-details-vs-accordion-vs-inline-message-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/inline-message-vs-toast-notification-vs-error-state-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/modal-for-nonblocking-content-vs-modal-dialog-vs-popover-vs-drawer-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/notification-center-vs-toast-notification-vs-alert-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/tag-vs-filter-chips-vs-chip-selection-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/tooltip-vs-popover-vs-inline-message-vs-icon-only-ambiguous-action.md", "https://uxpatternsguide.com/agent/comparisons/tooltip-only-required-information-vs-tooltip-vs-inline-message-vs-disclosure-details-vs-popover.md", "https://uxpatternsguide.com/agent/comparisons/warning-text-vs-alert-vs-inline-message-vs-error-summary.md" ] }, { "id": "inline-validation", "name": "Inline validation", "aliases": [ "field validation", "inline error" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Field-level validation feedback", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to repair one invalid field while the entered value, label, hint, and correction remain in the same local context.", "useWhen": "A single field has a specific correctable problem.", "avoidWhen": "The main recovery task is finding several errors across a submitted page.", "requiredStates": [ "Neutral field with label, hint, and no error.", "Invalid field with preserved user value and adjacent correction text.", "Corrected field with the error removed or replaced by a modest success cue.", "Submitted form where the invalid field remains reachable and editable." ], "commonMisuses": [ "Showing field errors before users have interacted with the control.", "Using vague labels such as Invalid value instead of naming the required correction.", "Clearing or replacing the user's value when validation fails." ], "keywords": [ "inline", "validation", "field", "error", "input", "data", "entry", "ui-ux", "field-level", "feedback", "need", "repair", "one", "invalid", "while", "entered", "value", "label", "hint", "correction", "remain", "same", "local", "context", "render", "field-adjacent", "message", "helps", "keep", "typed", "editable", "describe", "exact", "acceptable", "format", "missing", "requirement", "labeled", "text", "styling" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/inline-validation.md", "json": "https://uxpatternsguide.com/agent/patterns/inline-validation.json", "human": "https://uxpatternsguide.com/patterns/inline-validation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/character-count-vs-textarea-vs-text-input-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/correction-feedback-vs-query-correction-vs-inline-validation-vs-comments-vs-regenerate-retry-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/dependent-fields-vs-select-vs-inline-validation-vs-complete-complex-form.md", "https://uxpatternsguide.com/agent/comparisons/disabled-button-no-explanation-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/disabled-controls-without-recovery-vs-disabled-button-no-explanation-vs-inline-validation-vs-error-summary-vs-permission-recovery-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/email-address-entry-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/inline-message-vs-toast-notification-vs-error-state-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/input-mask-vs-text-input-vs-inline-validation-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/input-prefix-suffix-vs-input-mask-vs-text-input-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/name-entry-vs-text-input-vs-autocomplete-vs-select-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/password-creation-vs-password-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/password-input-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/phone-number-entry-vs-text-input-vs-input-mask-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/textarea-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/validation-that-clears-user-input-vs-inline-validation-vs-error-summary-vs-single-page-form-vs-autosave-recovery-vs-error-state.md" ] }, { "id": "input-mask", "name": "Input mask", "aliases": [ "masked input", "format mask", "formatted input", "grouped character input", "fixed-format field", "masked text field" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Fixed-format text entry control", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users make avoidable format errors when long codes, numbers, or identifiers require grouping, but rigid masks can also reject valid values, break paste and editing, or obscure what will actually be stored.", "useWhen": "The value has a stable character pattern and users benefit from live grouping.", "avoidWhen": "Valid values have many lengths, regions, scripts, or exception formats.", "requiredStates": [ "Empty untouched state with label and visible format example.", "Focused state that reveals grouping or mask affordance without replacing the label.", "Partially entered state with incomplete groups and stable cursor behavior.", "Pasted unformatted value normalized into the mask." ], "commonMisuses": [ "Using a mask because a format exists even though many valid values do not fit it.", "Rejecting pasted values that include spaces, dashes, parentheses, or lowercase characters.", "Letting separators appear in the field but silently storing a different value without user or developer clarity.", "Using underscores or placeholder symbols as the only format guidance." ], "keywords": [ "input", "mask", "masked", "format", "formatted", "grouped", "character", "fixed-format", "field", "text", "data", "entry", "ui-ux", "control", "make", "avoidable", "errors", "long", "codes", "numbers", "identifiers", "require", "grouping", "but", "rigid", "masks", "also", "reject", "valid", "values", "break", "paste", "editing", "obscure", "what", "will", "actually", "stored", "stable", "formats" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/input-mask.md", "json": "https://uxpatternsguide.com/agent/patterns/input-mask.json", "human": "https://uxpatternsguide.com/patterns/input-mask/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/bank-details-vs-text-input-vs-input-mask-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/date-input-vs-input-mask-vs-text-input-vs-select.md", "https://uxpatternsguide.com/agent/comparisons/input-mask-vs-text-input-vs-inline-validation-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/input-prefix-suffix-vs-input-mask-vs-text-input-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/payment-card-entry-vs-bank-details-vs-input-mask-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/phone-number-entry-vs-text-input-vs-input-mask-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/sensitive-data-reveal-vs-password-input-vs-input-mask-vs-typed-confirmation-vs-permission-request.md", "https://uxpatternsguide.com/agent/comparisons/time-picker-vs-text-input-vs-select-vs-input-mask.md" ] }, { "id": "input-prefix-suffix", "name": "Input prefix/suffix", "aliases": [ "input affix", "text field prefix", "text field suffix", "currency prefix", "unit suffix", "affixed input" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Text input with constant visual affix", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can misunderstand whether a value needs a currency symbol, unit, percentage sign, icon meaning, or domain, while systems often need the stored value without that repeated affix.", "useWhen": "The value has a fixed currency, unit, percentage, domain, or commonly understood icon.", "avoidWhen": "The answer is open-ended or may not use the shown unit.", "requiredStates": [ "Empty state with descriptive label and visible prefix or suffix.", "Focused state where the input and affix read as one field group.", "Filled state with the user's clean value and visible affix.", "Duplicate affix typed state normalized without an unnecessary error." ], "commonMisuses": [ "Relying on a visually hidden or decorative affix as the only way users know the unit.", "Rejecting values that include the same prefix or suffix users saw next to the field.", "Using a prefix or suffix for an open-ended answer that may not use that unit.", "Putting long explanatory copy in the affix instead of the hint." ], "keywords": [ "input", "prefix", "suffix", "affix", "text", "field", "currency", "unit", "affixed", "data", "entry", "ui-ux", "constant", "visual", "misunderstand", "whether", "value", "needs", "symbol", "percentage", "sign", "icon", "meaning", "domain", "while", "systems", "often", "need", "stored", "without", "repeated", "show", "fixed", "outside", "editable", "describe", "its", "label", "hint", "normalize" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/input-prefix-suffix.md", "json": "https://uxpatternsguide.com/agent/patterns/input-prefix-suffix.json", "human": "https://uxpatternsguide.com/patterns/input-prefix-suffix/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/input-prefix-suffix-vs-input-mask-vs-text-input-vs-inline-validation.md" ] }, { "id": "invite-user", "name": "Invite user", "aliases": [ "invite member", "invite teammate", "send invitation", "user invitation", "member invitation", "workspace invitation", "organization invitation", "invite collaborator", "pending invitation", "resend invitation" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Invitation lifecycle for granting another person access", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Inviting users changes access, billing, data exposure, and collaboration context, but products often hide who will receive the invite, what role they get, where they can go, whether approval is required, and how pending invitations can be tracked or revoked.", "useWhen": "An authorized user needs to bring another person into a workspace, organization, project, channel, repository, team, tenant, or shared object.", "avoidWhen": "The current user is creating their own account or profile.", "requiredStates": [ "Recipient entry or directory lookup state", "Role and access scope selection state", "Guest, billing, external, or elevated-access warning state", "Optional invite message state" ], "commonMisuses": [ "Treating invitation sent as if the user is already a member.", "Hiding role, scope, guest, billing, external, or admin implications until after send.", "Sending duplicate invites instead of showing pending status.", "Letting users invite people to roles they cannot grant." ], "keywords": [ "invite", "member", "teammate", "send", "invitation", "workspace", "organization", "collaborator", "pending", "resend", "collaboration", "social", "interaction", "ui-ux", "lifecycle", "granting", "another", "person", "access", "inviting", "changes", "billing", "data", "exposure", "context", "but", "products", "often", "hide", "who", "will", "receive", "what", "role", "they", "get", "where", "whether", "approval", "required" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/invite-user.md", "json": "https://uxpatternsguide.com/agent/patterns/invite-user.json", "human": "https://uxpatternsguide.com/patterns/invite-user/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/approval-workflow-vs-review-before-submit-vs-permission-recovery-vs-invite-user.md", "https://uxpatternsguide.com/agent/comparisons/invite-user-vs-account-creation-vs-object-picker-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md" ] }, { "id": "kanban-board", "name": "Kanban board", "aliases": [ "workflow board", "task board", "status board", "card board", "project board", "agile board", "pull board", "work-in-progress board", "WIP board" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Workflow-state board for cards moving through columns", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Teams need to coordinate work as it flows through stages, but ordinary lists, tables, and calendars hide WIP pressure, blocked work, stale cards, and the status-change meaning of moving an item.", "useWhen": "Work progresses through visible stages and the team uses the board to decide what to pull next.", "avoidWhen": "Columns are arbitrary categories with no workflow meaning.", "requiredStates": [ "Default board state with columns, card counts, WIP limits, visible filters, selected board, and at least one card per active workflow stage.", "Empty column, empty board, loading, failed-load, offline, permission-limited, filtered, and hidden-card-count states.", "Card detail, selected card, focused card, editing card, and card action menu states.", "Drag preview, keyboard move, move pending, move success, move failed, invalid destination, and undo states." ], "commonMisuses": [ "Using Kanban columns as decorative categories rather than workflow states.", "Allowing visible card movement without updating the underlying status field.", "Hiding WIP limits, hidden filtered cards, or collapsed swimlane counts.", "Making drag and drop the only way to move work." ], "keywords": [ "kanban", "board", "workflow", "task", "status", "card", "project", "agile", "pull", "work-in-progress", "wip", "data", "display", "exploration", "ui-ux", "workflow-state", "cards", "moving", "through", "columns", "teams", "need", "coordinate", "work", "flows", "stages", "but", "ordinary", "lists", "tables", "calendars", "hide", "pressure", "blocked", "stale", "status-change", "meaning", "item", "provide", "limits" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/kanban-board.md", "json": "https://uxpatternsguide.com/agent/patterns/kanban-board.json", "human": "https://uxpatternsguide.com/patterns/kanban-board/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-vs-touch-gesture-vs-long-press-vs-drag-and-drop-upload-vs-kanban-board-vs-sort-controls.md", "https://uxpatternsguide.com/agent/comparisons/kanban-board-vs-table-vs-calendar-view-vs-list-view.md" ] }, { "id": "keyboard-shortcut", "name": "Keyboard shortcut", "aliases": [ "hotkey", "key command", "keybinding", "keyboard accelerator", "shortcut key", "command shortcut" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Direct key combination that activates a known command, focus target, or mode", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Keyboard shortcuts can make expert workflows fast, but hidden or conflicting key commands can steal text input, override browser or assistive-technology behavior, fire accidental character-key actions, and make important commands undiscoverable to mouse, touch, switch, and screen reader users.", "useWhen": "Users repeat a known command often enough that memorized keyboard acceleration saves meaningful time.", "avoidWhen": "The command is rare, novice-oriented, high-risk, or hard to explain before execution.", "requiredStates": [ "Visible command with shortcut hint.", "Shortcut help or command list state showing command name, key chord, platform variant, and scope.", "Global shortcut active state.", "Focused-component shortcut active state." ], "commonMisuses": [ "Making a shortcut the only path to a primary command.", "Binding single-letter global shortcuts that fire during typing, dictation, or screen reader use.", "Showing shortcut hints that do not match the current platform or remapped key.", "Letting disabled commands still run from the keyboard handler." ], "keywords": [ "keyboard", "shortcut", "hotkey", "key", "command", "keybinding", "accelerator", "cross-device", "physical", "interaction", "ui-ux", "direct", "combination", "activates", "known", "focus", "target", "mode", "shortcuts", "make", "expert", "workflows", "fast", "but", "hidden", "conflicting", "commands", "steal", "text", "input", "override", "browser", "assistive-technology", "behavior", "fire", "accidental", "character-key", "actions", "important", "undiscoverable" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/keyboard-shortcut.md", "json": "https://uxpatternsguide.com/agent/patterns/keyboard-shortcut.json", "human": "https://uxpatternsguide.com/patterns/keyboard-shortcut/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/focus-traversal-vs-keyboard-shortcut-vs-skip-link-vs-modal-dialog-vs-toolbar-vs-data-grid.md", "https://uxpatternsguide.com/agent/comparisons/keyboard-shortcut-vs-command-palette-vs-menu-menubar-vs-toolbar-vs-undo-vs-redo.md", "https://uxpatternsguide.com/agent/comparisons/voice-command-vs-keyboard-shortcut-vs-command-palette-vs-prompt-box-vs-text-input-vs-touch-gesture.md" ] }, { "id": "language-selector", "name": "Language selector", "aliases": [ "language switcher", "language picker", "locale selector", "language menu", "translate selector", "site language switch", "interface language selector", "content language selector", "multilingual switcher", "language preference control" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "Visible control for switching current content or product language among available equivalent translations", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Multilingual products need to let people read and act in a language they understand, but automatic language detection, hidden settings, flag-only controls, incomplete translations, and context-losing redirects can leave users trapped in the wrong language or unsure what will change.", "useWhen": "The product or site offers current content, task flows, or interface text in more than one language.", "avoidWhen": "Only a few unrelated documents are translated and the current page has no equivalent alternative.", "requiredStates": [ "Default detected-language state with visible current language and manual override.", "Two-language switch state for exactly two equivalent translations.", "Three-or-more-language menu or list state with native labels and current selection.", "Selected-language state that updates page language, content language, and selector label." ], "commonMisuses": [ "Using country flags as the only language labels.", "Relying only on automatic language negotiation with no visible manual override.", "Redirecting language switches to a homepage and losing current context.", "Listing languages that do not have equivalent content for the current page." ], "keywords": [ "language", "selector", "switcher", "picker", "locale", "menu", "translate", "site", "switch", "interface", "content", "multilingual", "preference", "control", "personalization", "ui-ux", "visible", "switching", "current", "product", "among", "available", "equivalent", "translations", "products", "need", "let", "people", "read", "act", "they", "understand", "but", "automatic", "detection", "hidden", "settings", "flag-only", "controls", "incomplete" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/language-selector.md", "json": "https://uxpatternsguide.com/agent/patterns/language-selector.json", "human": "https://uxpatternsguide.com/patterns/language-selector/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/language-selector-vs-settings-management-vs-preference-center-vs-adaptive-defaults.md" ] }, { "id": "legal-acceptance", "name": "Legal acceptance", "aliases": [ "terms acceptance", "accept terms", "terms and conditions checkbox", "terms of service agreement", "clickwrap agreement", "conditions of sale", "service agreement acceptance", "terms of use acceptance", "policy acknowledgement", "legal acknowledgement" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Explicit agreement gate for terms, conditions, contracts, policies, legal disclosures, or updated service rules before access or transaction commitment", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Legal agreements become weak or hostile when terms are hidden, preaccepted, bundled with unrelated consent, shown after commitment, impossible to review on small screens, or recorded without document version and timestamp evidence.", "useWhen": "A user must accept terms of service, conditions of sale, policy documents, service agreements, acceptable-use rules, or legal disclosures before access or transaction completion.", "avoidWhen": "The choice is optional data processing, marketing, research, or AI training consent; use consent prompt.", "requiredStates": [ "Initial unchecked required agreement state.", "Terms link or embedded document state with document title, version, owner, and effective date.", "Accept enabled state after explicit agreement.", "Missing acceptance validation state." ], "commonMisuses": [ "Relying on continued browsing, payment, account creation, or a footer link as the only acceptance signal.", "Prechecking a required terms checkbox.", "Bundling legal acceptance with optional marketing, tracking, research, or partner-sharing consent.", "Showing legal terms only after the user commits payment, signup, or access." ], "keywords": [ "legal", "acceptance", "terms", "accept", "conditions", "checkbox", "service", "agreement", "clickwrap", "sale", "policy", "acknowledgement", "trust", "safety", "privacy", "ui-ux", "explicit", "gate", "contracts", "policies", "disclosures", "updated", "rules", "before", "access", "transaction", "commitment", "agreements", "become", "weak", "hostile", "hidden", "preaccepted", "bundled", "unrelated", "consent", "shown", "after", "impossible", "review" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/legal-acceptance.md", "json": "https://uxpatternsguide.com/agent/patterns/legal-acceptance.json", "human": "https://uxpatternsguide.com/patterns/legal-acceptance/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/cookie-consent-vs-cookie-banner-vs-consent-prompt-vs-preference-center-vs-privacy-settings-vs-legal-acceptance.md", "https://uxpatternsguide.com/agent/comparisons/dark-pattern-consent-vs-consent-prompt-vs-cookie-consent-vs-cookie-banner-vs-legal-acceptance-vs-preference-center.md", "https://uxpatternsguide.com/agent/comparisons/legal-acceptance-vs-consent-prompt-vs-review-before-submit-vs-checkbox-group-vs-confirmation-dialog-vs-typed-confirmation-vs-age-gate.md" ] }, { "id": "list-view", "name": "List view", "aliases": [ "object list", "record list", "row list", "results list", "summary list", "item list", "resource list" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Vertical object-summary browsing surface", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to scan, choose, open, and act on a set of objects, but tables overemphasize columns, card layouts waste space or depend on imagery, and dense row actions can make each item hard to identify or operate safely.", "useWhen": "Users need to scan and act on a collection of objects using compact summaries.", "avoidWhen": "Users need to compare many records across shared attributes.", "requiredStates": [ "Default list state with label or heading, row count or context, visible row summaries, and primary row identity.", "Focused row or focused row action state with visible focus and accessible row identity.", "Selected row, multi-selected row, bulk-selection count, and selected-away state when selection is supported.", "Active row state when a row controls a details panel, preview panel, route, or selected object context." ], "commonMisuses": [ "Using list view as a table without column headers or column-state feedback.", "Putting too many independent controls in every row until the list becomes a keyboard trap.", "Making the entire row, title link, checkbox, and trailing icon all trigger different undocumented actions.", "Using color alone to show unread, selected, active, pinned, or failed rows." ], "keywords": [ "list", "view", "object", "record", "row", "results", "summary", "item", "resource", "data", "display", "exploration", "ui-ux", "vertical", "object-summary", "browsing", "surface", "need", "scan", "choose", "open", "act", "set", "objects", "but", "tables", "overemphasize", "columns", "card", "layouts", "waste", "space", "depend", "imagery", "dense", "actions", "make", "each", "hard", "identify" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/list-view.md", "json": "https://uxpatternsguide.com/agent/patterns/list-view.json", "human": "https://uxpatternsguide.com/patterns/list-view/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/calendar-view-vs-date-picker-vs-timeline-vs-list-view.md", "https://uxpatternsguide.com/agent/comparisons/card-list-vs-list-view-vs-collection-vs-browse-by-category.md", "https://uxpatternsguide.com/agent/comparisons/collection-vs-list-view-vs-browse-by-category-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/kanban-board-vs-table-vs-calendar-view-vs-list-view.md", "https://uxpatternsguide.com/agent/comparisons/list-view-vs-table-vs-data-grid-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/map-view-vs-list-view-vs-calendar-view-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/master-detail-vs-details-panel-vs-list-view-vs-window-splitter.md", "https://uxpatternsguide.com/agent/comparisons/swipe-action-vs-touch-gesture-vs-list-view-vs-action-menu-vs-undo-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md" ] }, { "id": "listbox", "name": "Listbox", "aliases": [ "selection list", "option list", "standalone listbox", "single-select listbox", "multi-select listbox" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Visible selectable option list", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to choose from a visible set of static options, but collapsed selects hide comparison and generic clickable lists do not expose focus, option count, or selected state.", "useWhen": "Users choose one option from a visible static list.", "avoidWhen": "A native select, radio group, or checkbox group can satisfy the interaction.", "requiredStates": [ "Empty or initial state with visible label and at least one option.", "Focused listbox state.", "Active option state distinct from selected state.", "Selected option state." ], "commonMisuses": [ "Using listbox when native select, radio buttons, or checkboxes would do the job with less risk.", "Putting buttons, links, checkboxes, toggles, menus, or form fields inside options.", "Treating focus and selection as identical without deciding whether selection follows focus.", "Using long repeated option labels that hide the distinguishing words." ], "keywords": [ "listbox", "selection", "list", "option", "standalone", "single-select", "multi-select", "choice", "ui-ux", "visible", "selectable", "need", "choose", "set", "static", "options", "but", "collapsed", "selects", "hide", "comparison", "generic", "clickable", "lists", "expose", "focus", "count", "selected", "state", "provide", "labelled", "roles", "managed", "active", "keyboard", "navigation", "optional", "typeahead", "clear", "policy" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/listbox.md", "json": "https://uxpatternsguide.com/agent/patterns/listbox.json", "human": "https://uxpatternsguide.com/patterns/listbox/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/listbox-vs-select-vs-combobox-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/transfer-list-vs-multi-select-vs-listbox-vs-checkbox-group.md", "https://uxpatternsguide.com/agent/comparisons/tree-selection-vs-listbox-vs-checkbox-group-vs-transfer-list.md" ] }, { "id": "live-cursors", "name": "Live cursors", "aliases": [ "multiplayer cursors", "collaborative cursors", "remote cursors", "live pointers", "pointer presence", "selection presence", "collaborator pointers", "cursor awareness", "cursor chat" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Ephemeral collaborator pointer and selection awareness with identity, color, recency, privacy, visibility controls, and stale-state handling", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Real-time collaboration becomes disorienting when people cannot tell where others are pointing, or overwhelming when remote cursors are unlabeled, stale, noisy, privacy-leaking, or mistaken for durable comments and audit evidence.", "useWhen": "Collaborators need real-time spatial awareness in a shared visual or text surface.", "avoidWhen": "The collaboration is asynchronous and durable comments or annotations would be more useful.", "requiredStates": [ "Local pointer visible, local pointer hidden, remote pointer visible, remote pointer hidden, and reduced-cursor mode.", "Remote text caret, remote selection range, selected object, hover target, viewport-follow, and presentation pointer states.", "Cursor label, avatar, color, name, role, anonymous user, external guest, and duplicate-name states.", "Fresh, delayed, stale, disconnected, reconnecting, permission-hidden, and out-of-viewport cursor states." ], "commonMisuses": [ "Using live cursors as durable comments, decision records, or audit history.", "Leaving stale cursor arrows frozen after users disconnect.", "Rendering cursor labels that cover the object users are trying to edit.", "Relying only on color to identify collaborators." ], "keywords": [ "live", "cursors", "multiplayer", "collaborative", "remote", "pointers", "pointer", "presence", "selection", "collaborator", "cursor", "awareness", "chat", "collaboration", "social", "interaction", "ui-ux", "ephemeral", "identity", "color", "recency", "privacy", "visibility", "controls", "stale-state", "handling", "real-time", "becomes", "disorienting", "people", "cannot", "tell", "where", "others", "pointing", "overwhelming", "unlabeled", "stale", "noisy", "privacy-leaking" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/live-cursors.md", "json": "https://uxpatternsguide.com/agent/patterns/live-cursors.json", "human": "https://uxpatternsguide.com/patterns/live-cursors/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md" ] }, { "id": "loading-skeleton", "name": "Loading skeleton", "aliases": [ "skeleton screen", "content placeholder", "skeleton loader" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Bounded content loading placeholder", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to know that predictable content is still loading while the layout stays stable and placeholders are not mistaken for real, interactive content.", "useWhen": "The content shape is predictable.", "avoidWhen": "The system cannot predict the content layout.", "requiredStates": [ "Initial skeleton placeholder state with region marked busy.", "Loaded state where real content replaces placeholders without layout jump.", "Resolved empty state after successful loading returns no content.", "Failure or timeout state after loading cannot complete." ], "commonMisuses": [ "Showing skeletons forever.", "Using skeletons for unknown layout shapes.", "Making placeholders look like tappable content.", "Showing skeleton after a no-results or empty response is already known." ], "keywords": [ "loading", "skeleton", "screen", "content", "placeholder", "loader", "feedback", "status", "system", "state", "ui-ux", "bounded", "need", "know", "predictable", "still", "while", "layout", "stays", "stable", "placeholders", "mistaken", "real", "interactive", "reserve", "approximate", "final", "structure", "neutral", "non-interactive", "mark", "region", "busy", "replace", "loaded", "empty", "error", "path", "render", "blocks" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/loading-skeleton.md", "json": "https://uxpatternsguide.com/agent/patterns/loading-skeleton.json", "human": "https://uxpatternsguide.com/patterns/loading-skeleton/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/infinite-spinner-vs-loading-skeleton-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/loading-skeleton-vs-empty-state-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/loading-spinner-vs-loading-skeleton-vs-infinite-spinner-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/progress-bar-vs-loading-spinner-vs-loading-skeleton-vs-step-navigation.md" ] }, { "id": "loading-spinner", "name": "Loading spinner", "aliases": [ "spinner", "activity indicator", "loading indicator", "indeterminate loader", "busy spinner", "button spinner" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Bounded indeterminate wait indicator for a named action or region", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need immediate feedback that a specific action or region is processing, but an unlabeled or unbounded spinner can hide scope, progress, failure, and recovery.", "useWhen": "A short action, request, save, submit, refresh, sync, or fetch is actively processing and progress cannot be meaningfully measured.", "avoidWhen": "The content layout is predictable and a skeleton would better preserve structure.", "requiredStates": [ "Idle state with no spinner and the action or region ready.", "Inline processing state for a button or small local action.", "Region loading state with aria-busy or equivalent status on the affected component.", "Overlay loading state when the whole component or page must temporarily block interaction." ], "commonMisuses": [ "Showing an unlabeled spinner on a blank page.", "Using a spinner forever instead of timeout, retry, or error recovery.", "Blocking an entire page for a local row or button operation.", "Leaving the original action enabled so users can submit twice." ], "keywords": [ "loading", "spinner", "activity", "indicator", "indeterminate", "loader", "busy", "button", "feedback", "status", "system", "state", "ui-ux", "bounded", "wait", "named", "action", "region", "need", "immediate", "specific", "processing", "but", "unlabeled", "unbounded", "hide", "scope", "progress", "failure", "recovery", "show", "labeled", "scoped", "while", "operation", "genuinely", "flight", "prevent", "duplicate", "actions" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/loading-spinner.md", "json": "https://uxpatternsguide.com/agent/patterns/loading-spinner.json", "human": "https://uxpatternsguide.com/patterns/loading-spinner/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/loading-spinner-vs-loading-skeleton-vs-infinite-spinner-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/offline-state-vs-error-state-vs-loading-spinner-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/progress-bar-vs-loading-spinner-vs-loading-skeleton-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/pull-to-refresh-vs-touch-gesture-vs-feed-vs-offline-state-vs-loading-spinner-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/retry-vs-error-state-vs-loading-spinner-vs-offline-state.md", "https://uxpatternsguide.com/agent/comparisons/streaming-response-vs-chat-interface-vs-progress-bar-vs-loading-spinner-vs-feed.md" ] }, { "id": "location-permission-flow", "name": "Location permission flow", "aliases": [ "geolocation permission", "current location access", "allow location", "location access flow", "device location prompt", "location sharing prompt", "precise location prompt", "use my location" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Permission-gated current-location request and recovery flow", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Current-location access can remove manual entry and improve nearby, routing, check-in, safety, and device-context tasks, but it is highly sensitive, permission-gated, precision-dependent, failure-prone, and easy to misuse when prompt timing, fallback, stale coordinates, background access, and retention are unclear.", "useWhen": "Current device coordinates materially improve a task such as nearby search, route start, check-in, delivery estimate, safety sharing, field work, or support diagnostics.", "avoidWhen": "Typed address, postal code, saved place, or map selection is simpler and less invasive.", "requiredStates": [ "Unsupported browser, blocked iframe, missing permissions policy, insecure context, or disabled location services state.", "Pre-permission rationale state with task purpose, precision need, scope, retention, and fallback.", "Prompt-ready state triggered by a deliberate user action.", "Allow once or one-time current-position state." ], "commonMisuses": [ "Prompting for location before users choose a task that needs it.", "Requesting precise or background location when approximate or while-using access is enough.", "Treating permission denial as a dead end instead of offering address entry, saved place, retry, or settings recovery.", "Showing stale cached coordinates as current location." ], "keywords": [ "location", "permission", "flow", "geolocation", "current", "access", "allow", "device", "prompt", "sharing", "precise", "cross-device", "physical", "interaction", "ui-ux", "permission-gated", "current-location", "request", "recovery", "remove", "manual", "entry", "improve", "nearby", "routing", "check-in", "safety", "device-context", "tasks", "but", "highly", "sensitive", "precision-dependent", "failure-prone", "easy", "misuse", "timing", "fallback", "stale", "coordinates" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/location-permission-flow.md", "json": "https://uxpatternsguide.com/agent/patterns/location-permission-flow.json", "human": "https://uxpatternsguide.com/patterns/location-permission-flow/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/location-permission-flow-vs-permission-request-vs-map-view-vs-address-entry-vs-privacy-settings-vs-offline-state.md", "https://uxpatternsguide.com/agent/comparisons/permission-prompt-with-no-context-vs-permission-request-vs-location-permission-flow-vs-consent-prompt-vs-permission-denied-state-vs-notification-preferences.md" ] }, { "id": "login", "name": "Login", "aliases": [ "log in", "login attempt", "credential verification", "failed login", "login throttling", "account lockout", "authentication attempt", "login result", "login retry", "authenticated session creation" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Credential-verification attempt lifecycle and login outcome handling", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Login attempts must communicate security-sensitive outcomes without confirming account existence, encouraging brute-force attempts, confusing legitimate users, or turning lockout controls into denial-of-service problems.", "useWhen": "Users have submitted credentials or authenticator output and need a safe verification result.", "avoidWhen": "The problem is choosing an authentication method or explaining why authentication is required before credentials are submitted.", "requiredStates": [ "Ready-to-submit login state with chosen identifier and authenticator route.", "Submitting or verifying state that prevents duplicate login attempts without hiding progress.", "Generic failed-login state with retry and recovery.", "Remaining-attempts warning state when policy allows visible counters." ], "commonMisuses": [ "Returning different messages for unknown account, wrong password, disabled account, or locked account.", "Silently disabling the login button after failure with no wait time or recovery path.", "Showing a client-only attempt counter that disagrees with server policy.", "Using CAPTCHA as the only route after failed attempts." ], "keywords": [ "login", "log", "attempt", "credential", "verification", "failed", "throttling", "account", "lockout", "authentication", "result", "retry", "authenticated", "session", "creation", "task", "workflow", "patterns", "ui-ux", "credential-verification", "lifecycle", "outcome", "handling", "attempts", "communicate", "security-sensitive", "outcomes", "without", "confirming", "existence", "encouraging", "brute-force", "confusing", "legitimate", "turning", "controls", "denial-of-service", "problems", "model", "safe" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/login.md", "json": "https://uxpatternsguide.com/agent/patterns/login.json", "human": "https://uxpatternsguide.com/patterns/login/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/login-vs-sign-in-vs-password-input-vs-session-timeout-warning.md", "https://uxpatternsguide.com/agent/comparisons/password-reset-vs-login-vs-password-creation-vs-email-address-entry.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-vs-session-timeout-warning-vs-sign-in-vs-permission-denied-state-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/two-factor-authentication-vs-sign-in-vs-login-vs-password-reset.md" ] }, { "id": "long-press", "name": "Long press", "aliases": [ "press and hold", "touch and hold", "hold gesture", "long tap", "long-press gesture", "secondary touch action" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Sustained pointer contact that reveals secondary actions, selection, preview, or drag pickup", "maturity": "standard", "platforms": [ "mobile", "web", "desktop", "spatial" ], "problem": "Long press is useful for secondary touch actions, but sustained hidden contact is hard to discover, easy to confuse with tap, scroll, swipe, drag, context menus, and tooltips, and inaccessible when it replaces visible or keyboard-reachable controls.", "useWhen": "A touch-first interface needs an optional shortcut to secondary item actions, selection mode, preview, or drag pickup.", "avoidWhen": "The action is primary, required, urgent, destructive, security-sensitive, consent-related, payment-related, or account-changing.", "requiredStates": [ "Idle target state with visible identity and alternate action path.", "Gesture hint state that teaches touch and hold without relying on hover.", "Press down state that identifies the target before threshold.", "Hold progress state showing duration or affordance before action fires." ], "commonMisuses": [ "Hiding required or primary actions behind undiscoverable long press.", "Using long press as a tooltip that contains required or interactive content.", "Committing destructive work as soon as the hold threshold is reached.", "Failing to cancel when users release early or start scrolling." ], "keywords": [ "long", "press", "hold", "touch", "gesture", "tap", "long-press", "secondary", "action", "cross-device", "physical", "interaction", "ui-ux", "sustained", "pointer", "contact", "reveals", "actions", "selection", "preview", "drag", "pickup", "useful", "but", "hidden", "hard", "discover", "easy", "confuse", "scroll", "swipe", "context", "menus", "tooltips", "inaccessible", "replaces", "visible", "keyboard-reachable", "controls", "design" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/long-press.md", "json": "https://uxpatternsguide.com/agent/patterns/long-press.json", "human": "https://uxpatternsguide.com/patterns/long-press/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-vs-touch-gesture-vs-long-press-vs-drag-and-drop-upload-vs-kanban-board-vs-sort-controls.md", "https://uxpatternsguide.com/agent/comparisons/long-press-vs-touch-gesture-vs-context-menu-vs-tooltip-vs-popover-vs-action-menu.md" ] }, { "id": "map-view", "name": "Map view", "aliases": [ "interactive map", "location map", "geographic map", "spatial view", "map browser", "places map", "asset map", "store locator map", "incident map" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Spatial viewport for location-based objects, layers, and routes", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to make decisions from geographic position, distance, route, density, region, or coverage, but list, table, and calendar surfaces flatten location into text and hide spatial relationships.", "useWhen": "Users choose or inspect objects by where they are, how near they are, or what area they fall inside.", "avoidWhen": "Location is only a label or decorative backdrop.", "requiredStates": [ "Default map state with visible viewport, zoom level or distance context, markers, layer state, result count, and synchronized fallback list.", "Marker selected, marker focused, popup open, popup dismissed, side detail open, and selected item in fallback list.", "Clustered markers, expanded cluster, dense overlap, empty region, filtered region, hidden layer, and hidden-result count states.", "Panning, zooming, search-this-area, fit-to-results, route preview, radius selection, and layer toggle states." ], "commonMisuses": [ "Using a map as decoration when the positions do not affect the task.", "Showing markers without labels, selected state, popup detail, count, or fallback list.", "Letting dense markers overlap without clustering or zoom guidance.", "Treating geolocation denial as a dead end." ], "keywords": [ "map", "view", "interactive", "location", "geographic", "spatial", "browser", "places", "asset", "store", "locator", "incident", "data", "display", "exploration", "ui-ux", "viewport", "location-based", "objects", "layers", "routes", "need", "make", "decisions", "position", "distance", "route", "density", "region", "coverage", "but", "list", "table", "calendar", "surfaces", "flatten", "text", "hide", "relationships", "provide" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/map-view.md", "json": "https://uxpatternsguide.com/agent/patterns/map-view.json", "human": "https://uxpatternsguide.com/patterns/map-view/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/data-visualization-vs-table-vs-map-view-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/location-permission-flow-vs-permission-request-vs-map-view-vs-address-entry-vs-privacy-settings-vs-offline-state.md", "https://uxpatternsguide.com/agent/comparisons/map-view-vs-list-view-vs-calendar-view-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/touch-gesture-vs-carousel-vs-map-view-vs-bottom-sheet-vs-drag-and-drop-upload-vs-data-visualization.md" ] }, { "id": "master-detail", "name": "Master-detail", "aliases": [ "list-detail", "list/details", "master detail", "split master detail", "adaptive list detail", "two-pane detail", "source detail layout", "inbox detail layout", "split view detail", "primary-detail layout" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Adaptive source list and detail layout with coordinated selection and navigation state", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to explore a set of items and inspect or work with one item's full detail repeatedly, but separate pages make context switching slow, a small details panel cannot hold the full destination, and a fixed layout can fail across phones, tablets, foldables, and desktop windows.", "useWhen": "Users repeatedly choose items from a collection and work with a substantial detail destination.", "avoidWhen": "The detail is only a short metadata summary.", "requiredStates": [ "Wide default state with master list, selected item, and detail pane visible together.", "Wide empty-detail state with a prompt when no item is selected.", "Stacked list state where only the master list is visible.", "Stacked detail state with selected-item heading and Back to list control." ], "commonMisuses": [ "Calling a small metadata inspector master-detail when the detail cannot act as a destination.", "Forgetting the stacked mobile return path from detail back to the master list.", "Showing stale detail after selection, filter, delete, permission, or refresh changes.", "Resetting selection, filters, draft edits, or scroll position when the viewport crosses a breakpoint." ], "keywords": [ "master-detail", "list-detail", "list", "details", "master", "detail", "split", "adaptive", "two-pane", "source", "layout", "inbox", "view", "primary-detail", "data", "display", "exploration", "ui-ux", "coordinated", "selection", "navigation", "state", "need", "explore", "set", "items", "inspect", "work", "one", "item", "full", "repeatedly", "but", "separate", "pages", "make", "context", "switching", "slow", "small" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/master-detail.md", "json": "https://uxpatternsguide.com/agent/patterns/master-detail.json", "human": "https://uxpatternsguide.com/patterns/master-detail/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/master-detail-vs-details-panel-vs-list-view-vs-window-splitter.md" ] }, { "id": "mega-menu", "name": "Mega menu", "aliases": [ "megamenu", "mega navigation", "large dropdown navigation", "flyout navigation panel", "header mega panel" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Large grouped disclosure panel under top-level navigation", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users on large sites or products need to understand and choose among many related destinations without drilling through multiple pages or being overwhelmed by an unstructured site map.", "useWhen": "A top-level navigation section has many related child destinations.", "avoidWhen": "The section has only a few child links.", "requiredStates": [ "Closed state with a clear top-level trigger and visible submenu indicator.", "Open panel state with grouped columns and visible focusable links.", "Active destination state after a link is selected and the panel closes.", "Keyboard dismissal state where Escape closes the panel and returns focus to the trigger." ], "commonMisuses": [ "Using a mega menu as a complete site map.", "Opening a huge panel for a shallow section.", "Mixing utilities, account actions, and unrelated marketing links with navigation destinations.", "Relying on hover alone for access." ], "keywords": [ "mega", "menu", "megamenu", "navigation", "large", "dropdown", "flyout", "panel", "header", "wayfinding", "ui-ux", "grouped", "disclosure", "under", "top-level", "sites", "products", "need", "understand", "choose", "among", "many", "related", "destinations", "without", "drilling", "through", "multiple", "pages", "being", "overwhelmed", "unstructured", "site", "map", "provide", "scoped", "trigger", "section", "enough", "child" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/mega-menu.md", "json": "https://uxpatternsguide.com/agent/patterns/mega-menu.json", "human": "https://uxpatternsguide.com/patterns/mega-menu/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/mega-menu-vs-global-navigation-vs-navigation-drawer.md", "https://uxpatternsguide.com/agent/comparisons/menu-menubar-vs-menu-button-vs-mega-menu-vs-global-navigation.md" ] }, { "id": "mentions", "name": "Mentions", "aliases": [ "@mentions", "user mentions", "team mentions", "channel mentions", "inline mentions", "recipient tagging", "attention tag", "notify mention", "mention autocomplete" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Inline recipient reference with autocomplete, stable recipient identity, notification routing, access checks, and broad-audience safeguards", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Collaboration breaks when inline @ references are treated as decorative text, notify the wrong audience, ignore access boundaries, fail to disambiguate similar names, or send recipients to a generic page instead of the exact context.", "useWhen": "Composed content needs to target people or groups inline.", "avoidWhen": "The user is selecting a structured owner, assignee, approver, or recipient field outside written content.", "requiredStates": [ "Empty composer, @ trigger, loading suggestions, no results, and filtered suggestions.", "Highlighted suggestion, keyboard-selected suggestion, mouse or touch-selected suggestion, and inserted mention token.", "Individual, team, channel, user group, role, bot, and broad-audience mention states where the product supports them.", "Ambiguous display name, duplicate handle, unavailable recipient, deleted user, deactivated account, and external guest states." ], "commonMisuses": [ "Parsing @words after submit without requiring the sender to choose a real recipient.", "Treating a mention suggestion list as a generic people picker and ignoring caret position, inline serialization, and notification side effects.", "Allowing broad mentions with no audience size, policy, quiet-hours, or confirmation warning.", "Mentioning people who cannot access the object and giving neither sender nor recipient a recoverable path." ], "keywords": [ "mentions", "team", "channel", "inline", "recipient", "tagging", "attention", "tag", "notify", "mention", "autocomplete", "collaboration", "social", "interaction", "ui-ux", "reference", "stable", "identity", "notification", "routing", "access", "checks", "broad-audience", "safeguards", "breaks", "references", "treated", "decorative", "text", "wrong", "audience", "ignore", "boundaries", "fail", "disambiguate", "similar", "names", "send", "recipients", "generic" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/mentions.md", "json": "https://uxpatternsguide.com/agent/patterns/mentions.json", "human": "https://uxpatternsguide.com/patterns/mentions/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/follow-subscribe-vs-notification-center-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/notification-preferences-vs-settings-management-vs-notification-center-vs-follow-subscribe.md", "https://uxpatternsguide.com/agent/comparisons/presence-vs-mentions-vs-notification-center-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/reactions-vs-comments-vs-mentions-vs-activity-feed.md" ] }, { "id": "menu-menubar", "name": "Menu / menubar", "aliases": [ "application menu", "command menu", "menu bar", "desktop-style menu", "pull-down menu", "submenu" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Persistent composite command bar with menus and submenus", "maturity": "standard", "platforms": [ "web", "desktop" ], "problem": "Complex applications may have many stable commands, but scattering those commands across buttons, popovers, and hidden shortcuts makes discovery, grouping, disabled state, and keyboard execution unpredictable.", "useWhen": "A complex application or editor has many stable commands organized into known groups.", "avoidWhen": "The interface is ordinary site or product navigation.", "requiredStates": [ "Persistent closed menubar state with labelled top-level command groups.", "Focused top-level menuitem state.", "Open submenu state connected to its parent menuitem with aria-haspopup and aria-expanded.", "Focused submenu item state." ], "commonMisuses": [ "Using role menubar for a normal website header or product navigation row.", "Using a menubar when one menu button or visible toolbar actions would be simpler.", "Putting form controls, sliders, date pickers, editable fields, or arbitrary cards inside menuitem rows.", "Leaving hidden submenu items in the tab order." ], "keywords": [ "menu", "menubar", "application", "command", "bar", "desktop-style", "pull-down", "submenu", "selection", "choice", "ui-ux", "persistent", "composite", "menus", "submenus", "complex", "applications", "may", "have", "many", "stable", "commands", "but", "scattering", "those", "across", "buttons", "popovers", "hidden", "shortcuts", "makes", "discovery", "grouping", "disabled", "state", "keyboard", "execution", "unpredictable", "provide", "top-level" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/menu-menubar.md", "json": "https://uxpatternsguide.com/agent/patterns/menu-menubar.json", "human": "https://uxpatternsguide.com/patterns/menu-menubar/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/keyboard-shortcut-vs-command-palette-vs-menu-menubar-vs-toolbar-vs-undo-vs-redo.md", "https://uxpatternsguide.com/agent/comparisons/menu-menubar-vs-menu-button-vs-mega-menu-vs-global-navigation.md" ] }, { "id": "menu-button", "name": "Menu button", "aliases": [ "action menu button", "overflow menu button", "dropdown action button", "more actions button", "menu trigger" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Button-controlled popup menu of actions or links", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need access to a short set of contextual commands, but showing every secondary action as a visible button crowds the interface and hiding commands behind unnamed popups breaks predictability.", "useWhen": "A local object or toolbar has three to eight secondary commands.", "avoidWhen": "The job is choosing a form value, selecting several values, or browsing a long list.", "requiredStates": [ "Closed trigger state with visible or accessible name.", "Open state with aria-expanded true and a controlled menu.", "First active item after opening from Enter, Space, or Down Arrow.", "Last active item after opening from Up Arrow." ], "commonMisuses": [ "Using a menu button for long value selection that should be a select, listbox, combobox, or multi-select.", "Using role menu for ordinary page navigation or a simple list of links without implementing menu keyboard behavior.", "Opening only on hover or closing before keyboard users can reach the first item.", "Leaving aria-expanded stale after the menu opens or closes." ], "keywords": [ "menu", "button", "action", "overflow", "dropdown", "more", "actions", "trigger", "disclosure", "attention", "management", "ui-ux", "button-controlled", "popup", "links", "need", "access", "short", "set", "contextual", "commands", "but", "showing", "every", "secondary", "visible", "crowds", "interface", "hiding", "behind", "unnamed", "popups", "breaks", "predictability", "provide", "named", "controls", "exposes", "expanded", "state" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/menu-button.md", "json": "https://uxpatternsguide.com/agent/patterns/menu-button.json", "human": "https://uxpatternsguide.com/patterns/menu-button/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/action-menu-vs-menu-button-vs-button-group-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/button-group-vs-segmented-control-vs-menu-button-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/context-menu-vs-action-menu-vs-menu-button-vs-popover.md", "https://uxpatternsguide.com/agent/comparisons/menu-menubar-vs-menu-button-vs-mega-menu-vs-global-navigation.md", "https://uxpatternsguide.com/agent/comparisons/menu-button-vs-command-palette-vs-select-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/popover-vs-menu-button-vs-modal-dialog-vs-sheet.md", "https://uxpatternsguide.com/agent/comparisons/toolbar-vs-button-group-vs-menu-button-vs-command-palette.md" ] }, { "id": "merge-conflict-resolver", "name": "Merge conflict resolver", "aliases": [ "code merge conflict resolver", "branch conflict resolver", "source control conflict resolver", "pull request conflict resolver", "merge request conflict resolver", "hunk conflict resolver", "ours theirs resolver" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Source-code branch conflict resolver with file and hunk decisions", "maturity": "standard", "platforms": [ "web", "desktop" ], "problem": "Developers can merge broken code, discard branch work, or become stuck when a source-control conflict resolver hides branch ownership, file paths, conflict markers, validation errors, unsupported files, or the final commit boundary.", "useWhen": "A pull request, merge request, rebase, merge, or branch update has source-code conflicts that require developer decisions.", "avoidWhen": "The conflict is a non-code record, document, import row, or form value without repository branch semantics.", "requiredStates": [ "Repository and branch context state with target branch, source branch, and merge request or pull request identifier.", "Conflict file list state with unresolved count and file paths.", "Current hunk compare state with source and target code labels.", "Use target or ours decision state." ], "commonMisuses": [ "Using Accept all incoming without showing file paths, branches, or discarded code.", "Leaving Ours and Theirs undefined in a browser context where repository roles can invert by operation.", "Enabling Commit while conflict markers remain.", "Treating a binary or generated file as editable text." ], "keywords": [ "merge", "conflict", "resolver", "code", "branch", "source", "control", "pull", "request", "hunk", "ours", "theirs", "error", "prevention", "recovery", "ui-ux", "source-code", "file", "decisions", "developers", "broken", "discard", "work", "become", "stuck", "source-control", "hides", "ownership", "paths", "markers", "validation", "errors", "unsupported", "files", "final", "commit", "boundary", "provide", "works", "repository" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/merge-conflict-resolver.md", "json": "https://uxpatternsguide.com/agent/patterns/merge-conflict-resolver.json", "human": "https://uxpatternsguide.com/patterns/merge-conflict-resolver/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/merge-conflict-resolver-vs-conflict-resolution-vs-conflict-state-vs-review-before-submit.md" ] }, { "id": "meter", "name": "Meter", "aliases": [ "gauge", "usage meter", "quota meter", "capacity gauge", "battery gauge", "fuel gauge", "utilization meter", "score meter", "health gauge" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Read-only scalar value gauge within a known range", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to understand the current level of a bounded resource, capacity, score, or risk, but unlabeled gauges and decorative bars often hide the range, unit, threshold meaning, or whether high values are good or bad.", "useWhen": "A current value exists inside a meaningful known range.", "avoidWhen": "The value has no meaningful maximum or minimum.", "requiredStates": [ "Normal state inside the acceptable band.", "Warning state near a threshold users can act on.", "Critical or over-limit state with an action or consequence.", "Low-better state where the optimum range is near the minimum." ], "commonMisuses": [ "Using a meter to show task progress such as upload completion.", "Using a meter for a value without a meaningful maximum.", "Showing percent without unit, total, or threshold meaning.", "Using color alone for warning and critical ranges." ], "keywords": [ "meter", "gauge", "usage", "quota", "capacity", "battery", "fuel", "utilization", "score", "health", "feedback", "status", "system", "state", "ui-ux", "read-only", "scalar", "value", "within", "known", "range", "need", "understand", "current", "level", "bounded", "resource", "risk", "but", "unlabeled", "gauges", "decorative", "bars", "often", "hide", "unit", "threshold", "meaning", "whether", "high" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/meter.md", "json": "https://uxpatternsguide.com/agent/patterns/meter.json", "human": "https://uxpatternsguide.com/patterns/meter/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ai-confidence-shown-as-fake-precision-vs-confidence-uncertainty-display-vs-meter-vs-source-grounding-display-vs-warning-text-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/confidence-uncertainty-display-vs-source-grounding-display-vs-citation-display-vs-meter-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/meter-vs-progress-bar-vs-slider-vs-spinbutton.md", "https://uxpatternsguide.com/agent/comparisons/step-progress-vs-step-navigation-vs-progress-bar-vs-meter.md" ] }, { "id": "modal-dialog", "name": "Modal dialog", "aliases": [ "dialog", "modal", "modal window", "modal task layer" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Focused modal task layer", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users sometimes need a short focused task layer that temporarily blocks the current page without sending them into a separate workflow.", "useWhen": "A short task must interrupt normal page interaction but should return users to the same context afterward.", "avoidWhen": "The content is only informational and does not require blocking the page.", "requiredStates": [ "Closed page state with an obvious invoking control.", "Opening transition that moves focus into the dialog and marks background content unavailable.", "Open task state with accessible title, concise body, primary action, secondary cancellation, and visible close behavior.", "Keyboard cycling state where Tab and Shift+Tab remain inside the dialog." ], "commonMisuses": [ "Using a modal as a generic container for routine information that could stay inline.", "Letting users interact with page controls behind the open dialog.", "Opening a long multi-step workflow in a modal without navigation, progress, or saved state.", "Providing only an OK button for a task that can be cancelled or needs a named action." ], "keywords": [ "modal", "dialog", "window", "task", "layer", "disclosure", "attention", "management", "ui-ux", "focused", "sometimes", "need", "short", "temporarily", "blocks", "current", "page", "without", "sending", "them", "separate", "workflow", "open", "titled", "above", "make", "background", "content", "unavailable", "place", "focus", "inside", "keep", "contained", "until", "close", "return", "invoking", "control", "next" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/modal-dialog.md", "json": "https://uxpatternsguide.com/agent/patterns/modal-dialog.json", "human": "https://uxpatternsguide.com/patterns/modal-dialog/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/alert-dialog-vs-alert-vs-modal-dialog-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/drawer-vs-modal-dialog-vs-navigation-drawer-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/drawer-with-no-close-or-return-path-vs-drawer-vs-modal-dialog-vs-navigation-drawer-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/focus-traversal-vs-keyboard-shortcut-vs-skip-link-vs-modal-dialog-vs-toolbar-vs-data-grid.md", "https://uxpatternsguide.com/agent/comparisons/full-screen-takeover-vs-modal-dialog-vs-sheet-vs-single-page-form.md", "https://uxpatternsguide.com/agent/comparisons/inline-edit-vs-text-input-vs-single-page-form-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/modal-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/modal-for-nonblocking-content-vs-modal-dialog-vs-popover-vs-drawer-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/popover-vs-menu-button-vs-modal-dialog-vs-sheet.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/sheet-vs-drawer-vs-modal-dialog-vs-alert-dialog.md" ] }, { "id": "modal-for-nonblocking-content", "name": "Modal for nonblocking content", "aliases": [ "informational modal", "modal for status message", "help modal", "nonblocking modal", "OK-only info dialog", "modal interruption", "blocking preview modal" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Unnecessary modal interruption anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "A page presents routine information in a modal dialog even though users do not need to stop the current task, make a blocking decision, or protect background state.", "useWhen": "Use this anti-pattern to review informational dialogs, help popups, status popups, release-note prompts, marketing modals, and preview modals that interrupt work without a required decision.", "avoidWhen": "The layer contains a compact task that truly must block background interaction.", "requiredStates": [ "Default page state where the primary task remains visible and usable.", "Inline note state for local nonblocking information.", "Popover help state anchored to the affected field or control.", "Drawer detail or side preview state where selected-object context remains visible." ], "commonMisuses": [ "Showing success confirmation as a modal when an inline message, toast, or confirmation page would fit better.", "Opening help text in a modal that hides the field or table it explains.", "Putting a read-only preview in a modal when users need side-by-side comparison.", "Blocking the page for background sync, autosave, routine update, or informational release note." ], "keywords": [ "modal", "nonblocking", "content", "informational", "status", "message", "help", "ok-only", "info", "dialog", "interruption", "blocking", "preview", "disclosure", "attention", "management", "ui-ux", "unnecessary", "anti-pattern", "page", "presents", "routine", "information", "even", "though", "need", "stop", "current", "task", "make", "decision", "protect", "background", "state", "treat", "modals", "choose", "inline", "anchored", "side" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/modal-for-nonblocking-content.md", "json": "https://uxpatternsguide.com/agent/patterns/modal-for-nonblocking-content.json", "human": "https://uxpatternsguide.com/patterns/modal-for-nonblocking-content/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/modal-for-nonblocking-content-vs-modal-dialog-vs-popover-vs-drawer-vs-inline-message.md" ] }, { "id": "model-update-notice", "name": "Model update notice", "aliases": [ "AI model update notice", "model migration notice", "model deprecation notice", "model retirement notice", "model version notice", "AI capability update", "model change announcement", "model replacement notice", "model lifecycle notice", "LLM update notice" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Lifecycle notice for AI model version changes, retirement, migration, capability shifts, or replacement behavior", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI model changes can alter or break high-value workflows, but products often announce them as ordinary feature news or hidden release notes, leaving users without impact scope, deadlines, replacements, testing paths, migration ownership, or rollback planning.", "useWhen": "A model version, provider, lifecycle stage, availability, behavior, or replacement plan changes in a way users may need to understand or act on.", "avoidWhen": "The message is ordinary product release news with no model behavior, lifecycle, or migration impact.", "requiredStates": [ "Informational model update state with model name, version, capability change, effective date, and no action required.", "Deprecated model state with replacement model, retirement date, affected usage, recommended migration path, and owner.", "Urgent retirement state with shutdown date, unavailable-after behavior, failure mode, support contact, and escalation path.", "Auto-upgrade scheduled state showing rollout window, old model, new model, expected behavior change, and testing option." ], "commonMisuses": [ "Announcing a model change as ordinary release news without affected usage, deadline, replacement, or action requirement.", "Using a dismissible banner that hides required migration before it is complete.", "Showing model deprecated without explaining whether calls still work, when they fail, or what replacement to test.", "Auto-upgrading a model without letting owners compare behavior in high-impact workflows." ], "keywords": [ "model", "update", "notice", "migration", "deprecation", "retirement", "version", "capability", "change", "announcement", "replacement", "lifecycle", "llm", "automation", "ui-ux", "changes", "shifts", "behavior", "alter", "break", "high-value", "workflows", "but", "products", "often", "announce", "them", "ordinary", "feature", "news", "hidden", "release", "notes", "leaving", "without", "impact", "scope", "deadlines", "replacements", "testing" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/model-update-notice.md", "json": "https://uxpatternsguide.com/agent/patterns/model-update-notice.json", "human": "https://uxpatternsguide.com/patterns/model-update-notice/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/model-update-notice-vs-notification-banner-vs-warning-text-vs-phase-beta-banner-vs-confidence-uncertainty-display-vs-source-grounding-display.md" ] }, { "id": "multi-select", "name": "Multi-select", "aliases": [ "multiple select", "tag picker" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Multi-value picker widget", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to choose several predefined values from a list that is too long, searchable, or dynamic for a visible checkbox group.", "useWhen": "Users choose many values from a long predefined list.", "avoidWhen": "The set is short and independent choices should stay visible.", "requiredStates": [ "No selected values state with empty selected set.", "Open filtered option list state.", "One or more selected values shown outside the option list.", "Validation state for required, minimum, maximum, duplicate, or unavailable selection." ], "commonMisuses": [ "Hiding selected values inside a closed menu.", "Using multi-select for one mandatory choice.", "Building custom widgets without listbox or checkbox semantics.", "Closing the menu after each selection when users commonly need several values." ], "keywords": [ "multi-select", "multiple", "select", "tag", "picker", "selection", "choice", "ui-ux", "multi-value", "widget", "need", "choose", "several", "predefined", "values", "list", "too", "long", "searchable", "dynamic", "visible", "checkbox", "group", "provide", "filterable", "selected", "chips", "tags", "checked", "options", "open", "removable", "clear-all", "behavior", "validation", "preserves", "selections", "render", "filter", "input" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/multi-select.md", "json": "https://uxpatternsguide.com/agent/patterns/multi-select.json", "human": "https://uxpatternsguide.com/patterns/multi-select/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/checkbox-group-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/filter-chips-vs-filter-panel-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/inaccessible-custom-select-vs-select-vs-autocomplete-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/listbox-vs-select-vs-combobox-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/object-picker-vs-combobox-vs-autocomplete-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/transfer-list-vs-multi-select-vs-listbox-vs-checkbox-group.md" ] }, { "id": "multi-step-form", "name": "Multi-step form", "aliases": [ "multi-page form", "multi-step transaction", "multi-part form", "sectioned application form", "linear form flow" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Multi-page transaction with saved step state", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Long or conditional transactions become overwhelming, fragile, and error-prone when all fields are shown at once or when page-by-page flows fail to save progress, validate prerequisites, or let users review changes before final submission.", "useWhen": "A transaction spans several ordered pages or sections.", "avoidWhen": "The fields are short, related, and easier to scan together on one page.", "requiredStates": [ "Not-started state with clear start point and expectation of the steps or sections ahead.", "Current step state with heading, saved context, local answer controls, Back, and Continue.", "Completed step state based on saved valid data.", "Locked future step state before prerequisites are complete." ], "commonMisuses": [ "Using a multi-step form to hide a short related form that users should review on one page.", "Treating a step indicator as the form lifecycle instead of modelling saved step data.", "Marking a step complete after visit rather than after validation and save.", "Letting users skip required future steps with no prerequisite check." ], "keywords": [ "multi-step", "form", "multi-page", "transaction", "multi-part", "sectioned", "application", "linear", "flow", "input", "data", "entry", "ui-ux", "saved", "step", "state", "long", "conditional", "transactions", "become", "overwhelming", "fragile", "error-prone", "all", "fields", "shown", "once", "page-by-page", "flows", "fail", "save", "progress", "validate", "prerequisites", "let", "review", "changes", "before", "final", "submission" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/multi-step-form.md", "json": "https://uxpatternsguide.com/agent/patterns/multi-step-form.json", "human": "https://uxpatternsguide.com/patterns/multi-step-form/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/autosave-form-vs-single-page-form-vs-multi-step-form-vs-inline-edit.md", "https://uxpatternsguide.com/agent/comparisons/bulk-import-vs-file-upload-vs-drag-and-drop-upload-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/complete-complex-form-vs-single-page-form-vs-multi-step-form-vs-wizard.md", "https://uxpatternsguide.com/agent/comparisons/complete-multiple-tasks-vs-step-navigation-vs-process-list-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-upload-vs-file-upload-vs-multi-step-form-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/file-upload-vs-text-input-vs-single-question-page-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/multi-step-form-vs-single-page-form-vs-single-question-page-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/review-before-submit-vs-multi-step-form-vs-complete-complex-form-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md", "https://uxpatternsguide.com/agent/comparisons/wizard-vs-multi-step-form-vs-step-navigation-vs-process-list.md" ] }, { "id": "name-entry", "name": "Name entry", "aliases": [ "full name field", "personal name field", "legal name field", "official name field", "preferred name field", "given name and family name fields", "name capture" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Personal-name capture field or field group", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Names are personal identifiers with cultural, legal, language, script, privacy, and identity implications, so ordinary text fields, split-name assumptions, title lists, and overstrict validation can misidentify people or make a service feel disrespectful.", "useWhen": "The product must capture a person's name for display, correspondence, booking, application, payment, account details, identity matching, support, or official records.", "avoidWhen": "The product only needs a username, email address, account number, organization name, reference, or anonymous interaction.", "requiredStates": [ "Initial full-name state with visible label, purpose hint, autocomplete name, spellcheck false, and adequate width for long names.", "Focused state with normal text editing, paste, undo, selection, browser autofill, and no forced capitalization.", "Accented or punctuation state preserving hyphens, apostrophes, spaces, particles, and case.", "Native-script state accepting non-Latin characters with correct display direction and storage." ], "commonMisuses": [ "Requiring first name and last name when a full-name field would work.", "Blocking one-part names or one-letter names.", "Using a title dropdown that forces gender or marital-status disclosure.", "Stripping accents, apostrophes, hyphens, spaces, particles, or native-script characters." ], "keywords": [ "name", "entry", "full", "field", "personal", "legal", "official", "preferred", "given", "family", "fields", "capture", "input", "data", "ui-ux", "personal-name", "group", "names", "identifiers", "cultural", "language", "script", "privacy", "identity", "implications", "ordinary", "text", "split-name", "assumptions", "title", "lists", "overstrict", "validation", "misidentify", "people", "make", "service", "feel", "disrespectful", "ask" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/name-entry.md", "json": "https://uxpatternsguide.com/agent/patterns/name-entry.json", "human": "https://uxpatternsguide.com/patterns/name-entry/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/create-user-profile-vs-account-creation-vs-onboarding-vs-single-page-form.md", "https://uxpatternsguide.com/agent/comparisons/name-entry-vs-text-input-vs-autocomplete-vs-select-vs-inline-validation-vs-error-summary.md" ] }, { "id": "navigation-drawer", "name": "Navigation drawer", "aliases": [ "drawer navigation", "modal navigation drawer", "hamburger drawer", "app drawer", "side drawer", "dismissible drawer" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Dismissible slide-in navigation sheet", "maturity": "established", "platforms": [ "mobile", "web", "desktop" ], "problem": "Users need access to app destinations or account sections, but the screen cannot or should not keep every navigation option visible all the time.", "useWhen": "A constrained app needs access to more destinations than fit in the visible navigation surface.", "avoidWhen": "Users need constant visibility of the local hierarchy while working in a section.", "requiredStates": [ "Closed state with a clear opener such as a menu button.", "Opening or open state with drawer sheet, selected destination, and grouped items.", "Modal scrim state that communicates the underlying content is blocked.", "Dismissed state from scrim, Escape, close button, item selection, or platform gesture." ], "commonMisuses": [ "Hiding the app's most important destinations in a drawer on mobile.", "Leaving a modal drawer open after a destination is selected.", "Providing no scrim, Escape, close control, or outside-dismiss behavior for a modal drawer.", "Using the menu icon for unrelated actions on different screens." ], "keywords": [ "navigation", "drawer", "modal", "hamburger", "app", "side", "dismissible", "wayfinding", "ui-ux", "slide-in", "sheet", "need", "access", "destinations", "account", "sections", "but", "screen", "cannot", "should", "keep", "every", "option", "visible", "all", "time", "provide", "controlled", "slides", "presents", "grouped", "current", "state", "blocks", "shares", "space", "appropriately", "closes", "predictably", "after" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/navigation-drawer.md", "json": "https://uxpatternsguide.com/agent/patterns/navigation-drawer.json", "human": "https://uxpatternsguide.com/patterns/navigation-drawer/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/drawer-vs-modal-dialog-vs-navigation-drawer-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/drawer-with-no-close-or-return-path-vs-drawer-vs-modal-dialog-vs-navigation-drawer-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/mega-menu-vs-global-navigation-vs-navigation-drawer.md", "https://uxpatternsguide.com/agent/comparisons/navigation-drawer-vs-side-navigation-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/responsive-navigation-adaptation-vs-global-navigation-vs-bottom-navigation-vs-navigation-drawer-vs-side-navigation-vs-header.md", "https://uxpatternsguide.com/agent/comparisons/settings-page-vs-settings-management-vs-side-navigation-vs-tabs.md" ] }, { "id": "no-results-recovery", "name": "No-results recovery", "aliases": [ "empty search state", "zero results" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Search recovery state", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "A search or filter returns nothing, leaving users without a path forward.", "useWhen": "Search, browse, or filter controls can produce an empty result set.", "avoidWhen": "There is genuinely no possible next action and the system should instead explain availability.", "requiredStates": [ "Zero-result state that preserves the user's criteria.", "Recovery state with clear filters, broaden query, or browse alternatives.", "Recovered state after criteria are changed.", "Unavailable state if no alternatives exist." ], "commonMisuses": [ "Showing a blank list with no explanation.", "Resetting all criteria automatically.", "Offering generic help that does not change the result set." ], "keywords": [ "no-results", "recovery", "empty", "search", "state", "zero", "results", "browse", "discovery", "ui-ux", "filter", "returns", "nothing", "leaving", "without", "path", "forward", "explain", "matches", "were", "found", "preserve", "query", "filters", "offer", "specific", "ways", "broaden", "correct", "render", "zero-result", "copy", "active", "criteria", "remove-filter", "actions", "alternative", "suggestions", "keep", "visible" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/no-results-recovery.md", "json": "https://uxpatternsguide.com/agent/patterns/no-results-recovery.json", "human": "https://uxpatternsguide.com/patterns/no-results-recovery/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/dead-end-empty-state-vs-empty-state-vs-no-results-recovery-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/empty-state-vs-no-results-recovery-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/faceted-search-vs-no-results-recovery.md", "https://uxpatternsguide.com/agent/comparisons/filter-panel-vs-faceted-search-vs-no-results-recovery.md", "https://uxpatternsguide.com/agent/comparisons/query-correction-vs-search-suggestions-vs-no-results-recovery-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/search-result-highlighting-vs-basic-search-vs-search-suggestions-vs-no-results-recovery.md" ] }, { "id": "notification-banner", "name": "Notification banner", "aliases": [ "service notification banner", "page notification banner", "page-flow banner", "before-heading notice", "success notification banner" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Page-flow service notification before the H1", "maturity": "standard", "platforms": [ "web", "mobile" ], "problem": "Users sometimes need service-context information, a personal deadline, or a previous-page outcome before reading the next page, but ordinary page content, toasts, or broad product banners either make the message too local, too temporary, or too wide in scope.", "useWhen": "A message should be encountered before the page H1 but is not the page's main task content.", "avoidWhen": "The message is a submitted-form validation error or field correction.", "requiredStates": [ "No-banner state when no service-context notice or previous-page outcome applies.", "Neutral Important state for service problem, deadline, overdue action, or elsewhere-in-service information.", "Success state for an outcome from the previous page when users continue the journey.", "Linked action state where a single link or button takes users to the affected application, evidence record, payment, or status details." ], "commonMisuses": [ "Using a notification banner for field validation errors instead of an error summary and field-level messages.", "Showing several notification banners before the same heading.", "Putting the banner after the H1, in a sidebar, or above unrelated global chrome where users cannot connect it to the page flow.", "Using it as a product-wide outage banner that needs to persist across many sections." ], "keywords": [ "notification", "banner", "service", "page", "page-flow", "before-heading", "notice", "success", "feedback", "status", "system", "state", "ui-ux", "before", "sometimes", "need", "service-context", "information", "personal", "deadline", "previous-page", "outcome", "reading", "next", "but", "ordinary", "content", "toasts", "broad", "product", "banners", "either", "make", "message", "too", "local", "temporary", "wide", "scope", "place" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/notification-banner.md", "json": "https://uxpatternsguide.com/agent/patterns/notification-banner.json", "human": "https://uxpatternsguide.com/patterns/notification-banner/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/confirmation-page-vs-success-confirmation-vs-review-before-submit-vs-notification-banner.md", "https://uxpatternsguide.com/agent/comparisons/cookie-banner-vs-banner-vs-notification-banner-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/model-update-notice-vs-notification-banner-vs-warning-text-vs-phase-beta-banner-vs-confidence-uncertainty-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/notification-banner-vs-banner-vs-alert-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/official-site-banner-vs-banner-vs-site-alert-vs-notification-banner-vs-security-warning-vs-service-navigation.md", "https://uxpatternsguide.com/agent/comparisons/phase-beta-banner-vs-banner-vs-notification-banner-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/site-alert-vs-banner-vs-notification-banner-vs-alert.md", "https://uxpatternsguide.com/agent/comparisons/success-confirmation-vs-toast-notification-vs-notification-banner-vs-alert.md" ] }, { "id": "notification-center", "name": "Notification center", "aliases": [ "notification drawer", "notification panel", "notification inbox", "in-app notifications", "notifications tray" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Durable user-opened notification history and action drawer", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users receive asynchronous work updates, mentions, background-job results, reminders, and system messages across many objects, but transient toasts, local alerts, or email alone make those messages easy to miss, impossible to triage, or noisy enough to ignore.", "useWhen": "Users receive multiple asynchronous updates across objects, jobs, collaborators, approvals, or reminders.", "avoidWhen": "The product has only occasional current-action feedback that a toast or inline status can handle.", "requiredStates": [ "Closed entry-point state with zero, new-unseen, and unread-but-seen counts.", "Open drawer or page state with newest-first notifications.", "Unread, read, selected, and actioned item states.", "Unread-only, all, source, urgency, or type filter states." ], "commonMisuses": [ "Treating the badge count, unread count, and total notification count as one number.", "Clearing all unread items just because the drawer opened.", "Deleting notifications when a filter is applied.", "Using the center as the only surface for critical current-task blockers." ], "keywords": [ "notification", "center", "drawer", "panel", "inbox", "in-app", "notifications", "tray", "feedback", "status", "system", "state", "ui-ux", "durable", "user-opened", "history", "action", "receive", "asynchronous", "work", "updates", "mentions", "background-job", "results", "reminders", "messages", "across", "many", "objects", "but", "transient", "toasts", "local", "alerts", "email", "alone", "make", "those", "easy", "miss" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/notification-center.md", "json": "https://uxpatternsguide.com/agent/patterns/notification-center.json", "human": "https://uxpatternsguide.com/patterns/notification-center/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/activity-log-vs-timeline-vs-notification-center-vs-search-history.md", "https://uxpatternsguide.com/agent/comparisons/approval-workflow-vs-review-before-submit-vs-permission-recovery-vs-invite-user.md", "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/audit-log-vs-activity-log-vs-ai-output-audit-trail-vs-version-history-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/comments-vs-textarea-vs-feed-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/feed-vs-card-list-vs-recommendations-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/follow-subscribe-vs-notification-center-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/notification-center-vs-toast-notification-vs-alert-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/notification-preferences-vs-settings-management-vs-notification-center-vs-follow-subscribe.md", "https://uxpatternsguide.com/agent/comparisons/preference-center-vs-settings-management-vs-notification-preferences-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/presence-vs-mentions-vs-notification-center-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/reactions-vs-comments-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/report-abuse-vs-review-queue-vs-comments-vs-security-warning-vs-permission-denied-state-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/review-queue-vs-approval-workflow-vs-saved-filter-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/scheduling-vs-booking-vs-calendar-view-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/threaded-discussion-vs-comments-vs-feed-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/wearable-glance-vs-notification-center-vs-summary-box-vs-dashboard-layout-vs-progress-bar-vs-notification-preferences.md" ] }, { "id": "notification-preferences", "name": "Notification preferences", "aliases": [ "notification settings", "alert preferences", "email notification settings", "push notification settings", "notification controls", "notification channels", "quiet hours", "mute notifications", "digest settings", "notification routing", "activity notification settings" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "User-controlled rules for notification type, channel, frequency, timing, privacy, and exceptions", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Notification systems overwhelm users or make them miss important work when preferences hide event types, delivery channels, frequency, quiet hours, digest behavior, privacy previews, device permissions, admin overrides, and critical exceptions.", "useWhen": "Users receive enough notifications that they need control over type, channel, device, frequency, timing, or source.", "avoidWhen": "The product has only a few low-volume notifications that can be handled by defaults and inline controls.", "requiredStates": [ "Default notification preferences state.", "Per-event-type channel matrix state.", "Immediate, daily digest, weekly digest, and never frequency states.", "Quiet hours or quiet days state." ], "commonMisuses": [ "Offering one master notification switch for a complex collaboration product.", "Letting users disable critical current-task, security, billing, or incident alerts without an exception model.", "Hiding email, push, in-app, banner, sound, badge, and digest settings in unrelated places.", "Showing a preference as enabled when OS permissions or admin policy prevent delivery." ], "keywords": [ "notification", "preferences", "settings", "alert", "email", "push", "controls", "channels", "quiet", "hours", "mute", "notifications", "digest", "routing", "activity", "personalization", "preference", "ui-ux", "user-controlled", "rules", "type", "channel", "frequency", "timing", "privacy", "exceptions", "systems", "overwhelm", "make", "them", "miss", "important", "work", "hide", "event", "types", "delivery", "behavior", "previews", "device" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/notification-preferences.md", "json": "https://uxpatternsguide.com/agent/patterns/notification-preferences.json", "human": "https://uxpatternsguide.com/patterns/notification-preferences/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/block-mute-vs-report-abuse-vs-notification-preferences-vs-follow-subscribe-vs-permission-denied-state-vs-comments.md", "https://uxpatternsguide.com/agent/comparisons/consent-prompt-vs-cookie-banner-vs-preference-center-vs-notification-preferences-vs-permission-sharing-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/notification-preferences-vs-settings-management-vs-notification-center-vs-follow-subscribe.md", "https://uxpatternsguide.com/agent/comparisons/permission-prompt-with-no-context-vs-permission-request-vs-location-permission-flow-vs-consent-prompt-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/permission-request-vs-consent-prompt-vs-permission-sharing-vs-permission-recovery-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/preference-center-vs-settings-management-vs-notification-preferences-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/wearable-glance-vs-notification-center-vs-summary-box-vs-dashboard-layout-vs-progress-bar-vs-notification-preferences.md" ] }, { "id": "object-picker", "name": "Object picker", "aliases": [ "record picker", "entity picker", "lookup field", "reference picker", "people picker", "user picker", "assignee picker" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Existing-entity lookup and selected-object confirmation", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to link, assign, or reference an existing entity, but names can be duplicated, records can be scoped or restricted, and a text-only autocomplete can submit the wrong hidden object ID.", "useWhen": "Users assign, link, reference, invite, route, or attach an existing entity.", "avoidWhen": "Any arbitrary text is valid.", "requiredStates": [ "Empty object lookup field with label, helper text, and current search scope.", "Focused field with popup available and no committed object.", "Loading remote results state for the current query and scope.", "Filtered result list with active result and disambiguating metadata." ], "commonMisuses": [ "Treating the picker as a free text field when the system requires an existing object ID.", "Displaying only names for entities that commonly share names.", "Submitting a hidden object ID after the visible text changes.", "Searching an unbounded directory when the task has a clear project, account, group, or status scope." ], "keywords": [ "object", "picker", "record", "entity", "lookup", "field", "reference", "people", "assignee", "selection", "choice", "ui-ux", "existing-entity", "selected-object", "confirmation", "need", "link", "assign", "existing", "but", "names", "duplicated", "records", "scoped", "restricted", "text-only", "autocomplete", "submit", "wrong", "hidden", "provide", "searches", "permitted", "entities", "displays", "disambiguating", "metadata", "requires", "explicit", "shows" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/object-picker.md", "json": "https://uxpatternsguide.com/agent/patterns/object-picker.json", "human": "https://uxpatternsguide.com/patterns/object-picker/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/invite-user-vs-account-creation-vs-object-picker-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/object-picker-vs-combobox-vs-autocomplete-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md" ] }, { "id": "official-site-banner", "name": "Official-site banner", "aliases": [ "official government banner", "official website banner", "government identity banner", "official site identity", "official gov banner", "trusted domain banner", "secure government banner", "how you know banner" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Top-of-page official identity and secure-connection disclosure for eligible government or public-authority websites", "maturity": "established", "platforms": [ "web", "mobile" ], "problem": "Users can mistake spoofed, partner, staging, insecure, or unaffiliated sites for official services when official ownership and secure-connection signals are hidden, inconsistent, misleading, or mixed with ordinary announcements.", "useWhen": "The service is eligible to identify itself as an official government or public-authority website.", "avoidWhen": "The site is not an official government or public-authority service.", "requiredStates": [ "Collapsed official identity state.", "Expanded details state with trusted-domain explanation.", "Expanded details state with HTTPS or lock explanation.", "Every-page top placement state." ], "commonMisuses": [ "Copying an official government banner onto a private, partner, staging, or prototype site.", "Using the banner without an approved government domain or HTTPS.", "Making the official identity banner dismissible so users cannot later verify domain and secure connection guidance.", "Mixing official identity proof with maintenance notices, outage alerts, campaign messages, or navigation links." ], "keywords": [ "official-site", "banner", "official", "government", "website", "identity", "site", "gov", "trusted", "domain", "secure", "how", "you", "know", "trust", "safety", "privacy", "ui-ux", "top-of-page", "secure-connection", "disclosure", "eligible", "public-authority", "websites", "mistake", "spoofed", "partner", "staging", "insecure", "unaffiliated", "sites", "services", "ownership", "signals", "hidden", "inconsistent", "misleading", "mixed", "ordinary", "announcements" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/official-site-banner.md", "json": "https://uxpatternsguide.com/agent/patterns/official-site-banner.json", "human": "https://uxpatternsguide.com/patterns/official-site-banner/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/official-site-banner-vs-banner-vs-site-alert-vs-notification-banner-vs-security-warning-vs-service-navigation.md" ] }, { "id": "offline-mobile-retry", "name": "Offline mobile retry", "aliases": [ "offline retry", "mobile offline retry", "queued mobile retry", "retry when online", "background retry", "offline upload retry", "mobile outbox retry", "retry queued action" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Mobile queued-action retry and background replay recovery", "maturity": "standard", "platforms": [ "mobile", "web" ], "problem": "Mobile users often lose connectivity, background the app, switch networks, enter captive portals, hit metered or low-battery constraints, or attach large files while trying to save, send, upload, submit, or check in, and they need to know whether the action is queued, retrying, safe to retry, blocked, or already accepted.", "useWhen": "A mobile user action can be saved locally and retried after network or app lifecycle conditions improve.", "avoidWhen": "The app cannot persist the action locally or safely identify whether the first attempt reached the server.", "requiredStates": [ "Online successful action state.", "No connection at submit state with local queue confirmation.", "Queued mobile action state with request ID, timestamp, and stored payload summary.", "Manual retry-ready state that preserves the original action and disables duplicate submit." ], "commonMisuses": [ "Showing a success toast for an offline submission that is only queued.", "Hiding the queue after users leave the screen or background the app.", "Letting Submit create a second request while a matching queued request is pending.", "Retrying every few seconds on unstable mobile networks with no backoff or pause." ], "keywords": [ "offline", "mobile", "retry", "queued", "online", "background", "upload", "outbox", "action", "cross-device", "physical", "interaction", "ui-ux", "queued-action", "replay", "recovery", "often", "lose", "connectivity", "app", "switch", "networks", "enter", "captive", "portals", "hit", "metered", "low-battery", "constraints", "attach", "large", "files", "while", "trying", "save", "send", "submit", "check", "they", "need" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/offline-mobile-retry.md", "json": "https://uxpatternsguide.com/agent/patterns/offline-mobile-retry.json", "human": "https://uxpatternsguide.com/patterns/offline-mobile-retry/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/offline-mobile-retry-vs-offline-state-vs-retry-vs-sync-state-vs-pull-to-refresh-vs-fallback-path.md" ] }, { "id": "offline-state", "name": "Offline state", "aliases": [ "no connection state", "offline mode", "network unavailable state", "cached mode", "local-only mode", "offline fallback", "disconnected state" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Connectivity-mode and local-work continuity state", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users lose connection while reading, editing, saving, uploading, or navigating, and need to know what still works, what is only local, what is stale, and what will happen when the app reconnects.", "useWhen": "Connection loss or server reachability changes the user's current task.", "avoidWhen": "A single request failed while the rest of the app is reachable and an error state is clearer.", "requiredStates": [ "Online normal state with no offline warning.", "Offline banner or local status that names affected scope.", "Cached read-only state with last updated timestamp.", "Local draft saved state that is not yet server-synced." ], "commonMisuses": [ "Showing only a browser-style offline page when useful cached or local content exists.", "Using a spinner forever during connection loss.", "Claiming a server save or submit succeeded while the work is only local.", "Disabling every control instead of only online-only actions." ], "keywords": [ "offline", "state", "connection", "mode", "network", "unavailable", "cached", "local-only", "fallback", "disconnected", "feedback", "status", "system", "ui-ux", "connectivity-mode", "local-work", "continuity", "lose", "while", "reading", "editing", "saving", "uploading", "navigating", "need", "know", "what", "still", "works", "local", "stale", "will", "happen", "app", "reconnects", "expose", "scopes", "loss", "affected", "tasks" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/offline-state.md", "json": "https://uxpatternsguide.com/agent/patterns/offline-state.json", "human": "https://uxpatternsguide.com/patterns/offline-state/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/graceful-degradation-vs-fallback-path-vs-offline-state-vs-service-unavailable-page.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/location-permission-flow-vs-permission-request-vs-map-view-vs-address-entry-vs-privacy-settings-vs-offline-state.md", "https://uxpatternsguide.com/agent/comparisons/offline-mobile-retry-vs-offline-state-vs-retry-vs-sync-state-vs-pull-to-refresh-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/offline-state-vs-error-state-vs-loading-spinner-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/pull-to-refresh-vs-touch-gesture-vs-feed-vs-offline-state-vs-loading-spinner-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/retry-vs-error-state-vs-loading-spinner-vs-offline-state.md", "https://uxpatternsguide.com/agent/comparisons/service-unavailable-page-vs-error-state-vs-offline-state-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/sync-state-vs-offline-state-vs-progress-bar-vs-error-state.md" ] }, { "id": "onboarding", "name": "Onboarding", "aliases": [ "user onboarding", "first-run experience", "first-use onboarding", "product onboarding", "new feature onboarding", "welcome flow", "guided introduction", "setup introduction", "activation flow", "teaching flow" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "First-run or new-feature orientation that leads to first value", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "New users, returning users after major changes, or users entering a novel workflow may not know how to reach first value, but broad tours, forced setup, and feature promotion can delay the task they came to complete.", "useWhen": "New users need orientation, setup, personalization, or instruction before the regular interface can deliver value.", "avoidWhen": "The product is already understandable through the normal interface.", "requiredStates": [ "First-run welcome state with benefit-focused copy and one clear next action.", "Optional skip, later, or resume state for non-required onboarding.", "Minimal setup or personalization state that explains why each answer is needed.", "Contextual teaching state attached to a real feature or empty workspace." ], "commonMisuses": [ "Forcing all users through a feature tour before they can do useful work.", "Using onboarding to compensate for unclear navigation, labels, or empty states.", "Asking for role, team, payment, permissions, and notifications before showing value.", "Ending onboarding on a blank workspace with no action, example, or checklist." ], "keywords": [ "onboarding", "first-run", "experience", "first-use", "product", "new", "feature", "welcome", "flow", "guided", "introduction", "setup", "activation", "teaching", "task", "workflow", "patterns", "ui-ux", "new-feature", "orientation", "leads", "first", "value", "returning", "after", "major", "changes", "entering", "novel", "may", "know", "how", "reach", "but", "broad", "tours", "forced", "promotion", "delay", "they" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/onboarding.md", "json": "https://uxpatternsguide.com/agent/patterns/onboarding.json", "human": "https://uxpatternsguide.com/patterns/onboarding/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/account-creation-vs-start-page-vs-onboarding-vs-password-creation.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/create-user-profile-vs-account-creation-vs-onboarding-vs-single-page-form.md", "https://uxpatternsguide.com/agent/comparisons/onboarding-vs-empty-state-vs-wizard-vs-progressive-disclosure.md", "https://uxpatternsguide.com/agent/comparisons/profile-setup-vs-create-user-profile-vs-onboarding-vs-account-creation.md", "https://uxpatternsguide.com/agent/comparisons/start-page-vs-onboarding-vs-browse-by-category-vs-step-navigation.md" ] }, { "id": "page-not-found-page", "name": "Page not found page", "aliases": [ "404 page", "not found page", "missing page", "broken link page", "dead link page", "unresolved route page", "missing resource page", "custom 404 page" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Missing-route recovery page", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users arrive at a URL the product cannot resolve and need to understand whether they mistyped an address, followed a broken or removed link, used an expired deep link, or reached a private resource whose existence cannot be disclosed.", "useWhen": "A route, URL, public page, file, object link, or deep link cannot be found.", "avoidWhen": "The service route exists but is temporarily closed, overloaded, or under maintenance.", "requiredStates": [ "Unknown route from typed or pasted URL.", "Broken in-product link.", "Removed public page with a replacement or closest topic route.", "Expired deep link that routes signed-in users to a dashboard or current task list." ], "commonMisuses": [ "Returning a successful status with page-not-found copy.", "Automatically redirecting to the homepage without explaining that the requested page was not found.", "Using page not found for a service outage, form validation problem, submission failure, loading delay, or empty collection.", "Showing only a code, stack trace, route matcher name, or framework error." ], "keywords": [ "page", "found", "404", "missing", "broken", "link", "dead", "unresolved", "route", "resource", "custom", "feedback", "status", "system", "state", "ui-ux", "missing-route", "recovery", "arrive", "url", "product", "cannot", "resolve", "need", "understand", "whether", "they", "mistyped", "address", "followed", "removed", "used", "expired", "deep", "reached", "private", "whose", "existence", "disclosed", "show" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/page-not-found-page.md", "json": "https://uxpatternsguide.com/agent/patterns/page-not-found-page.json", "human": "https://uxpatternsguide.com/patterns/page-not-found-page/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/page-not-found-page-vs-service-unavailable-page-vs-error-state-vs-empty-state.md" ] }, { "id": "pagination", "name": "Pagination", "aliases": [ "paged results", "page navigation" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Paged navigation control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to move through a long ordered collection without loading or scanning everything at once.", "useWhen": "The collection has many ordered results.", "avoidWhen": "Users need uninterrupted reading or comparison.", "requiredStates": [ "First page with disabled previous control.", "Middle page with previous and next available.", "Last page with disabled next control.", "Loading state after requesting another page." ], "commonMisuses": [ "Using pagination for a tiny collection.", "Resetting filters when moving pages.", "Hiding the current page or total position.", "Using page numbers for unrelated topics or sibling sections." ], "keywords": [ "pagination", "paged", "results", "page", "navigation", "wayfinding", "ui-ux", "control", "need", "move", "through", "long", "ordered", "collection", "without", "loading", "scanning", "everything", "once", "split", "stable", "pages", "current", "previous", "next", "reachable", "controls", "render", "labeled", "nav", "near", "affected", "nearby", "optional", "first", "last", "ellipsis", "clear", "disabled", "edge" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/pagination.md", "json": "https://uxpatternsguide.com/agent/patterns/pagination.json", "human": "https://uxpatternsguide.com/patterns/pagination/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/back-link-vs-breadcrumbs-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/carousel-auto-advance-without-pause-vs-carousel-vs-tabs-vs-recommendations-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/carousel-vs-tabs-vs-recommendations-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/data-grid-vs-table-vs-inline-edit-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/infinite-scroll-with-no-footer-access-vs-feed-vs-pagination-vs-card-list-vs-skip-link.md", "https://uxpatternsguide.com/agent/comparisons/pagination-without-current-page-vs-pagination-vs-breadcrumbs-vs-step-navigation-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/sort-controls-vs-filter-chips-vs-filter-panel-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/step-navigation-vs-back-link-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/table-vs-sort-controls-vs-filter-panel-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/tabs-vs-segmented-control-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/threaded-discussion-vs-comments-vs-feed-vs-notification-center.md" ] }, { "id": "pagination-without-current-page", "name": "Pagination without current page", "aliases": [ "pagination missing current state", "no active page in pagination", "unclear paginated position", "pagination no aria-current", "page numbers with no selected page", "ambiguous previous next pagination", "hidden current page" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Missing pagination position anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users are given pagination controls but cannot identify the current page or result slice, so page numbers, previous/next actions, and browser history become ambiguous.", "useWhen": "Use this anti-pattern to review result pages, data tables, search results, inboxes, catalogs, audit logs, resource lists, and generated pagination controls.", "avoidWhen": "The surface is a continuous feed or load-more list where exact page position is intentionally not exposed and the task does not require it.", "requiredStates": [ "Default middle-page state with exactly one visible current page and matching result range.", "First page state with current page 1 and previous unavailable.", "Last page state with current last page and next unavailable.", "Loading state that keeps the old current page understandable until the new page is committed." ], "commonMisuses": [ "Showing page numbers as identical chips with no selected state.", "Relying on the browser URL as the only current-page indicator.", "Marking both a page number and Next as current.", "Leaving aria-current on a stale page after async navigation." ], "keywords": [ "pagination", "without", "current", "page", "missing", "state", "active", "unclear", "paginated", "position", "aria-current", "numbers", "selected", "ambiguous", "previous", "next", "hidden", "navigation", "wayfinding", "ui-ux", "anti-pattern", "given", "controls", "but", "cannot", "identify", "result", "slice", "actions", "browser", "history", "become", "flag", "missing-current-page", "treatment", "replace", "exposes", "one", "matching", "range" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/pagination-without-current-page.md", "json": "https://uxpatternsguide.com/agent/patterns/pagination-without-current-page.json", "human": "https://uxpatternsguide.com/patterns/pagination-without-current-page/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/pagination-without-current-page-vs-pagination-vs-breadcrumbs-vs-step-navigation-vs-feed.md" ] }, { "id": "password-creation", "name": "Password creation", "aliases": [ "create password", "new password field", "set password", "choose password", "password reset new password", "password setup", "password strength guidance", "new memorized secret" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "New authentication secret selection flow", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Creating a password asks users to make a long-term authentication secret under policy pressure, so confusing rules, paste blocking, weak checklist meters, or unsafe reset practices can make accounts weaker while increasing abandonment and recovery burden.", "useWhen": "The user is creating an account with a reusable password.", "avoidWhen": "The user is only entering an existing password to sign in or reauthenticate.", "requiredStates": [ "Initial new-password state with purpose, autocomplete new-password, minimum length, paste support, show and hide control, and no character-class checklist.", "Generated password state where a password-manager value is accepted without blocking paste or truncation.", "Visible password state with matching Hide control and no spellcheck or autocapitalization.", "Too-short state with the entered value preserved and a field-level length message." ], "commonMisuses": [ "Using uppercase, lowercase, number, and symbol checklists as the main security signal.", "Blocking password-manager paste or generated passwords.", "Silently truncating long generated passwords.", "Rejecting spaces or Unicode without a documented technical reason." ], "keywords": [ "password", "creation", "create", "new", "field", "set", "choose", "reset", "setup", "strength", "guidance", "memorized", "secret", "input", "data", "entry", "ui-ux", "authentication", "selection", "flow", "creating", "asks", "make", "long-term", "under", "policy", "pressure", "confusing", "rules", "paste", "blocking", "weak", "checklist", "meters", "unsafe", "practices", "accounts", "weaker", "while", "increasing" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/password-creation.md", "json": "https://uxpatternsguide.com/agent/patterns/password-creation.json", "human": "https://uxpatternsguide.com/patterns/password-creation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/account-creation-vs-start-page-vs-onboarding-vs-password-creation.md", "https://uxpatternsguide.com/agent/comparisons/password-creation-vs-password-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/password-reset-vs-login-vs-password-creation-vs-email-address-entry.md" ] }, { "id": "password-input", "name": "Password input", "aliases": [ "password field", "current password field", "sign-in password field", "secret input", "login password", "show password input", "hide password control", "memorized secret input" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Authentication secret entry control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Passwords are secrets that users often enter under observation risk, through password managers, and in high-stakes authentication flows, so ordinary text entry, paste blocking, revealing errors, or weak visibility controls can expose credentials or block safe behavior.", "useWhen": "The user needs to enter an existing password, passphrase, or PIN-like memorized secret.", "avoidWhen": "The value is not a secret, such as a name, email address, account number, search query, reference, or ordinary note.", "requiredStates": [ "Initial hidden state with label, autocomplete purpose, spellcheck off, autocapitalization off, and show control.", "Focused hidden state that preserves native text editing and password-manager affordances.", "Visible state after the user chooses Show, with matching Hide control and visibility announcement.", "Pasted password-manager value state with the value accepted and not truncated." ], "commonMisuses": [ "Using type text for passwords.", "Blocking paste or password-manager autofill.", "Leaving the password visible after submit, error, or browser Back.", "Showing Password incorrect when the account identifier was valid." ], "keywords": [ "password", "input", "field", "current", "sign-in", "secret", "login", "show", "hide", "control", "memorized", "data", "entry", "ui-ux", "authentication", "passwords", "secrets", "often", "enter", "under", "observation", "risk", "through", "managers", "high-stakes", "flows", "ordinary", "text", "paste", "blocking", "revealing", "errors", "weak", "visibility", "controls", "expose", "credentials", "block", "safe", "behavior" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/password-input.md", "json": "https://uxpatternsguide.com/agent/patterns/password-input.json", "human": "https://uxpatternsguide.com/patterns/password-input/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/login-vs-sign-in-vs-password-input-vs-session-timeout-warning.md", "https://uxpatternsguide.com/agent/comparisons/password-creation-vs-password-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/password-input-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/sensitive-data-reveal-vs-password-input-vs-input-mask-vs-typed-confirmation-vs-permission-request.md", "https://uxpatternsguide.com/agent/comparisons/sign-in-vs-account-creation-vs-password-input-vs-session-timeout-warning.md", "https://uxpatternsguide.com/agent/comparisons/two-factor-authentication-vs-sign-in-vs-login-vs-password-reset.md", "https://uxpatternsguide.com/agent/comparisons/typed-confirmation-vs-destructive-action-confirmation-vs-confirmation-dialog-vs-password-input.md" ] }, { "id": "password-reset", "name": "Password reset", "aliases": [ "forgot password", "reset password", "account recovery password reset", "reset link", "reset code", "forgotten password", "recover password", "password recovery", "reset session" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Account recovery and reset-token lifecycle", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Password reset must restore access for legitimate users who cannot authenticate while preventing account enumeration, token theft, replay, weak recovery channels, uncontrolled session continuation, and confusing dead ends.", "useWhen": "Users need to recover an account because the existing password is forgotten, suspected compromised, or unusable.", "avoidWhen": "The user is merely signing in with a known current password or passkey.", "requiredStates": [ "Request state with identifier input, neutral copy, rate-limit protection, and a route back to sign in.", "Submitted state with account-neutral delivery confirmation, resend timing, channel hint, and support route.", "Resend-limited state with wait time and no account-existence disclosure.", "Token or code entry state that validates a reset artifact without exposing it in URLs, logs, analytics, or referrers." ], "commonMisuses": [ "Confirming whether an email, username, phone number, or account exists.", "Using password reset questions, reminders, or emailed passwords as recovery.", "Allowing reset tokens to be reused, guessed, shared across accounts, or used after expiry.", "Displaying raw tokens or codes in logs, analytics, support tools, screenshots, or third-party referrers." ], "keywords": [ "password", "reset", "forgot", "account", "recovery", "link", "code", "forgotten", "recover", "session", "task", "workflow", "patterns", "ui-ux", "reset-token", "lifecycle", "restore", "access", "legitimate", "who", "cannot", "authenticate", "while", "preventing", "enumeration", "token", "theft", "replay", "weak", "channels", "uncontrolled", "continuation", "confusing", "dead", "ends", "treat", "recovery-token", "collect", "identifier", "neutral" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/password-reset.md", "json": "https://uxpatternsguide.com/agent/patterns/password-reset.json", "human": "https://uxpatternsguide.com/patterns/password-reset/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/confirm-email-vs-email-address-entry-vs-account-creation-vs-password-reset.md", "https://uxpatternsguide.com/agent/comparisons/confirm-phone-vs-phone-number-entry-vs-confirm-email-vs-two-factor-authentication.md", "https://uxpatternsguide.com/agent/comparisons/password-reset-vs-login-vs-password-creation-vs-email-address-entry.md", "https://uxpatternsguide.com/agent/comparisons/two-factor-authentication-vs-sign-in-vs-login-vs-password-reset.md" ] }, { "id": "payment-card-entry", "name": "Payment card entry", "aliases": [ "credit card form", "debit card form", "card payment form", "card details entry", "card number entry", "checkout card form", "secure card capture", "hosted card fields" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Secure card payment capture and verification form", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Card payment details are high-risk, easy to mistype, brand-specific, and regulated, so ordinary text fields or unsafe review screens can cause failed payments, fraud exposure, and card-data leakage.", "useWhen": "Users need to pay with a credit, debit, prepaid, or network card.", "avoidWhen": "The task is to collect bank account identifiers for payout, ACH, direct debit, open banking, or bank transfer.", "requiredStates": [ "Initial secure checkout state with amount, accepted card brands, wallet option, card number, expiry, CVC or CID, and billing postal code if required.", "Focused entry state with persistent labels, autocomplete purpose, and helper text that survives placeholder disappearance.", "Pasted card number state where spaces and hyphens are accepted and grouped for review.", "Brand detected state showing supported brand and expected CVC or CID length." ], "commonMisuses": [ "Using one multiline field for card number, expiry, CVC, and billing details.", "Collecting card details through ordinary app-owned inputs when hosted fields or a payment element are required by the intended compliance model.", "Assuming every card number has sixteen digits or every security code has three digits.", "Displaying or storing CVC after authorization." ], "keywords": [ "payment", "card", "entry", "credit", "form", "debit", "details", "number", "checkout", "secure", "capture", "hosted", "fields", "input", "data", "ui-ux", "verification", "high-risk", "easy", "mistype", "brand-specific", "regulated", "ordinary", "text", "unsafe", "review", "screens", "cause", "failed", "payments", "fraud", "exposure", "card-data", "leakage", "collect", "through", "processor-owned", "format", "validate", "card-specific" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/payment-card-entry.md", "json": "https://uxpatternsguide.com/agent/patterns/payment-card-entry.json", "human": "https://uxpatternsguide.com/patterns/payment-card-entry/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/checkout-vs-payment-card-entry-vs-review-before-submit-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/payment-card-entry-vs-bank-details-vs-input-mask-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/payment-collection-vs-checkout-vs-payment-card-entry-vs-bank-details.md" ] }, { "id": "payment-collection", "name": "Payment collection", "aliases": [ "take payment", "collect payment", "payment journey", "payment authorization", "payment request", "hosted payment", "payment handoff", "payment status", "payment retry" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Payment request, authorization, and status lifecycle", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Payment journeys create high anxiety and real financial risk when users cannot see the amount and reference, do not understand provider handoffs, lose context after failure, or accidentally create duplicate charges while status is uncertain.", "useWhen": "The user must pay a known fee, invoice, balance, application charge, renewal, subscription, donation, deposit, or service amount.", "avoidWhen": "The task is a full ecommerce checkout with cart, shipping, tax, discounts, and order finalization.", "requiredStates": [ "Payment request state with amount, currency, reference, description, payer context, accepted methods, and secure provider handoff.", "Method selection state for card, wallet, bank redirect, saved method, payment link, or alternate route.", "Sensitive details state delegated to hosted or compliant payment UI.", "Provider redirect or authentication state with clear return expectations." ], "commonMisuses": [ "Showing a Pay button without amount, currency, or reference.", "Letting users submit the same payment twice while the first attempt is processing.", "Clearing the service context after a decline, cancel, or provider redirect.", "Collapsing declined, canceled, expired, processing, and provider-unavailable states into one payment failed message." ], "keywords": [ "payment", "collection", "take", "collect", "journey", "authorization", "request", "hosted", "handoff", "status", "retry", "task", "workflow", "patterns", "ui-ux", "lifecycle", "journeys", "create", "high", "anxiety", "real", "financial", "risk", "cannot", "see", "amount", "reference", "understand", "provider", "handoffs", "lose", "context", "after", "failure", "accidentally", "duplicate", "charges", "while", "uncertain", "flow" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/payment-collection.md", "json": "https://uxpatternsguide.com/agent/patterns/payment-collection.json", "human": "https://uxpatternsguide.com/patterns/payment-collection/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/payment-collection-vs-checkout-vs-payment-card-entry-vs-bank-details.md" ] }, { "id": "permission-denied-state", "name": "Permission denied state", "aliases": [ "access denied", "authorization denied", "you need access", "request access", "insufficient permissions", "forbidden state", "role blocked action", "read-only permission state", "account lacks access" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Authorization and access-boundary state", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users cannot recover from access boundaries when a product hides the cause, confuses authorization with system failure, leaks sensitive resource details, or gives no owner-assisted path.", "useWhen": "A signed-in user lacks permission to view, edit, publish, export, delete, approve, share, administer, or configure a resource.", "avoidWhen": "The user is not signed in and the next step is authentication rather than authorization.", "requiredStates": [ "Whole-object access denied state.", "Action-level denied state for publish, export, delete, invite, approve, manage, or configure actions.", "Read-only state with edit denied but view allowed.", "Request access form with optional reason and requested permission level." ], "commonMisuses": [ "Treating authorization denial as a generic retryable error.", "Showing an empty state for a known restricted object without any request or account path.", "Disabling controls without explaining missing access.", "Leaking private object titles, owners, counts, comments, or paths in a denial page." ], "keywords": [ "permission", "denied", "state", "access", "authorization", "you", "need", "request", "insufficient", "permissions", "forbidden", "role", "blocked", "action", "read-only", "account", "lacks", "feedback", "status", "system", "ui-ux", "access-boundary", "cannot", "recover", "boundaries", "product", "hides", "cause", "confuses", "failure", "leaks", "sensitive", "resource", "details", "gives", "owner-assisted", "path", "present", "explicit", "states" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/permission-denied-state.md", "json": "https://uxpatternsguide.com/agent/patterns/permission-denied-state.json", "human": "https://uxpatternsguide.com/patterns/permission-denied-state/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/block-mute-vs-report-abuse-vs-notification-preferences-vs-follow-subscribe-vs-permission-denied-state-vs-comments.md", "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/notification-preferences-vs-settings-management-vs-notification-center-vs-follow-subscribe.md", "https://uxpatternsguide.com/agent/comparisons/permission-denied-state-vs-error-state-vs-empty-state-vs-disabled-button-no-explanation.md", "https://uxpatternsguide.com/agent/comparisons/permission-prompt-with-no-context-vs-permission-request-vs-location-permission-flow-vs-consent-prompt-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/permission-recovery-vs-permission-denied-state-vs-session-timeout-warning-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/permission-request-vs-consent-prompt-vs-permission-sharing-vs-permission-recovery-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/presence-vs-mentions-vs-notification-center-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/report-abuse-vs-review-queue-vs-comments-vs-security-warning-vs-permission-denied-state-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/security-warning-vs-warning-text-vs-alert-vs-permission-denied-state-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-vs-session-timeout-warning-vs-sign-in-vs-permission-denied-state-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-warning-vs-exit-warning-vs-autosave-form-vs-permission-denied-state.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/version-history-vs-activity-log-vs-timeline-vs-undo.md" ] }, { "id": "permission-prompt-with-no-context", "name": "Permission prompt with no context", "aliases": [ "cold-start permission prompt", "contextless permission request", "permission prompt on launch", "vague permission ask", "unexplained device permission", "premature permission prompt", "permission nag before need", "resource prompt without rationale" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Anti-pattern for platform permission prompts shown without a feature-triggered rationale, fallback, or recovery path", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users are more likely to deny, distrust, or misunderstand permission requests when a product asks before the relevant feature is visible, uses vague benefit copy, requests the wrong resource, bundles multiple resources, or provides no fallback after denial.", "useWhen": "A product currently asks for device, browser, or app permissions before the relevant feature context exists.", "avoidWhen": "The permission is requested after a clear feature-triggering action with resource-specific rationale and fallback; use permission request.", "requiredStates": [ "Cold-start prompt state before the user chooses a relevant feature.", "Vague rationale state where the copy hides the resource, task, or fallback.", "Resource mismatch state where the system prompt asks for a different resource than the UI described.", "Bundled permissions state that asks for multiple resources as one broad setup step." ], "commonMisuses": [ "Requesting permissions on first launch because analytics show users may need the feature later.", "Asking for location, notifications, contacts, and photos as one setup checklist before explaining any task.", "Using vague benefit copy instead of naming the resource and feature.", "Triggering a system prompt from a custom modal close, page load, hover, timeout, or background script." ], "keywords": [ "permission", "prompt", "context", "cold-start", "contextless", "request", "launch", "vague", "ask", "unexplained", "device", "premature", "nag", "before", "need", "resource", "without", "rationale", "trust", "safety", "privacy", "ui-ux", "anti-pattern", "platform", "prompts", "shown", "feature-triggered", "fallback", "recovery", "path", "more", "likely", "deny", "distrust", "misunderstand", "requests", "product", "asks", "relevant", "feature" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/permission-prompt-with-no-context.md", "json": "https://uxpatternsguide.com/agent/patterns/permission-prompt-with-no-context.json", "human": "https://uxpatternsguide.com/patterns/permission-prompt-with-no-context/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/permission-prompt-with-no-context-vs-permission-request-vs-location-permission-flow-vs-consent-prompt-vs-permission-denied-state-vs-notification-preferences.md" ] }, { "id": "permission-recovery", "name": "Permission recovery", "aliases": [ "access recovery", "request access workflow", "recover permissions", "permission request lifecycle", "access request flow", "owner approval recovery", "wrong account access recovery", "role request workflow" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Guided workflow for regaining or routing around missing access", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users cannot complete blocked work when the product stops at access denied, loses the original task, repeats denied requests, hides request ownership or status, or offers request paths that cannot actually change the permission.", "useWhen": "A denied user can request access, switch accounts, ask an admin, join a group, or use a safe fallback to continue.", "avoidWhen": "The product only needs to state that access is denied and no recovery path exists.", "requiredStates": [ "Recovery start state with original blocked task and current account.", "Requested role selection state.", "Reason or justification entry state.", "Owner or admin routing state." ], "commonMisuses": [ "Offering Retry for an unchanged authorization denial.", "Treating request submission as access approval.", "Hiding pending request status and sending duplicate owner notifications.", "Letting users request a role that the target owner cannot grant." ], "keywords": [ "permission", "recovery", "access", "request", "workflow", "recover", "permissions", "lifecycle", "flow", "owner", "approval", "wrong", "account", "role", "error", "prevention", "ui-ux", "guided", "regaining", "routing", "around", "missing", "cannot", "complete", "blocked", "work", "product", "stops", "denied", "loses", "original", "task", "repeats", "requests", "hides", "ownership", "status", "offers", "paths", "actually" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/permission-recovery.md", "json": "https://uxpatternsguide.com/agent/patterns/permission-recovery.json", "human": "https://uxpatternsguide.com/patterns/permission-recovery/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/approval-workflow-vs-review-before-submit-vs-permission-recovery-vs-invite-user.md", "https://uxpatternsguide.com/agent/comparisons/disabled-controls-without-recovery-vs-disabled-button-no-explanation-vs-inline-validation-vs-error-summary-vs-permission-recovery-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/invite-user-vs-account-creation-vs-object-picker-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/permission-recovery-vs-permission-denied-state-vs-session-timeout-warning-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/permission-request-vs-consent-prompt-vs-permission-sharing-vs-permission-recovery-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md" ] }, { "id": "permission-request", "name": "Permission request", "aliases": [ "runtime permission request", "device permission request", "browser permission prompt", "app permission prompt", "location permission", "camera permission", "microphone permission", "photos permission", "notification permission", "permission pre-prompt" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Contextual operating-system or browser permission request for device resources, powerful browser features, private user data, or local capabilities", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users distrust and reject permission prompts when products ask too early, ask for the wrong resource, fail to explain the feature need, provide no fallback after denial, or ignore revoked and limited permission states.", "useWhen": "A feature needs operating-system, browser, or device authorization to access location, camera, microphone, photos, contacts, notifications, Bluetooth, clipboard, motion sensors, storage access, or another powerful feature.", "avoidWhen": "The decision is consent to optional data use rather than access to a device or browser resource.", "requiredStates": [ "Contextual request state tied to the user action that needs the resource.", "Feature-triggered ask state that names the resource, task, benefit, and optional fallback.", "System prompt ready state immediately before invoking the browser or OS permission prompt.", "Grant permission state with enabled feature, saved status, and next step." ], "commonMisuses": [ "Asking for multiple resources at launch before the user has attempted the relevant feature.", "Using vague copy such as improve your experience instead of naming the resource and task.", "Blocking an entire product after denial even though only one optional feature needed the permission.", "Looping the same system prompt or custom prompt after the user declines." ], "keywords": [ "permission", "request", "runtime", "device", "browser", "prompt", "app", "location", "camera", "microphone", "photos", "notification", "pre-prompt", "trust", "safety", "privacy", "ui-ux", "contextual", "operating-system", "resources", "powerful", "features", "private", "data", "local", "capabilities", "distrust", "reject", "prompts", "products", "ask", "too", "early", "wrong", "resource", "fail", "explain", "feature", "need", "provide" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/permission-request.md", "json": "https://uxpatternsguide.com/agent/patterns/permission-request.json", "human": "https://uxpatternsguide.com/patterns/permission-request/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/age-gate-vs-consent-prompt-vs-permission-request-vs-sensitive-data-reveal-vs-privacy-settings-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/camera-capture-vs-file-upload-vs-permission-request-vs-sensitive-data-reveal-vs-full-screen-takeover-vs-drag-and-drop-upload.md", "https://uxpatternsguide.com/agent/comparisons/location-permission-flow-vs-permission-request-vs-map-view-vs-address-entry-vs-privacy-settings-vs-offline-state.md", "https://uxpatternsguide.com/agent/comparisons/permission-prompt-with-no-context-vs-permission-request-vs-location-permission-flow-vs-consent-prompt-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/permission-request-vs-consent-prompt-vs-permission-sharing-vs-permission-recovery-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/privacy-settings-vs-settings-management-vs-preference-center-vs-consent-prompt-vs-permission-request-vs-data-export.md", "https://uxpatternsguide.com/agent/comparisons/qr-scan-vs-camera-capture-vs-permission-request-vs-file-upload-vs-two-factor-authentication-vs-security-warning.md", "https://uxpatternsguide.com/agent/comparisons/sensitive-data-reveal-vs-password-input-vs-input-mask-vs-typed-confirmation-vs-permission-request.md" ] }, { "id": "permission-sharing", "name": "Permission sharing", "aliases": [ "access management", "manage permissions", "permission grant", "role assignment", "access sharing", "share permissions", "permission matrix", "user access management", "group permissions", "effective access" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Durable permission administration for users, groups, roles, inherited access, effective access, and revocation", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Permission administration is risky when products hide group inheritance, effective access, role capabilities, connected-team membership, anonymous access, service credentials, or revoke outcomes behind a simple share or remove control.", "useWhen": "Owners or admins need to manage durable access to spaces, sites, repositories, projects, folders, datasets, boards, environments, or sensitive objects.", "avoidWhen": "The task is quick one-object sharing with a link or a few recipients and no broader permission model.", "requiredStates": [ "Default access list state with users, groups, guests, anonymous access, roles, and effective access.", "Direct grant, inherited grant, group membership, connected-team membership, service-account, deploy-key, and anonymous-access states.", "Add user or group state with entity lookup, duplicate detection, role selection, and policy checks.", "Role change state with before and after capabilities." ], "commonMisuses": [ "Showing only direct users while group or inherited access remains active.", "Using a share dialog as the only permission administration surface.", "Hiding what a role can actually do until after it is assigned.", "Letting users remove a visible row and believe access is gone when effective access still exists." ], "keywords": [ "permission", "sharing", "access", "management", "manage", "permissions", "grant", "role", "assignment", "share", "matrix", "group", "effective", "trust", "safety", "privacy", "ui-ux", "durable", "administration", "groups", "roles", "inherited", "revocation", "risky", "products", "hide", "inheritance", "capabilities", "connected-team", "membership", "anonymous", "service", "credentials", "revoke", "outcomes", "behind", "simple", "remove", "control", "provide" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/permission-sharing.md", "json": "https://uxpatternsguide.com/agent/patterns/permission-sharing.json", "human": "https://uxpatternsguide.com/patterns/permission-sharing/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/consent-prompt-vs-cookie-banner-vs-preference-center-vs-notification-preferences-vs-permission-sharing-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/permission-request-vs-consent-prompt-vs-permission-sharing-vs-permission-recovery-vs-permission-denied-state-vs-notification-preferences.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md" ] }, { "id": "phase-beta-banner", "name": "Phase / beta banner", "aliases": [ "phase banner", "beta banner", "alpha banner", "service phase banner", "service maturity banner", "prototype banner", "feedback banner" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Service phase and feedback marker", "maturity": "standard", "platforms": [ "web", "mobile" ], "problem": "Users need to know when a service is still being developed and teams need phase-specific feedback, but generic banners, alerts, or badges either overstate urgency, hide service maturity, or detach feedback from the user's current journey.", "useWhen": "A service is in alpha, private beta, public beta, or another explicit pre-live phase.", "avoidWhen": "The service is live and no longer needs a pre-live phase label.", "requiredStates": [ "No phase banner state for live or phase-not-applicable services.", "Alpha state for limited prototype or research-only service.", "Private beta state for invited users and controlled rollout.", "Public beta state for wider access before live." ], "commonMisuses": [ "Using Beta as a decorative badge for a feature rather than the service phase.", "Leaving a stale Beta banner on a live service.", "Showing an alpha service to the public as if it were production ready.", "Putting phase copy in a sticky overlay, modal, toast, notification banner, or footer-only link." ], "keywords": [ "phase", "beta", "banner", "alpha", "service", "maturity", "prototype", "feedback", "status", "system", "state", "ui-ux", "marker", "need", "know", "still", "being", "developed", "teams", "phase-specific", "but", "generic", "banners", "alerts", "badges", "either", "overstate", "urgency", "hide", "detach", "current", "journey", "show", "service-wide", "correct", "tag", "concise", "copy", "link", "preserves" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/phase-beta-banner.md", "json": "https://uxpatternsguide.com/agent/patterns/phase-beta-banner.json", "human": "https://uxpatternsguide.com/patterns/phase-beta-banner/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/model-update-notice-vs-notification-banner-vs-warning-text-vs-phase-beta-banner-vs-confidence-uncertainty-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/phase-beta-banner-vs-banner-vs-notification-banner-vs-site-alert.md" ] }, { "id": "phone-number-entry", "name": "Phone number entry", "aliases": [ "telephone number field", "phone input", "mobile number field", "contact phone field", "telephone contact details", "SMS-capable phone field", "callable number entry" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Callable telephone contact capture field", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Phone numbers are contact identifiers with regional formats, leading zeros, plus signs, extensions, SMS capability limits, shared-device privacy risks, and accessibility constraints, so treating them as simple numbers can block contact or harm users.", "useWhen": "The product must capture a phone number for calls, texts, support callbacks, appointment changes, recovery, delivery coordination, verification, or contact records.", "avoidWhen": "The product only needs a name, label, username, reference, or other short text.", "requiredStates": [ "Initial state with label naming the needed number type, purpose hint, type tel, autocomplete tel, and contact-choice wording.", "Focused state with telephone keyboard support and normal typing, paste, selection, undo, and correction behavior.", "Familiar-format state preserving spaces, parentheses, hyphens, leading zero, plus sign, and country code in the displayed value.", "International number state accepting plus and country code without a domestic mask." ], "commonMisuses": [ "Using type number and losing leading zeros or plus signs.", "Hard-coding a domestic mask that blocks international numbers or extensions.", "Collecting phone numbers without a genuine service need.", "Failing to explain why the organization may call or text." ], "keywords": [ "phone", "number", "entry", "telephone", "field", "input", "mobile", "contact", "details", "sms-capable", "callable", "data", "ui-ux", "capture", "numbers", "identifiers", "regional", "formats", "leading", "zeros", "plus", "signs", "extensions", "sms", "capability", "limits", "shared-device", "privacy", "risks", "accessibility", "constraints", "treating", "them", "simple", "block", "harm", "telephone-specific", "states", "why", "what" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/phone-number-entry.md", "json": "https://uxpatternsguide.com/agent/patterns/phone-number-entry.json", "human": "https://uxpatternsguide.com/patterns/phone-number-entry/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/confirm-phone-vs-phone-number-entry-vs-confirm-email-vs-two-factor-authentication.md", "https://uxpatternsguide.com/agent/comparisons/phone-number-entry-vs-text-input-vs-input-mask-vs-inline-validation-vs-error-summary.md" ] }, { "id": "pinned-items", "name": "Pinned items", "aliases": [ "pin to top", "pinned files", "pinned repositories", "pinned shortcuts", "featured items", "highlighted items", "sticky items", "quick access pins" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "Deliberate user or owner-selected items kept in a stable prominent position", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users repeatedly need a few important items to stay easy to reach or visible to an audience, but automatic recency, broad favorites, and search results move those items around or hide whether prominence is personal, shared, or public.", "useWhen": "Users need stable quick access to a small set of known high-priority objects.", "avoidWhen": "The item list should be automatic history, popularity, recommendation, or search ranking.", "requiredStates": [ "No pinned items state with a path to pin an eligible item.", "Pinned section with item identity, type, scope, position, and unpin controls.", "Pin available, pinned, unpin pending, unpinned, reorder, and replace-at-limit states.", "Personal pin, shared pin, public profile pin, inherited pin, and policy-locked pin states." ], "commonMisuses": [ "Using a pin icon as a favorite without changing placement or explaining selected state.", "Mixing pinned items with automatic recents, favorites, saved searches, subscriptions, and recommendations in one ambiguous list.", "Letting unpin delete or hide the underlying item.", "Allowing unlimited pins until the pinned section becomes another noisy list." ], "keywords": [ "pinned", "items", "pin", "top", "files", "repositories", "shortcuts", "featured", "highlighted", "sticky", "quick", "access", "pins", "personalization", "preference", "ui-ux", "deliberate", "owner-selected", "kept", "stable", "prominent", "position", "repeatedly", "need", "few", "important", "stay", "easy", "reach", "visible", "audience", "but", "automatic", "recency", "broad", "favorites", "search", "results", "move", "those" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/pinned-items.md", "json": "https://uxpatternsguide.com/agent/patterns/pinned-items.json", "human": "https://uxpatternsguide.com/patterns/pinned-items/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/pinned-items-vs-favorites-vs-recently-viewed-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/recently-used-vs-recently-viewed-vs-favorites-vs-pinned-items.md" ] }, { "id": "popover", "name": "Popover", "aliases": [ "contextual popover", "anchored popover", "floating panel", "callout", "teaching popover", "light-dismiss overlay" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Small anchored contextual overlay", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need extra local context or a small set of nearby controls, but interrupting the page with a modal or hiding the content behind hover-only hints makes the task slower and less reliable.", "useWhen": "A local control needs brief explanatory content or light editing while page context remains visible.", "avoidWhen": "The content is essential instruction that must remain visible for task completion.", "requiredStates": [ "Closed trigger state with visible label, icon name, or field relationship.", "Open anchored state with position tied to the trigger, selected text, field, or object.", "Collision state where the surface flips, shifts, or changes side before it clips or disconnects.", "Interactive focus state when controls inside the popover are reachable after the trigger in the keyboard order." ], "commonMisuses": [ "Using a popover as a hidden modal, drawer, sheet, command menu, or full workflow.", "Showing required instructions only in a hover-only layer that cannot be opened or kept open on touch and keyboard.", "Letting the popover appear detached from its trigger after scrolling, collision, or portal rendering.", "Putting long forms or unsaved edits in a surface that can light-dismiss without review." ], "keywords": [ "popover", "contextual", "anchored", "floating", "panel", "callout", "teaching", "light-dismiss", "overlay", "disclosure", "attention", "management", "ui-ux", "small", "need", "extra", "local", "context", "set", "nearby", "controls", "but", "interrupting", "page", "modal", "hiding", "content", "behind", "hover-only", "hints", "makes", "task", "slower", "less", "reliable", "open", "clear", "trigger", "keep", "brief" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/popover.md", "json": "https://uxpatternsguide.com/agent/patterns/popover.json", "human": "https://uxpatternsguide.com/patterns/popover/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/context-menu-vs-action-menu-vs-menu-button-vs-popover.md", "https://uxpatternsguide.com/agent/comparisons/hover-card-vs-tooltip-vs-popover-vs-disclosure-details.md", "https://uxpatternsguide.com/agent/comparisons/long-press-vs-touch-gesture-vs-context-menu-vs-tooltip-vs-popover-vs-action-menu.md", "https://uxpatternsguide.com/agent/comparisons/modal-for-nonblocking-content-vs-modal-dialog-vs-popover-vs-drawer-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/popover-vs-menu-button-vs-modal-dialog-vs-sheet.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/tooltip-vs-popover-vs-inline-message-vs-icon-only-ambiguous-action.md", "https://uxpatternsguide.com/agent/comparisons/tooltip-only-required-information-vs-tooltip-vs-inline-message-vs-disclosure-details-vs-popover.md" ] }, { "id": "preference-center", "name": "Preference center", "aliases": [ "preferences center", "manage preferences", "communication preferences", "marketing preferences", "consent preference center", "privacy preference center", "subscription preference center", "email preference center", "interest center", "topic preferences", "contact preferences", "data preferences" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "Persistent hub for communication, consent, topic, privacy, language, and personalization choices", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Communication, consent, personalization, topic, language, and privacy choices become untrustworthy when they are scattered across email footers, cookie banners, account settings, notification pages, CRM records, and policy-managed systems.", "useWhen": "Users need to revisit and change communication, consent, topic, personalization, privacy, channel, language, or data-sharing choices.", "avoidWhen": "The product only needs a small app setting unrelated to communications, consent, or personalization.", "requiredStates": [ "Overview with preference categories and current effective status", "Communication channel opt-in and opt-out state for email, SMS, push, or in-app contact", "Topic or interest preference state", "Notification delivery summary state" ], "commonMisuses": [ "Using one master preference switch for communication, privacy, cookies, topics, and required messages.", "Letting marketing opt-out imply that security, billing, transactional, or legal notices are disabled.", "Collecting cookie or analytics consent once and failing to provide a durable place to review or withdraw it.", "Scattering email, SMS, push, topics, language, privacy, and data sharing across unrelated pages with contradictory labels." ], "keywords": [ "preference", "center", "preferences", "manage", "communication", "marketing", "consent", "privacy", "subscription", "email", "interest", "topic", "contact", "data", "personalization", "ui-ux", "persistent", "hub", "language", "choices", "become", "untrustworthy", "they", "scattered", "across", "footers", "cookie", "banners", "account", "settings", "notification", "pages", "crm", "records", "policy-managed", "systems", "provide", "inventories", "user-facing", "categories" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/preference-center.md", "json": "https://uxpatternsguide.com/agent/patterns/preference-center.json", "human": "https://uxpatternsguide.com/patterns/preference-center/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/adaptive-defaults-vs-settings-management-vs-preference-center-vs-recommendations.md", "https://uxpatternsguide.com/agent/comparisons/consent-prompt-vs-cookie-banner-vs-preference-center-vs-notification-preferences-vs-permission-sharing-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/cookie-consent-vs-cookie-banner-vs-consent-prompt-vs-preference-center-vs-privacy-settings-vs-legal-acceptance.md", "https://uxpatternsguide.com/agent/comparisons/custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-preference-center.md", "https://uxpatternsguide.com/agent/comparisons/dark-pattern-consent-vs-consent-prompt-vs-cookie-consent-vs-cookie-banner-vs-legal-acceptance-vs-preference-center.md", "https://uxpatternsguide.com/agent/comparisons/language-selector-vs-settings-management-vs-preference-center-vs-adaptive-defaults.md", "https://uxpatternsguide.com/agent/comparisons/preference-center-vs-settings-management-vs-notification-preferences-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/privacy-settings-vs-settings-management-vs-preference-center-vs-consent-prompt-vs-permission-request-vs-data-export.md", "https://uxpatternsguide.com/agent/comparisons/settings-page-vs-settings-management-vs-side-navigation-vs-tabs.md" ] }, { "id": "presence", "name": "Presence", "aliases": [ "availability indicator", "online status", "active status", "away status", "busy status", "do not disturb status", "last seen", "co-presence", "viewer presence", "presence badge" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Person or group availability signal with status label, recency, source, privacy boundary, and action-aware affordances", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Collaboration becomes disruptive or misleading when availability is represented as an unexplained dot, stale activity, hidden privacy state, or surveillance-like signal instead of a contextual, fresh, labelled, and action-aware presence indicator.", "useWhen": "Users need to understand current or recent availability before messaging, calling, assigning, routing, or joining.", "avoidWhen": "The product needs a durable audit trail or compliance record.", "requiredStates": [ "Available, active, away, busy, in a meeting, in a call, presenting, focusing, do not disturb, out of office, offline, unknown, and hidden states where supported.", "Manual status, automatic status, status duration, status message, working-hours state, paused-notification state, and calendar-derived state.", "Fresh, stale, reconnecting, delayed, last-updated, last-seen, and source-unavailable states.", "Single-person presence, group summary, co-viewer list, anonymous viewer, external viewer hidden, same-domain activity visible, and privacy-restricted states." ], "commonMisuses": [ "Using only color dots without text labels, source, or recency.", "Treating presence as employee monitoring or audit evidence.", "Leaving stale active states on screen after disconnects or sync failures.", "Ignoring do-not-disturb, busy, call, meeting, or priority rules when offering interruptive actions." ], "keywords": [ "presence", "availability", "indicator", "online", "status", "active", "away", "busy", "disturb", "last", "seen", "co-presence", "viewer", "badge", "collaboration", "social", "interaction", "ui-ux", "person", "group", "signal", "label", "recency", "source", "privacy", "boundary", "action-aware", "affordances", "becomes", "disruptive", "misleading", "represented", "unexplained", "dot", "stale", "activity", "hidden", "state", "surveillance-like", "instead" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/presence.md", "json": "https://uxpatternsguide.com/agent/patterns/presence.json", "human": "https://uxpatternsguide.com/patterns/presence/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/presence-vs-mentions-vs-notification-center-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/reactions-vs-comments-vs-mentions-vs-activity-feed.md" ] }, { "id": "preview-panel", "name": "Preview panel", "aliases": [ "preview pane", "file preview pane", "document preview panel", "media preview panel", "reading pane", "quick preview" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Persistent rendered-content preview pane", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Content-heavy workspaces often list many documents, messages, images, videos, or attachments, and users need to inspect the selected content without losing the surrounding collection or opening a full viewer for every item.", "useWhen": "Users repeatedly inspect files, messages, PDFs, images, videos, audio, invoices, contracts, designs, or attachments from a list or grid.", "avoidWhen": "Only structured metadata or activity is needed.", "requiredStates": [ "No selection state that asks users to choose a file, message, or media item.", "Selected content state with source row highlighted and preview heading naming the same item.", "Loading preview state that hides or clearly labels old content as no longer current.", "Rendered document state with page, zoom, fit, and open-full-preview controls when the type supports them." ], "commonMisuses": [ "Showing metadata in a preview panel when users need the document, message, or media body.", "Leaving stale rendered content visible after selection changes or preview loading fails.", "Rendering risky downloaded or remote content without a blocked state or warning.", "Using a preview panel for long editing, annotation, or reading workflows that need a full route." ], "keywords": [ "preview", "panel", "pane", "file", "document", "media", "reading", "quick", "disclosure", "attention", "management", "ui-ux", "persistent", "rendered-content", "content-heavy", "workspaces", "often", "list", "many", "documents", "messages", "images", "videos", "attachments", "need", "inspect", "selected", "content", "without", "losing", "surrounding", "collection", "opening", "full", "viewer", "every", "item", "provide", "tied", "current" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/preview-panel.md", "json": "https://uxpatternsguide.com/agent/patterns/preview-panel.json", "human": "https://uxpatternsguide.com/patterns/preview-panel/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/preview-panel-vs-details-panel-vs-hover-card-vs-drawer.md" ] }, { "id": "privacy-settings", "name": "Privacy settings", "aliases": [ "privacy controls", "account privacy settings", "privacy dashboard settings", "data privacy settings", "profile visibility settings", "activity controls", "app privacy permissions", "data sharing settings", "ad personalization settings", "location privacy settings" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Durable privacy-control surface for account, product, device, app-access, activity, visibility, and sharing settings", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Privacy controls become untrustworthy when users cannot find them, cannot see current effective values, cannot distinguish account, device, app, product, consent, cookie, or export boundaries, or receive success states that hide managed policies, unavailable data, legal restrictions, or sync delays.", "useWhen": "Users need ongoing control over personal data collection, saved activity, visibility, app access, device permissions, connected services, data sharing, or personalization.", "avoidWhen": "The task is a first-time opt-in to one optional purpose; use consent prompt.", "requiredStates": [ "Privacy settings overview with categories and current effective values.", "Saved activity, search history, browsing history, voice, media, or app/service activity controls state.", "Profile visibility and people-sharing state.", "Ad personalization, recommendations, diagnostics, or product improvement data-use state." ], "commonMisuses": [ "Replacing privacy settings with a privacy policy link or legal notice.", "Using one master privacy switch for unrelated collection, sharing, visibility, permissions, personalization, and retention controls.", "Showing a setting as enabled while the platform permission, organization policy, or source-of-truth system disagrees.", "Failing to explain why data cannot be displayed, cleared, changed, or exported." ], "keywords": [ "privacy", "settings", "controls", "account", "dashboard", "data", "profile", "visibility", "activity", "app", "permissions", "sharing", "personalization", "location", "trust", "safety", "ui-ux", "durable", "privacy-control", "surface", "product", "device", "app-access", "become", "untrustworthy", "cannot", "find", "them", "see", "current", "effective", "values", "distinguish", "consent", "cookie", "export", "boundaries", "receive", "success", "states" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/privacy-settings.md", "json": "https://uxpatternsguide.com/agent/patterns/privacy-settings.json", "human": "https://uxpatternsguide.com/patterns/privacy-settings/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/age-gate-vs-consent-prompt-vs-permission-request-vs-sensitive-data-reveal-vs-privacy-settings-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/cookie-consent-vs-cookie-banner-vs-consent-prompt-vs-preference-center-vs-privacy-settings-vs-legal-acceptance.md", "https://uxpatternsguide.com/agent/comparisons/exit-this-page-quickly-vs-security-warning-vs-sensitive-data-reveal-vs-session-timeout-vs-privacy-settings-vs-back-link.md", "https://uxpatternsguide.com/agent/comparisons/hidden-destructive-account-deletion-vs-delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-privacy-settings.md", "https://uxpatternsguide.com/agent/comparisons/location-permission-flow-vs-permission-request-vs-map-view-vs-address-entry-vs-privacy-settings-vs-offline-state.md", "https://uxpatternsguide.com/agent/comparisons/privacy-settings-vs-settings-management-vs-preference-center-vs-consent-prompt-vs-permission-request-vs-data-export.md" ] }, { "id": "process-list", "name": "Process list / step-by-step navigation", "aliases": [ "process list", "step-by-step navigation", "step by step journey", "end-to-end journey guide", "instructional step list", "process steps" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "End-to-end ordered journey guidance with linked tasks", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users trying to complete a broad journey across several pieces of guidance, transactions, or offline actions need a coherent ordered map without mistaking that map for the current form step or page hierarchy.", "useWhen": "An end-to-end journey spans several pieces of guidance, service links, departments, or channels.", "avoidWhen": "The user is inside a live transactional form or wizard.", "requiredStates": [ "Standalone process overview with introduction and ordered high-level steps.", "Collapsed step state showing the step number and action heading.", "Expanded step state showing task links, conditions, costs, or supporting content.", "Contextual page state with a link back to the standalone process overview." ], "commonMisuses": [ "Using a process list as a transactional progress indicator.", "Using it as side navigation for a website section.", "Using it as a table of contents for headings on the same page.", "Numbering a set of unordered options or related links." ], "keywords": [ "process", "list", "step-by-step", "navigation", "step", "journey", "end-to-end", "guide", "instructional", "steps", "wayfinding", "ui-ux", "ordered", "guidance", "linked", "tasks", "trying", "complete", "broad", "across", "several", "pieces", "transactions", "offline", "actions", "need", "coherent", "map", "without", "mistaking", "current", "form", "page", "hierarchy", "provide", "numbered", "expandable", "task", "links", "branch" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/process-list.md", "json": "https://uxpatternsguide.com/agent/patterns/process-list.json", "human": "https://uxpatternsguide.com/patterns/process-list/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/complete-multiple-tasks-vs-step-navigation-vs-process-list-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/process-list-vs-step-navigation-vs-in-page-anchor-navigation.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md", "https://uxpatternsguide.com/agent/comparisons/timeline-vs-feed-vs-process-list-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/wizard-vs-multi-step-form-vs-step-navigation-vs-process-list.md" ] }, { "id": "profile-setup", "name": "Profile setup", "aliases": [ "complete profile", "profile completion", "edit profile setup", "member profile setup", "profile readiness", "profile details setup", "profile enrichment", "complete your profile" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Existing-profile readiness and enrichment flow", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "After an account or initial profile exists, products often pressure users to fill every profile field, but unclear visibility, managed-field conflicts, and mandatory optional details can expose personal data or delay the user's real task.", "useWhen": "Users already have an account or profile and need guided help to complete, review, enrich, or update it.", "avoidWhen": "The user is creating their first profile identity rather than completing an existing profile.", "requiredStates": [ "Current profile preview with existing values", "Missing required field state", "Recommended but skippable field state", "Optional field intentionally blank state" ], "commonMisuses": [ "Calling every optional field required profile completion.", "Blocking the main product until users add photos, biographies, birthdays, phone numbers, or social links.", "Publishing setup fields without visibility labels or preview.", "Letting users edit synced fields that will be overwritten later." ], "keywords": [ "profile", "setup", "complete", "completion", "edit", "member", "readiness", "details", "enrichment", "your", "task", "workflow", "patterns", "ui-ux", "existing-profile", "flow", "after", "account", "initial", "exists", "products", "often", "pressure", "fill", "every", "field", "but", "unclear", "visibility", "managed-field", "conflicts", "mandatory", "optional", "expose", "personal", "data", "delay", "real", "provide", "guided" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/profile-setup.md", "json": "https://uxpatternsguide.com/agent/patterns/profile-setup.json", "human": "https://uxpatternsguide.com/patterns/profile-setup/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/invite-user-vs-account-creation-vs-object-picker-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/profile-setup-vs-create-user-profile-vs-onboarding-vs-account-creation.md", "https://uxpatternsguide.com/agent/comparisons/settings-management-vs-complete-complex-form-vs-toggle-switch-vs-progressive-disclosure.md", "https://uxpatternsguide.com/agent/comparisons/settings-page-vs-settings-management-vs-side-navigation-vs-tabs.md" ] }, { "id": "progress-bar", "name": "Progress bar", "aliases": [ "linear progress", "determinate progress", "upload progress", "download progress", "processing progress", "completion bar", "job progress" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Measurable system-operation progress indicator", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users waiting for uploads, downloads, exports, imports, scans, saves, or batch processing need trustworthy progress, but dishonest or poorly scoped bars can overpromise completion, hide failure, or make users abandon work too early.", "useWhen": "A system operation has a measurable total or bounded progress value.", "avoidWhen": "Progress cannot be measured or would be guessed.", "requiredStates": [ "Idle state before the operation starts.", "Active determinate state with label, value, and helper text.", "Indeterminate handoff state only while measurement is not yet available.", "Paused or waiting state when the system needs network, permission, queue, or user action." ], "commonMisuses": [ "Fabricating progress values just to make users feel movement.", "Letting a bar reach 100% before server processing, virus scanning, validation, or commit is done.", "Using one page-level bar for several unrelated operations.", "Resetting a bar backward without explaining that a new attempt or stage began." ], "keywords": [ "progress", "bar", "linear", "determinate", "upload", "download", "processing", "completion", "job", "feedback", "status", "system", "state", "ui-ux", "measurable", "system-operation", "indicator", "waiting", "uploads", "downloads", "exports", "imports", "scans", "saves", "batch", "need", "trustworthy", "but", "dishonest", "poorly", "scoped", "bars", "overpromise", "hide", "failure", "make", "abandon", "work", "too", "early" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/progress-bar.md", "json": "https://uxpatternsguide.com/agent/patterns/progress-bar.json", "human": "https://uxpatternsguide.com/patterns/progress-bar/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/agent-progress-trace-vs-agent-plan-preview-vs-streaming-response-vs-activity-log-vs-progress-bar-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/haptic-feedback-vs-touch-gesture-vs-toast-notification-vs-error-state-vs-confirmation-dialog-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/meter-vs-progress-bar-vs-slider-vs-spinbutton.md", "https://uxpatternsguide.com/agent/comparisons/offline-state-vs-error-state-vs-loading-spinner-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/progress-bar-vs-loading-spinner-vs-loading-skeleton-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/step-progress-vs-step-navigation-vs-progress-bar-vs-meter.md", "https://uxpatternsguide.com/agent/comparisons/streaming-response-vs-chat-interface-vs-progress-bar-vs-loading-spinner-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/sync-state-vs-offline-state-vs-progress-bar-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md", "https://uxpatternsguide.com/agent/comparisons/wearable-glance-vs-notification-center-vs-summary-box-vs-dashboard-layout-vs-progress-bar-vs-notification-preferences.md" ] }, { "id": "progressive-disclosure", "name": "Progressive disclosure", "aliases": [ "staged disclosure", "advanced options reveal", "show advanced settings", "progressive reveal", "expert options", "layered complexity" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Staged reveal of advanced or secondary task complexity", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Complex products often contain advanced, rare, expert, diagnostic, or risky controls that clutter the default path for most users, yet hiding them poorly can make important state, consequences, or recovery paths undiscoverable.", "useWhen": "The default task has a safe recommended path for most users.", "avoidWhen": "The hidden content is required for most users to make the right decision.", "requiredStates": [ "Simple default state with essential controls, visible primary action, and recommended defaults.", "Advanced closed state with a specific trigger that names what is hidden and whether any hidden values differ from defaults.", "Advanced open state with grouped secondary controls, context copy, and reset or restore recommended settings.", "Changed advanced state with visible summary near the primary action." ], "commonMisuses": [ "Hiding required fields or primary actions to make a page appear shorter.", "Using vague More or Advanced labels that do not tell users what kind of control is hidden.", "Hiding changed advanced settings after collapse with no summary near the final action.", "Treating progressive disclosure as a substitute for information architecture, section headings, or a wizard." ], "keywords": [ "progressive", "disclosure", "staged", "advanced", "options", "reveal", "show", "settings", "expert", "layered", "complexity", "attention", "management", "ui-ux", "secondary", "task", "complex", "products", "often", "contain", "rare", "diagnostic", "risky", "controls", "clutter", "default", "path", "most", "yet", "hiding", "them", "poorly", "make", "important", "state", "consequences", "recovery", "paths", "undiscoverable", "stage" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/progressive-disclosure.md", "json": "https://uxpatternsguide.com/agent/patterns/progressive-disclosure.json", "human": "https://uxpatternsguide.com/patterns/progressive-disclosure/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/onboarding-vs-empty-state-vs-wizard-vs-progressive-disclosure.md", "https://uxpatternsguide.com/agent/comparisons/progressive-disclosure-vs-disclosure-details-vs-accordion-vs-wizard.md", "https://uxpatternsguide.com/agent/comparisons/settings-management-vs-complete-complex-form-vs-toggle-switch-vs-progressive-disclosure.md" ] }, { "id": "prompt-box", "name": "Prompt box", "aliases": [ "AI prompt input", "prompt composer", "AI input box", "assistant input", "model request field", "prompt editor", "natural language command field", "copilot input", "AI request composer", "prompt entry" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Primary editable input surface for composing and submitting an AI request", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI features often invite open-ended requests, but a vague or under-instrumented prompt field hides what context, sources, tools, permissions, limits, and side effects will be included, causing accidental sends, weak outputs, privacy mistakes, and confusion with search or command execution.", "useWhen": "Users must write or revise an AI request before generation, analysis, transformation, or automation begins.", "avoidWhen": "The task is better expressed as a fixed form, button, or command with known parameters.", "requiredStates": [ "Empty prompt state with label, helpful instruction, and no implied hidden submission.", "Typing state with expandable multi-line draft, send affordance, newline behavior, and character or token boundary feedback.", "Context-attached state with selected text, current page, file, source, or tool chips.", "Unavailable-context, unsupported-file, over-limit, permission-limited, blocked-safety, and offline states with repair paths." ], "commonMisuses": [ "Showing Ask anything as the only instruction while hiding what sources and tools the model can use.", "Auto-sending prompt suggestions, pasted content, or empty-field hint wording.", "Using a prompt box for deterministic commands that should be explicit buttons or command-palette actions.", "Styling a prompt box like search and implying generated answers are exact retrieved results." ], "keywords": [ "prompt", "box", "input", "composer", "assistant", "model", "request", "field", "editor", "natural", "language", "command", "copilot", "entry", "automation", "ui-ux", "primary", "editable", "surface", "composing", "submitting", "features", "often", "invite", "open-ended", "requests", "but", "vague", "under-instrumented", "hides", "what", "context", "sources", "tools", "permissions", "limits", "side", "effects", "will", "included" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/prompt-box.md", "json": "https://uxpatternsguide.com/agent/patterns/prompt-box.json", "human": "https://uxpatternsguide.com/patterns/prompt-box/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/chat-interface-vs-prompt-box-vs-threaded-discussion-vs-comments-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/editable-ai-output-vs-inline-edit-vs-prompt-box-vs-streaming-response-vs-citation-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/prompt-box-vs-prompt-suggestions-vs-command-palette-vs-search-suggestions-vs-textarea.md", "https://uxpatternsguide.com/agent/comparisons/regenerate-retry-vs-retry-vs-chat-interface-vs-streaming-response-vs-prompt-box-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/scope-clarification-vs-prompt-box-vs-search-scope-selector-vs-agent-plan-preview-vs-human-approval-gate-vs-chat-interface.md", "https://uxpatternsguide.com/agent/comparisons/voice-command-vs-keyboard-shortcut-vs-command-palette-vs-prompt-box-vs-text-input-vs-touch-gesture.md" ] }, { "id": "prompt-suggestions", "name": "Prompt suggestions", "aliases": [ "suggested prompts", "starter prompts", "prompt chips", "prompt gallery" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "AI prompt starter surface", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Users often do not know what an AI surface can do, what context it has, or how to write a useful request without over-trusting the system.", "useWhen": "The AI surface supports open-ended requests and users need examples of useful, supported tasks.", "avoidWhen": "The user must provide fixed required fields that are clearer as a form.", "requiredStates": [ "Initial state with contextual prompt starters and capability or source boundary notes.", "Selected suggestion state where the draft prompt is visible, editable, and not yet sent.", "Edited draft state after the user changes the suggested prompt.", "Submitted state that shows the exact prompt sent and preserves recovery if the output is weak." ], "commonMisuses": [ "Showing generic chips such as summarize, improve, or make better with no object-specific context.", "Auto-submitting a suggested prompt before the user can review or edit it.", "Suggesting work the AI cannot ground, verify, or perform with the current permissions.", "Styling suggestions like final answers or mandatory next steps." ], "keywords": [ "prompt", "suggestions", "suggested", "prompts", "starter", "chips", "gallery", "automation", "ui-ux", "surface", "often", "know", "what", "context", "how", "write", "useful", "request", "without", "over-trusting", "system", "offer", "contextual", "truthful", "starters", "reveal", "tasks", "load", "editable", "field", "require", "intentionally", "send", "final", "render", "cards", "task", "label", "text", "capability" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/prompt-suggestions.md", "json": "https://uxpatternsguide.com/agent/patterns/prompt-suggestions.json", "human": "https://uxpatternsguide.com/patterns/prompt-suggestions/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/prompt-box-vs-prompt-suggestions-vs-command-palette-vs-search-suggestions-vs-textarea.md", "https://uxpatternsguide.com/agent/comparisons/prompt-suggestions-vs-search-suggestions-vs-command-palette.md" ] }, { "id": "publish-workflow", "name": "Publish workflow", "aliases": [ "publishing workflow", "publish flow", "go live workflow", "release content", "content publishing", "scheduled publishing", "publish to production", "site publish", "channel publishing", "unpublish workflow" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Workflow for moving edited material to live, staged, scheduled, or retired state", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Publishing is risky when products hide whether work is saved, staged, scheduled, public, or retired; which target will change; whether validation passed; who has permission; what dependencies will publish; and how to verify or undo a bad release.", "useWhen": "Users need to make content, products, pages, releases, site changes, campaigns, or configuration visible to an audience.", "avoidWhen": "The user is only saving unfinished work.", "requiredStates": [ "Draft or edited but unpublished state", "Preview state with target URL or destination", "Validation pending state", "Validation blocked state" ], "commonMisuses": [ "Using Save, Submit, Schedule, and Publish interchangeably.", "Hiding whether the target is staging, production, one page, whole site, one channel, all channels, or a release bundle.", "Allowing scheduled publishing without validation or later failure reporting.", "Publishing stale draft content over a newer live version." ], "keywords": [ "publish", "workflow", "publishing", "flow", "live", "release", "content", "scheduled", "production", "site", "channel", "unpublish", "task", "patterns", "ui-ux", "moving", "edited", "material", "staged", "retired", "state", "risky", "products", "hide", "whether", "work", "saved", "public", "which", "target", "will", "change", "validation", "passed", "who", "permission", "what", "dependencies", "how", "verify" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/publish-workflow.md", "json": "https://uxpatternsguide.com/agent/patterns/publish-workflow.json", "human": "https://uxpatternsguide.com/patterns/publish-workflow/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/publish-workflow-vs-approval-workflow-vs-review-queue-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/version-history-vs-activity-log-vs-timeline-vs-undo.md" ] }, { "id": "pull-to-refresh", "name": "Pull to refresh", "aliases": [ "swipe to refresh", "pull down to refresh", "drag down refresh", "overscroll refresh", "refresh gesture", "mobile refresh gesture" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Top-of-scroll vertical drag gesture that refreshes the current data set", "maturity": "standard", "platforms": [ "mobile", "web", "desktop" ], "problem": "Users on scrollable, freshness-sensitive surfaces need a lightweight way to check for newer data, but a hidden vertical gesture can conflict with scrolling, nested views, offline state, duplicate requests, and accessibility unless the refresh contract is explicit.", "useWhen": "A top-of-list gesture is a platform-expected shortcut for checking freshness on a scrollable data surface.", "avoidWhen": "The surface is not scrollable or does not have a clear top boundary.", "requiredStates": [ "Idle state with current content visible and last updated timestamp when freshness matters.", "Scrolled-not-at-top state where upward scroll does not arm refresh.", "At-top armed state that can begin measuring downward pull distance.", "Pulling-under-threshold state with progress feedback and no request started." ], "commonMisuses": [ "Making pull-to-refresh the only way to update the data.", "Triggering refresh from anywhere in the list instead of only from the top of the intended scroll container.", "Providing no pull distance, threshold, release-to-refresh, refreshing, success, failure, or last-updated feedback.", "Clearing existing content during refresh and making the surface feel like a full page reload." ], "keywords": [ "pull", "refresh", "swipe", "down", "drag", "overscroll", "gesture", "mobile", "cross-device", "physical", "interaction", "ui-ux", "top-of-scroll", "vertical", "refreshes", "current", "data", "set", "scrollable", "freshness-sensitive", "surfaces", "need", "lightweight", "way", "check", "newer", "but", "hidden", "conflict", "scrolling", "nested", "views", "offline", "state", "duplicate", "requests", "accessibility", "unless", "contract", "explicit" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/pull-to-refresh.md", "json": "https://uxpatternsguide.com/agent/patterns/pull-to-refresh.json", "human": "https://uxpatternsguide.com/patterns/pull-to-refresh/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/offline-mobile-retry-vs-offline-state-vs-retry-vs-sync-state-vs-pull-to-refresh-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/pull-to-refresh-vs-touch-gesture-vs-feed-vs-offline-state-vs-loading-spinner-vs-retry.md" ] }, { "id": "qr-scan", "name": "QR scan", "aliases": [ "qr code scan", "scan qr code", "barcode scan", "code scanner", "scan from camera", "scan from photo", "qr reader", "barcode reader" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Camera or image-based QR detection, decode, validation, and action preview flow", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "QR codes can speed entry, pairing, tickets, payments, device setup, warehouse work, Wi-Fi sharing, and authenticator enrollment, but the scan is camera-dependent, detector-dependent, visually fragile, and security-sensitive; without explicit scanning state, fallback, payload validation, and action preview, users can scan the wrong code, act on malicious content, or get blocked by camera failure.", "useWhen": "Users need to decode a QR or barcode to pair a device, open a known destination, redeem a ticket, start payment, enroll an authenticator, join Wi-Fi, identify inventory, or import a short payload.", "avoidWhen": "A typed code, link, NFC tap, saved account, or standard file upload is simpler and less privacy-sensitive.", "requiredStates": [ "Unsupported detector, missing scanner module, insecure context, or unsupported format state.", "Pre-scan rationale state with task purpose, camera use, payload type, privacy, and fallback.", "Camera permission not requested, requesting, granted, denied, and revoked states.", "Delegated scanner state when the OS or platform scanner handles camera access outside the app." ], "commonMisuses": [ "Opening the first decoded URL without showing the destination or risk.", "Using a camera capture flow that saves images when only the decoded QR value is needed.", "Blocking the task after camera denial despite available manual code or image fallback.", "Showing a scanner with no guidance for distance, light, glare, focus, or damaged codes." ], "keywords": [ "scan", "code", "barcode", "scanner", "camera", "photo", "reader", "cross-device", "physical", "interaction", "ui-ux", "image-based", "detection", "decode", "validation", "action", "preview", "flow", "codes", "speed", "entry", "pairing", "tickets", "payments", "device", "setup", "warehouse", "work", "wi-fi", "sharing", "authenticator", "enrollment", "but", "camera-dependent", "detector-dependent", "visually", "fragile", "security-sensitive", "without", "explicit" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/qr-scan.md", "json": "https://uxpatternsguide.com/agent/patterns/qr-scan.json", "human": "https://uxpatternsguide.com/patterns/qr-scan/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/qr-scan-vs-camera-capture-vs-permission-request-vs-file-upload-vs-two-factor-authentication-vs-security-warning.md" ] }, { "id": "query-correction", "name": "Query correction", "aliases": [ "did you mean", "spelling correction", "spell correction", "typo correction", "corrected query", "search instead for" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Submitted search query correction and did-you-mean result state", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users often submit searches with misspellings, transposed letters, missing spaces, joined words, or uncertain terminology, and a strict result state can hide relevant content or silently rewrite intent.", "useWhen": "Users submit free-form searches where spelling and typing mistakes commonly block useful results.", "avoidWhen": "The input is a constrained value selector better served by autocomplete.", "requiredStates": [ "No correction state when the submitted query is exact or correction confidence is too weak.", "Auto-applied correction state showing corrected results, original query, changed tokens, and search-original action.", "Did-you-mean state showing one or more correction candidates that have not yet been applied.", "Original-query state after the user chooses to search the submitted wording instead of the corrected wording." ], "commonMisuses": [ "Silently replacing the user's query without saying what changed.", "Treating every fuzzy or semantic match as a corrected query.", "Correcting identifiers, names, acronyms, product codes, or quoted terms that users intended to search exactly.", "Showing only zero results for obvious typos when a strong correction exists." ], "keywords": [ "query", "correction", "did", "you", "mean", "spelling", "spell", "typo", "corrected", "search", "instead", "browse", "discovery", "ui-ux", "submitted", "did-you-mean", "result", "state", "often", "submit", "searches", "misspellings", "transposed", "letters", "missing", "spaces", "joined", "words", "uncertain", "terminology", "strict", "hide", "relevant", "content", "silently", "rewrite", "intent", "expose", "reversible", "either" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/query-correction.md", "json": "https://uxpatternsguide.com/agent/patterns/query-correction.json", "human": "https://uxpatternsguide.com/patterns/query-correction/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/correction-feedback-vs-query-correction-vs-inline-validation-vs-comments-vs-regenerate-retry-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/query-correction-vs-search-suggestions-vs-no-results-recovery-vs-autocomplete.md" ] }, { "id": "radio-group", "name": "Radio group", "aliases": [ "radio buttons", "single choice group" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Single-choice form control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to make one mutually exclusive choice from a short set while seeing every available option before deciding.", "useWhen": "Users must choose exactly one option.", "avoidWhen": "Users can choose multiple options.", "requiredStates": [ "No selection state for required unanswered groups.", "Exactly one selected option state.", "Focused radio option state.", "Group-level validation error when a required choice is missing." ], "commonMisuses": [ "Using radios for independent choices where several answers can be true.", "Hiding a short critical set inside a select just to save vertical space.", "Omitting the group legend so users hear options without the question.", "Pre-selecting a paid, destructive, or biased option without clear evidence." ], "keywords": [ "radio", "group", "buttons", "single", "choice", "selection", "ui-ux", "single-choice", "form", "control", "need", "make", "one", "mutually", "exclusive", "short", "set", "while", "seeing", "every", "available", "option", "before", "deciding", "show", "labeled", "native", "inputs", "visible", "options", "clickable", "labels", "optional", "hints", "selected", "value", "time", "group-level", "validation", "required" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/radio-group.md", "json": "https://uxpatternsguide.com/agent/patterns/radio-group.json", "human": "https://uxpatternsguide.com/patterns/radio-group/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/conditional-reveal-fields-vs-dependent-fields-vs-radio-group-vs-single-question-page.md", "https://uxpatternsguide.com/agent/comparisons/radio-group-vs-select.md", "https://uxpatternsguide.com/agent/comparisons/text-input-vs-autocomplete-vs-select-vs-radio-group.md", "https://uxpatternsguide.com/agent/comparisons/toggle-switch-vs-checkbox-group-vs-radio-group-vs-segmented-control.md" ] }, { "id": "range-slider", "name": "Range slider", "aliases": [ "multi-thumb slider", "dual thumb slider", "two-handle slider", "minimum maximum slider", "range filter slider" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Two-boundary numeric range control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to set lower and upper numeric boundaries for one ordered scale, but single sliders, hidden filters, or free text fields make it unclear which endpoints will be applied.", "useWhen": "Users need a lower and upper bound on one numeric scale.", "avoidWhen": "Users choose only one value.", "requiredStates": [ "Initial state with visible label, min, max, unit, current lower endpoint, and current upper endpoint.", "Lower thumb focused state.", "Upper thumb focused state.", "Dragging or actively adjusting either endpoint." ], "commonMisuses": [ "Using only one thumb for a task that needs two boundaries.", "Allowing endpoints to cross without repair or explanation.", "Hiding the exact minimum and maximum values.", "Using a range slider for dates instead of a calendar-aware date range picker." ], "keywords": [ "range", "slider", "multi-thumb", "dual", "thumb", "two-handle", "minimum", "maximum", "filter", "selection", "choice", "ui-ux", "two-boundary", "numeric", "control", "need", "set", "lower", "upper", "boundaries", "one", "ordered", "scale", "but", "single", "sliders", "hidden", "filters", "free", "text", "fields", "make", "unclear", "which", "endpoints", "will", "applied", "two", "separately", "named" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/range-slider.md", "json": "https://uxpatternsguide.com/agent/patterns/range-slider.json", "human": "https://uxpatternsguide.com/patterns/range-slider/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/range-slider-vs-slider-vs-text-input-vs-date-range-picker.md" ] }, { "id": "reactions", "name": "Reactions", "aliases": [ "emoji reactions", "message reactions", "comment reactions", "quick reactions", "reaction chips", "emoji response", "like reaction", "reaction count", "who reacted", "reacji" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Lightweight emoji feedback control anchored to an existing message, comment, issue, document selection, or work item", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Reaction systems become misleading when products hide who reacted, make reactions hover-only, treat informal emoji as approvals or assignments, trigger automations without disclosure, flood activity streams, or fail to expose counts and selected state accessibly.", "useWhen": "Users need quick, lightweight feedback on an existing message, comment, issue, document selection, or work item.", "avoidWhen": "The response needs written reasoning, evidence, or a reply thread.", "requiredStates": [ "No reactions state.", "One reaction added by current user state.", "Existing reaction by others state.", "Multiple emoji reaction chips with counts." ], "commonMisuses": [ "Using reactions as formal approvals without approver eligibility, audit trail, or version context.", "Treating reactions as assignments or commitments with no responsibility record.", "Hiding add reaction behind pointer hover only.", "Showing counts without who-reacted disclosure or privacy explanation." ], "keywords": [ "reactions", "emoji", "message", "comment", "quick", "reaction", "chips", "response", "like", "count", "who", "reacted", "reacji", "collaboration", "social", "interaction", "ui-ux", "lightweight", "feedback", "control", "anchored", "existing", "issue", "document", "selection", "work", "item", "systems", "become", "misleading", "products", "hide", "make", "hover-only", "treat", "informal", "approvals", "assignments", "trigger", "automations" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/reactions.md", "json": "https://uxpatternsguide.com/agent/patterns/reactions.json", "human": "https://uxpatternsguide.com/patterns/reactions/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/reactions-vs-comments-vs-mentions-vs-activity-feed.md" ] }, { "id": "recently-searched", "name": "Recently searched", "aliases": [ "recent searches", "search history", "recent query history", "previous searches", "last searches", "search recall list" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Passive history of submitted search queries that can be rerun", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users often need to repeat or refine a query they already submitted, but without a clear recent-search history they must remember exact wording or confuse passive query history with saved searches, suggestions, recommendations, or opened items.", "useWhen": "Users revisit a search surface and benefit from rerunning recent query wording.", "avoidWhen": "The search surface is public, shared, signed out, or privacy-sensitive and cannot provide clear controls.", "requiredStates": [ "Empty or hidden state before any qualifying query has been submitted.", "Populated state with newest-first query history, scope, and timestamp.", "Rerun state where selecting a recent query restores query text and search scope.", "Remove-one state that deletes a single query from history only." ], "commonMisuses": [ "Recording unsubmitted keystrokes as search history.", "Mixing recent searches with popular searches, promotions, saved searches, recent views, recommendations, or bookmarks.", "Showing private queries on shared devices or signed-out public surfaces.", "Providing no way to remove a single embarrassing or sensitive query." ], "keywords": [ "recently", "searched", "recent", "searches", "search", "history", "query", "previous", "last", "recall", "list", "browse", "discovery", "ui-ux", "passive", "submitted", "queries", "rerun", "often", "need", "repeat", "refine", "they", "already", "but", "without", "clear", "recent-search", "remember", "exact", "wording", "confuse", "saved", "suggestions", "recommendations", "opened", "items", "provide", "scoped", "bounded" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/recently-searched.md", "json": "https://uxpatternsguide.com/agent/patterns/recently-searched.json", "human": "https://uxpatternsguide.com/patterns/recently-searched/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/recently-searched-vs-search-suggestions-vs-saved-search-vs-recently-viewed.md", "https://uxpatternsguide.com/agent/comparisons/search-history-vs-recently-searched-vs-saved-search-vs-recently-viewed.md" ] }, { "id": "recently-used", "name": "Recently used", "aliases": [ "recently used items", "recent apps", "recent commands", "recent tools", "recent files", "recent workspaces", "recently accessed tasks", "used recently" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "Automatic list of targets the current user meaningfully operated or used recently", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users repeatedly return to tools, files, commands, apps, workspaces, or tasks they actually operated, but broad navigation, search, and favorites can force them to reconstruct recent working context from memory.", "useWhen": "Users repeatedly operate a broad set of tools, files, commands, apps, workspaces, or tasks.", "avoidWhen": "The product only knows what users viewed or searched, not what they actually used.", "requiredStates": [ "Empty or hidden state before any qualifying use event exists.", "Populated state with most-recent-first ordering and recognizable target identity.", "Just-used state that moves the reused target to the top instead of duplicating it.", "Remove-one and clear-all states that affect only recent-use history." ], "commonMisuses": [ "Counting views, hovers, previews, suggestions, ads, or recommendations as use.", "Mixing recently used with recently viewed, favorites, pinned items, search history, saved views, subscriptions, or recommendations in one ambiguous list.", "Letting remove or clear delete the underlying file, app, command, workspace, or task.", "Showing sensitive recent-use history on shared, public, signed-out, or screen-shared surfaces without controls." ], "keywords": [ "recently", "used", "items", "recent", "apps", "commands", "tools", "files", "workspaces", "accessed", "tasks", "personalization", "preference", "ui-ux", "automatic", "list", "targets", "current", "meaningfully", "operated", "repeatedly", "return", "they", "actually", "but", "broad", "navigation", "search", "favorites", "force", "them", "reconstruct", "working", "context", "memory", "provide", "bounded", "personal", "records", "meaningful" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/recently-used.md", "json": "https://uxpatternsguide.com/agent/patterns/recently-used.json", "human": "https://uxpatternsguide.com/patterns/recently-used/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/recently-used-vs-recently-viewed-vs-favorites-vs-pinned-items.md" ] }, { "id": "recently-viewed", "name": "Recently viewed", "aliases": [ "recent items", "recently used", "recently opened", "view history rail", "continue where you left off", "MRU list" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Automatic list of items the current user opened recently", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users often need to return to a specific item they recently opened, but search, browser Back, and site hierarchy can make them reconstruct the path from memory.", "useWhen": "Users inspect multiple objects and often need to return to one they recently opened.", "avoidWhen": "The content set is tiny, linear, or easy to scan without history.", "requiredStates": [ "Empty or hidden state before any qualifying item has been viewed.", "Populated state with most-recent-first ordering and recognizable item context.", "Active or just-opened state showing which item was resumed from the list.", "Remove-one state that deletes a single item from recent history without deleting the item itself." ], "commonMisuses": [ "Filling recently viewed with recommendations, ads, popular items, or related content.", "Showing sensitive history on shared screens, public kiosks, or signed-out experiences.", "Making recent items permanent when users expect a short session memory.", "Mixing automatic recents with saved, pinned, or favorite items." ], "keywords": [ "recently", "viewed", "recent", "items", "used", "opened", "view", "history", "rail", "continue", "where", "you", "left", "off", "mru", "list", "navigation", "wayfinding", "ui-ux", "automatic", "current", "often", "need", "return", "specific", "item", "they", "but", "search", "browser", "back", "site", "hierarchy", "make", "them", "reconstruct", "path", "memory", "provide", "bounded" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/recently-viewed.md", "json": "https://uxpatternsguide.com/agent/patterns/recently-viewed.json", "human": "https://uxpatternsguide.com/patterns/recently-viewed/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/pinned-items-vs-favorites-vs-recently-viewed-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/recently-searched-vs-search-suggestions-vs-saved-search-vs-recently-viewed.md", "https://uxpatternsguide.com/agent/comparisons/recently-used-vs-recently-viewed-vs-favorites-vs-pinned-items.md", "https://uxpatternsguide.com/agent/comparisons/recently-viewed-vs-related-links-vs-breadcrumbs.md", "https://uxpatternsguide.com/agent/comparisons/recommendations-vs-related-links-vs-recently-viewed-vs-browse-by-category.md", "https://uxpatternsguide.com/agent/comparisons/saved-search-vs-basic-search-vs-filter-panel-vs-recently-viewed.md", "https://uxpatternsguide.com/agent/comparisons/search-history-vs-recently-searched-vs-saved-search-vs-recently-viewed.md" ] }, { "id": "recommendations", "name": "Recommendations", "aliases": [ "recommended for you", "personalized recommendations", "related recommendations", "suggested items", "recommended products", "next best action", "frequently bought together", "content recommendations", "recommendation rail" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Ranked suggestions generated from context, behavior, item similarity, popularity, editorial rules, or recommendation models", "maturity": "standard", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Users can struggle to discover useful items in large catalogs, content libraries, workflows, or feeds, but opaque recommendation rails can mislead them when the basis, availability, commercial influence, or personalization control is hidden.", "useWhen": "Users need discovery help in a large item, product, content, service, or action space.", "avoidWhen": "The product has too few items for ranking to reduce effort.", "requiredStates": [ "Default recommended state with labelled section, item identity, reason, source, and action controls.", "Personalized state that identifies the activity or preference category used without exposing private raw history unnecessarily.", "Generic or cold-start fallback state labelled as popular, trending, category-based, or editorial.", "Dismissed or Not interested state that removes the item and confirms the feedback effect." ], "commonMisuses": [ "Counting schema-valid recommendation cards as complete without reasons, controls, or source disclosure.", "Calling promoted or sponsored content recommended without visible disclosure.", "Pretending generated suggestions are recently viewed, saved, or required steps.", "Using vague labels such as For you or You might like without explaining the basis." ], "keywords": [ "recommendations", "recommended", "you", "personalized", "related", "suggested", "items", "products", "next", "best", "action", "frequently", "bought", "together", "content", "recommendation", "rail", "search", "browse", "discovery", "ui-ux", "ranked", "suggestions", "generated", "context", "behavior", "item", "similarity", "popularity", "editorial", "rules", "models", "struggle", "discover", "useful", "large", "catalogs", "libraries", "workflows", "feeds" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/recommendations.md", "json": "https://uxpatternsguide.com/agent/patterns/recommendations.json", "human": "https://uxpatternsguide.com/patterns/recommendations/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/adaptive-defaults-vs-settings-management-vs-preference-center-vs-recommendations.md", "https://uxpatternsguide.com/agent/comparisons/carousel-auto-advance-without-pause-vs-carousel-vs-tabs-vs-recommendations-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/carousel-vs-tabs-vs-recommendations-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/feed-vs-card-list-vs-recommendations-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/recommendations-vs-related-links-vs-recently-viewed-vs-browse-by-category.md", "https://uxpatternsguide.com/agent/comparisons/recommended-next-action-vs-recommendations-vs-task-list-vs-review-queue.md" ] }, { "id": "recommended-next-action", "name": "Recommended next action", "aliases": [ "next best action", "next-best step", "suggested action", "recommended action", "guided next step", "smart assist action", "contextual action recommendation", "action suggestion" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "Context-sensitive workflow action suggested for the user's current record, case, conversation, or task", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Users working in complex cases, records, conversations, or workflows often need to decide what to do next, but raw data, long histories, and broad recommendations can leave the next concrete action ambiguous or risky.", "useWhen": "Users are working in a record, case, conversation, or workflow where choosing the next action is costly or error-prone.", "avoidWhen": "The action is always required and should be a task, validation, or workflow gate.", "requiredStates": [ "No recommendation state with normal workflow controls still available.", "Recommended action state with action title, reason, evidence, trigger, consequence, and accept or review path.", "Review-before-apply state for messages, status changes, offers, escalations, and high-impact actions.", "Accepted, deferred, dismissed, already-done, feedback-submitted, and replacement-suggestion states." ], "commonMisuses": [ "Calling a static primary button a recommended next action without context-sensitive logic or reason.", "Hiding why the action was suggested, what evidence was used, or what will change.", "Mixing required tasks, optional suggestions, assignments, approvals, and queue rows in one undifferentiated list.", "Letting dismiss hide a required task or delete the underlying work item." ], "keywords": [ "recommended", "next", "action", "best", "next-best", "step", "suggested", "guided", "smart", "assist", "contextual", "recommendation", "suggestion", "personalization", "preference", "ui-ux", "context-sensitive", "workflow", "current", "record", "case", "conversation", "task", "working", "complex", "cases", "records", "conversations", "workflows", "often", "need", "decide", "what", "but", "raw", "data", "long", "histories", "broad", "recommendations" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/recommended-next-action.md", "json": "https://uxpatternsguide.com/agent/patterns/recommended-next-action.json", "human": "https://uxpatternsguide.com/patterns/recommended-next-action/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/agent-plan-preview-vs-task-list-vs-recommended-next-action-vs-human-approval-gate-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/automation-rule-builder-vs-human-approval-gate-vs-approval-workflow-vs-settings-management-vs-complete-complex-form-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/escalate-to-human-vs-handoff-summary-vs-chat-interface-vs-review-queue-vs-human-approval-gate-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/human-approval-gate-vs-approval-workflow-vs-review-queue-vs-review-before-submit-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/recommended-next-action-vs-recommendations-vs-task-list-vs-review-queue.md" ] }, { "id": "redo", "name": "Redo", "aliases": [ "reapply", "redo command", "redo stack", "forward history", "reapply undone change" ], "category": "Error Prevention And Recovery", "patternType": "ux", "surfaceType": "Forward edit-history replay", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can undo too far, change their mind after an undo, or need to reapply a reversible edit without reconstructing the work manually.", "useWhen": "Users perform reversible sequences of edits and can undo too far.", "avoidWhen": "The system cannot reliably store or replay the undone operation.", "requiredStates": [ "No-redo state before any undo has happened.", "Undo-available state after a reversible edit.", "Redo-available state after the user undoes an operation.", "Redone state after the latest undone operation is reapplied." ], "commonMisuses": [ "Leaving redo enabled after a new edit invalidates the undone future.", "Applying redo to the current selection instead of the original operation target.", "Treating redo as persistent restore or version rollback without showing durable history.", "Hiding redo behind a shortcut with no visible command state." ], "keywords": [ "redo", "reapply", "command", "stack", "forward", "history", "undone", "change", "error", "prevention", "recovery", "edit-history", "replay", "undo", "too", "far", "their", "mind", "after", "need", "reversible", "edit", "without", "reconstructing", "work", "manually", "maintain", "expose", "valid", "operation", "exists", "latest", "against", "same", "target", "clear", "branch", "new", "edits", "invalidate" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/redo.md", "json": "https://uxpatternsguide.com/agent/patterns/redo.json", "human": "https://uxpatternsguide.com/patterns/redo/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/keyboard-shortcut-vs-command-palette-vs-menu-menubar-vs-toolbar-vs-undo-vs-redo.md", "https://uxpatternsguide.com/agent/comparisons/redo-vs-undo-vs-draft-state-vs-command-palette.md" ] }, { "id": "regenerate-retry", "name": "Regenerate / retry", "aliases": [ "regenerate answer", "retry AI response", "rerun assistant answer", "response regeneration", "retry same prompt", "regenerate from prompt", "assistant retry", "AI answer retry", "try another answer", "regenerate with same context" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "AI response regeneration and same-turn retry control with version and context preservation", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI users often need to retry a failed answer or ask for another generated version, but a plain retry control can hide whether the same prompt, model, context, sources, tools, citations, and partial output are being reused or changed.", "useWhen": "A user needs another AI-generated answer for the same request or a visible recovery path after response failure.", "avoidWhen": "The task is a simple non-AI operation retry already covered by the Retry pattern.", "requiredStates": [ "Initial answer state with prompt snapshot, response version, source scope, model or mode, and available regenerate or retry controls.", "Failed response retry state with failure reason, attempt count, preserved prompt, and Retry same prompt action.", "Stopped or partial output state with Continue partial, Retry from start, Copy partial, and Discard controls.", "Regenerating state with in-flight status, duplicate activation guard, attempt number, and previous version still available." ], "commonMisuses": [ "Using one Try again button for same-prompt retry, prompt edit, tool retry, source refresh, and alternate answer generation.", "Overwriting the previous answer and citations after regeneration.", "Hiding changed model, tools, source scope, or context between attempts.", "Retrying side-effecting tools while presenting the action as harmless answer regeneration." ], "keywords": [ "regenerate", "retry", "answer", "response", "rerun", "assistant", "regeneration", "same", "prompt", "try", "another", "context", "automation", "ui-ux", "same-turn", "control", "version", "preservation", "often", "need", "failed", "ask", "generated", "but", "plain", "hide", "whether", "model", "sources", "tools", "citations", "partial", "output", "being", "reused", "changed", "provide", "explicit", "controls", "preserve" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/regenerate-retry.md", "json": "https://uxpatternsguide.com/agent/patterns/regenerate-retry.json", "human": "https://uxpatternsguide.com/patterns/regenerate-retry/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/correction-feedback-vs-query-correction-vs-inline-validation-vs-comments-vs-regenerate-retry-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/regenerate-retry-vs-retry-vs-chat-interface-vs-streaming-response-vs-prompt-box-vs-editable-ai-output.md" ] }, { "id": "related-links", "name": "Related links", "aliases": [ "related content", "related resources", "see also links", "onward links", "supporting links", "link collection" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Curated onward links connected to the current content", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users who finish reading or acting on a page may need a small set of adjacent pages, services, or references, but generated or unsorted link lists often distract them with weak, stale, or ambiguous destinations.", "useWhen": "The current page has a few genuinely adjacent pages, services, programs, or resources users often need next.", "avoidWhen": "Links are only loosely associated by topic tags or organizational ownership.", "requiredStates": [ "Default state with a labelled, curated related-links block and descriptive link text.", "Selected or reviewed state showing which related destination was chosen or previewed.", "External-link state with destination context and external disclosure.", "File-link state with file type and size or page-hosted document guidance." ], "commonMisuses": [ "Using related links as a catch-all further-reading dump.", "Adding every tagged page without human curation.", "Putting primary task actions or account utilities into related links.", "Using vague link text such as More, Read this, Click here, or Details." ], "keywords": [ "related", "links", "content", "resources", "see", "also", "onward", "supporting", "link", "collection", "navigation", "wayfinding", "ui-ux", "curated", "connected", "current", "who", "finish", "reading", "acting", "page", "may", "need", "small", "set", "adjacent", "pages", "services", "references", "but", "generated", "unsorted", "lists", "often", "distract", "them", "weak", "stale", "ambiguous", "destinations" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/related-links.md", "json": "https://uxpatternsguide.com/agent/patterns/related-links.json", "human": "https://uxpatternsguide.com/patterns/related-links/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/citation-display-vs-chat-interface-vs-streaming-response-vs-related-links-vs-tooltip.md", "https://uxpatternsguide.com/agent/comparisons/collection-vs-list-view-vs-browse-by-category-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/disclosure-details-vs-accordion-vs-inline-message-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/recently-viewed-vs-related-links-vs-breadcrumbs.md", "https://uxpatternsguide.com/agent/comparisons/recommendations-vs-related-links-vs-recently-viewed-vs-browse-by-category.md", "https://uxpatternsguide.com/agent/comparisons/related-links-vs-in-page-anchor-navigation-vs-breadcrumbs.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/source-grounding-display-vs-citation-display-vs-chat-interface-vs-streaming-response-vs-related-links.md" ] }, { "id": "report-abuse", "name": "Report abuse", "aliases": [ "report content", "report user", "report harassment", "report spam", "report violation", "flag content", "report inappropriate content", "safety report", "abuse report", "report harmful behavior" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Reporter-facing safety submission flow for harmful, abusive, illegal, spam, impersonation, or policy-violating content and behavior", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Reporting harmful behavior fails when the entry point is hidden, the reported object is ambiguous, reason choices are vague, evidence is lost, status overpromises enforcement, reporter privacy is unclear, or immediate protection actions are missing.", "useWhen": "Users need to flag content, behavior, an account, conversation, listing, repository, ad, or message for policy, abuse, spam, privacy, legal, or safety review.", "avoidWhen": "The user only wants to stop seeing a person or thread; use block, mute, hide, or notification controls instead.", "requiredStates": [ "Report entry point near a post, comment, profile, message, conversation, repository, ad, live chat item, or listing.", "Reported object snapshot with target type, author or account when safe, timestamp, selected messages, permalink, and content summary.", "Reason selection for harassment, spam, impersonation, privacy, legal, child safety, violent threat, self-harm, or other policy categories.", "Affected-person state such as myself, someone else, a group, everyone, community, or organization." ], "commonMisuses": [ "Treating Report as an instant takedown or ban action.", "Using one unlabelled report button with no reason, target, evidence, confirmation, or status.", "Forcing reporters to keep viewing harmful content to complete, retry, or check a report.", "Mixing block or mute, permission recovery, comments moderation, legal takedown, privacy request, and abuse reporting into one ambiguous flow." ], "keywords": [ "report", "abuse", "content", "harassment", "spam", "violation", "flag", "inappropriate", "safety", "harmful", "behavior", "trust", "privacy", "ui-ux", "reporter-facing", "submission", "flow", "abusive", "illegal", "impersonation", "policy-violating", "reporting", "fails", "entry", "point", "hidden", "reported", "object", "ambiguous", "reason", "choices", "vague", "evidence", "lost", "status", "overpromises", "enforcement", "reporter", "unclear", "immediate" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/report-abuse.md", "json": "https://uxpatternsguide.com/agent/patterns/report-abuse.json", "human": "https://uxpatternsguide.com/patterns/report-abuse/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/block-mute-vs-report-abuse-vs-notification-preferences-vs-follow-subscribe-vs-permission-denied-state-vs-comments.md", "https://uxpatternsguide.com/agent/comparisons/report-abuse-vs-review-queue-vs-comments-vs-security-warning-vs-permission-denied-state-vs-notification-center.md" ] }, { "id": "required-field-hidden-by-conditional-logic", "name": "Required field hidden by conditional logic", "aliases": [ "hidden required field", "conditional required field trap", "invisible required answer", "hidden validation blocker", "branch required field", "conditional form validation trap" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Anti-pattern where required form data is hidden or unreachable because conditional state and validation disagree", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Conditional form logic often hides fields to reduce noise, but if hidden fields remain required, stale, submitted, or server-enforced without a visible recovery path, users cannot tell what blocks completion.", "useWhen": "Use this anti-pattern entry to audit forms where conditional logic, validation, saved drafts, or server schemas might require fields that are not visible or reachable.", "avoidWhen": "Do not use this entry to reject simple conditional reveal fields that visibly reveal and validate a related follow-up only while its trigger is active.", "requiredStates": [ "Initial state with all currently required fields identified before users submit.", "Trigger selected state where the newly required follow-up is revealed adjacent to the trigger.", "Trigger cleared state where hidden follow-up values and errors are cleared or excluded.", "Failed submit state where the error summary links to a visible field, not a hidden target." ], "commonMisuses": [ "Keeping a visually hidden input required because the backend schema says the field is required in some cases.", "Showing an error summary that links to an element hidden by CSS, collapsed accordion state, or conditional route logic.", "Using disabled required controls to represent unavailable answers.", "Clearing the trigger visually but leaving the old branch active in saved draft or server payload." ], "keywords": [ "required", "field", "hidden", "conditional", "logic", "trap", "invisible", "answer", "validation", "blocker", "branch", "form", "input", "data", "entry", "ui-ux", "anti-pattern", "where", "unreachable", "because", "state", "disagree", "often", "hides", "fields", "reduce", "noise", "but", "remain", "stale", "submitted", "server-enforced", "without", "visible", "recovery", "path", "cannot", "tell", "what", "blocks" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/required-field-hidden-by-conditional-logic.md", "json": "https://uxpatternsguide.com/agent/patterns/required-field-hidden-by-conditional-logic.json", "human": "https://uxpatternsguide.com/patterns/required-field-hidden-by-conditional-logic/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/required-field-hidden-by-conditional-logic-vs-conditional-reveal-fields-vs-dependent-fields-vs-error-summary-vs-single-page-form-vs-review-before-submit.md" ] }, { "id": "responsive-navigation-adaptation", "name": "Responsive navigation adaptation", "aliases": [ "adaptive navigation", "responsive nav", "navigation breakpoint", "mobile to desktop navigation", "bottom bar to rail", "navigation rail adaptation", "drawer breakpoint", "responsive app shell" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Navigation model that changes presentation across viewport, posture, and destination-count constraints", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Navigation often changes shape across phone, tablet, desktop, split screen, rotation, keyboard, or foldable states, and users lose orientation when destinations disappear, labels change, current state resets, or competing navigation surfaces appear at breakpoints.", "useWhen": "A product supports multiple viewport widths, device classes, orientations, split-screen sizes, or foldable postures.", "avoidWhen": "The product has one stable navigation surface and does not change across supported sizes.", "requiredStates": [ "Compact width with bottom navigation or labelled compact menu.", "Medium width with navigation rail, condensed side surface, or drawer-triggered navigation.", "Expanded width with persistent side navigation or global navigation plus local navigation.", "Destination count overflow state where secondary destinations move into a labelled More or drawer surface." ], "commonMisuses": [ "Treating responsive navigation as separate mobile and desktop information architectures.", "Changing destination labels or order across breakpoints.", "Removing low-priority destinations instead of putting them in overflow or a drawer.", "Resetting the selected destination or local state on resize." ], "keywords": [ "responsive", "navigation", "adaptation", "adaptive", "nav", "breakpoint", "mobile", "desktop", "bottom", "bar", "rail", "drawer", "app", "shell", "cross-device", "physical", "interaction", "ui-ux", "model", "changes", "presentation", "across", "viewport", "posture", "destination-count", "constraints", "often", "shape", "phone", "tablet", "split", "screen", "rotation", "keyboard", "foldable", "states", "lose", "orientation", "destinations", "disappear" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/responsive-navigation-adaptation.md", "json": "https://uxpatternsguide.com/agent/patterns/responsive-navigation-adaptation.json", "human": "https://uxpatternsguide.com/patterns/responsive-navigation-adaptation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/responsive-navigation-adaptation-vs-global-navigation-vs-bottom-navigation-vs-navigation-drawer-vs-side-navigation-vs-header.md" ] }, { "id": "restore-from-trash", "name": "Restore from trash", "aliases": [ "recover deleted item", "recycle bin restore", "trash recovery", "deleted files recovery", "soft delete restore" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Durable deleted-object recovery", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to recover deleted objects after the immediate undo window has passed, but restoration becomes risky when the product hides original location, retention, ownership, permissions, or permanent-deletion status.", "useWhen": "Deleted objects remain recoverable after the user leaves the original workflow.", "avoidWhen": "The action is immediately reversible through a short undo window and no durable recovery surface exists.", "requiredStates": [ "Normal active-object state before deletion.", "Deleted-but-recoverable state in Trash or Recycle Bin.", "Trash list state with object metadata and restore actions.", "Restore preview state showing original location and affected permissions or dependencies." ], "commonMisuses": [ "Showing deleted objects without enough metadata to identify the right item.", "Restoring to a hidden or invalid location without telling the user.", "Placing permanent delete beside Restore without visual separation or final-loss confirmation.", "Treating trash as a substitute for confirmation when deletion is severe or externally visible." ], "keywords": [ "restore", "trash", "recover", "deleted", "item", "recycle", "bin", "recovery", "files", "soft", "delete", "error", "prevention", "ui-ux", "durable", "deleted-object", "need", "objects", "after", "immediate", "undo", "window", "passed", "but", "restoration", "becomes", "risky", "product", "hides", "original", "location", "retention", "ownership", "permissions", "permanent-deletion", "status", "provide", "deleted-items", "surface", "lists" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/restore-from-trash.md", "json": "https://uxpatternsguide.com/agent/patterns/restore-from-trash.json", "human": "https://uxpatternsguide.com/patterns/restore-from-trash/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-settings-management-vs-restore-from-trash.md", "https://uxpatternsguide.com/agent/comparisons/fake-undo-vs-undo-vs-toast-notification-vs-restore-from-trash-vs-destructive-action-confirmation-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/restore-from-trash-vs-undo-vs-destructive-action-confirmation-vs-draft-state.md" ] }, { "id": "retry", "name": "Retry", "aliases": [ "try again", "retry request", "retry action", "repeat failed operation", "retry failed save", "retry failed load" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Scoped failed-operation retry control", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users face a failed load, save, export, upload, payment, sync, or submit operation and need a safe way to attempt the same operation again without losing context or causing duplicate side effects.", "useWhen": "A load, save, submit, upload, export, sync, payment, or background request failed for a transient or uncertain reason.", "avoidWhen": "The error is caused by invalid user input and correction is required.", "requiredStates": [ "Retryable failed state with affected operation, object, and preserved request context.", "Retry-ready state with a specific action label and safe scope.", "Retry pending state that disables duplicate attempts and confirms the same request is being sent.", "Retry succeeded state that returns users to recovered content, completed action, or download access." ], "commonMisuses": [ "Offering Retry for every error regardless of whether the user or system state can change.", "Retrying immediately in a tight loop during service overload.", "Leaving both Retry and the original submit button enabled for the same side-effecting operation.", "Changing filters, selected files, amount, recipient, or destination between attempts without telling users." ], "keywords": [ "retry", "try", "again", "request", "action", "repeat", "failed", "operation", "save", "load", "error", "prevention", "recovery", "ui-ux", "scoped", "failed-operation", "control", "face", "export", "upload", "payment", "sync", "submit", "need", "safe", "way", "attempt", "same", "without", "losing", "context", "causing", "duplicate", "side", "effects", "expose", "retryable", "failures", "preserve", "original" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/retry.md", "json": "https://uxpatternsguide.com/agent/patterns/retry.json", "human": "https://uxpatternsguide.com/patterns/retry/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/autosave-recovery-vs-autosave-form-vs-draft-state-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/fallback-path-vs-retry-vs-error-state-vs-service-unavailable-page.md", "https://uxpatternsguide.com/agent/comparisons/offline-mobile-retry-vs-offline-state-vs-retry-vs-sync-state-vs-pull-to-refresh-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/payment-collection-vs-checkout-vs-payment-card-entry-vs-bank-details.md", "https://uxpatternsguide.com/agent/comparisons/permission-recovery-vs-permission-denied-state-vs-session-timeout-warning-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/pull-to-refresh-vs-touch-gesture-vs-feed-vs-offline-state-vs-loading-spinner-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/regenerate-retry-vs-retry-vs-chat-interface-vs-streaming-response-vs-prompt-box-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/retry-vs-error-state-vs-loading-spinner-vs-offline-state.md" ] }, { "id": "review-before-submit", "name": "Review before submit", "aliases": [ "check answers", "check your answers", "review answers", "review before send", "final review page", "pre-submit review", "answers summary" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Final editable answer summary before committing a transaction", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users make mistakes in long or consequential transactions when they cannot inspect what the service captured, correct individual answers, or recognize that the next action will commit the data.", "useWhen": "A user has provided multiple answers and should verify them before a consequential submit action.", "avoidWhen": "The task is a single low-risk field with clear inline validation and an obvious submit action.", "requiredStates": [ "Initial review state with grouped captured answers, relevant sections, and explicit submit action.", "Answer changed state where the user returns to the owning question with the old value pre-populated.", "Return-to-review state after a changed answer saves without repeating unrelated pages.", "Skipped optional answer state shown as Not provided when meaningful." ], "commonMisuses": [ "Using a review page that contains no captured answers.", "Labelling the final commit button Continue.", "Sending users through every later page after they change one answer.", "Showing irrelevant conditional sections that the user never answered." ], "keywords": [ "review", "before", "submit", "check", "answers", "your", "send", "final", "page", "pre-submit", "summary", "input", "data", "entry", "ui-ux", "editable", "answer", "committing", "transaction", "make", "mistakes", "long", "consequential", "transactions", "they", "cannot", "inspect", "what", "service", "captured", "correct", "individual", "recognize", "next", "action", "will", "commit", "add", "summarizes", "relevant" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/review-before-submit.md", "json": "https://uxpatternsguide.com/agent/patterns/review-before-submit.json", "human": "https://uxpatternsguide.com/patterns/review-before-submit/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/approval-workflow-vs-review-before-submit-vs-permission-recovery-vs-invite-user.md", "https://uxpatternsguide.com/agent/comparisons/bank-details-vs-text-input-vs-input-mask-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/checkout-vs-payment-card-entry-vs-review-before-submit-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/complete-multiple-tasks-vs-step-navigation-vs-process-list-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/confirmation-page-vs-success-confirmation-vs-review-before-submit-vs-notification-banner.md", "https://uxpatternsguide.com/agent/comparisons/conflict-resolution-vs-conflict-state-vs-review-before-submit-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/dangerous-action-review-vs-destructive-action-confirmation-vs-typed-confirmation-vs-human-approval-gate-vs-review-before-submit-vs-security-warning.md", "https://uxpatternsguide.com/agent/comparisons/human-approval-gate-vs-approval-workflow-vs-review-queue-vs-review-before-submit-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/invite-user-vs-account-creation-vs-object-picker-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/legal-acceptance-vs-consent-prompt-vs-review-before-submit-vs-checkbox-group-vs-confirmation-dialog-vs-typed-confirmation-vs-age-gate.md", "https://uxpatternsguide.com/agent/comparisons/merge-conflict-resolver-vs-conflict-resolution-vs-conflict-state-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/payment-card-entry-vs-bank-details-vs-input-mask-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/profile-setup-vs-create-user-profile-vs-onboarding-vs-account-creation.md", "https://uxpatternsguide.com/agent/comparisons/publish-workflow-vs-approval-workflow-vs-review-queue-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/required-field-hidden-by-conditional-logic-vs-conditional-reveal-fields-vs-dependent-fields-vs-error-summary-vs-single-page-form-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/review-before-submit-vs-multi-step-form-vs-complete-complex-form-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md" ] }, { "id": "review-queue", "name": "Review queue", "aliases": [ "review inbox", "triage queue", "moderation queue", "work queue", "ticket queue", "items awaiting review", "review requests", "approval queue", "content review queue", "held for review" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Actionable queue for triaging many items that need human review", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Review work becomes slow and unsafe when products show items needing attention as an ordinary list, hide why each item is queued, lose ownership, allow stale decisions, make urgency invisible, or provide bulk actions without clear scope and exceptions.", "useWhen": "A team or individual repeatedly reviews many independently queued items.", "avoidWhen": "The task is a single request moving through a governed approval route.", "requiredStates": [ "Queue loading and count state", "Filtered or grouped queue state", "Empty queue state", "Row preview state" ], "commonMisuses": [ "Using an ordinary table with no review reason, urgency, ownership, or decision actions.", "Treating review queue as approval workflow and hiding many-item workload controls.", "Making queue counts stale after a row action.", "Allowing hidden rows to be bulk-processed without preview." ], "keywords": [ "review", "queue", "inbox", "triage", "moderation", "work", "ticket", "items", "awaiting", "requests", "approval", "content", "held", "task", "workflow", "patterns", "ui-ux", "actionable", "triaging", "many", "need", "human", "becomes", "slow", "unsafe", "products", "show", "needing", "attention", "ordinary", "list", "hide", "why", "each", "item", "queued", "lose", "ownership", "allow", "stale" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/review-queue.md", "json": "https://uxpatternsguide.com/agent/patterns/review-queue.json", "human": "https://uxpatternsguide.com/patterns/review-queue/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/comments-vs-textarea-vs-feed-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/escalate-to-human-vs-handoff-summary-vs-chat-interface-vs-review-queue-vs-human-approval-gate-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/human-approval-gate-vs-approval-workflow-vs-review-queue-vs-review-before-submit-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/publish-workflow-vs-approval-workflow-vs-review-queue-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/recommended-next-action-vs-recommendations-vs-task-list-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/report-abuse-vs-review-queue-vs-comments-vs-security-warning-vs-permission-denied-state-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/review-queue-vs-approval-workflow-vs-saved-filter-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/threaded-discussion-vs-comments-vs-feed-vs-notification-center.md" ] }, { "id": "saved-filter", "name": "Saved filter", "aliases": [ "filter preset", "saved list filter", "saved view filter", "filter view", "criteria preset", "reusable filter", "personal filter", "team filter" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Persisted named filter criteria applied to a list, table, board, or dashboard", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users repeatedly rebuild the same filter criteria for large lists, but ordinary filter controls lose context between sessions and vague saved presets make it unclear what will change when applied.", "useWhen": "Users repeatedly need the same filter criteria on a list, table, board, queue, base view, or dashboard.", "avoidWhen": "Users only need to adjust filters for the current session.", "requiredStates": [ "No saved filter selected while current filters are still visible and saveable.", "Saved filter list with active, private, team, global, owner, and last-updated states.", "Criteria preview that lists each field, operator, and value included in the preset.", "Applied preset state with criteria chips, result count, and separate query and sort summary." ], "commonMisuses": [ "Treating the visible table rows as the saved object instead of storing field, operator, and value conditions.", "Treating every saved view as a saved filter even when it also saves columns, sorting, route, chart settings, or query text.", "Applying a preset that clears query text or sort order without warning.", "Using only color, position, or a star icon to show the active saved filter." ], "keywords": [ "saved", "filter", "preset", "list", "view", "criteria", "reusable", "personal", "team", "search", "browse", "discovery", "ui-ux", "persisted", "named", "applied", "table", "board", "dashboard", "repeatedly", "rebuild", "same", "large", "lists", "but", "ordinary", "controls", "lose", "context", "between", "sessions", "vague", "presets", "make", "unclear", "what", "will", "change", "provide", "saved-filter" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/saved-filter.md", "json": "https://uxpatternsguide.com/agent/patterns/saved-filter.json", "human": "https://uxpatternsguide.com/patterns/saved-filter/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/review-queue-vs-approval-workflow-vs-saved-filter-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/saved-filter-vs-filter-panel-vs-saved-search-vs-filter-chips.md", "https://uxpatternsguide.com/agent/comparisons/saved-view-vs-saved-search-vs-saved-filter-vs-table.md" ] }, { "id": "saved-search", "name": "Saved search", "aliases": [ "saved query", "saved view", "saved search filter", "managed query", "favorite search", "search subscription", "query shortcut" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Persisted named search criteria for rerunning a dynamic result set", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users repeatedly reconstruct the same search criteria, but saved-search UI often hides what is stored, whether results are dynamic, who owns it, and whether edits affect a private or shared search.", "useWhen": "Users repeat the same search criteria across sessions or operational cycles.", "avoidWhen": "The query is a one-off lookup that users will not need again.", "requiredStates": [ "Unsaved current search with Save search available only when criteria are meaningful.", "Save dialog or inline form with name, criteria summary, visibility, and optional description.", "Saved search selected state with name, result count, criteria summary, owner, visibility, and management actions.", "Modified-from-saved state where current criteria no longer match the saved definition." ], "commonMisuses": [ "Saving static result IDs instead of reusable criteria.", "Using a star or bookmark as the only save action without showing name, criteria, owner, or visibility.", "Overwriting a shared search when the user intended a temporary refinement.", "Mixing saved searches with search history, recently viewed items, saved filters, and browser bookmarks." ], "keywords": [ "saved", "search", "query", "view", "filter", "managed", "favorite", "subscription", "shortcut", "browse", "discovery", "ui-ux", "persisted", "named", "criteria", "rerunning", "dynamic", "result", "set", "repeatedly", "reconstruct", "same", "but", "saved-search", "often", "hides", "what", "stored", "whether", "results", "who", "owns", "edits", "affect", "private", "shared", "provide", "object", "stores", "rather" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/saved-search.md", "json": "https://uxpatternsguide.com/agent/patterns/saved-search.json", "human": "https://uxpatternsguide.com/patterns/saved-search/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/filter-reset-that-clears-unrelated-search-vs-filter-panel-vs-basic-search-vs-filter-chips-vs-saved-search.md", "https://uxpatternsguide.com/agent/comparisons/recently-searched-vs-search-suggestions-vs-saved-search-vs-recently-viewed.md", "https://uxpatternsguide.com/agent/comparisons/saved-filter-vs-filter-panel-vs-saved-search-vs-filter-chips.md", "https://uxpatternsguide.com/agent/comparisons/saved-search-vs-basic-search-vs-filter-panel-vs-recently-viewed.md", "https://uxpatternsguide.com/agent/comparisons/saved-view-vs-saved-search-vs-saved-filter-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/search-history-vs-recently-searched-vs-saved-search-vs-recently-viewed.md" ] }, { "id": "saved-view", "name": "Saved view", "aliases": [ "custom view", "saved table view", "saved list view", "record view", "project view", "ticket view", "queue view", "view preset", "workspace view", "shared view" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Persisted named presentation state for a data workspace", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Data-heavy products let users tune columns, filters, grouping, layouts, and sort order, but without a saved view users must rebuild the same presentation repeatedly and teams cannot tell which shared view is authoritative.", "useWhen": "Users repeatedly return to a specific presentation of a changing data set.", "avoidWhen": "Only one current-session filter or sort choice needs to be changed.", "requiredStates": [ "No saved view selected with current display settings visible and saveable.", "Saved view list with active, private, team, shared, pinned, default, owner, last-updated, and result-count states.", "Applied saved view state with view name, layout, columns, filters, sort, grouping, and count summary.", "Modified-from-saved state when current display settings no longer match the saved definition." ], "commonMisuses": [ "Saving current rows instead of presentation settings and dynamic criteria.", "Calling a saved filter a saved view while hiding that columns, layout, grouping, and sort are also stored.", "Overwriting a shared or default view when the user intended a temporary personal adjustment.", "Applying a saved view with no preview of changed columns, filters, sort, grouping, or layout." ], "keywords": [ "saved", "view", "custom", "table", "list", "record", "project", "ticket", "queue", "preset", "workspace", "shared", "data", "display", "exploration", "ui-ux", "persisted", "named", "presentation", "state", "data-heavy", "products", "let", "tune", "columns", "filters", "grouping", "layouts", "sort", "order", "but", "without", "rebuild", "same", "repeatedly", "teams", "cannot", "tell", "which", "authoritative" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/saved-view.md", "json": "https://uxpatternsguide.com/agent/patterns/saved-view.json", "human": "https://uxpatternsguide.com/patterns/saved-view/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-preference-center.md", "https://uxpatternsguide.com/agent/comparisons/dashboard-layout-vs-data-visualization-vs-table-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/follow-subscribe-vs-notification-center-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/pinned-items-vs-favorites-vs-recently-viewed-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/saved-view-vs-saved-search-vs-saved-filter-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/user-controlled-density-vs-settings-management-vs-data-grid-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/user-controlled-layout-vs-custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-window-splitter.md" ] }, { "id": "scheduling", "name": "Scheduling", "aliases": [ "schedule meeting", "event scheduling", "meeting scheduler", "calendar scheduling", "availability scheduling", "schedule assistant", "recurring meeting setup", "schedule event", "rescheduling", "availability setup" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Workflow for arranging time, attendees, availability, recurrence, and reminders", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Scheduling fails when products reduce the task to date and time fields, hiding availability, attendees, calendars, rooms, recurrence, timezone, buffers, reminders, invitation state, and the difference between saving a draft and sending a scheduled event.", "useWhen": "Users coordinate time across people, resources, calendars, availability, or recurrence.", "avoidWhen": "The user only needs one remembered date or time field.", "requiredStates": [ "Draft event state", "Attendee entry and resolution state", "Availability loading state", "Free/busy conflict state" ], "commonMisuses": [ "Treating scheduling as only a date field and a time field.", "Hiding attendee or room conflicts until after invitations are sent.", "Sending invitations when users expected to save a draft.", "Changing an entire recurring series when users intended one occurrence." ], "keywords": [ "scheduling", "schedule", "meeting", "event", "scheduler", "calendar", "availability", "assistant", "recurring", "setup", "rescheduling", "task", "workflow", "patterns", "ui-ux", "arranging", "time", "attendees", "recurrence", "reminders", "fails", "products", "reduce", "date", "fields", "hiding", "calendars", "rooms", "timezone", "buffers", "invitation", "state", "difference", "between", "saving", "draft", "sending", "scheduled", "provide", "gathers" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/scheduling.md", "json": "https://uxpatternsguide.com/agent/patterns/scheduling.json", "human": "https://uxpatternsguide.com/patterns/scheduling/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/scheduling-vs-booking-vs-calendar-view-vs-date-picker.md" ] }, { "id": "scope-clarification", "name": "Scope clarification", "aliases": [ "AI clarification question", "clarify scope", "scope question", "ask a clarifying question", "narrow AI task", "disambiguate request", "clarify before acting", "assistant scope prompt", "missing scope prompt", "task boundary clarification" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "AI clarification surface that asks for missing task boundaries before answering, planning, retrieving, or using tools", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI systems often receive requests with missing boundaries, conflicting references, or risky scope, and answering or acting immediately can create irrelevant output, wrong assumptions, privacy exposure, unsafe tool use, or user mistrust.", "useWhen": "A user's AI request has missing object, audience, timeframe, source, workspace, permission, output-depth, or action-target boundaries.", "avoidWhen": "The request is clear enough to answer safely and clarification would only slow the user down.", "requiredStates": [ "Ambiguous request state with original prompt preserved and missing scope named.", "Ambiguous object, audience, timeframe, source set, record set, workspace, permission, output depth, and authority states.", "Clarification question state with bounded choices, custom answer option, recommended default when safe, and cancel path.", "Selected scope state that previews how the answer, plan, retrieval, or tool action will use the scope." ], "commonMisuses": [ "Guessing broad scope without revealing the assumption.", "Asking a long questionnaire when one boundary would let the task proceed.", "Using a clarification question to rewrite the user's prompt invisibly.", "Asking for clarification after the system has already acted." ], "keywords": [ "scope", "clarification", "question", "clarify", "ask", "clarifying", "narrow", "task", "disambiguate", "request", "before", "acting", "assistant", "prompt", "missing", "boundary", "automation", "ui-ux", "surface", "asks", "boundaries", "answering", "planning", "retrieving", "using", "tools", "systems", "often", "receive", "requests", "conflicting", "references", "risky", "immediately", "create", "irrelevant", "output", "wrong", "assumptions", "privacy" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/scope-clarification.md", "json": "https://uxpatternsguide.com/agent/patterns/scope-clarification.json", "human": "https://uxpatternsguide.com/patterns/scope-clarification/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/scope-clarification-vs-prompt-box-vs-search-scope-selector-vs-agent-plan-preview-vs-human-approval-gate-vs-chat-interface.md" ] }, { "id": "search-history", "name": "Search history", "aliases": [ "search activity", "query history", "activity history", "managed search history", "account search history", "search activity controls" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Search activity management surface with deletion and capture controls", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Stored search activity can help recall work and personalize results, but without a clear management surface users cannot see what was saved, where it came from, how long it remains, or how to delete or pause it.", "useWhen": "Search activity persists beyond the current session and users need to inspect or control it.", "avoidWhen": "The product only needs a short inline list of recent queries for quick rerun.", "requiredStates": [ "Empty history state with storage scope and next steps.", "Populated history state with query, source, timestamp, and scope for each event.", "Filtered state by product, source, date, scope, or device.", "Delete-one state that removes a single search activity entry only." ], "commonMisuses": [ "Using search history as a generic label for a short recently searched dropdown.", "Deleting saved searches, viewed records, bookmarks, or filters when the user only chose to delete search history.", "Letting users pause future history but hiding that old entries remain stored.", "Showing another account's or shared device's sensitive queries without a scope label." ], "keywords": [ "search", "history", "activity", "query", "managed", "account", "controls", "browse", "discovery", "ui-ux", "management", "surface", "deletion", "capture", "stored", "help", "recall", "work", "personalize", "results", "but", "without", "clear", "cannot", "see", "what", "was", "saved", "where", "came", "how", "long", "remains", "delete", "pause", "provide", "scoped", "search-history", "exposes", "events" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/search-history.md", "json": "https://uxpatternsguide.com/agent/patterns/search-history.json", "human": "https://uxpatternsguide.com/patterns/search-history/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-log-vs-timeline-vs-notification-center-vs-search-history.md", "https://uxpatternsguide.com/agent/comparisons/search-history-vs-recently-searched-vs-saved-search-vs-recently-viewed.md" ] }, { "id": "search-result-highlighting", "name": "Search result highlighting", "aliases": [ "query term highlighting", "hit highlighting", "matched term emphasis", "result snippet highlighting", "search match highlighting", "highlighted snippets", "keyword highlighting" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Highlighted matching terms and snippets inside returned search results", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users can receive plausible search results but still cannot tell where the query matched, which field was relevant, or whether a result deserves attention.", "useWhen": "Results contain enough text that users need to scan for where the query matched.", "avoidWhen": "The result title is the entire match and extra emphasis would add noise.", "requiredStates": [ "No query state with no highlighted terms.", "Submitted query with one or more highlighted result fields.", "Multiple matching fields state with title, snippet, and metadata labels.", "Snippet truncation state with ellipsis or fragment boundaries around removed text." ], "commonMisuses": [ "Highlighting whole cards, rows, or table columns instead of the matching terms.", "Using color-only yellow text as the sole signal that a word matched.", "Showing highlights that come from popularity, ads, categories, or business rules instead of the submitted query.", "Injecting backend highlight HTML directly into result cards without sanitization." ], "keywords": [ "search", "result", "highlighting", "query", "term", "hit", "matched", "emphasis", "snippet", "match", "highlighted", "snippets", "keyword", "browse", "discovery", "ui-ux", "matching", "terms", "inside", "returned", "results", "receive", "plausible", "but", "still", "cannot", "tell", "where", "which", "field", "was", "relevant", "whether", "deserves", "attention", "show", "query-linked", "fields", "provide", "enough" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/search-result-highlighting.md", "json": "https://uxpatternsguide.com/agent/patterns/search-result-highlighting.json", "human": "https://uxpatternsguide.com/patterns/search-result-highlighting/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/search-result-highlighting-vs-basic-search-vs-search-suggestions-vs-no-results-recovery.md" ] }, { "id": "search-scope-selector", "name": "Search scope selector", "aliases": [ "scoped search", "search within selector", "search scope control", "corpus selector", "search vertical selector", "repository search scope", "site search scope", "conversation search scope" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Control that selects which corpus, location, or result source a query searches", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users search the wrong corpus when products have multiple searchable locations, content types, repositories, spaces, conversations, sites, or permission boundaries but the UI hides where the query will run.", "useWhen": "The same query can search different repositories, sites, workspaces, spaces, channels, result types, teams, or organization-wide indexes.", "avoidWhen": "There is only one searchable corpus and scope selection would be decorative.", "requiredStates": [ "Default scope state based on current location or product-wide policy.", "Explicitly selected scope state before the query is submitted.", "Submitted query state with scope name and result count.", "Scope changed state where the query is preserved and results rerun." ], "commonMisuses": [ "Putting scope only in placeholder text, which disappears when users type.", "Using tabs as scope selectors without saying whether future searches will use the selected tab.", "Calling scope choices filters even though they change the corpus before attribute filtering begins.", "Changing scope while leaving the previous result count, highlights, or selected result active." ], "keywords": [ "search", "scope", "selector", "scoped", "within", "control", "corpus", "vertical", "repository", "site", "conversation", "browse", "discovery", "ui-ux", "selects", "which", "location", "result", "source", "query", "searches", "wrong", "products", "have", "multiple", "searchable", "locations", "content", "types", "repositories", "spaces", "conversations", "sites", "permission", "boundaries", "but", "hides", "where", "will", "run" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/search-scope-selector.md", "json": "https://uxpatternsguide.com/agent/patterns/search-scope-selector.json", "human": "https://uxpatternsguide.com/patterns/search-scope-selector/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/advanced-search-vs-basic-search-vs-filter-panel-vs-search-scope-selector.md", "https://uxpatternsguide.com/agent/comparisons/scope-clarification-vs-prompt-box-vs-search-scope-selector-vs-agent-plan-preview-vs-human-approval-gate-vs-chat-interface.md", "https://uxpatternsguide.com/agent/comparisons/search-scope-selector-vs-basic-search-vs-filter-panel-vs-tabs.md" ] }, { "id": "search-suggestions", "name": "Search suggestions", "aliases": [ "query suggestions", "suggested searches" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Suggested-query surface", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need help forming a useful search query before they submit or while they refine it.", "useWhen": "The system can predict likely queries.", "avoidWhen": "Suggestions are low quality or biased toward irrelevant content.", "requiredStates": [ "No input state.", "Typing state with suggestions.", "Selected suggestion state.", "No suggestion state." ], "commonMisuses": [ "Auto-submitting the top suggestion without confirmation.", "Showing unrelated promoted results as suggestions.", "Overwriting typed text unexpectedly." ], "keywords": [ "search", "suggestions", "query", "suggested", "searches", "browse", "discovery", "ui-ux", "suggested-query", "surface", "need", "help", "forming", "useful", "before", "they", "submit", "while", "refine", "show", "relevant", "queries", "result", "hints", "tied", "current", "input", "preserving", "control", "final", "render", "field", "active", "option", "selected", "suggestion", "no-suggestion", "state", "keep", "visually" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/search-suggestions.md", "json": "https://uxpatternsguide.com/agent/patterns/search-suggestions.json", "human": "https://uxpatternsguide.com/patterns/search-suggestions/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/prompt-box-vs-prompt-suggestions-vs-command-palette-vs-search-suggestions-vs-textarea.md", "https://uxpatternsguide.com/agent/comparisons/prompt-suggestions-vs-search-suggestions-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/query-correction-vs-search-suggestions-vs-no-results-recovery-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/recently-searched-vs-search-suggestions-vs-saved-search-vs-recently-viewed.md", "https://uxpatternsguide.com/agent/comparisons/search-result-highlighting-vs-basic-search-vs-search-suggestions-vs-no-results-recovery.md", "https://uxpatternsguide.com/agent/comparisons/search-suggestions-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/typeahead-vs-autocomplete-vs-search-suggestions-vs-basic-search.md" ] }, { "id": "security-warning", "name": "Security warning", "aliases": [ "unsafe-site warning", "deceptive-site warning", "phishing warning", "malware warning", "dangerous download warning", "certificate warning", "mixed-content warning", "connection not secure warning", "suspicious link warning", "browser interstitial warning" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Security-risk warning and safe interruption before unsafe navigation, download, submission, preview, or sensitive action", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Security warnings fail when they look like ordinary alerts, hide the actual threat, make override too easy, appear after damage is done, or force users to choose without enough destination, evidence, recovery, or reporting context.", "useWhen": "A threat signal indicates phishing, malware, deceptive site, unsafe download, invalid certificate, insecure connection, mixed-content submission, suspicious redirect, file preview risk, or account-security danger.", "avoidWhen": "The message is only a general severe consequence before a product action; use warning text.", "requiredStates": [ "Safe path state with primary Back to safety, Cancel, Remove, Use trusted route, or Contact admin action.", "Detected phishing or deceptive-site state.", "Malware or dangerous-download state.", "Invalid certificate or connection-not-secure state." ], "commonMisuses": [ "Using vague warning copy that does not say phishing, malware, certificate, insecure connection, dangerous download, or suspicious redirect.", "Making Continue the primary or only visible action.", "Showing the warning after credential entry, file execution, form submission, or preview rendering already happened.", "Hiding destination, file, publisher, redirect, or evidence details that users need to make a safe choice." ], "keywords": [ "security", "warning", "unsafe-site", "deceptive-site", "phishing", "malware", "dangerous", "download", "certificate", "mixed-content", "connection", "secure", "suspicious", "link", "browser", "interstitial", "trust", "safety", "privacy", "ui-ux", "security-risk", "safe", "interruption", "before", "unsafe", "navigation", "submission", "preview", "sensitive", "action", "warnings", "fail", "they", "look", "like", "ordinary", "alerts", "hide", "actual", "threat" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/security-warning.md", "json": "https://uxpatternsguide.com/agent/patterns/security-warning.json", "human": "https://uxpatternsguide.com/patterns/security-warning/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/dangerous-action-review-vs-destructive-action-confirmation-vs-typed-confirmation-vs-human-approval-gate-vs-review-before-submit-vs-security-warning.md", "https://uxpatternsguide.com/agent/comparisons/exit-this-page-quickly-vs-security-warning-vs-sensitive-data-reveal-vs-session-timeout-vs-privacy-settings-vs-back-link.md", "https://uxpatternsguide.com/agent/comparisons/official-site-banner-vs-banner-vs-site-alert-vs-notification-banner-vs-security-warning-vs-service-navigation.md", "https://uxpatternsguide.com/agent/comparisons/qr-scan-vs-camera-capture-vs-permission-request-vs-file-upload-vs-two-factor-authentication-vs-security-warning.md", "https://uxpatternsguide.com/agent/comparisons/report-abuse-vs-review-queue-vs-comments-vs-security-warning-vs-permission-denied-state-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/security-warning-vs-warning-text-vs-alert-vs-permission-denied-state-vs-sensitive-data-reveal.md" ] }, { "id": "segmented-control", "name": "Segmented control", "aliases": [ "segmented button", "mode switcher" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Compact mode selector", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to switch between a small set of mutually exclusive modes, filters, or views in a compact area.", "useWhen": "There are a few mutually exclusive modes.", "avoidWhen": "Options are full content sections needing tab semantics.", "requiredStates": [ "Default selected segment.", "Unselected segment state.", "Focused segment state.", "Changed local view state." ], "commonMisuses": [ "Using segments for unrelated page navigation.", "Packing too many options into a tiny control.", "Using icons without labels for ambiguous modes.", "Using a segmented control to initiate actions such as add, edit, or delete." ], "keywords": [ "segmented", "control", "button", "mode", "switcher", "selection", "choice", "ui-ux", "compact", "selector", "need", "switch", "between", "small", "set", "mutually", "exclusive", "modes", "filters", "views", "area", "present", "adjacent", "options", "single", "one", "active", "segment", "immediate", "local", "effect", "render", "horizontal", "group", "two", "four", "segments", "selected", "state", "visible" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/segmented-control.md", "json": "https://uxpatternsguide.com/agent/patterns/segmented-control.json", "human": "https://uxpatternsguide.com/patterns/segmented-control/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/button-group-vs-segmented-control-vs-menu-button-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/chip-selection-vs-filter-chips-vs-checkbox-group-vs-segmented-control.md", "https://uxpatternsguide.com/agent/comparisons/tabs-vs-segmented-control-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/toggle-switch-vs-checkbox-group-vs-radio-group-vs-segmented-control.md" ] }, { "id": "select", "name": "Select", "aliases": [ "dropdown select", "single select" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Single-choice dropdown control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to choose one value from a known list that is too long or secondary to keep fully expanded on the page.", "useWhen": "The user chooses one option from a moderate known list.", "avoidWhen": "The option set is short and comparison matters.", "requiredStates": [ "Closed state with empty option or current selected value.", "Open native option menu or equivalent listbox state.", "Selected option state after the menu closes.", "Required validation error state when no valid option is chosen." ], "commonMisuses": [ "Custom select with no keyboard support or hidden selected state.", "Using select to hide two or three obvious choices that should be compared.", "Placeholder-only labels that disappear after selection.", "Auto-submitting the form as soon as a user arrows through options." ], "keywords": [ "select", "dropdown", "single", "selection", "choice", "ui-ux", "single-choice", "control", "need", "choose", "one", "value", "known", "list", "too", "long", "secondary", "keep", "fully", "expanded", "page", "native", "persistent", "label", "optional", "hint", "visible", "closed", "empty", "option", "validation", "does", "auto-submit", "change", "render", "text", "finite", "selected", "state", "prefer" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/select.md", "json": "https://uxpatternsguide.com/agent/patterns/select.json", "human": "https://uxpatternsguide.com/patterns/select/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/combobox-vs-autocomplete-vs-select-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/date-input-vs-input-mask-vs-text-input-vs-select.md", "https://uxpatternsguide.com/agent/comparisons/date-picker-vs-date-input-vs-select-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/dependent-fields-vs-select-vs-inline-validation-vs-complete-complex-form.md", "https://uxpatternsguide.com/agent/comparisons/inaccessible-custom-select-vs-select-vs-autocomplete-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/listbox-vs-select-vs-combobox-vs-multi-select.md", "https://uxpatternsguide.com/agent/comparisons/menu-button-vs-command-palette-vs-select-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/name-entry-vs-text-input-vs-autocomplete-vs-select-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/radio-group-vs-select.md", "https://uxpatternsguide.com/agent/comparisons/slider-vs-text-input-vs-select-vs-toggle-switch.md", "https://uxpatternsguide.com/agent/comparisons/spinbutton-vs-slider-vs-text-input-vs-select.md", "https://uxpatternsguide.com/agent/comparisons/text-input-vs-autocomplete-vs-select-vs-radio-group.md", "https://uxpatternsguide.com/agent/comparisons/time-picker-vs-text-input-vs-select-vs-input-mask.md" ] }, { "id": "sensitive-data-reveal", "name": "Sensitive-data reveal", "aliases": [ "masked value reveal", "show sensitive value", "hide sensitive value", "secret reveal", "API key reveal", "token reveal", "password reveal", "masked input reveal", "peek sensitive data", "redacted value reveal" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Controlled reveal and re-hiding of masked sensitive values, secrets, tokens, credentials, identifiers, or private records", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Products often need to let users inspect or transfer sensitive values, but uncontrolled reveal exposes secrets to shoulder surfing, screenshots, logs, clipboard leakage, support tools, or accidental persistence.", "useWhen": "Users need to inspect, copy, verify, rotate, transcribe, or compare a sensitive value that should normally stay masked or redacted.", "avoidWhen": "The task is only entering a password into an authentication form; use password input.", "requiredStates": [ "Masked state with the field identity, safe suffix or count, and reveal eligibility.", "Reveal action state with an explicit button or toggle that names what will become visible.", "Hide action state while the value is visible.", "Hold-to-reveal or peek state for short-lived inspection." ], "commonMisuses": [ "Showing sensitive values in plain text by default.", "Revealing values on hover, focus, validation error, print preview, copied status, or after blur.", "Providing a reveal action without a hide action.", "Copying a hidden secret to the clipboard without warning or status." ], "keywords": [ "sensitive-data", "reveal", "masked", "value", "show", "sensitive", "hide", "secret", "api", "key", "token", "password", "input", "peek", "data", "redacted", "trust", "safety", "privacy", "ui-ux", "controlled", "re-hiding", "values", "secrets", "tokens", "credentials", "identifiers", "private", "records", "products", "often", "need", "let", "inspect", "transfer", "but", "uncontrolled", "exposes", "shoulder", "surfing" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/sensitive-data-reveal.md", "json": "https://uxpatternsguide.com/agent/patterns/sensitive-data-reveal.json", "human": "https://uxpatternsguide.com/patterns/sensitive-data-reveal/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/age-gate-vs-consent-prompt-vs-permission-request-vs-sensitive-data-reveal-vs-privacy-settings-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/camera-capture-vs-file-upload-vs-permission-request-vs-sensitive-data-reveal-vs-full-screen-takeover-vs-drag-and-drop-upload.md", "https://uxpatternsguide.com/agent/comparisons/data-export-vs-bulk-import-vs-audit-log-vs-table-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/exit-this-page-quickly-vs-security-warning-vs-sensitive-data-reveal-vs-session-timeout-vs-privacy-settings-vs-back-link.md", "https://uxpatternsguide.com/agent/comparisons/security-warning-vs-warning-text-vs-alert-vs-permission-denied-state-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/sensitive-data-reveal-vs-password-input-vs-input-mask-vs-typed-confirmation-vs-permission-request.md" ] }, { "id": "service-navigation", "name": "Service navigation", "aliases": [ "service nav", "service header navigation", "service menu", "service-level navigation", "GOV.UK service navigation" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Service-scoped identity and navigation strip", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users in a named service need to recognize the service they are using and move among its top-level service areas without confusing service-level movement with GOV.UK-wide, product-wide, local, or page-specific navigation.", "useWhen": "A named service is used repeatedly by some users.", "avoidWhen": "The journey is a simple end-to-end transaction with a clear sequence.", "requiredStates": [ "Default state with general header, visible service name, service-home link, and service navigation links.", "Current page or current section state that matches the main heading and route.", "Active group state for a service area when a child page belongs under that service link.", "Mobile collapsed state with a Menu button connected to the service link list." ], "commonMisuses": [ "Using service navigation as a site map for every page in the service.", "Putting GOV.UK topic menus, whole-product destinations, sign-out, and local page anchors into one service link row.", "Showing a current service link that does not match the content heading.", "Hiding the service name on deep-linked pages." ], "keywords": [ "service", "navigation", "nav", "header", "menu", "service-level", "gov", "wayfinding", "ui-ux", "service-scoped", "identity", "strip", "named", "need", "recognize", "they", "using", "move", "among", "its", "top-level", "areas", "without", "confusing", "movement", "uk-wide", "product-wide", "local", "page-specific", "provide", "shows", "name", "links", "home", "exposes", "most", "important", "destinations", "tools", "marks" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/service-navigation.md", "json": "https://uxpatternsguide.com/agent/patterns/service-navigation.json", "human": "https://uxpatternsguide.com/patterns/service-navigation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/official-site-banner-vs-banner-vs-site-alert-vs-notification-banner-vs-security-warning-vs-service-navigation.md", "https://uxpatternsguide.com/agent/comparisons/service-navigation-vs-global-navigation-vs-side-navigation.md", "https://uxpatternsguide.com/agent/comparisons/utility-navigation-vs-global-navigation-vs-service-navigation.md" ] }, { "id": "service-unavailable-page", "name": "Service unavailable page", "aliases": [ "503 page", "service outage page", "maintenance page", "shutter page", "service closed page", "planned outage page", "temporary closure page", "service down page" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Whole-service unavailable page", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users lose time, trust, saved work, or deadline paths when a whole service is unavailable but the page hides scope, duration, work-safety, alternate channels, and whether retrying is useful.", "useWhen": "A whole service, transaction entry point, or route is closed or not ready to handle requests.", "avoidWhen": "Only one local section or action failed and users can recover inside the current page.", "requiredStates": [ "Planned maintenance page with start or return time.", "Unexpected outage page with status update or request ID.", "Overload page with retry-after guidance.", "Saved draft state that says answers are retained and for how long." ], "commonMisuses": [ "Using a full-page spinner for a closed service.", "Showing only 503 or Something went wrong without service scope, return time, or support route.", "Sending users to a homepage with no explanation of the outage.", "Promising saved work without checking transaction state." ], "keywords": [ "service", "unavailable", "page", "503", "outage", "maintenance", "shutter", "closed", "planned", "temporary", "closure", "down", "feedback", "status", "system", "state", "ui-ux", "whole-service", "lose", "time", "trust", "saved", "work", "deadline", "paths", "whole", "but", "hides", "scope", "duration", "work-safety", "alternate", "channels", "whether", "retrying", "useful", "show", "durable", "identifies", "affected" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/service-unavailable-page.md", "json": "https://uxpatternsguide.com/agent/patterns/service-unavailable-page.json", "human": "https://uxpatternsguide.com/patterns/service-unavailable-page/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/fallback-path-vs-retry-vs-error-state-vs-service-unavailable-page.md", "https://uxpatternsguide.com/agent/comparisons/graceful-degradation-vs-fallback-path-vs-offline-state-vs-service-unavailable-page.md", "https://uxpatternsguide.com/agent/comparisons/page-not-found-page-vs-service-unavailable-page-vs-error-state-vs-empty-state.md", "https://uxpatternsguide.com/agent/comparisons/service-unavailable-page-vs-error-state-vs-offline-state-vs-site-alert.md" ] }, { "id": "session-timeout", "name": "Session timeout", "aliases": [ "session expired", "timed-out session", "signed-out due to inactivity", "expired authentication", "session ended", "reauthenticate to continue", "post-timeout recovery", "idle logout" ], "category": "Trust, Safety, And Privacy", "patternType": "ui-ux", "surfaceType": "Expired authenticated-session state and safe return-to-task recovery", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "After a session expires, products often leak private content, preserve stale authenticated controls, mislabel the state as permission or network failure, lose return context, or force users to restart work that could have been preserved safely.", "useWhen": "An authenticated session has expired or been terminated while the user was on a protected task.", "avoidWhen": "The session is still active and users can act before expiry; use session timeout warning.", "requiredStates": [ "Expired session state with private content hidden.", "Inactivity timeout state with safe timestamp or duration explanation.", "Absolute timeout or policy timeout state that requires reauthentication.", "Signed-out recovery state with preserved return destination." ], "commonMisuses": [ "Leaving the private page readable behind a timeout modal.", "Calling an expired session Access denied and offering request access.", "Letting stale Submit, Export, Approve, Delete, Download, or Pay buttons remain active after timeout.", "Dropping users on an unrelated dashboard after reauthentication even when a safe return target exists." ], "keywords": [ "session", "timeout", "expired", "timed-out", "signed-out", "due", "inactivity", "authentication", "ended", "reauthenticate", "continue", "post-timeout", "recovery", "idle", "logout", "trust", "safety", "privacy", "ui-ux", "authenticated-session", "state", "safe", "return-to-task", "after", "expires", "products", "often", "leak", "private", "content", "preserve", "stale", "authenticated", "controls", "mislabel", "permission", "network", "failure", "lose", "return" ], "lastVerified": "2026-06-12", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/session-timeout.md", "json": "https://uxpatternsguide.com/agent/patterns/session-timeout.json", "human": "https://uxpatternsguide.com/patterns/session-timeout/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/exit-this-page-quickly-vs-security-warning-vs-sensitive-data-reveal-vs-session-timeout-vs-privacy-settings-vs-back-link.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-vs-session-timeout-warning-vs-sign-in-vs-permission-denied-state-vs-autosave-recovery.md" ] }, { "id": "session-timeout-warning", "name": "Session timeout warning", "aliases": [ "session expiry warning", "idle timeout warning", "inactivity warning", "reauthentication warning", "stay signed in warning", "timeout countdown", "session ending notice" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Authenticated-session expiry and reauthentication boundary warning", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Authenticated products can expire idle or long-running sessions without enough warning, causing loss of work, privacy exposure, confusing access errors, duplicate submissions, or failed reauthentication recovery.", "useWhen": "An authenticated session can expire because of inactivity, overall lifetime, assurance policy, or reauthentication requirement.", "avoidWhen": "There is no authenticated session boundary and the issue is ordinary navigation away.", "requiredStates": [ "Active session with no warning.", "Early idle warning with remaining time and current save state.", "Imminent timeout dialog with Stay signed in or policy-valid action.", "Extension in progress state tied to server confirmation." ], "commonMisuses": [ "Using a client-only timer that disagrees with the server session.", "Showing Session expiring soon without a time, consequence, or action.", "Logging users out without preserving form work that could have been saved.", "Offering unlimited extension where policy requires reauthentication or termination." ], "keywords": [ "session", "timeout", "warning", "expiry", "idle", "inactivity", "reauthentication", "stay", "signed", "countdown", "ending", "notice", "error", "prevention", "recovery", "ui-ux", "authenticated-session", "boundary", "authenticated", "products", "expire", "long-running", "sessions", "without", "enough", "causing", "loss", "work", "privacy", "exposure", "confusing", "access", "errors", "duplicate", "submissions", "failed", "track", "server-backed", "absolute", "boundaries" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/session-timeout-warning.md", "json": "https://uxpatternsguide.com/agent/patterns/session-timeout-warning.json", "human": "https://uxpatternsguide.com/patterns/session-timeout-warning/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/login-vs-sign-in-vs-password-input-vs-session-timeout-warning.md", "https://uxpatternsguide.com/agent/comparisons/permission-recovery-vs-permission-denied-state-vs-session-timeout-warning-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-vs-session-timeout-warning-vs-sign-in-vs-permission-denied-state-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-warning-vs-exit-warning-vs-autosave-form-vs-permission-denied-state.md", "https://uxpatternsguide.com/agent/comparisons/sign-in-vs-account-creation-vs-password-input-vs-session-timeout-warning.md" ] }, { "id": "settings-management", "name": "Settings management", "aliases": [ "settings page", "preferences", "app settings", "account settings", "configuration settings", "manage settings", "preferences management", "settings center", "settings panel" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Dedicated user or app configuration management surface", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Persistent preferences and configuration become risky when users cannot find the right setting, understand its scope, distinguish immediate from saved changes, see current values, recover defaults, or tell which dependencies and permissions control it.", "useWhen": "Users need to inspect and change persistent app, account, workspace, privacy, notification, display, integration, device, or system behavior.", "avoidWhen": "The task is a one-time transaction, submission, setup wizard, or onboarding flow.", "requiredStates": [ "Settings overview with categories and current values", "Focused section or detail state", "Immediate setting applied state", "Unsaved changes state" ], "commonMisuses": [ "Using settings as a dumping ground for unrelated navigation, billing, help, profile setup, onboarding, or destructive account actions.", "Mixing immediate and explicit-save settings without clear status or grouping.", "Hiding current values behind edit buttons so users cannot inspect configuration quickly.", "Making settings available in multiple places with contradictory values or labels." ], "keywords": [ "settings", "management", "page", "preferences", "app", "account", "configuration", "manage", "center", "panel", "task", "workflow", "patterns", "ui-ux", "dedicated", "surface", "persistent", "become", "risky", "cannot", "find", "right", "setting", "understand", "its", "scope", "distinguish", "immediate", "saved", "changes", "see", "current", "values", "recover", "defaults", "tell", "which", "dependencies", "permissions", "control" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/settings-management.md", "json": "https://uxpatternsguide.com/agent/patterns/settings-management.json", "human": "https://uxpatternsguide.com/patterns/settings-management/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/adaptive-defaults-vs-settings-management-vs-preference-center-vs-recommendations.md", "https://uxpatternsguide.com/agent/comparisons/automation-rule-builder-vs-human-approval-gate-vs-approval-workflow-vs-settings-management-vs-complete-complex-form-vs-recommended-next-action.md", "https://uxpatternsguide.com/agent/comparisons/delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-settings-management-vs-restore-from-trash.md", "https://uxpatternsguide.com/agent/comparisons/follow-subscribe-vs-notification-center-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/language-selector-vs-settings-management-vs-preference-center-vs-adaptive-defaults.md", "https://uxpatternsguide.com/agent/comparisons/notification-preferences-vs-settings-management-vs-notification-center-vs-follow-subscribe.md", "https://uxpatternsguide.com/agent/comparisons/preference-center-vs-settings-management-vs-notification-preferences-vs-cookie-banner.md", "https://uxpatternsguide.com/agent/comparisons/presence-vs-mentions-vs-notification-center-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/privacy-settings-vs-settings-management-vs-preference-center-vs-consent-prompt-vs-permission-request-vs-data-export.md", "https://uxpatternsguide.com/agent/comparisons/settings-management-vs-complete-complex-form-vs-toggle-switch-vs-progressive-disclosure.md", "https://uxpatternsguide.com/agent/comparisons/settings-page-vs-settings-management-vs-side-navigation-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/user-controlled-density-vs-settings-management-vs-data-grid-vs-saved-view.md" ] }, { "id": "settings-page", "name": "Settings page", "aliases": [ "settings screen", "settings destination", "settings hub", "settings landing page", "preferences page", "account settings page", "app settings page", "workspace settings page", "settings section page", "settings information architecture" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "Dedicated page shell and section map for settings destinations", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Settings destinations become disorienting when the page shell hides section hierarchy, current location, entry route, search, responsive section switching, or boundaries between ordinary settings and unrelated account tasks.", "useWhen": "A product has multiple settings sections and users need a durable destination to find the right area.", "avoidWhen": "There is only one simple in-context setting that can be changed where the user already is.", "requiredStates": [ "Settings landing or overview state with section groups", "Selected section state with title, summary, and current navigation marker", "Deep-linked section state that preserves location context", "Search or find-in-settings results state" ], "commonMisuses": [ "Treating Settings as a miscellaneous link dump for billing, help, onboarding, profile completion, invoices, support, and destructive account actions.", "Using tabs for too many unrelated settings categories, causing hidden overflow and weak deep-link context.", "Styling settings section navigation exactly like global app navigation, so users cannot tell whether they changed app area or settings section.", "Deep-linking directly to a setting form without page title, section list, or scope label." ], "keywords": [ "settings", "page", "screen", "destination", "hub", "landing", "preferences", "account", "app", "workspace", "section", "information", "architecture", "personalization", "preference", "ui-ux", "dedicated", "shell", "map", "destinations", "become", "disorienting", "hides", "hierarchy", "current", "location", "entry", "route", "search", "responsive", "switching", "boundaries", "between", "ordinary", "unrelated", "tasks", "provide", "structure", "explicit", "identity" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/settings-page.md", "json": "https://uxpatternsguide.com/agent/patterns/settings-page.json", "human": "https://uxpatternsguide.com/patterns/settings-page/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/settings-page-vs-settings-management-vs-side-navigation-vs-tabs.md" ] }, { "id": "share-dialog", "name": "Share dialog", "aliases": [ "share sheet", "sharing dialog", "sharing modal", "share file dialog", "copy link dialog", "manage access dialog", "link sharing", "grant access dialog", "send link dialog", "native share sheet" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Object-level sharing control for recipients, link scope, roles, delivery, copy-link, native share, and access management", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Sharing an object changes who can see, edit, copy, download, forward, or request access to sensitive material, but many interfaces collapse recipient entry, link copying, native sharing, role changes, and revocation into a single ambiguous Share action.", "useWhen": "A user needs to share one object or a small set of selected objects with people, groups, domains, links, or device targets.", "avoidWhen": "The task is inviting a person to become a workspace, organization, or team member rather than sharing a specific object.", "requiredStates": [ "Object identity and current access summary state", "Recipient entry, group entry, suggested recipient, unresolved recipient, duplicate recipient, and external recipient states", "Role selection states such as Viewer, Commenter, Editor, Owner, Can view, Can edit, and custom product roles", "Link scope states such as Restricted, specific people, organization, team, anyone with link, public, password-protected, and expired link" ], "commonMisuses": [ "Using Share as a one-click public-link generator without showing the link scope.", "Treating native OS share as if it grants product access.", "Hiding current viewers, editors, and link holders from the user who is about to change access.", "Defaulting to broad editor access when most shares should be restricted or view-only." ], "keywords": [ "share", "dialog", "sheet", "sharing", "modal", "file", "copy", "link", "manage", "access", "grant", "send", "native", "collaboration", "social", "interaction", "ui-ux", "object-level", "control", "recipients", "scope", "roles", "delivery", "copy-link", "management", "object", "changes", "who", "see", "edit", "download", "forward", "request", "sensitive", "material", "but", "many", "interfaces", "collapse", "recipient" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/share-dialog.md", "json": "https://uxpatternsguide.com/agent/patterns/share-dialog.json", "human": "https://uxpatternsguide.com/patterns/share-dialog/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/permission-sharing-vs-share-dialog-vs-invite-user-vs-permission-recovery.md", "https://uxpatternsguide.com/agent/comparisons/share-dialog-vs-invite-user-vs-object-picker-vs-modal-dialog.md" ] }, { "id": "sheet", "name": "Sheet", "aliases": [ "modal sheet", "task sheet", "form sheet", "side sheet", "adaptive sheet", "presentation sheet" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Adaptive temporary sheet for a context-bound child task", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need a temporary child task related to the current context, but the task needs more room and stronger dismissal rules than a small dialog or popover.", "useWhen": "A user starts a short context-bound task that needs more room than a dialog but should not become a full page.", "avoidWhen": "The content is mainly destination navigation.", "requiredStates": [ "Closed parent state with an opener tied to the object, field, or task that launches the sheet.", "Opening state that moves focus into the sheet and communicates whether the parent is inert or shareable.", "Open sheet state with visible title, optional subtitle or selected-object identity, close affordance, body content, and task actions.", "Dirty state when edits, selections, or uploads inside the sheet have not been saved." ], "commonMisuses": [ "Using a sheet as a catch-all panel for navigation, filters, help, settings, and unrelated actions.", "Allowing swipe, Escape, outside click, or back to discard unsaved sheet edits silently.", "Opening a sheet for a tiny sentence of help that belongs in inline text, tooltip, hover card, or popover.", "Using a dismissible sheet for an urgent mandatory response that needs alert-dialog behavior." ], "keywords": [ "sheet", "modal", "task", "form", "side", "adaptive", "presentation", "disclosure", "attention", "management", "ui-ux", "temporary", "context-bound", "child", "need", "related", "current", "context", "but", "needs", "more", "room", "stronger", "dismissal", "rules", "than", "small", "dialog", "popover", "present", "titled", "surface", "attached", "window", "viewport", "edge", "move", "focus", "keep", "parent" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/sheet.md", "json": "https://uxpatternsguide.com/agent/patterns/sheet.json", "human": "https://uxpatternsguide.com/patterns/sheet/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/bottom-sheet-vs-sheet-vs-drawer-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/full-screen-takeover-vs-modal-dialog-vs-sheet-vs-single-page-form.md", "https://uxpatternsguide.com/agent/comparisons/popover-vs-menu-button-vs-modal-dialog-vs-sheet.md", "https://uxpatternsguide.com/agent/comparisons/sheet-vs-drawer-vs-modal-dialog-vs-alert-dialog.md" ] }, { "id": "side-navigation", "name": "Side navigation", "aliases": [ "left navigation", "local navigation", "section navigation", "sidebar navigation", "side nav", "left panel navigation" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Persistent local hierarchy at the side of content", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users working inside a complex area need to see where the current page sits in that area's hierarchy and move to nearby pages without returning to global navigation or search.", "useWhen": "A product area has several related pages arranged in a visible hierarchy.", "avoidWhen": "The product only has a few pages and does not need a hierarchy.", "requiredStates": [ "Default state with the local section hierarchy visible beside content.", "Current page state that matches the content heading and route.", "Expanded parent state when a child or grandchild page is active.", "Collapsed parent state that does not hide the user's current location." ], "commonMisuses": [ "Duplicating global navigation links in the side navigation.", "Letting the highlighted item drift from the page heading or route.", "Hiding the active child under a collapsed parent.", "Building a five-level tree that users cannot scan." ], "keywords": [ "side", "navigation", "left", "local", "section", "sidebar", "nav", "panel", "wayfinding", "ui-ux", "persistent", "hierarchy", "content", "working", "inside", "complex", "area", "need", "see", "where", "current", "page", "sits", "move", "nearby", "pages", "without", "returning", "global", "search", "provide", "scoped", "short", "hierarchical", "labels", "expanded", "active", "ancestors", "unmistakable", "current-page" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/side-navigation.md", "json": "https://uxpatternsguide.com/agent/patterns/side-navigation.json", "human": "https://uxpatternsguide.com/patterns/side-navigation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/accordion-vs-tabs-vs-side-navigation-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/in-page-anchor-navigation-vs-breadcrumbs-vs-side-navigation.md", "https://uxpatternsguide.com/agent/comparisons/navigation-drawer-vs-side-navigation-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/responsive-navigation-adaptation-vs-global-navigation-vs-bottom-navigation-vs-navigation-drawer-vs-side-navigation-vs-header.md", "https://uxpatternsguide.com/agent/comparisons/service-navigation-vs-global-navigation-vs-side-navigation.md", "https://uxpatternsguide.com/agent/comparisons/settings-page-vs-settings-management-vs-side-navigation-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/side-navigation-vs-global-navigation-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/window-splitter-vs-details-panel-vs-drawer-vs-side-navigation.md" ] }, { "id": "sign-in", "name": "Sign in", "aliases": [ "sign-in", "sign into account", "returning user access", "authenticate", "start authenticated session", "account sign in", "password sign in", "passkey sign in", "single sign-on entry", "reauthenticate entry" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Returning-account authentication and session start flow", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Sign-in flows sit at the boundary between public and protected work, so unclear identity choices, password-manager resistance, revealing errors, missing recovery, or lost return destinations can block legitimate users while leaking account information to attackers.", "useWhen": "Users need to access an existing account or protected destination.", "avoidWhen": "The user is creating a new account, choosing a new password, or verifying a new contact method.", "requiredStates": [ "Initial sign-in state with service or destination context.", "Identifier entry state for email, username, phone, organization domain, or account name.", "Password, passkey, SSO, magic-link, or authenticator-choice state.", "Password-manager and autofill-ready state using credential autocomplete semantics." ], "commonMisuses": [ "Using account-specific error messages that reveal whether an identifier exists.", "Blocking paste, password managers, passkeys, or autofill by using nonstandard field names or autocomplete off.", "Sending successful users to a generic dashboard instead of the document, checkout, invite, draft, or action they requested.", "Making create account, forgot password, and sign in look like equal primary actions." ], "keywords": [ "sign", "sign-in", "account", "returning", "access", "authenticate", "start", "authenticated", "session", "password", "passkey", "single", "sign-on", "entry", "reauthenticate", "task", "workflow", "patterns", "ui-ux", "returning-account", "authentication", "flow", "flows", "sit", "boundary", "between", "public", "protected", "work", "unclear", "identity", "choices", "password-manager", "resistance", "revealing", "errors", "missing", "recovery", "lost", "return" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/sign-in.md", "json": "https://uxpatternsguide.com/agent/patterns/sign-in.json", "human": "https://uxpatternsguide.com/patterns/sign-in/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/login-vs-sign-in-vs-password-input-vs-session-timeout-warning.md", "https://uxpatternsguide.com/agent/comparisons/password-reset-vs-login-vs-password-creation-vs-email-address-entry.md", "https://uxpatternsguide.com/agent/comparisons/session-timeout-vs-session-timeout-warning-vs-sign-in-vs-permission-denied-state-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/sign-in-vs-account-creation-vs-password-input-vs-session-timeout-warning.md", "https://uxpatternsguide.com/agent/comparisons/two-factor-authentication-vs-sign-in-vs-login-vs-password-reset.md" ] }, { "id": "single-page-form", "name": "Single-page form", "aliases": [ "one-page form", "single-step form", "short form", "profile edit form", "all fields on one page" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Short related multi-field submission page", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Short related data-entry tasks become slower and more error-prone when users must hop across unnecessary pages, cannot compare related values, or lose multiple entered fields after validation.", "useWhen": "A compact set of related fields should be reviewed together before one submit.", "avoidWhen": "The form is long, high-stakes, branched, or too hard to recover from on one page.", "requiredStates": [ "Initial empty state with form heading, instruction, required or optional indicator explanation, grouped fields, and submit action.", "Partially completed state where users can compare values across related fields before saving.", "Submitting state that prevents duplicate submit without hiding entered values.", "Failed-submit state with linked error summary and matching field-level messages." ], "commonMisuses": [ "Using one page for a long complex application just to avoid designing steps.", "Splitting a compact related edit task into many pages so users cannot compare values.", "Mixing unrelated tasks, such as contact details, payment, uploads, and legal acceptance, under one submit button.", "Using placeholder text instead of persistent labels inside a multi-field form." ], "keywords": [ "single-page", "form", "one-page", "single-step", "short", "profile", "edit", "all", "fields", "one", "page", "input", "data", "entry", "ui-ux", "related", "multi-field", "submission", "data-entry", "tasks", "become", "slower", "more", "error-prone", "hop", "across", "unnecessary", "pages", "cannot", "compare", "values", "lose", "multiple", "entered", "after", "validation", "put", "small", "coherent", "set" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/single-page-form.md", "json": "https://uxpatternsguide.com/agent/patterns/single-page-form.json", "human": "https://uxpatternsguide.com/patterns/single-page-form/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/autosave-form-vs-single-page-form-vs-multi-step-form-vs-inline-edit.md", "https://uxpatternsguide.com/agent/comparisons/complete-complex-form-vs-single-page-form-vs-multi-step-form-vs-wizard.md", "https://uxpatternsguide.com/agent/comparisons/create-user-profile-vs-account-creation-vs-onboarding-vs-single-page-form.md", "https://uxpatternsguide.com/agent/comparisons/full-screen-takeover-vs-modal-dialog-vs-sheet-vs-single-page-form.md", "https://uxpatternsguide.com/agent/comparisons/inline-edit-vs-text-input-vs-single-page-form-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/multi-step-form-vs-single-page-form-vs-single-question-page-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/required-field-hidden-by-conditional-logic-vs-conditional-reveal-fields-vs-dependent-fields-vs-error-summary-vs-single-page-form-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/single-page-form-vs-single-question-page-vs-error-summary-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/validation-that-clears-user-input-vs-inline-validation-vs-error-summary-vs-single-page-form-vs-autosave-recovery-vs-error-state.md" ] }, { "id": "single-question-page", "name": "Single-question page", "aliases": [ "question page", "one question per page", "one thing per page", "single question step", "focused form page" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Focused form page for one answer or decision", "maturity": "standard", "platforms": [ "web", "mobile" ], "problem": "Users can struggle with dense forms when unrelated questions, unclear headings, hidden progress, early validation, or lost answers make each decision harder than it needs to be.", "useWhen": "One answer or decision should be read and completed without competing form questions.", "avoidWhen": "Users need to compare or edit several fields together before submitting.", "requiredStates": [ "Initial unanswered state with question heading, optional explanation, answer control, Back link, and Continue action.", "Answered state showing the selected or typed answer before submission.", "Conditional detail state when an answer reveals another field that still belongs to the same question.", "Missing-answer error state after Continue with the answer control still available." ], "commonMisuses": [ "Putting several unrelated questions on one page and still calling it one thing per page.", "Splitting one answer across several pages when the fields need to be understood together.", "Using the pattern as a substitute for choosing the right field control.", "Adding wizard chrome, progress locking, or branching UI to a simple isolated question." ], "keywords": [ "single-question", "page", "question", "one", "per", "thing", "single", "step", "focused", "form", "input", "data", "entry", "ui-ux", "answer", "decision", "struggle", "dense", "forms", "unrelated", "questions", "unclear", "headings", "hidden", "progress", "early", "validation", "lost", "answers", "make", "each", "harder", "than", "needs", "give", "conceptual", "its", "own", "heading", "concise" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/single-question-page.md", "json": "https://uxpatternsguide.com/agent/patterns/single-question-page.json", "human": "https://uxpatternsguide.com/patterns/single-question-page/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/conditional-reveal-fields-vs-dependent-fields-vs-radio-group-vs-single-question-page.md", "https://uxpatternsguide.com/agent/comparisons/file-upload-vs-text-input-vs-single-question-page-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/multi-step-form-vs-single-page-form-vs-single-question-page-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/single-page-form-vs-single-question-page-vs-error-summary-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/single-question-page-vs-text-input-vs-textarea-vs-error-summary.md" ] }, { "id": "site-alert", "name": "Site alert", "aliases": [ "sitewide alert", "emergency site alert", "global public alert", "service status alert", "top-of-site alert" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Urgent full-width sitewide alert near the top of every page", "maturity": "standard", "platforms": [ "web", "mobile" ], "problem": "Users may enter a site from any page during an urgent public or servicewide condition, and ordinary banners, page alerts, toasts, or home-page announcements can miss deep-linked users or hide the urgency inside local context.", "useWhen": "Urgent public, safety, operating-status, outage, closure, or availability information applies to the whole site or service.", "avoidWhen": "The message applies only to one product workspace, account, section, page flow, field, row, or task.", "requiredStates": [ "No-site-alert state when no urgent sitewide condition applies.", "Emergency site alert visible at the top of every affected page.", "Informational site alert for non-emergency servicewide operating status.", "Slim site alert for a short urgent message with a single detail link." ], "commonMisuses": [ "Showing a sitewide emergency only on the home page.", "Using a site alert for form validation, task success, local workflow feedback, or one account issue.", "Stacking multiple unrelated site alerts at the top of every page.", "Using bright emergency styling for routine announcements, newsletters, or low-impact notices." ], "keywords": [ "site", "alert", "sitewide", "emergency", "global", "public", "service", "status", "top-of-site", "feedback", "system", "state", "ui-ux", "urgent", "full-width", "near", "top", "every", "page", "may", "enter", "any", "during", "servicewide", "condition", "ordinary", "banners", "alerts", "toasts", "home-page", "announcements", "miss", "deep-linked", "hide", "urgency", "inside", "local", "context", "publish", "one" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/site-alert.md", "json": "https://uxpatternsguide.com/agent/patterns/site-alert.json", "human": "https://uxpatternsguide.com/patterns/site-alert/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/cookie-banner-vs-banner-vs-notification-banner-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/official-site-banner-vs-banner-vs-site-alert-vs-notification-banner-vs-security-warning-vs-service-navigation.md", "https://uxpatternsguide.com/agent/comparisons/phase-beta-banner-vs-banner-vs-notification-banner-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/service-unavailable-page-vs-error-state-vs-offline-state-vs-site-alert.md", "https://uxpatternsguide.com/agent/comparisons/site-alert-vs-banner-vs-notification-banner-vs-alert.md" ] }, { "id": "skip-link", "name": "Skip link", "aliases": [ "skip to content", "skip to main content", "skip navigation link", "bypass block link", "bypass navigation", "skipnav" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Keyboard-visible bypass link to primary page content", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Keyboard and assistive-technology users can be forced through the same repeated navigation and page chrome on every page before reaching the main content.", "useWhen": "Pages include repeated navigation, headers, breadcrumbs, filters, or other content before the main content.", "avoidWhen": "There is no repeated block before the main content and the first focusable control is already the content task.", "requiredStates": [ "Default hidden-but-focusable state before keyboard focus.", "Focused visible state shown as the first or near-first keyboard stop.", "Activated state where viewport and keyboard focus reach the main content target.", "Repeated-block bypass state showing the number or set of navigation controls skipped." ], "commonMisuses": [ "Placing the skip link inside the header or after the navigation it should bypass.", "Hiding the link in a way that removes it from focus order.", "Using vague text such as Skip, Next, Continue, or Jump.", "Pointing to a missing, duplicated, or visually obscured target." ], "keywords": [ "skip", "link", "content", "main", "navigation", "bypass", "block", "skipnav", "wayfinding", "ui-ux", "keyboard-visible", "primary", "page", "keyboard", "assistive-technology", "forced", "through", "same", "repeated", "chrome", "every", "before", "reaching", "provide", "focusable", "beginning", "becomes", "visible", "focus", "targets", "start", "moves", "past", "blocks", "activated", "render", "real", "usually", "first", "control" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/skip-link.md", "json": "https://uxpatternsguide.com/agent/patterns/skip-link.json", "human": "https://uxpatternsguide.com/patterns/skip-link/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/focus-traversal-vs-keyboard-shortcut-vs-skip-link-vs-modal-dialog-vs-toolbar-vs-data-grid.md", "https://uxpatternsguide.com/agent/comparisons/infinite-scroll-with-no-footer-access-vs-feed-vs-pagination-vs-card-list-vs-skip-link.md", "https://uxpatternsguide.com/agent/comparisons/skip-link-vs-in-page-anchor-navigation-vs-back-link.md" ] }, { "id": "slider", "name": "Slider", "aliases": [ "single-value slider", "range input", "trackbar", "scale", "value slider" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Single-value bounded range control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to adjust one bounded value, such as volume, brightness, opacity, or intensity, where relative position matters more than typing a precise number first.", "useWhen": "Users adjust one bounded value such as brightness, volume, opacity, zoom, intensity, cost tolerance, or preference strength.", "avoidWhen": "Users need to enter an exact, arbitrary, or high-stakes number.", "requiredStates": [ "Initial value state with visible label, min, max, current value, and unit.", "Focused thumb state.", "Dragging or actively adjusting state.", "Keyboard increment and larger-step state." ], "commonMisuses": [ "Using a slider for a binary on/off choice.", "Using a slider for exact financial, legal, account, or measurement values without a numeric field.", "Hiding a small set of named options behind a numeric rail.", "Using one slider for lower and upper range boundaries." ], "keywords": [ "slider", "single-value", "range", "input", "trackbar", "scale", "value", "selection", "choice", "ui-ux", "bounded", "control", "need", "adjust", "one", "such", "volume", "brightness", "opacity", "intensity", "where", "relative", "position", "matters", "more", "than", "typing", "precise", "number", "first", "provide", "labeled", "single-thumb", "known", "minimum", "maximum", "visible", "current", "unit", "sensible" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/slider.md", "json": "https://uxpatternsguide.com/agent/patterns/slider.json", "human": "https://uxpatternsguide.com/patterns/slider/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/meter-vs-progress-bar-vs-slider-vs-spinbutton.md", "https://uxpatternsguide.com/agent/comparisons/range-slider-vs-slider-vs-text-input-vs-date-range-picker.md", "https://uxpatternsguide.com/agent/comparisons/slider-vs-text-input-vs-select-vs-toggle-switch.md", "https://uxpatternsguide.com/agent/comparisons/spinbutton-vs-slider-vs-text-input-vs-select.md" ] }, { "id": "sort-controls", "name": "Sort controls", "aliases": [ "sort by", "sort dropdown", "sort menu", "sortable column header", "order by", "sort order", "result ordering" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Control for changing the order of an existing result set", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to change which relevant item appears first, but result ordering is often hidden, confused with filtering, applied only to the current page, or implemented with misleading labels and inaccessible table states.", "useWhen": "Users need to compare or act on a result set in different orders.", "avoidWhen": "Users need to narrow which records are shown rather than change their order.", "requiredStates": [ "Default sort state that identifies the initial order and why it is appropriate.", "Active sort state with visible attribute and direction.", "Alternate direction state for reversible attributes such as date, name, amount, priority, or distance.", "Loading or updating state when remote sorting takes noticeable time." ], "commonMisuses": [ "Putting filtering criteria such as date ranges, status, category, or owner inside a sort menu.", "Labelling options only Newest, Oldest, A-Z, or Z-A when the attribute being sorted is unclear.", "Sorting only the current visible page instead of the full result set.", "Resetting search query, filters, page size, or view density when users change sort." ], "keywords": [ "sort", "controls", "dropdown", "menu", "sortable", "column", "header", "order", "result", "ordering", "search", "browse", "discovery", "ui-ux", "control", "changing", "existing", "set", "need", "change", "which", "relevant", "item", "appears", "first", "but", "often", "hidden", "confused", "filtering", "applied", "current", "page", "implemented", "misleading", "labels", "inaccessible", "table", "states", "provide" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/sort-controls.md", "json": "https://uxpatternsguide.com/agent/patterns/sort-controls.json", "human": "https://uxpatternsguide.com/patterns/sort-controls/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-vs-touch-gesture-vs-long-press-vs-drag-and-drop-upload-vs-kanban-board-vs-sort-controls.md", "https://uxpatternsguide.com/agent/comparisons/sort-controls-vs-filter-chips-vs-filter-panel-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/table-vs-sort-controls-vs-filter-panel-vs-pagination.md" ] }, { "id": "source-grounding-display", "name": "Source grounding display", "aliases": [ "grounding display", "source coverage display", "evidence coverage", "grounded answer display", "source audit panel", "retrieval evidence panel", "answer grounding", "grounding inspector", "source scope display", "unsupported claims display" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Whole-answer source coverage and grounding evidence display", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI answers can appear grounded because they contain citations or source links, while the answer as a whole may include unsupported claims, stale sources, unsearched source scopes, permission gaps, or retrieved material that was not actually used.", "useWhen": "Users need answer-wide evidence coverage before trusting generated content.", "avoidWhen": "The system cannot determine source scope, retrieval status, or claim support reliably.", "requiredStates": [ "Default grounded state with source scope, searched sources, retrieved sources, used sources, and supported-claim count.", "Partially grounded state with at least one partially supported claim and explanation.", "Unsupported claim state with claim text, no supporting source found label, and review or regenerate action.", "Pending grounding state while retrieval, web search, file search, or source matching is still resolving." ], "commonMisuses": [ "Showing a global Grounded badge when only some claims have evidence.", "Mixing searched, retrieved, used, and related sources into one undifferentiated list.", "Hiding unsupported claims because some citations exist elsewhere in the answer.", "Treating grounding as a confidence score instead of evidence coverage." ], "keywords": [ "source", "grounding", "display", "coverage", "evidence", "grounded", "answer", "audit", "panel", "retrieval", "inspector", "scope", "unsupported", "claims", "automation", "ui-ux", "whole-answer", "answers", "appear", "because", "they", "contain", "citations", "links", "while", "whole", "may", "include", "stale", "sources", "unsearched", "scopes", "permission", "gaps", "retrieved", "material", "was", "actually", "used", "show" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/source-grounding-display.md", "json": "https://uxpatternsguide.com/agent/patterns/source-grounding-display.json", "human": "https://uxpatternsguide.com/patterns/source-grounding-display/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ai-answer-without-sources-vs-source-grounding-display-vs-citation-display-vs-confidence-uncertainty-display-vs-streaming-response-vs-correction-feedback.md", "https://uxpatternsguide.com/agent/comparisons/ai-confidence-shown-as-fake-precision-vs-confidence-uncertainty-display-vs-meter-vs-source-grounding-display-vs-warning-text-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/confidence-uncertainty-display-vs-source-grounding-display-vs-citation-display-vs-meter-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/editable-ai-output-vs-inline-edit-vs-prompt-box-vs-streaming-response-vs-citation-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/model-update-notice-vs-notification-banner-vs-warning-text-vs-phase-beta-banner-vs-confidence-uncertainty-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/source-grounding-display-vs-citation-display-vs-chat-interface-vs-streaming-response-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/tool-use-visibility-vs-agent-progress-trace-vs-source-grounding-display-vs-citation-display-vs-activity-log-vs-human-approval-gate.md" ] }, { "id": "spinbutton", "name": "Spinbutton / numeric stepper", "aliases": [ "number input", "numeric stepper", "stepper input", "spinner", "quantity stepper" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Bounded incrementable numeric-value control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to adjust a small bounded numeric quantity, but plain text fields hide allowed increments while sliders and selects either lose exact entry or imply the wrong kind of choice.", "useWhen": "Users adjust a small bounded count such as guests, copies, items, seats, nights, minutes, retries, or quantity.", "avoidWhen": "The value is a numeric-looking identifier, code, account number, card number, phone number, postal code, date, or formatted string.", "requiredStates": [ "Initial state with visible label, default value, unit, min, max, and step.", "Focused value field state.", "Increment and decrement button hover, focus, pressed, and disabled-at-bound states.", "Direct typed valid value state." ], "commonMisuses": [ "Using a spinbutton for numeric-looking identifiers or codes.", "Using one-step buttons for a large range without direct typing or larger-step movement.", "Omitting the label, unit, min, max, default, or current value.", "Providing plus and minus buttons with accessible names that do not identify the quantity." ], "keywords": [ "spinbutton", "numeric", "stepper", "number", "input", "spinner", "quantity", "selection", "choice", "ui-ux", "bounded", "incrementable", "numeric-value", "control", "need", "adjust", "small", "but", "plain", "text", "fields", "hide", "allowed", "increments", "while", "sliders", "selects", "either", "lose", "exact", "entry", "imply", "wrong", "kind", "provide", "labelled", "editable", "value", "explicit", "increment" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/spinbutton.md", "json": "https://uxpatternsguide.com/agent/patterns/spinbutton.json", "human": "https://uxpatternsguide.com/patterns/spinbutton/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/meter-vs-progress-bar-vs-slider-vs-spinbutton.md", "https://uxpatternsguide.com/agent/comparisons/spinbutton-vs-slider-vs-text-input-vs-select.md" ] }, { "id": "start-page", "name": "Start page", "aliases": [ "service start page", "start point", "task start page", "transaction start page", "application start page", "booking start page", "start using a service", "begin service page", "entry page", "start now page" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Single-service or single-task entry point before a transaction begins", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need a trustworthy entry point for a specific service or task, but without pre-start context they may begin the wrong service, lack required documents, miss costs or eligibility, or fail to recover an existing draft.", "useWhen": "A user is about to start one named service, transaction, booking, application, check, request, or registration.", "avoidWhen": "Users are still choosing among many topics, products, services, or articles.", "requiredStates": [ "Default entry state with service name, purpose, user fit, pre-start requirements, expected outcome, and primary start action.", "Returning-user state with sign-in, resume, or update route distinct from the new-start action.", "Not-for-you state with concise exclusion or alternative route when a common wrong audience arrives.", "Before-you-start state listing documents, account details, time, cost, consent, or device needs that most users must know." ], "commonMisuses": [ "Treating a product homepage, marketing landing page, or category directory as a start page for a specific service.", "Showing several equal calls to action when one service start action should be primary.", "Hiding documents, costs, account requirements, or outcome expectations after the start action.", "Using the start page for long eligibility questionnaires that belong inside the service." ], "keywords": [ "start", "page", "service", "point", "task", "transaction", "application", "booking", "using", "begin", "entry", "now", "workflow", "patterns", "ui-ux", "single-service", "single-task", "before", "begins", "need", "trustworthy", "specific", "but", "without", "pre-start", "context", "they", "may", "wrong", "lack", "required", "documents", "miss", "costs", "eligibility", "fail", "recover", "existing", "draft", "provide" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/start-page.md", "json": "https://uxpatternsguide.com/agent/patterns/start-page.json", "human": "https://uxpatternsguide.com/patterns/start-page/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/account-creation-vs-start-page-vs-onboarding-vs-password-creation.md", "https://uxpatternsguide.com/agent/comparisons/complete-multiple-tasks-vs-step-navigation-vs-process-list-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/start-page-vs-onboarding-vs-browse-by-category-vs-step-navigation.md" ] }, { "id": "step-navigation", "name": "Step navigation / step indicator", "aliases": [ "step indicator", "progress indicator", "stepper", "wizard progress", "checkout progress", "multistep progress" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Linear multistep task progress indicator", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users completing a long task across multiple screens need to understand their current position, what is already complete, and what remains without confusing progress with hierarchy or result paging.", "useWhen": "A linear form, application, checkout, or setup flow has three or more meaningful steps.", "avoidWhen": "The journey has only one or two screens.", "requiredStates": [ "Default state with completed, current, and upcoming steps.", "Current step heading with step number and total step count.", "Validated completion state after the user successfully continues.", "Future step blocked or unavailable state before prerequisites are met." ], "commonMisuses": [ "Using a step indicator as breadcrumbs, tabs, side navigation, or pagination.", "Marking steps complete because they were visited rather than validated.", "Letting users jump to unavailable future steps without saved prerequisites.", "Showing a fixed step count for a journey whose steps change based on answers." ], "keywords": [ "step", "navigation", "indicator", "progress", "stepper", "wizard", "checkout", "multistep", "wayfinding", "ui-ux", "linear", "task", "completing", "long", "across", "multiple", "screens", "need", "understand", "their", "current", "position", "what", "already", "complete", "remains", "without", "confusing", "hierarchy", "result", "paging", "provide", "source-backed", "tasks", "three", "more", "meaningful", "steps", "validated", "completion" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/step-navigation.md", "json": "https://uxpatternsguide.com/agent/patterns/step-navigation.json", "human": "https://uxpatternsguide.com/patterns/step-navigation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/agent-plan-preview-vs-task-list-vs-recommended-next-action-vs-human-approval-gate-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/checkout-vs-payment-card-entry-vs-review-before-submit-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/complete-multiple-tasks-vs-step-navigation-vs-process-list-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/multi-step-form-vs-single-page-form-vs-single-question-page-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/pagination-without-current-page-vs-pagination-vs-breadcrumbs-vs-step-navigation-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/process-list-vs-step-navigation-vs-in-page-anchor-navigation.md", "https://uxpatternsguide.com/agent/comparisons/progress-bar-vs-loading-spinner-vs-loading-skeleton-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/start-page-vs-onboarding-vs-browse-by-category-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/step-navigation-vs-back-link-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/step-progress-vs-step-navigation-vs-progress-bar-vs-meter.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md", "https://uxpatternsguide.com/agent/comparisons/timeline-vs-feed-vs-process-list-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/wizard-vs-multi-step-form-vs-step-navigation-vs-process-list.md" ] }, { "id": "step-progress", "name": "Step progress", "aliases": [ "progress stepper", "step status indicator", "workflow progress", "stage progress", "process progress indicator", "checkout step status", "onboarding progress tracker" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Workflow-stage status indicator", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users in a workflow can lose track of which named stages are accepted, blocked, waiting, skipped, or failed when a simple current page label hides status changes that happen after validation, upload, review, or system checks.", "useWhen": "A workflow has several named stages and users need to understand current, completed, pending, blocked, failed, waiting, or skipped status.", "avoidWhen": "The flow has only one or two simple screens and progress status adds no decision value.", "requiredStates": [ "Not started or pending stage.", "Current stage with aria-current step or equivalent current-step semantics.", "Completed stage with the proof event reflected in text.", "Waiting stage for review, scan, authorization, approval, or another external event." ], "commonMisuses": [ "Treating visited pages as completed stages.", "Using the indicator as the only page heading or only explanation of current status.", "Showing all future stages as clickable when prerequisites are missing.", "Hiding blocked, waiting, skipped, or failed states behind color alone." ], "keywords": [ "step", "progress", "stepper", "status", "indicator", "workflow", "stage", "process", "checkout", "onboarding", "tracker", "feedback", "system", "state", "ui-ux", "workflow-stage", "lose", "track", "which", "named", "stages", "accepted", "blocked", "waiting", "skipped", "failed", "simple", "current", "page", "label", "hides", "changes", "happen", "after", "validation", "upload", "review", "checks", "render", "reports" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/step-progress.md", "json": "https://uxpatternsguide.com/agent/patterns/step-progress.json", "human": "https://uxpatternsguide.com/patterns/step-progress/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/step-progress-vs-step-navigation-vs-progress-bar-vs-meter.md" ] }, { "id": "streaming-response", "name": "Streaming response", "aliases": [ "streamed answer", "token streaming", "incremental response", "live generated output", "partial assistant answer", "streamed completion", "delta response", "server-sent response", "live answer generation", "progressive AI answer" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Incremental generated-output surface that renders response chunks before final completion", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "Streaming generated output can reduce perceived wait time, but partial text is not necessarily final, cited, safe, valid, or complete. Without explicit stream states and recovery, users may trust unfinished output, lose partial work after interruption, or be overwhelmed by constant visual and assistive updates.", "useWhen": "Generated text or structured content can be read or monitored before completion.", "avoidWhen": "Intermediate chunks may expose unsafe, private, or misleading content.", "requiredStates": [ "Queued or receiving state before first output arrives.", "First output state that confirms generation has started.", "Active streaming state with partial-answer label, stop control, and stable output region.", "Pending citation, pending tool call, pending moderation, and pending structured-validation states." ], "commonMisuses": [ "Showing a blinking cursor with no state, stop control, or elapsed feedback.", "Letting partial output look finished before the final event arrives.", "Copying or applying a streamed answer before citations, tool results, or validation complete.", "Erasing partial output after a network failure." ], "keywords": [ "streaming", "response", "streamed", "answer", "token", "incremental", "live", "generated", "output", "partial", "assistant", "completion", "delta", "server-sent", "generation", "progressive", "automation", "ui-ux", "generated-output", "surface", "renders", "chunks", "before", "final", "reduce", "perceived", "wait", "time", "but", "text", "necessarily", "cited", "safe", "valid", "complete", "without", "explicit", "stream", "states", "recovery" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/streaming-response.md", "json": "https://uxpatternsguide.com/agent/patterns/streaming-response.json", "human": "https://uxpatternsguide.com/patterns/streaming-response/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/agent-progress-trace-vs-agent-plan-preview-vs-streaming-response-vs-activity-log-vs-progress-bar-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/ai-answer-without-sources-vs-source-grounding-display-vs-citation-display-vs-confidence-uncertainty-display-vs-streaming-response-vs-correction-feedback.md", "https://uxpatternsguide.com/agent/comparisons/citation-display-vs-chat-interface-vs-streaming-response-vs-related-links-vs-tooltip.md", "https://uxpatternsguide.com/agent/comparisons/editable-ai-output-vs-inline-edit-vs-prompt-box-vs-streaming-response-vs-citation-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/regenerate-retry-vs-retry-vs-chat-interface-vs-streaming-response-vs-prompt-box-vs-editable-ai-output.md", "https://uxpatternsguide.com/agent/comparisons/source-grounding-display-vs-citation-display-vs-chat-interface-vs-streaming-response-vs-related-links.md", "https://uxpatternsguide.com/agent/comparisons/streaming-response-vs-chat-interface-vs-progress-bar-vs-loading-spinner-vs-feed.md" ] }, { "id": "success-confirmation", "name": "Success confirmation", "aliases": [ "success message", "completion confirmation", "saved confirmation", "upload confirmation", "success feedback" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Durable in-context proof that an action completed", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users complete an action but cannot tell whether it truly succeeded, which object changed, whether a receipt exists, or what to do next, especially when success is reduced to a transient Done message.", "useWhen": "A user action has completed and users need proof, object identity, or next-step orientation.", "avoidWhen": "The success is obvious, low consequence, and safe to communicate as a brief toast.", "requiredStates": [ "Pre-action state with no success confirmation.", "Pending or saving state that does not claim success before commitment.", "Confirmed success state with object identity, reference or timestamp, and changed status.", "Actionable success state with one next step such as View receipt or Copy reference." ], "commonMisuses": [ "Showing success before the operation is actually committed.", "Writing only Done, Success, or Saved without naming the affected object.", "Auto-expiring the only receipt or reference users need later.", "Leaving stale success visible after users switch records or tasks." ], "keywords": [ "success", "confirmation", "message", "completion", "saved", "upload", "feedback", "status", "system", "state", "ui-ux", "durable", "in-context", "proof", "action", "completed", "complete", "but", "cannot", "tell", "whether", "truly", "succeeded", "which", "object", "changed", "receipt", "exists", "what", "next", "especially", "reduced", "transient", "done", "show", "after", "committed", "name", "affected", "provide" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/success-confirmation.md", "json": "https://uxpatternsguide.com/agent/patterns/success-confirmation.json", "human": "https://uxpatternsguide.com/patterns/success-confirmation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/confirmation-page-vs-success-confirmation-vs-review-before-submit-vs-notification-banner.md", "https://uxpatternsguide.com/agent/comparisons/success-confirmation-vs-toast-notification-vs-notification-banner-vs-alert.md", "https://uxpatternsguide.com/agent/comparisons/toast-only-success-for-completed-transaction-vs-confirmation-page-vs-success-confirmation-vs-toast-notification.md" ] }, { "id": "summary-box", "name": "Summary box", "aliases": [ "key information box", "important information box", "summary panel", "page summary", "next steps box", "at a glance box", "highlighted summary", "important content box" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Highlighted region for key information from a longer page", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Long pages often contain a small set of facts users need immediately, but burying those facts in prose slows scanning while over-highlighting whole sections creates another wall of text.", "useWhen": "A longer page has a small set of key facts or next steps that users need early.", "avoidWhen": "The highlighted content is an urgent status, outage, validation result, or severe consequence.", "requiredStates": [ "Default summary box with heading, concise body, key points or next steps, and optional task-specific link.", "Summary with no link, one primary link, and several tightly scoped supporting links.", "Long-page paired state where detailed sections repeat or expand the summarized facts.", "Out-of-date or content-mismatch review state when the summary no longer matches the page body." ], "commonMisuses": [ "Repeating the whole page in a highlighted box.", "Using a summary box for urgent dynamic status that should be an alert.", "Using a summary box for severe consequence copy that should be warning text.", "Listing unrelated links until the box becomes a navigation dumping ground." ], "keywords": [ "summary", "box", "key", "information", "important", "panel", "page", "next", "steps", "glance", "highlighted", "content", "data", "display", "exploration", "ui-ux", "region", "longer", "long", "pages", "often", "contain", "small", "set", "facts", "need", "immediately", "but", "burying", "those", "prose", "slows", "scanning", "while", "over-highlighting", "whole", "sections", "creates", "another", "wall" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/summary-box.md", "json": "https://uxpatternsguide.com/agent/patterns/summary-box.json", "human": "https://uxpatternsguide.com/patterns/summary-box/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/handoff-summary-vs-assignment-vs-summary-box-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/summary-box-vs-alert-vs-warning-text-vs-disclosure-details.md", "https://uxpatternsguide.com/agent/comparisons/wearable-glance-vs-notification-center-vs-summary-box-vs-dashboard-layout-vs-progress-bar-vs-notification-preferences.md" ] }, { "id": "swipe-action", "name": "Swipe action", "aliases": [ "contextual swipe", "swipe to reveal", "swipe to delete", "swipe to archive", "row swipe action", "swipe-to-dismiss", "swipe-to-update" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Horizontal item-level gesture that reveals or commits row-scoped actions", "maturity": "standard", "platforms": [ "mobile", "web", "desktop" ], "problem": "Swipe actions can make repeated row work fast on touch devices, but hidden horizontal gestures are hard to discover, easy to trigger accidentally, and exclusionary when they replace visible, keyboard, or assistive action paths.", "useWhen": "Users repeatedly perform simple item-level actions on touch-first rows.", "avoidWhen": "The action is rare, complex, high-impact, non-reversible, or requires review before execution.", "requiredStates": [ "Idle row state with visible row identity and discoverable action path.", "Gesture hint state for teaching that the row supports a horizontal swipe action.", "Partial reveal state showing action label, icon, direction, and affected row.", "Below-threshold snap-back state that leaves the row unchanged." ], "commonMisuses": [ "Making a hidden swipe the only way to archive, delete, complete, or reveal row actions.", "Committing a destructive action before users see the label or cross a clear threshold.", "Letting vertical scroll, pull-to-refresh, row navigation, and swipe action trigger at the same time.", "Using unlabeled icon-only action backgrounds or color-only destructive cues." ], "keywords": [ "swipe", "action", "contextual", "reveal", "delete", "archive", "row", "swipe-to-dismiss", "swipe-to-update", "cross-device", "physical", "interaction", "ui-ux", "horizontal", "item-level", "gesture", "reveals", "commits", "row-scoped", "actions", "make", "repeated", "work", "fast", "touch", "devices", "but", "hidden", "gestures", "hard", "discover", "easy", "trigger", "accidentally", "exclusionary", "they", "replace", "visible", "keyboard", "assistive" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/swipe-action.md", "json": "https://uxpatternsguide.com/agent/patterns/swipe-action.json", "human": "https://uxpatternsguide.com/patterns/swipe-action/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/swipe-action-vs-touch-gesture-vs-list-view-vs-action-menu-vs-undo-vs-confirmation-dialog.md" ] }, { "id": "sync-state", "name": "Sync state", "aliases": [ "synchronization state", "sync status", "queued sync", "sync queue", "pending sync", "cloud sync status", "reconciliation state", "local to server sync" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Local-and-remote reconciliation status", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users have local changes, downloaded files, queued uploads, or background requests whose server or peer copy may be pending, in progress, accepted, partially accepted, failed, paused, or conflicting.", "useWhen": "Local changes, files, messages, uploads, or records need to reconcile with a remote service or another device.", "avoidWhen": "The product has no local copy or queued work and a simple loading, success, or error state is enough.", "requiredStates": [ "Local saved state for data persisted on the device but not yet sent.", "Queued state for work waiting for a sync attempt.", "Syncing state with scope, item count, or operation label.", "Synced state after remote acceptance." ], "commonMisuses": [ "Calling local persistence Synced before remote acceptance.", "Showing only one spinner for a mixed queue of succeeded, failed, and pending items.", "Hiding failed sync work in a transient toast.", "Clearing local data after a failed retry." ], "keywords": [ "sync", "state", "synchronization", "status", "queued", "queue", "pending", "cloud", "reconciliation", "local", "server", "feedback", "system", "ui-ux", "local-and-remote", "have", "changes", "downloaded", "files", "uploads", "background", "requests", "whose", "peer", "copy", "may", "progress", "accepted", "partially", "failed", "paused", "conflicting", "expose", "scoped", "surface", "names", "remote", "keeps", "per-item", "failures" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/sync-state.md", "json": "https://uxpatternsguide.com/agent/patterns/sync-state.json", "human": "https://uxpatternsguide.com/patterns/sync-state/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/conflict-state-vs-sync-state-vs-draft-state-vs-error-state.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/offline-mobile-retry-vs-offline-state-vs-retry-vs-sync-state-vs-pull-to-refresh-vs-fallback-path.md", "https://uxpatternsguide.com/agent/comparisons/sync-state-vs-offline-state-vs-progress-bar-vs-error-state.md" ] }, { "id": "table", "name": "Table", "aliases": [ "data table", "record table", "comparison table", "tabular data", "results table", "responsive table" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Semantic row-and-column data comparison surface", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to compare records across shared attributes, but tables often lose meaning through missing captions, unlabeled headers, broken responsive layouts, mixed controls, or spreadsheet-like interactions without data-grid behavior.", "useWhen": "Records share comparable attributes that users need to scan in aligned columns.", "avoidWhen": "The content is layout, not data.", "requiredStates": [ "Default table state with caption, visible headers, row values, and result count or context.", "Sorted table state with current sorted column and direction exposed visually and programmatically.", "Filtered table state with active criteria near the table and updated row count.", "Selected-row state when the table supports row selection or bulk action." ], "commonMisuses": [ "Using table markup to create page columns or layout spacing.", "Rendering div rows that visually resemble a table but expose no table, row, column, or header semantics.", "Omitting the caption or visible dataset context.", "Dropping column headers on mobile so values lose meaning." ], "keywords": [ "table", "data", "record", "comparison", "tabular", "results", "responsive", "display", "exploration", "ui-ux", "semantic", "row-and-column", "surface", "need", "compare", "records", "across", "shared", "attributes", "but", "tables", "often", "lose", "meaning", "through", "missing", "captions", "unlabeled", "headers", "broken", "layouts", "mixed", "controls", "spreadsheet-like", "interactions", "without", "data-grid", "behavior", "present", "caption" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/table.md", "json": "https://uxpatternsguide.com/agent/patterns/table.json", "human": "https://uxpatternsguide.com/patterns/table/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/card-grid-vs-card-list-vs-collection-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/chart-drilldown-vs-data-visualization-vs-details-panel-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/compare-view-vs-table-vs-card-grid-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/dashboard-layout-vs-data-visualization-vs-table-vs-saved-view.md", "https://uxpatternsguide.com/agent/comparisons/data-export-vs-bulk-import-vs-audit-log-vs-table-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/data-grid-vs-table-vs-inline-edit-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/data-visualization-vs-table-vs-map-view-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/expandable-row-vs-table-vs-details-panel-vs-accordion.md", "https://uxpatternsguide.com/agent/comparisons/kanban-board-vs-table-vs-calendar-view-vs-list-view.md", "https://uxpatternsguide.com/agent/comparisons/list-view-vs-table-vs-data-grid-vs-details-panel.md", "https://uxpatternsguide.com/agent/comparisons/map-view-vs-list-view-vs-calendar-view-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/review-queue-vs-approval-workflow-vs-saved-filter-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/saved-view-vs-saved-search-vs-saved-filter-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/table-vs-sort-controls-vs-filter-panel-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/tree-grid-vs-data-grid-vs-tree-selection-vs-table.md" ] }, { "id": "tabs", "name": "Tabs", "aliases": [ "tabbed interface", "tab list" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Section-switching component", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to switch between peer sections without leaving the current page context.", "useWhen": "Users switch between sibling panels frequently.", "avoidWhen": "The destinations are unrelated pages.", "requiredStates": [ "Default active tab and visible panel.", "Inactive tab states that remain readable and selectable.", "Focused tab that may differ from the selected tab during manual activation.", "Panel state after a tab is selected." ], "commonMisuses": [ "Using tabs as a primary site navigation system.", "Hiding required form steps in tabs without completion state.", "Using ambiguous tab labels that force users to inspect every panel.", "Putting content that users must compare into mutually hidden panels." ], "keywords": [ "tabs", "tabbed", "interface", "tab", "list", "navigation", "wayfinding", "ui-ux", "section-switching", "component", "need", "switch", "between", "peer", "sections", "without", "leaving", "current", "page", "context", "group", "sibling", "panels", "behind", "labeled", "keep", "one", "active", "time", "make", "section", "panel", "relationship", "explicit", "render", "tablist", "short", "labels", "selected", "styling" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/tabs.md", "json": "https://uxpatternsguide.com/agent/patterns/tabs.json", "human": "https://uxpatternsguide.com/patterns/tabs/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/accordion-vs-tabs-vs-side-navigation-vs-filter-panel.md", "https://uxpatternsguide.com/agent/comparisons/breadcrumbs-vs-tabs-vs-bottom-navigation.md", "https://uxpatternsguide.com/agent/comparisons/browse-by-category-vs-basic-search-vs-filter-panel-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/carousel-auto-advance-without-pause-vs-carousel-vs-tabs-vs-recommendations-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/carousel-vs-tabs-vs-recommendations-vs-pagination.md", "https://uxpatternsguide.com/agent/comparisons/search-scope-selector-vs-basic-search-vs-filter-panel-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/settings-page-vs-settings-management-vs-side-navigation-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/side-navigation-vs-global-navigation-vs-tabs.md", "https://uxpatternsguide.com/agent/comparisons/tabs-vs-segmented-control-vs-pagination.md" ] }, { "id": "tag", "name": "Tag / status tag", "aliases": [ "status tag", "label tag", "metadata tag", "category tag", "state label", "lozenge", "pill label", "badge label", "status lozenge", "read-only chip" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Compact static category or status label attached to an object", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Dense lists, cards, dashboards, and task queues often need small pieces of categorical or status metadata, but full messages, columns, icons, and buttons can overwhelm the layout or imply actions users cannot take.", "useWhen": "A compact category, state, phase, freshness marker, priority, or count helps users scan a group of objects.", "avoidWhen": "Users need to click, remove, select, or edit the label.", "requiredStates": [ "Neutral category tag attached to a row, card, heading, or object summary.", "Status tag with success, information, warning, and error meanings expressed by text plus visual treatment.", "No-tag state where the absence of a tag has a clear implied meaning or is replaced by plain metadata.", "Multiple-tag state with a controlled maximum and wrapping behavior that does not hide title, owner, or actions." ], "commonMisuses": [ "Making a static tag look clickable or focusable.", "Using tag as the primary title of an object.", "Using vague labels such as New, Hot, or Priority without explaining what they mean in the object's context.", "Mixing neutral category tags and semantic status tags with the same colors." ], "keywords": [ "tag", "status", "label", "metadata", "category", "state", "lozenge", "pill", "badge", "read-only", "chip", "data", "display", "exploration", "ui-ux", "compact", "static", "attached", "object", "dense", "lists", "cards", "dashboards", "task", "queues", "often", "need", "small", "pieces", "categorical", "but", "full", "messages", "columns", "icons", "buttons", "overwhelm", "layout", "imply", "actions" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/tag.md", "json": "https://uxpatternsguide.com/agent/patterns/tag.json", "human": "https://uxpatternsguide.com/patterns/tag/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/tag-vs-filter-chips-vs-chip-selection-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md" ] }, { "id": "task-list", "name": "Task list", "aliases": [ "task list component", "task rows", "section status list", "application task rows", "task completion list", "task status list", "checklist with statuses", "service task rows", "section task list" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Component-level list of linked task rows with names, hints, and statuses", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Task lists fail when row names are vague, hint text is too long, statuses look like buttons, unavailable tasks have no reason, status text is not connected to the row link, or the component tries to carry full transaction behavior by itself.", "useWhen": "A page needs to display a known set of tasks with status and links to start or resume them.", "avoidWhen": "Users are browsing arbitrary records rather than completing a fixed set of service tasks.", "requiredStates": [ "Linked startable task row.", "Completed task row.", "Incomplete or not started task row.", "In progress task row." ], "commonMisuses": [ "Using task list as the whole service architecture without defining saved progress, dependencies, or final readiness elsewhere.", "Using task list as an answer summary.", "Using it for arbitrary records that need list view features such as sorting, filters, row actions, or selection.", "Using it for a strict linear journey that should use step navigation." ], "keywords": [ "task", "list", "component", "rows", "section", "status", "application", "completion", "checklist", "statuses", "service", "workflow", "patterns", "ui-ux", "component-level", "linked", "names", "hints", "lists", "fail", "row", "vague", "hint", "text", "too", "long", "look", "like", "buttons", "unavailable", "tasks", "have", "reason", "connected", "link", "tries", "carry", "full", "transaction", "behavior" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/task-list.md", "json": "https://uxpatternsguide.com/agent/patterns/task-list.json", "human": "https://uxpatternsguide.com/patterns/task-list/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/agent-plan-preview-vs-task-list-vs-recommended-next-action-vs-human-approval-gate-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/assignment-vs-task-list-vs-review-queue-vs-approval-workflow.md", "https://uxpatternsguide.com/agent/comparisons/recommended-next-action-vs-recommendations-vs-task-list-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/task-list-vs-complete-multiple-tasks-vs-step-navigation-vs-process-list.md" ] }, { "id": "text-input", "name": "Text input", "aliases": [ "text field", "single-line input", "freeform text field", "short answer field" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Single-line freeform data-entry control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to provide a short answer in their own words, but generic fields often hide labels, imply the wrong answer length, validate too early, or lose typed content during error recovery.", "useWhen": "The answer is short and user-authored.", "avoidWhen": "The answer is a paragraph, comment, address block, or explanation requiring multiple lines.", "requiredStates": [ "Empty untouched state with persistent label and optional hint.", "Focused state with visible focus indicator.", "Filled valid state showing the typed value exactly as entered.", "Required missing-value error state after attempted submit." ], "commonMisuses": [ "Using placeholder text as the only label or instruction.", "Using one single-line field for paragraph answers that need textarea behavior.", "Using text input for predetermined choices that should be select, radio, or autocomplete.", "Showing validation before the user interacts with the field." ], "keywords": [ "text", "input", "field", "single-line", "freeform", "short", "answer", "data", "entry", "ui-ux", "data-entry", "control", "need", "provide", "their", "own", "words", "but", "generic", "fields", "often", "hide", "labels", "imply", "wrong", "length", "validate", "too", "early", "lose", "typed", "content", "during", "error", "recovery", "labelled", "stable", "hint", "association", "width" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/text-input.md", "json": "https://uxpatternsguide.com/agent/patterns/text-input.json", "human": "https://uxpatternsguide.com/patterns/text-input/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/address-entry-vs-text-input-vs-autocomplete-vs-dependent-fields.md", "https://uxpatternsguide.com/agent/comparisons/bank-details-vs-text-input-vs-input-mask-vs-review-before-submit.md", "https://uxpatternsguide.com/agent/comparisons/character-count-vs-textarea-vs-text-input-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/combobox-vs-autocomplete-vs-select-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/date-input-vs-input-mask-vs-text-input-vs-select.md", "https://uxpatternsguide.com/agent/comparisons/date-picker-vs-date-input-vs-select-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-upload-vs-file-upload-vs-multi-step-form-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/email-address-entry-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/file-upload-vs-text-input-vs-single-question-page-vs-multi-step-form.md", "https://uxpatternsguide.com/agent/comparisons/inline-edit-vs-text-input-vs-single-page-form-vs-modal-dialog.md", "https://uxpatternsguide.com/agent/comparisons/input-mask-vs-text-input-vs-inline-validation-vs-autocomplete.md", "https://uxpatternsguide.com/agent/comparisons/input-prefix-suffix-vs-input-mask-vs-text-input-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/name-entry-vs-text-input-vs-autocomplete-vs-select-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/password-input-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/phone-number-entry-vs-text-input-vs-input-mask-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/range-slider-vs-slider-vs-text-input-vs-date-range-picker.md", "https://uxpatternsguide.com/agent/comparisons/single-page-form-vs-single-question-page-vs-error-summary-vs-text-input.md", "https://uxpatternsguide.com/agent/comparisons/single-question-page-vs-text-input-vs-textarea-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/slider-vs-text-input-vs-select-vs-toggle-switch.md", "https://uxpatternsguide.com/agent/comparisons/spinbutton-vs-slider-vs-text-input-vs-select.md", "https://uxpatternsguide.com/agent/comparisons/text-input-vs-autocomplete-vs-select-vs-radio-group.md", "https://uxpatternsguide.com/agent/comparisons/textarea-vs-text-input-vs-inline-validation-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/time-picker-vs-text-input-vs-select-vs-input-mask.md", "https://uxpatternsguide.com/agent/comparisons/voice-command-vs-keyboard-shortcut-vs-command-palette-vs-prompt-box-vs-text-input-vs-touch-gesture.md" ] }, { "id": "textarea", "name": "Textarea", "aliases": [ "text area", "multi-line input", "long answer field", "paragraph field", "comment box" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Multi-line freeform writing field", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to provide longer freeform explanations, but cramped fields, hidden limits, vague hints, early validation, or draft loss make long-answer entry risky and hard to review.", "useWhen": "Users need to write sentences, paragraphs, comments, explanations, notes, or descriptions.", "avoidWhen": "The answer is a short one-line value.", "requiredStates": [ "Empty untouched state with visible label and optional hint.", "Focused writing state with caret, wrapping text, and visible focus indicator.", "Filled multi-line state preserving line breaks and pasted content.", "Remaining-count state when a real maximum length is configured." ], "commonMisuses": [ "Using a single-line input for paragraph answers.", "Using textarea for short codes, names, or titles that should stay one line.", "Clearing a long draft after validation fails.", "Showing a hard character limit only after submit." ], "keywords": [ "textarea", "text", "area", "multi-line", "input", "long", "answer", "field", "paragraph", "comment", "box", "data", "entry", "ui-ux", "freeform", "writing", "need", "provide", "longer", "explanations", "but", "cramped", "fields", "hidden", "limits", "vague", "hints", "early", "validation", "draft", "loss", "make", "long-answer", "risky", "hard", "review", "labelled", "enough", "visible", "rows" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/textarea.md", "json": "https://uxpatternsguide.com/agent/patterns/textarea.json", "human": "https://uxpatternsguide.com/patterns/textarea/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/character-count-vs-textarea-vs-text-input-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/comments-vs-textarea-vs-feed-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/prompt-box-vs-prompt-suggestions-vs-command-palette-vs-search-suggestions-vs-textarea.md", "https://uxpatternsguide.com/agent/comparisons/single-question-page-vs-text-input-vs-textarea-vs-error-summary.md", "https://uxpatternsguide.com/agent/comparisons/textarea-vs-text-input-vs-inline-validation-vs-error-summary.md" ] }, { "id": "threaded-discussion", "name": "Threaded discussion", "aliases": [ "discussion thread", "message thread", "threaded conversation", "nested replies", "topic discussion", "forum thread", "channel thread", "subthread", "reply thread" ], "category": "Collaboration And Social Interaction", "patternType": "ui-ux", "surfaceType": "Topic-centered conversation with parent post, reply branches, unread participation state, and thread-level controls", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Topic conversations become hard to follow when replies flatten into one stream, parent context disappears, notification links lose position, branch depth breaks mobile reading, or answer and unread state are not tied to the right reply branch.", "useWhen": "A topic or parent message can generate multiple reply branches that users need to follow over time.", "avoidWhen": "The feedback is a simple object-attached comment with no navigable topic discussion.", "requiredStates": [ "Parent topic or parent message with author, timestamp, title or body, category, and reply count.", "Top-level reply, nested reply, quoted parent snippet, and collapsed branch states.", "Unread reply, last-read marker, followed, muted, mentioned, and notification-deep-linked reply states.", "Reply composer, draft reply, saving reply, failed reply, retry, and recovered draft states." ], "commonMisuses": [ "Flattening every reply into a chronological stream and losing who replied to whom.", "Using a threaded discussion for simple object comments where the anchor matters more than topic navigation.", "Letting nested indentation consume the viewport on mobile.", "Showing unread count for the whole thread without identifying which branch changed." ], "keywords": [ "threaded", "discussion", "thread", "message", "conversation", "nested", "replies", "topic", "forum", "channel", "subthread", "reply", "collaboration", "social", "interaction", "ui-ux", "topic-centered", "parent", "post", "branches", "unread", "participation", "state", "thread-level", "controls", "conversations", "become", "hard", "follow", "flatten", "one", "stream", "context", "disappears", "notification", "links", "lose", "position", "branch", "depth" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/threaded-discussion.md", "json": "https://uxpatternsguide.com/agent/patterns/threaded-discussion.json", "human": "https://uxpatternsguide.com/patterns/threaded-discussion/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/chat-interface-vs-prompt-box-vs-threaded-discussion-vs-comments-vs-feed.md", "https://uxpatternsguide.com/agent/comparisons/follow-subscribe-vs-notification-center-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/presence-vs-mentions-vs-notification-center-vs-activity-log.md", "https://uxpatternsguide.com/agent/comparisons/reactions-vs-comments-vs-mentions-vs-activity-feed.md", "https://uxpatternsguide.com/agent/comparisons/threaded-discussion-vs-comments-vs-feed-vs-notification-center.md" ] }, { "id": "time-picker", "name": "Time picker", "aliases": [ "time selector", "appointment time picker", "clock time picker", "time combobox", "time slot picker" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Time input with filtered slot list, period selector, and timezone selector", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Scheduling workflows need precise clock times, but plain text can hide invalid increments and ambiguous periods while oversized dropdowns or masks make nearby time selection slow, inaccessible, or easy to misinterpret.", "useWhen": "Users choose appointment, meeting, delivery, pickup, reminder, or service times.", "avoidWhen": "The answer is approximate, relative, unknown, or naturally expressed in words.", "requiredStates": [ "Empty labelled time field with persistent hint and optional timezone default.", "Focused typed-query state that filters available time options.", "Open suggestion list with valid increments and unavailable slots distinguished.", "Selected time state synchronized with AM/PM and timezone selectors." ], "commonMisuses": [ "Using a minute-by-minute dropdown for a schedule that only accepts 30-minute increments.", "Storing 2:00 without AM/PM or timezone context.", "Using a rigid mask that rejects valid localized entry or paste.", "Auto-submitting when a time option is selected." ], "keywords": [ "time", "picker", "selector", "appointment", "clock", "combobox", "slot", "input", "data", "entry", "ui-ux", "filtered", "list", "period", "timezone", "scheduling", "workflows", "need", "precise", "times", "but", "plain", "text", "hide", "invalid", "increments", "ambiguous", "periods", "while", "oversized", "dropdowns", "masks", "make", "nearby", "selection", "slow", "inaccessible", "easy", "misinterpret", "provide" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/time-picker.md", "json": "https://uxpatternsguide.com/agent/patterns/time-picker.json", "human": "https://uxpatternsguide.com/patterns/time-picker/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/booking-vs-scheduling-vs-checkout-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/scheduling-vs-booking-vs-calendar-view-vs-date-picker.md", "https://uxpatternsguide.com/agent/comparisons/time-picker-vs-text-input-vs-select-vs-input-mask.md" ] }, { "id": "timeline", "name": "Timeline", "aliases": [ "event timeline", "case timeline", "history timeline", "chronological timeline", "order timeline", "application timeline", "status timeline", "milestone timeline", "activity timeline" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Bounded chronological record of past, current, or expected events", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users often need to understand a sequence of important events around a case, order, application, incident, or process, but raw logs, feeds, tables, or step indicators can obscure time order, current state, actor context, and what happened next.", "useWhen": "Users need a chronological record of important events for one object, case, order, application, or process.", "avoidWhen": "The surface is a live stream whose content keeps arriving and must preserve reader position.", "requiredStates": [ "Default timeline with heading, order label, date or phase groups, and event markers.", "Past, current, expected future, cancelled, failed, warning, and system-generated event states.", "Expanded and collapsed event detail states.", "Filtered, grouped, searched, paginated, loading-more, no-events, and failed-load states." ], "commonMisuses": [ "Using timeline as decorative chrome around a normal list with no meaningful time sequence.", "Omitting dates, actors, or event summaries and expecting icons to communicate the sequence.", "Mixing future tasks and completed events without text that distinguishes expectation from history.", "Replacing audit logs with simplified timeline summaries when users need exact evidence." ], "keywords": [ "timeline", "event", "case", "history", "chronological", "order", "application", "status", "milestone", "activity", "data", "display", "exploration", "ui-ux", "bounded", "record", "past", "current", "expected", "events", "often", "need", "understand", "sequence", "important", "around", "incident", "process", "but", "raw", "logs", "feeds", "tables", "step", "indicators", "obscure", "time", "state", "actor", "context" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/timeline.md", "json": "https://uxpatternsguide.com/agent/patterns/timeline.json", "human": "https://uxpatternsguide.com/patterns/timeline/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/activity-feed-vs-feed-vs-activity-log-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/activity-log-vs-timeline-vs-notification-center-vs-search-history.md", "https://uxpatternsguide.com/agent/comparisons/calendar-view-vs-date-picker-vs-timeline-vs-list-view.md", "https://uxpatternsguide.com/agent/comparisons/timeline-vs-feed-vs-process-list-vs-step-navigation.md", "https://uxpatternsguide.com/agent/comparisons/version-history-vs-activity-log-vs-timeline-vs-undo.md" ] }, { "id": "toast-notification", "name": "Toast notification", "aliases": [ "toast", "snackbar", "transient notification", "temporary status message" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Transient non-modal status message", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need brief feedback that an action or background process changed state, but interruptive dialogs or persistent page messages would slow the task.", "useWhen": "Use for short non-blocking confirmation after explicit actions such as save, copy, send, archive, invite, or queue export.", "avoidWhen": "The message is the only recovery path for a blocking or high-consequence failure.", "requiredStates": [ "Idle state with no visible toast and a reachable status or history region when applicable.", "New toast state that announces the message without stealing focus from the current task.", "Stacked state with newest and older messages ordered predictably and capped.", "Actionable toast state with one short action and enough persistence to activate it." ], "commonMisuses": [ "Using a toast as the only feedback for payment, save, permission, upload, or security failures.", "Showing repeated autosave confirmations so frequently that users ignore every status message.", "Packing long explanations, links, forms, or multiple buttons into a tiny transient surface.", "Stacking messages until they cover primary actions or content." ], "keywords": [ "toast", "notification", "snackbar", "transient", "temporary", "status", "message", "feedback", "system", "state", "ui-ux", "non-modal", "need", "brief", "action", "background", "process", "changed", "but", "interruptive", "dialogs", "persistent", "page", "messages", "would", "slow", "task", "show", "concise", "consistent", "region", "announce", "appropriately", "bound", "its", "duration", "stack", "behavior", "provide", "access" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/toast-notification.md", "json": "https://uxpatternsguide.com/agent/patterns/toast-notification.json", "human": "https://uxpatternsguide.com/patterns/toast-notification/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/alert-vs-inline-message-vs-toast-notification-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/banner-vs-alert-vs-inline-message-vs-toast-notification.md", "https://uxpatternsguide.com/agent/comparisons/fake-undo-vs-undo-vs-toast-notification-vs-restore-from-trash-vs-destructive-action-confirmation-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/haptic-feedback-vs-touch-gesture-vs-toast-notification-vs-error-state-vs-confirmation-dialog-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/inline-message-vs-toast-notification-vs-error-state-vs-inline-validation.md", "https://uxpatternsguide.com/agent/comparisons/notification-center-vs-toast-notification-vs-alert-vs-inline-message.md", "https://uxpatternsguide.com/agent/comparisons/notification-preferences-vs-settings-management-vs-notification-center-vs-follow-subscribe.md", "https://uxpatternsguide.com/agent/comparisons/success-confirmation-vs-toast-notification-vs-notification-banner-vs-alert.md", "https://uxpatternsguide.com/agent/comparisons/toast-notification-vs-toast-only-critical-error-vs-error-state-vs-undo.md", "https://uxpatternsguide.com/agent/comparisons/toast-only-success-for-completed-transaction-vs-confirmation-page-vs-success-confirmation-vs-toast-notification.md" ] }, { "id": "toast-only-critical-error", "name": "Toast-only critical error", "aliases": [ "disappearing critical error", "transient blocking error", "snackbar-only failure" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Transient critical-feedback anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "A blocking or high-consequence failure is announced only in a transient toast, so users can miss what failed and lose the path to recover.", "useWhen": "Use this anti-pattern entry to identify and replace transient-only handling of payment, save, permission, account, upload, deletion, and security failures.", "avoidWhen": "The message is a low-risk confirmation and no follow-up action is required.", "requiredStates": [ "Pre-action state that shows what the user is attempting and what will be affected.", "Failed persistent state with the failed object, plain-language cause, and recovery actions.", "Supplemental notification state that does not replace the persistent failure surface.", "Recovered state after retry, correction, reversal, or support escalation succeeds." ], "commonMisuses": [ "Showing Payment failed as a small toast while the invoice page returns to its normal paid-or-unpaid layout with no retry path.", "Using a disappearing snackbar as the only feedback for failed save, failed delete, failed permission change, failed upload, or failed authentication.", "Placing the toast far from the failed form or table row so users cannot connect the message to the affected task.", "Auto-dismissing a technical error code that support needs the user to copy or reference." ], "keywords": [ "toast-only", "critical", "error", "disappearing", "transient", "blocking", "snackbar-only", "failure", "feedback", "status", "system", "state", "ui-ux", "critical-feedback", "anti-pattern", "high-consequence", "announced", "toast", "miss", "what", "failed", "lose", "path", "recover", "treat", "keep", "recovery", "controls", "persistently", "attached", "affected", "task", "any", "supplemental", "replace", "lone", "persistent", "region", "using", "heading" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/toast-only-critical-error.md", "json": "https://uxpatternsguide.com/agent/patterns/toast-only-critical-error.json", "human": "https://uxpatternsguide.com/patterns/toast-only-critical-error/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/toast-notification-vs-toast-only-critical-error-vs-error-state-vs-undo.md", "https://uxpatternsguide.com/agent/comparisons/toast-only-critical-error-vs-error-state.md" ] }, { "id": "toast-only-success-for-completed-transaction", "name": "Toast-only success for completed transaction", "aliases": [ "toast-only transaction success", "disappearing receipt", "snackbar-only confirmation", "toast-only submitted state", "temporary transaction confirmation", "toast-only payment receipt", "toast-only booking complete" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Transient-only completed-transaction anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "A consequential transaction completes, but the only success feedback is a transient toast that can disappear before users can verify the outcome, copy proof, understand next steps, or recover the receipt.", "useWhen": "Use this anti-pattern entry to identify transaction success handled only by transient feedback.", "avoidWhen": "The success is low-risk, self-evident, and no proof or next step is needed.", "requiredStates": [ "Pre-submit state with the transaction and affected object visible.", "Committed confirmation state with durable proof after authoritative success.", "Receipt/reference state with copy, save, print, email, or tracking where useful.", "What-happens-next state with timing, owner, and user responsibility." ], "commonMisuses": [ "Redirecting to a dashboard and showing a five-second Application submitted toast with no receipt page.", "Using a generic Done toast for payment, booking, order, application, and profile-change outcomes.", "Clearing the form immediately after submit without rendering a durable success state.", "Showing a toast before the server commit finishes." ], "keywords": [ "toast-only", "success", "completed", "transaction", "disappearing", "receipt", "snackbar-only", "confirmation", "submitted", "state", "temporary", "payment", "booking", "complete", "feedback", "status", "system", "ui-ux", "transient-only", "completed-transaction", "anti-pattern", "consequential", "completes", "but", "transient", "toast", "disappear", "before", "verify", "outcome", "copy", "proof", "understand", "next", "steps", "recover", "treat", "keep", "durable", "page" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/toast-only-success-for-completed-transaction.md", "json": "https://uxpatternsguide.com/agent/patterns/toast-only-success-for-completed-transaction.json", "human": "https://uxpatternsguide.com/patterns/toast-only-success-for-completed-transaction/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/toast-only-success-for-completed-transaction-vs-confirmation-page-vs-success-confirmation-vs-toast-notification.md" ] }, { "id": "toggle-switch", "name": "Toggle switch", "aliases": [ "switch", "toggle", "on off switch" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Immediate binary setting control", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to turn one setting, feature, preference, or hardware-like option on or off and understand whether the change has taken effect.", "useWhen": "A single setting, feature, preference, or hardware-like control has two clear states.", "avoidWhen": "The action is destructive, one-time, legal, financial, or needs confirmation.", "requiredStates": [ "Off state.", "On state.", "Focused state.", "Pending or applying state when activation takes time." ], "commonMisuses": [ "Using a switch to delete, publish, pay, submit, or trigger another one-time command.", "Hiding three or more options behind a binary-looking control.", "Changing the label after activation so users hear a different control name.", "Using a switch for legal consent, terms agreement, or a form answer that should be reviewed before submit." ], "keywords": [ "toggle", "switch", "off", "selection", "choice", "ui-ux", "immediate", "binary", "setting", "control", "need", "turn", "one", "feature", "preference", "hardware-like", "option", "understand", "whether", "change", "taken", "effect", "present", "stable", "label", "state", "reversible", "application", "visible", "text", "helpful", "explicit", "pending", "unavailable", "disabled", "read-only", "states", "cannot", "simply", "flip" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/toggle-switch.md", "json": "https://uxpatternsguide.com/agent/patterns/toggle-switch.json", "human": "https://uxpatternsguide.com/patterns/toggle-switch/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/settings-management-vs-complete-complex-form-vs-toggle-switch-vs-progressive-disclosure.md", "https://uxpatternsguide.com/agent/comparisons/slider-vs-text-input-vs-select-vs-toggle-switch.md", "https://uxpatternsguide.com/agent/comparisons/toggle-switch-vs-checkbox-group-vs-radio-group-vs-segmented-control.md" ] }, { "id": "tool-use-visibility", "name": "Tool-use visibility", "aliases": [ "AI tool visibility", "tool call inspector", "agent tool details", "tool execution visibility", "function call visibility", "tool input output panel", "AI tool audit panel", "tool permission display", "tool payload preview", "tool-use disclosure" ], "category": "AI And Automation UX", "patternType": "ui-ux", "surfaceType": "Inspectable disclosure of AI agent tool calls, inputs, outputs, permissions, and side effects", "maturity": "emerging", "platforms": [ "web", "mobile", "desktop", "ai" ], "problem": "AI agents can call tools, retrieve data, run code, update records, send messages, or trigger integrations, but users often see only a friendly progress message or final answer and cannot tell what was accessed, what changed, what failed, or which permissions and payloads were involved.", "useWhen": "An AI agent or automation calls tools, functions, APIs, retrieval systems, commands, or integrations.", "avoidWhen": "The system cannot reliably identify tool calls, inputs, outputs, status, permissions, or side effects.", "requiredStates": [ "Pending tool call state with tool name, purpose, requested permission, and side-effect risk.", "Running tool call state with elapsed time, cancellability, and current operation summary.", "Succeeded tool call state with output summary, returned object count, source or target, and safe details.", "Failed, timed out, rate-limited, offline, denied, and retried tool call states." ], "commonMisuses": [ "Showing a vague Using tools label without names, inputs, outputs, or permissions.", "Dumping raw JSON, stack traces, tokens, secrets, or hidden prompts as the user-facing tool view.", "Showing tool success when returned data was partial, stale, redacted, or unused.", "Hiding a side-effecting tool call until after it already changed data or sent a message." ], "keywords": [ "tool-use", "visibility", "tool", "call", "inspector", "agent", "details", "execution", "function", "input", "output", "panel", "audit", "permission", "display", "payload", "preview", "disclosure", "automation", "ui-ux", "inspectable", "calls", "inputs", "outputs", "permissions", "side", "effects", "agents", "tools", "retrieve", "data", "run", "code", "update", "records", "send", "messages", "trigger", "integrations", "but" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/tool-use-visibility.md", "json": "https://uxpatternsguide.com/agent/patterns/tool-use-visibility.json", "human": "https://uxpatternsguide.com/patterns/tool-use-visibility/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/tool-use-visibility-vs-agent-progress-trace-vs-source-grounding-display-vs-citation-display-vs-activity-log-vs-human-approval-gate.md" ] }, { "id": "toolbar", "name": "Toolbar", "aliases": [ "command bar", "action toolbar", "editor toolbar", "formatting toolbar", "tool strip", "command strip", "contextual toolbar" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "View-scoped command strip for related controls", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Products often need repeated commands near a view or selection, but loose action rows become crowded, unlabeled, hard to navigate by keyboard, and ambiguous about what object or state they affect.", "useWhen": "A view, editor, canvas, media surface, table, or selection needs repeated related commands close to the work area.", "avoidWhen": "There are only one or two actions that should be ordinary buttons.", "requiredStates": [ "Default toolbar with label, visible scope, grouped controls, and focusable entry point.", "Keyboard focus inside the toolbar with current roving item or active control indicated.", "Arrow-key movement among toolbar controls.", "Pressed or selected toggle state for stateful commands such as Bold, Filters on, or Preview mode." ], "commonMisuses": [ "Labelling any horizontal button row as a toolbar without shared scope or keyboard behavior.", "Using a toolbar for primary app navigation or unrelated destinations.", "Packing rare, destructive, and primary submit actions into one dense strip.", "Using icon-only buttons whose names exist only in hover tooltips." ], "keywords": [ "toolbar", "command", "bar", "action", "editor", "formatting", "tool", "strip", "contextual", "task", "workflow", "patterns", "ui-ux", "view-scoped", "related", "controls", "products", "often", "need", "repeated", "commands", "near", "view", "selection", "but", "loose", "rows", "become", "crowded", "unlabeled", "hard", "navigate", "keyboard", "ambiguous", "about", "what", "object", "state", "they", "affect" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/toolbar.md", "json": "https://uxpatternsguide.com/agent/patterns/toolbar.json", "human": "https://uxpatternsguide.com/patterns/toolbar/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/focus-traversal-vs-keyboard-shortcut-vs-skip-link-vs-modal-dialog-vs-toolbar-vs-data-grid.md", "https://uxpatternsguide.com/agent/comparisons/keyboard-shortcut-vs-command-palette-vs-menu-menubar-vs-toolbar-vs-undo-vs-redo.md", "https://uxpatternsguide.com/agent/comparisons/toolbar-vs-button-group-vs-menu-button-vs-command-palette.md" ] }, { "id": "tooltip", "name": "Tooltip", "aliases": [ "hover tooltip", "focus tooltip", "text bubble", "descriptive tooltip", "icon hint", "supplemental description" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Short noninteractive description tied to a trigger", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Dense controls sometimes need a short supplemental explanation, but visible labels may already exist and richer overlays would add unnecessary interaction or hide important information.", "useWhen": "A compact control needs a brief supplemental explanation.", "avoidWhen": "The text is the only label or action name.", "requiredStates": [ "Resting trigger state with a visible or accessible name that works without the tooltip.", "Keyboard focus state where the tooltip appears and focus remains on the trigger.", "Pointer hover state where the tooltip appears after a brief delay and remains while pointer is over the trigger or tooltip area.", "Escape dismissed state where the tooltip hides without moving focus from the trigger." ], "commonMisuses": [ "Using hover-only tooltip text as the only label for an icon button.", "Putting required instructions, validation fixes, or legal terms in a tooltip that disappears during the task.", "Adding buttons, links, or form fields inside a tooltip.", "Triggering a tooltip only with a mouse pointer and not with keyboard focus." ], "keywords": [ "tooltip", "hover", "focus", "text", "bubble", "descriptive", "icon", "hint", "supplemental", "description", "disclosure", "attention", "management", "ui-ux", "short", "noninteractive", "tied", "trigger", "dense", "controls", "sometimes", "need", "explanation", "but", "visible", "labels", "may", "already", "exist", "richer", "overlays", "would", "add", "unnecessary", "interaction", "hide", "important", "information", "attach", "owning" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/tooltip.md", "json": "https://uxpatternsguide.com/agent/patterns/tooltip.json", "human": "https://uxpatternsguide.com/patterns/tooltip/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/citation-display-vs-chat-interface-vs-streaming-response-vs-related-links-vs-tooltip.md", "https://uxpatternsguide.com/agent/comparisons/hover-card-vs-tooltip-vs-popover-vs-disclosure-details.md", "https://uxpatternsguide.com/agent/comparisons/live-cursors-vs-presence-vs-comments-vs-mentions.md", "https://uxpatternsguide.com/agent/comparisons/long-press-vs-touch-gesture-vs-context-menu-vs-tooltip-vs-popover-vs-action-menu.md", "https://uxpatternsguide.com/agent/comparisons/tooltip-vs-popover-vs-inline-message-vs-icon-only-ambiguous-action.md", "https://uxpatternsguide.com/agent/comparisons/tooltip-only-required-information-vs-tooltip-vs-inline-message-vs-disclosure-details-vs-popover.md" ] }, { "id": "tooltip-only-required-information", "name": "Tooltip-only required information", "aliases": [ "required info in tooltip", "hidden required tooltip", "tooltip-only instructions", "hover-only required help", "title-only required guidance", "tooltip-only form rules", "tooltip-only eligibility" ], "category": "Disclosure And Attention Management", "patternType": "ui-ux", "surfaceType": "Required-content-hidden-in-tooltip anti-pattern", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "A form, checkout, application, account change, or decision flow needs required instructions, but the only copy lives in a temporary tooltip that can disappear before users can apply it.", "useWhen": "Use this anti-pattern entry to review forms, checkout, applications, settings, data tables, eligibility flows, upload flows, and disabled actions where required information is hidden in a tooltip.", "avoidWhen": "The tooltip is genuinely supplemental and the task remains complete without it.", "requiredStates": [ "Default state with the requirement visible, summarized, or explicitly openable before users act.", "Tooltip-supplement state where the tooltip repeats or clarifies but is not the only copy.", "Keyboard path where Tab reaches the field and requirement without requiring hover.", "Touch path where the same required content is visible or intentionally openable." ], "commonMisuses": [ "Putting accepted document types only in a help-icon tooltip.", "Putting password rules only in a field-focus tooltip.", "Putting eligibility thresholds only in a hover card or tooltip beside a question.", "Using a disabled button tooltip as the only explanation for why users cannot continue." ], "keywords": [ "tooltip-only", "required", "information", "info", "tooltip", "hidden", "instructions", "hover-only", "help", "title-only", "guidance", "form", "rules", "eligibility", "disclosure", "attention", "management", "ui-ux", "required-content-hidden-in-tooltip", "anti-pattern", "checkout", "application", "account", "change", "decision", "flow", "needs", "but", "copy", "lives", "temporary", "disappear", "before", "apply", "treat", "put", "content", "visible", "intentionally", "openable" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/tooltip-only-required-information.md", "json": "https://uxpatternsguide.com/agent/patterns/tooltip-only-required-information.json", "human": "https://uxpatternsguide.com/patterns/tooltip-only-required-information/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/tooltip-only-required-information-vs-tooltip-vs-inline-message-vs-disclosure-details-vs-popover.md" ] }, { "id": "touch-gesture", "name": "Touch gesture", "aliases": [ "touch interaction", "gesture interaction", "mobile gesture", "tap gesture", "swipe gesture", "pinch gesture", "multi-touch gesture", "direct manipulation gesture" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Touch-first gesture vocabulary and fallback contract for taps, swipes, drags, pinches, and multi-touch interactions", "maturity": "standard", "platforms": [ "mobile", "web", "desktop", "spatial" ], "problem": "Touch gestures can make interfaces feel direct and efficient, but hidden, path-based, multipoint, undersized, or scroll-conflicting gestures exclude users and cause accidental activation when the product does not provide equivalent controls, clear thresholds, cancellation, or feedback.", "useWhen": "A touchscreen interaction needs deliberate design for gesture vocabulary, thresholds, feedback, target sizing, cancellation, and equivalent controls.", "avoidWhen": "The gesture is only an implementation detail inside a more specific pattern such as swipe action, pull to refresh, long press, drag and drop, bottom sheet, carousel, or map view.", "requiredStates": [ "Idle state with visible touch targets, gesture hints when needed, and no reliance on hover.", "Touch down or gesture start state that identifies the active target.", "Move or preview state showing direction, distance, scale, rotation, selected object, or next outcome.", "Threshold-not-met cancellation state that snaps back or leaves content unchanged." ], "commonMisuses": [ "Requiring pinch, rotate, two-finger swipe, or shape gestures with no single-pointer alternative.", "Making a hidden gesture the only way to find navigation, delete, refresh, zoom, or edit controls.", "Letting short diagonal scroll movements trigger swipe actions.", "Using tiny targets or placing opposing actions too close together." ], "keywords": [ "touch", "gesture", "interaction", "mobile", "tap", "swipe", "pinch", "multi-touch", "direct", "manipulation", "cross-device", "physical", "ui-ux", "touch-first", "vocabulary", "fallback", "contract", "taps", "swipes", "drags", "pinches", "interactions", "gestures", "make", "interfaces", "feel", "efficient", "but", "hidden", "path-based", "multipoint", "undersized", "scroll-conflicting", "exclude", "cause", "accidental", "activation", "product", "does", "provide" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/touch-gesture.md", "json": "https://uxpatternsguide.com/agent/patterns/touch-gesture.json", "human": "https://uxpatternsguide.com/patterns/touch-gesture/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/drag-and-drop-vs-touch-gesture-vs-long-press-vs-drag-and-drop-upload-vs-kanban-board-vs-sort-controls.md", "https://uxpatternsguide.com/agent/comparisons/haptic-feedback-vs-touch-gesture-vs-toast-notification-vs-error-state-vs-confirmation-dialog-vs-progress-bar.md", "https://uxpatternsguide.com/agent/comparisons/long-press-vs-touch-gesture-vs-context-menu-vs-tooltip-vs-popover-vs-action-menu.md", "https://uxpatternsguide.com/agent/comparisons/pull-to-refresh-vs-touch-gesture-vs-feed-vs-offline-state-vs-loading-spinner-vs-retry.md", "https://uxpatternsguide.com/agent/comparisons/swipe-action-vs-touch-gesture-vs-list-view-vs-action-menu-vs-undo-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/touch-gesture-vs-carousel-vs-map-view-vs-bottom-sheet-vs-drag-and-drop-upload-vs-data-visualization.md", "https://uxpatternsguide.com/agent/comparisons/voice-command-vs-keyboard-shortcut-vs-command-palette-vs-prompt-box-vs-text-input-vs-touch-gesture.md" ] }, { "id": "transfer-list", "name": "Transfer list", "aliases": [ "dual listbox", "dueling picklist", "shuttle", "list shuttle", "dual list selector", "two-pane picker" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Two-pane item transfer and selected-set review", "maturity": "established", "platforms": [ "web", "desktop" ], "problem": "Users need to build and review a selected set from a larger available set, but ordinary multi-select controls hide the destination set, and one listbox does not show what has moved out of the source collection.", "useWhen": "Users build a selected set by moving items from an available collection to a selected collection.", "avoidWhen": "The option set is short enough for a checkbox group.", "requiredStates": [ "Available list initial state with label, count, and selectable options.", "Selected list initial state with label, count, empty message, or existing selected items.", "One or more source items selected for transfer.", "One or more destination items selected for removal or reorder." ], "commonMisuses": [ "Using transfer list for a short yes-or-no set that should be checkboxes.", "Using transfer list for one required value that should be select, radio group, or combobox.", "Hiding selected values behind a count instead of showing the destination pane.", "Leaving move buttons enabled when no source or destination item is selected." ], "keywords": [ "transfer", "list", "dual", "listbox", "dueling", "picklist", "shuttle", "selector", "two-pane", "picker", "selection", "choice", "ui-ux", "item", "selected-set", "review", "need", "build", "selected", "set", "larger", "available", "but", "ordinary", "multi-select", "controls", "hide", "destination", "one", "does", "show", "what", "moved", "out", "source", "collection", "provide", "two", "labelled", "panes" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/transfer-list.md", "json": "https://uxpatternsguide.com/agent/patterns/transfer-list.json", "human": "https://uxpatternsguide.com/patterns/transfer-list/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/transfer-list-vs-multi-select-vs-listbox-vs-checkbox-group.md", "https://uxpatternsguide.com/agent/comparisons/tree-selection-vs-listbox-vs-checkbox-group-vs-transfer-list.md" ] }, { "id": "tree-grid", "name": "Tree grid", "aliases": [ "treegrid", "tree table", "hierarchical data grid", "tree list", "treelist", "hierarchical table", "expandable row grid" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Hierarchical interactive row-and-column data workspace", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need to inspect or act on hierarchical records that also have comparable columns, but separate tree and table controls force context switching, while a flat data grid loses parent-child ownership and descendant state.", "useWhen": "Rows have real parent-child hierarchy and shared comparable columns.", "avoidWhen": "Rows are flat or only visually grouped.", "requiredStates": [ "Default tree grid state with label, column headers, visible root rows, row hierarchy, row count context, and focused row or cell.", "Expanded parent row state with visible child rows, level indentation, and truthful aria-expanded state.", "Collapsed parent row state with child rows hidden, descendant count or state summary when relevant, and no focus left inside hidden rows.", "Leaf row state without expansion affordance or aria-expanded." ], "commonMisuses": [ "Using treegrid for a flat data grid with no expandable parent rows.", "Using treegrid for a simple folder tree that has only one label column and no tabular comparison.", "Putting aria-expanded on leaf rows or every first-column cell.", "Collapsing a parent while focus, validation, or dirty edits remain hidden inside descendants." ], "keywords": [ "tree", "grid", "treegrid", "table", "hierarchical", "data", "list", "treelist", "expandable", "row", "display", "exploration", "ui-ux", "interactive", "row-and-column", "workspace", "need", "inspect", "act", "records", "also", "have", "comparable", "columns", "but", "separate", "controls", "force", "context", "switching", "while", "flat", "loses", "parent-child", "ownership", "descendant", "state", "present", "hierarchy", "labelled" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/tree-grid.md", "json": "https://uxpatternsguide.com/agent/patterns/tree-grid.json", "human": "https://uxpatternsguide.com/patterns/tree-grid/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/tree-grid-vs-data-grid-vs-tree-selection-vs-table.md" ] }, { "id": "tree-selection", "name": "Tree selection", "aliases": [ "tree view selection", "hierarchical picker", "checkbox tree", "permission tree", "taxonomy tree", "folder picker" ], "category": "Selection And Choice", "patternType": "ui-ux", "surfaceType": "Hierarchical expandable selection tree", "maturity": "standard", "platforms": [ "web", "desktop" ], "problem": "Users need to select items from a hierarchy, but flat lists hide parent-child context, and ordinary nested checkboxes do not provide expand/collapse state, tree keyboard navigation, focus management, or selected-descendant feedback.", "useWhen": "Users choose one or more values from a meaningful hierarchy.", "avoidWhen": "The options are flat or only loosely grouped.", "requiredStates": [ "Initial tree state with visible label and root-level nodes.", "Expanded parent node with visible child group.", "Collapsed parent node with hidden child group.", "Focused active treeitem state distinct from selected state." ], "commonMisuses": [ "Using tree selection for a flat list where listbox, checkbox group, or multi-select would be simpler.", "Styling nested checkboxes as a tree without tree keyboard behavior or expanded state.", "Letting focus movement change multi-selection while users are only exploring nodes.", "Putting aria-expanded on leaf nodes." ], "keywords": [ "tree", "selection", "view", "hierarchical", "picker", "checkbox", "permission", "taxonomy", "folder", "choice", "ui-ux", "expandable", "need", "select", "items", "hierarchy", "but", "flat", "lists", "hide", "parent-child", "context", "ordinary", "nested", "checkboxes", "provide", "expand", "collapse", "state", "keyboard", "navigation", "focus", "management", "selected-descendant", "feedback", "labelled", "widget", "branches", "selectable", "treeitems" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/tree-selection.md", "json": "https://uxpatternsguide.com/agent/patterns/tree-selection.json", "human": "https://uxpatternsguide.com/patterns/tree-selection/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/tree-grid-vs-data-grid-vs-tree-selection-vs-table.md", "https://uxpatternsguide.com/agent/comparisons/tree-selection-vs-listbox-vs-checkbox-group-vs-transfer-list.md" ] }, { "id": "two-factor-authentication", "name": "Two-factor authentication", "aliases": [ "2FA", "MFA", "multi-factor authentication", "second factor", "step-up verification", "one-time code challenge", "authenticator app challenge", "push verification", "recovery codes", "remember this device" ], "category": "Task And Workflow Patterns", "patternType": "ui-ux", "surfaceType": "Additional-factor challenge and recovery flow", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Two-factor authentication adds security at a high-friction moment, so unclear factor prompts, inaccessible code entry, missing alternatives, weak recovery, bypassable enforcement, or unsafe trusted-device choices can lock out legitimate users or let attackers defeat the second factor.", "useWhen": "A sign-in, new device, risk signal, or sensitive action requires proof beyond the primary credential.", "avoidWhen": "The user is only choosing an authentication method on the initial sign-in page.", "requiredStates": [ "Initial additional-factor challenge with factor name, destination or protected action, and primary account context.", "One-time-code entry state with autocomplete one-time-code, paste support, expiry hint, and submit control.", "Push approval or hardware-key waiting state with clear device or key instruction and fallback.", "Resend-limited state with wait time and delivery-channel hint." ], "commonMisuses": [ "Showing a code field with no factor label, destination, expiry, resend timing, or alternate method.", "Blocking paste or autocomplete for one-time codes.", "Letting users bypass MFA through browser Back, deep links, cached pages, API calls, or another tab.", "Treating SMS as the only possible second factor for all users and all risk levels." ], "keywords": [ "two-factor", "authentication", "2fa", "mfa", "multi-factor", "second", "factor", "step-up", "verification", "one-time", "code", "challenge", "authenticator", "app", "push", "recovery", "codes", "remember", "device", "task", "workflow", "patterns", "ui-ux", "additional-factor", "flow", "adds", "security", "high-friction", "moment", "unclear", "prompts", "inaccessible", "entry", "missing", "alternatives", "weak", "bypassable", "enforcement", "unsafe", "trusted-device" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/two-factor-authentication.md", "json": "https://uxpatternsguide.com/agent/patterns/two-factor-authentication.json", "human": "https://uxpatternsguide.com/patterns/two-factor-authentication/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/confirm-email-vs-email-address-entry-vs-account-creation-vs-password-reset.md", "https://uxpatternsguide.com/agent/comparisons/confirm-phone-vs-phone-number-entry-vs-confirm-email-vs-two-factor-authentication.md", "https://uxpatternsguide.com/agent/comparisons/qr-scan-vs-camera-capture-vs-permission-request-vs-file-upload-vs-two-factor-authentication-vs-security-warning.md", "https://uxpatternsguide.com/agent/comparisons/two-factor-authentication-vs-sign-in-vs-login-vs-password-reset.md" ] }, { "id": "typeahead", "name": "Typeahead", "aliases": [ "search as you type", "instant results", "live search", "incremental search", "as-you-type results", "predictive result lookup" ], "category": "Search, Browse, And Discovery", "patternType": "ui-ux", "surfaceType": "Live search-as-you-type result lookup with incremental result preview", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users often need fast feedback while searching large content sets, but waiting for explicit submit slows exploration and naive every-keystroke search can produce flicker, stale results, accidental selection, and wasted requests.", "useWhen": "Users search large datasets and benefit from seeing result hits before full submit.", "avoidWhen": "The task is choosing one constrained field value, which is better handled as autocomplete.", "requiredStates": [ "Empty state before typing.", "Below-minimum-length state explaining when live lookup begins.", "Loading or stalled state tied to the current query.", "Populated live-result state with result count, source labels, and active result." ], "commonMisuses": [ "Calling a known-value autocomplete field typeahead even though no result set is searched.", "Calling suggested query phrases typeahead when no live result hits are shown.", "Auto-filling the first result into the input while users type.", "Sending a remote request for every keystroke with no debounce or minimum length." ], "keywords": [ "typeahead", "search", "you", "type", "instant", "results", "live", "incremental", "as-you-type", "predictive", "result", "lookup", "browse", "discovery", "ui-ux", "search-as-you-type", "preview", "often", "need", "fast", "feedback", "while", "searching", "large", "content", "sets", "but", "waiting", "explicit", "submit", "slows", "exploration", "naive", "every-keystroke", "produce", "flicker", "stale", "accidental", "selection", "wasted" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/typeahead.md", "json": "https://uxpatternsguide.com/agent/patterns/typeahead.json", "human": "https://uxpatternsguide.com/patterns/typeahead/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/mentions-vs-comments-vs-threaded-discussion-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/typeahead-vs-autocomplete-vs-search-suggestions-vs-basic-search.md" ] }, { "id": "typed-confirmation", "name": "Typed confirmation", "aliases": [ "type-to-confirm", "text confirmation", "repository name confirmation", "project name confirmation", "exact phrase confirmation", "typed delete confirmation", "target phrase gate" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Exact target phrase gate before severe commit", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "For severe destructive or irreversible actions, users can still confirm the wrong target if the final review only uses buttons, checkboxes, or generic phrases that do not force them to attend to the exact object or scope.", "useWhen": "A severe action affects repository, project, workspace, account, production, security, billing, or organization-wide scope.", "avoidWhen": "The action is routine, reversible, local, or recoverable through undo or trash restore.", "requiredStates": [ "No-typed-gate state for actions that do not need target-text escalation.", "Required phrase state showing the exact target phrase to reproduce.", "Empty input state with the final action disabled.", "Mismatch state explaining what does not match without committing the action." ], "commonMisuses": [ "Requiring users to type yes, confirm, or delete instead of the target name.", "Masking typed confirmation as if it were a password.", "Accepting partial, stale, or wrong-target text.", "Making typed confirmation the only safeguard while hiding the loss inventory." ], "keywords": [ "typed", "confirmation", "type-to-confirm", "text", "repository", "name", "project", "exact", "phrase", "delete", "target", "gate", "error", "prevention", "recovery", "ui-ux", "before", "severe", "commit", "destructive", "irreversible", "actions", "still", "confirm", "wrong", "final", "review", "uses", "buttons", "checkboxes", "generic", "phrases", "force", "them", "attend", "object", "scope", "require", "type", "visible" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/typed-confirmation.md", "json": "https://uxpatternsguide.com/agent/patterns/typed-confirmation.json", "human": "https://uxpatternsguide.com/patterns/typed-confirmation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ambiguous-destructive-action-copy-vs-destructive-action-confirmation-vs-typed-confirmation-vs-dangerous-action-review-vs-confirmation-fatigue-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/dangerous-action-review-vs-destructive-action-confirmation-vs-typed-confirmation-vs-human-approval-gate-vs-review-before-submit-vs-security-warning.md", "https://uxpatternsguide.com/agent/comparisons/delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-settings-management-vs-restore-from-trash.md", "https://uxpatternsguide.com/agent/comparisons/hidden-destructive-account-deletion-vs-delete-account-vs-destructive-action-confirmation-vs-typed-confirmation-vs-data-export-vs-privacy-settings.md", "https://uxpatternsguide.com/agent/comparisons/legal-acceptance-vs-consent-prompt-vs-review-before-submit-vs-checkbox-group-vs-confirmation-dialog-vs-typed-confirmation-vs-age-gate.md", "https://uxpatternsguide.com/agent/comparisons/sensitive-data-reveal-vs-password-input-vs-input-mask-vs-typed-confirmation-vs-permission-request.md", "https://uxpatternsguide.com/agent/comparisons/typed-confirmation-vs-destructive-action-confirmation-vs-confirmation-dialog-vs-password-input.md" ] }, { "id": "undo", "name": "Undo", "aliases": [ "revert action", "undo snackbar", "restore action", "rollback action" ], "category": "Error Prevention And Recovery", "patternType": "ux", "surfaceType": "Post-action recovery behavior", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users need to recover from common reversible actions after acting quickly, without being blocked by confirmation prompts before every low-risk command.", "useWhen": "The action is common and mistakes are likely.", "avoidWhen": "The action has external side effects that cannot be recalled.", "requiredStates": [ "Normal state before the user action.", "Completed-but-recoverable state that names what changed and exposes an undo control.", "Restored state after undo returns the exact object, value, order, or selection.", "Committed final state after the recovery window expires or the user confirms finalization." ], "commonMisuses": [ "Offering undo for an action that cannot actually be reversed.", "Showing a recovery control so briefly that users cannot perceive or reach it.", "Restoring only part of the prior state while implying full recovery.", "Using a vague Undo label when several actions could be undone." ], "keywords": [ "undo", "revert", "action", "snackbar", "restore", "rollback", "error", "prevention", "recovery", "post-action", "behavior", "need", "recover", "common", "reversible", "actions", "after", "acting", "quickly", "without", "being", "blocked", "confirmation", "prompts", "before", "every", "low-risk", "command", "let", "complete", "preserve", "exact", "prior", "state", "report", "what", "changed", "expose", "clearly", "labelled" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/undo.md", "json": "https://uxpatternsguide.com/agent/patterns/undo.json", "human": "https://uxpatternsguide.com/patterns/undo/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/confirmation-fatigue-vs-confirmation-dialog-vs-destructive-action-confirmation-vs-undo-vs-warning-text-vs-dangerous-action-review.md", "https://uxpatternsguide.com/agent/comparisons/destructive-action-confirmation-vs-confirmation-dialog-vs-undo-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/fake-undo-vs-undo-vs-toast-notification-vs-restore-from-trash-vs-destructive-action-confirmation-vs-autosave-recovery.md", "https://uxpatternsguide.com/agent/comparisons/icon-only-ambiguous-action-vs-confirmation-dialog-vs-undo.md", "https://uxpatternsguide.com/agent/comparisons/keyboard-shortcut-vs-command-palette-vs-menu-menubar-vs-toolbar-vs-undo-vs-redo.md", "https://uxpatternsguide.com/agent/comparisons/redo-vs-undo-vs-draft-state-vs-command-palette.md", "https://uxpatternsguide.com/agent/comparisons/restore-from-trash-vs-undo-vs-destructive-action-confirmation-vs-draft-state.md", "https://uxpatternsguide.com/agent/comparisons/swipe-action-vs-touch-gesture-vs-list-view-vs-action-menu-vs-undo-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/toast-notification-vs-toast-only-critical-error-vs-error-state-vs-undo.md", "https://uxpatternsguide.com/agent/comparisons/undo-vs-confirmation-dialog.md", "https://uxpatternsguide.com/agent/comparisons/version-history-vs-activity-log-vs-timeline-vs-undo.md" ] }, { "id": "unsaved-changes-prompt", "name": "Unsaved changes prompt", "aliases": [ "dirty changes prompt", "save changes dialog", "discard changes prompt", "unsaved edit confirmation", "close editor prompt", "cancel edit prompt" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Dirty-editor decision prompt before closing, canceling, switching, or replacing unsaved edits", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users can close an editor, cancel a modal, switch objects, replace selections, or exit edit mode while local changes are dirty, causing accidental loss or uncertainty about whether the latest values were saved.", "useWhen": "A close, cancel, switch, or edit-mode exit would discard unsaved local changes.", "avoidWhen": "There are no actual unsaved changes.", "requiredStates": [ "Clean editor state with no prompt.", "Dirty editor state with changed-field tracking.", "Close, cancel, object switch, or mode switch attempted state.", "Prompt open with object name and changed-field summary." ], "commonMisuses": [ "Prompting when nothing changed.", "Using OK and Cancel labels that hide whether edits will be saved, discarded, or preserved.", "Closing after Save even when the save request failed.", "Discarding all editor state when only one embedded panel was dirty." ], "keywords": [ "unsaved", "changes", "prompt", "dirty", "save", "dialog", "discard", "edit", "confirmation", "close", "editor", "cancel", "error", "prevention", "recovery", "ui-ux", "dirty-editor", "decision", "before", "closing", "canceling", "switching", "replacing", "edits", "modal", "switch", "objects", "replace", "selections", "exit", "mode", "while", "local", "causing", "accidental", "loss", "uncertainty", "about", "whether", "latest" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/unsaved-changes-prompt.md", "json": "https://uxpatternsguide.com/agent/patterns/unsaved-changes-prompt.json", "human": "https://uxpatternsguide.com/patterns/unsaved-changes-prompt/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/unsaved-changes-prompt-vs-exit-warning-vs-autosave-form-vs-confirmation-dialog.md" ] }, { "id": "user-controlled-density", "name": "User-controlled density", "aliases": [ "density selector", "compact mode", "comfortable mode", "spacious mode", "display density", "row density", "content density", "spacing density", "compact table mode", "comfortable table mode" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "User-selectable compactness for rows, lists, cards, tables, grids, or work surfaces", "maturity": "established", "platforms": [ "web", "mobile", "desktop" ], "problem": "Information-dense products need to support both scanning and comfortable reading, but fixed spacing forces every user into the same tradeoff or lets compact modes break readability, target size, focus, and state preservation.", "useWhen": "Users need to switch between scanning many records and reading or editing with more space.", "avoidWhen": "Changing density would hide required information, reduce targets below usable sizes, or break focus.", "requiredStates": [ "Default density state", "Comfortable or spacious density state", "Standard density state", "Compact density state" ], "commonMisuses": [ "Treating density as a way to remove metadata, labels, helper text, or status instead of changing spacing.", "Making compact mode the only way to use the product efficiently.", "Saving personal density as a team or organization setting without consent.", "Coupling density to saved filters, columns, theme, layout arrangement, or zoom." ], "keywords": [ "user-controlled", "density", "selector", "compact", "mode", "comfortable", "spacious", "display", "row", "content", "spacing", "table", "personalization", "preference", "ui-ux", "user-selectable", "compactness", "rows", "lists", "cards", "tables", "grids", "work", "surfaces", "information-dense", "products", "need", "support", "both", "scanning", "reading", "but", "fixed", "forces", "every", "same", "tradeoff", "lets", "modes", "break" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/user-controlled-density.md", "json": "https://uxpatternsguide.com/agent/patterns/user-controlled-density.json", "human": "https://uxpatternsguide.com/patterns/user-controlled-density/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/user-controlled-density-vs-settings-management-vs-data-grid-vs-saved-view.md" ] }, { "id": "user-controlled-layout", "name": "User-controlled layout", "aliases": [ "workspace layout switcher", "layout preference", "personal workspace layout", "pane arrangement", "split layout mode", "focus layout mode", "stacked layout", "inspector layout", "layout preset", "workspace arrangement" ], "category": "Personalization And Preference", "patternType": "ui-ux", "surfaceType": "User-selectable arrangement of panes, regions, or workspace modes around one active task", "maturity": "emerging", "platforms": [ "web", "desktop", "mobile" ], "problem": "Complex work surfaces often contain lists, details, activity streams, inspectors, previews, and editors, but one fixed arrangement forces every user, device, and task phase into the same layout and can hide state when panes move or collapse.", "useWhen": "Users work with multiple panes or regions around one active task and need different arrangements for comparison, editing, reading, or focus.", "avoidWhen": "The only need is changing row spacing, text size, theme, or zoom.", "requiredStates": [ "Default layout state with current layout name, scope, affected regions, and reset availability.", "Split or side-by-side layout state showing primary and secondary regions together.", "Focus layout state that hides secondary regions while preserving their state and return controls.", "Stacked or mobile layout state with labelled navigation between regions." ], "commonMisuses": [ "Treating layout as a cosmetic preference while losing task state when panes hide or move.", "Combining layout with filters, density, columns, theme, or saved view settings so users cannot reset one without the others.", "Saving a personal layout as a workspace default without scope warning or permission checks.", "Using a side-by-side desktop layout on mobile and creating horizontal scroll or unreachable panes." ], "keywords": [ "user-controlled", "layout", "workspace", "switcher", "preference", "personal", "pane", "arrangement", "split", "mode", "focus", "stacked", "inspector", "preset", "personalization", "ui-ux", "user-selectable", "panes", "regions", "modes", "around", "one", "active", "task", "complex", "work", "surfaces", "often", "contain", "lists", "details", "activity", "streams", "inspectors", "previews", "editors", "but", "fixed", "forces", "every" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/user-controlled-layout.md", "json": "https://uxpatternsguide.com/agent/patterns/user-controlled-layout.json", "human": "https://uxpatternsguide.com/patterns/user-controlled-layout/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/user-controlled-layout-vs-custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-window-splitter.md" ] }, { "id": "utility-navigation", "name": "Utility navigation", "aliases": [ "utility nav", "utility links", "account utilities", "header utilities", "top utility bar", "system utility navigation" ], "category": "Navigation And Wayfinding", "patternType": "ui-ux", "surfaceType": "Persistent utility controls separated from destination navigation", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Users need persistent access to support, search, session, account, notification, language, and cross-product tools, but those tools are often mixed with primary destinations and make the current navigation state ambiguous.", "useWhen": "Users need persistent access to support, search, account, notifications, language, switching, or sign-out controls.", "avoidWhen": "The control is a primary destination such as Dashboard, Projects, Reports, or Applications.", "requiredStates": [ "Default state with destination navigation and a separated utility group.", "Utility panel open state for notifications, account, help, search, or switcher controls.", "Badge state before and after inspecting notifications or pending account items.", "Signed-in and signed-out or sign-out-confirmed states." ], "commonMisuses": [ "Treating help, search, profile, notifications, and sign out as primary navigation destinations.", "Using unlabeled utility icons whose purpose is not obvious.", "Leaving utility panels open across route changes or focus changes with no dismissal path.", "Showing stale unread counts after users inspect notifications." ], "keywords": [ "utility", "navigation", "nav", "links", "account", "utilities", "header", "top", "bar", "system", "wayfinding", "ui-ux", "persistent", "controls", "separated", "destination", "need", "access", "support", "search", "session", "notification", "language", "cross-product", "tools", "but", "those", "often", "mixed", "primary", "destinations", "make", "current", "state", "ambiguous", "provide", "separate", "group", "layer", "exposes" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/utility-navigation.md", "json": "https://uxpatternsguide.com/agent/patterns/utility-navigation.json", "human": "https://uxpatternsguide.com/patterns/utility-navigation/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/utility-navigation-vs-global-navigation-vs-service-navigation.md" ] }, { "id": "validation-that-clears-user-input", "name": "Validation that clears user input", "aliases": [ "validation clears form", "input erased after error", "form data loss on validation", "failed submit clears fields", "validation wipes entered values", "server error loses input" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Anti-pattern where validation or failed submission destroys recoverable user-entered values", "maturity": "anti-pattern", "platforms": [ "web", "mobile", "desktop" ], "problem": "Validation is supposed to help users correct data, but clearing input after errors turns a small correction into rework, loses context, and can make users abandon or mistrust the form.", "useWhen": "Use this anti-pattern entry to audit forms, editors, imports, checkouts, onboarding flows, and configuration screens where validation can erase recoverable user work.", "avoidWhen": "Do not use this entry to prevent deliberately clearing sensitive secrets such as CVV, one-time codes, or passwords when policy requires it.", "requiredStates": [ "Initial typed state with values entered across multiple fields.", "Field-level invalid state with the failing value preserved and editable.", "Submit failed state with error summary, matching field messages, and all safe values preserved.", "Server validation returned state with the submitted payload safely rehydrated into the form." ], "commonMisuses": [ "Calling form reset after submit regardless of success or failure.", "Replacing the user's raw value with an empty string when parsing fails.", "Re-rendering the form from default values after a server validation response.", "Clearing every field because one field was invalid." ], "keywords": [ "validation", "clears", "input", "form", "erased", "after", "error", "data", "loss", "failed", "submit", "fields", "wipes", "entered", "values", "server", "loses", "prevention", "recovery", "ui-ux", "anti-pattern", "where", "submission", "destroys", "recoverable", "user-entered", "supposed", "help", "correct", "but", "clearing", "errors", "turns", "small", "correction", "rework", "context", "make", "abandon", "mistrust" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/validation-that-clears-user-input.md", "json": "https://uxpatternsguide.com/agent/patterns/validation-that-clears-user-input.json", "human": "https://uxpatternsguide.com/patterns/validation-that-clears-user-input/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/validation-that-clears-user-input-vs-inline-validation-vs-error-summary-vs-single-page-form-vs-autosave-recovery-vs-error-state.md" ] }, { "id": "version-history", "name": "Version history", "aliases": [ "revision history", "file history", "page history", "document history", "previous versions", "saved versions", "named versions", "version browser", "restore previous version", "change history" ], "category": "Error Prevention And Recovery", "patternType": "ui-ux", "surfaceType": "Durable snapshot browser for previous document, file, page, object, or configuration versions", "maturity": "established", "platforms": [ "web", "desktop", "mobile" ], "problem": "Collaborative editing, autosave, and configuration changes create many saved states, but users cannot safely recover or reason about prior content when previous versions, current version context, compare behavior, restore consequences, permissions, comments, and retention limits are hidden.", "useWhen": "Users edit documents, files, pages, design files, records, configurations, or published content over time.", "avoidWhen": "The product only has an event log with no saved content snapshots.", "requiredStates": [ "Default state with current version, previous version list, author, timestamp, and change summary.", "Named version state with editable or visible label and reason.", "Autosaved version state with system-created timestamp and author context.", "Version compare or diff state between current version and selected previous version." ], "commonMisuses": [ "Calling an activity log or audit trail version history when it has no previous content snapshots.", "Using a timeline of milestones as a substitute for previewable or restorable versions.", "Relying on undo for recovery after navigation, collaboration, autosave, or elapsed time.", "Hiding the current version while users inspect previous versions." ], "keywords": [ "version", "history", "revision", "file", "page", "document", "previous", "versions", "saved", "named", "browser", "restore", "change", "error", "prevention", "recovery", "ui-ux", "durable", "snapshot", "object", "configuration", "collaborative", "editing", "autosave", "changes", "create", "many", "states", "but", "cannot", "safely", "recover", "reason", "about", "prior", "content", "current", "context", "compare", "behavior" ], "lastVerified": "2026-06-11", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/version-history.md", "json": "https://uxpatternsguide.com/agent/patterns/version-history.json", "human": "https://uxpatternsguide.com/patterns/version-history/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/audit-log-vs-activity-log-vs-ai-output-audit-trail-vs-version-history-vs-notification-center.md", "https://uxpatternsguide.com/agent/comparisons/change-review-vs-review-before-submit-vs-approval-workflow-vs-review-queue.md", "https://uxpatternsguide.com/agent/comparisons/version-history-vs-activity-log-vs-timeline-vs-undo.md" ] }, { "id": "voice-command", "name": "Voice command", "aliases": [ "spoken command", "speech command", "voice control", "speech input command", "hands-free command", "dictation command" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Spoken command interface that listens, recognizes, confirms, and executes bounded user intents", "maturity": "standard", "platforms": [ "web", "mobile", "desktop", "voice" ], "problem": "Voice commands can make products accessible and hands-free, but speech recognition is uncertain, socially constrained, permission-gated, language-dependent, and easy to confuse with dictation, so invisible listening or unconfirmed side effects can execute the wrong command or block users entirely.", "useWhen": "Users need hands-free control, accessibility speech input, or rapid spoken command activation.", "avoidWhen": "The task is high-risk and cannot tolerate recognition uncertainty without strong review or approval.", "requiredStates": [ "Voice unavailable or unsupported state with non-voice alternatives.", "Microphone permission not requested, denied, granted, and revoked states.", "Wake phrase, push-to-talk, or explicit start-listening state.", "Listening state with visible microphone activity, privacy boundary, and timeout." ], "commonMisuses": [ "Listening without a visible active state or clear stop control.", "Executing commands from partial recognition or low-confidence results.", "Making voice the only route to a required workflow.", "Using hidden command phrases that do not match visible labels or accessible names." ], "keywords": [ "voice", "command", "spoken", "speech", "control", "input", "hands-free", "dictation", "cross-device", "physical", "interaction", "ui-ux", "interface", "listens", "recognizes", "confirms", "executes", "bounded", "intents", "commands", "make", "products", "accessible", "but", "recognition", "uncertain", "socially", "constrained", "permission-gated", "language-dependent", "easy", "confuse", "invisible", "listening", "unconfirmed", "side", "effects", "execute", "wrong", "block" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/voice-command.md", "json": "https://uxpatternsguide.com/agent/patterns/voice-command.json", "human": "https://uxpatternsguide.com/patterns/voice-command/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/voice-command-vs-keyboard-shortcut-vs-command-palette-vs-prompt-box-vs-text-input-vs-touch-gesture.md" ] }, { "id": "warning-text", "name": "Warning text", "aliases": [ "warning copy", "consequence warning", "legal warning", "caution text", "important warning" ], "category": "Feedback, Status, And System State", "patternType": "ui-ux", "surfaceType": "Severe-consequence warning copy before an action", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Users may continue through a form, declaration, or risky action without noticing a severe consequence, especially when the consequence is written as ordinary hint text, a vague severity label, or a message that appears only after the decision.", "useWhen": "A user must understand a serious consequence before taking or skipping an action.", "avoidWhen": "The message is a dynamic task status that must be announced when it appears.", "requiredStates": [ "No-warning state where the action has no severe consequence.", "Before-action warning state placed immediately before the related control or declaration.", "Legal, financial, eligibility, deletion, or security consequence variant with specific consequence copy.", "Accessible icon state where warning meaning survives color loss and assistive technology output." ], "commonMisuses": [ "Using warning text for routine hints, explanations, or mild reminders.", "Placing the warning after the action it is supposed to qualify.", "Writing only Warning or Important without a specific consequence.", "Using red or yellow text as the only warning signal." ], "keywords": [ "warning", "text", "copy", "consequence", "legal", "caution", "important", "feedback", "status", "system", "state", "ui-ux", "severe-consequence", "before", "action", "may", "continue", "through", "form", "declaration", "risky", "without", "noticing", "severe", "especially", "written", "ordinary", "hint", "vague", "severity", "label", "message", "appears", "after", "decision", "place", "concise", "immediately", "related", "instruction" ], "lastVerified": "2026-06-09", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/warning-text.md", "json": "https://uxpatternsguide.com/agent/patterns/warning-text.json", "human": "https://uxpatternsguide.com/patterns/warning-text/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/ai-confidence-shown-as-fake-precision-vs-confidence-uncertainty-display-vs-meter-vs-source-grounding-display-vs-warning-text-vs-human-approval-gate.md", "https://uxpatternsguide.com/agent/comparisons/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.md", "https://uxpatternsguide.com/agent/comparisons/ambiguous-destructive-action-copy-vs-destructive-action-confirmation-vs-typed-confirmation-vs-dangerous-action-review-vs-confirmation-fatigue-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/confidence-uncertainty-display-vs-source-grounding-display-vs-citation-display-vs-meter-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/confirmation-fatigue-vs-confirmation-dialog-vs-destructive-action-confirmation-vs-undo-vs-warning-text-vs-dangerous-action-review.md", "https://uxpatternsguide.com/agent/comparisons/destructive-action-confirmation-vs-confirmation-dialog-vs-undo-vs-warning-text.md", "https://uxpatternsguide.com/agent/comparisons/model-update-notice-vs-notification-banner-vs-warning-text-vs-phase-beta-banner-vs-confidence-uncertainty-display-vs-source-grounding-display.md", "https://uxpatternsguide.com/agent/comparisons/security-warning-vs-warning-text-vs-alert-vs-permission-denied-state-vs-sensitive-data-reveal.md", "https://uxpatternsguide.com/agent/comparisons/summary-box-vs-alert-vs-warning-text-vs-disclosure-details.md", "https://uxpatternsguide.com/agent/comparisons/warning-text-vs-alert-vs-inline-message-vs-error-summary.md" ] }, { "id": "wearable-glance", "name": "Wearable glance", "aliases": [ "watch glance", "glanceable wearable", "watch complication", "wear os tile", "Wear OS tile", "smartwatch widget", "wrist glance", "ambient wearable status", "watch face status" ], "category": "Cross-Device And Physical Interaction", "patternType": "ui-ux", "surfaceType": "Few-second wearable status surface with safe handoff", "maturity": "standard", "platforms": [ "mobile" ], "problem": "Wearable surfaces are glanceable, personal, tiny, battery-sensitive, and often visible to others, so copying mobile pages, dashboards, notifications, or long controls onto a watch can create unreadable, stale, privacy-leaking, or unsafe experiences.", "useWhen": "A wearable surface can answer a status, next-step, or current-metric question in seconds.", "avoidWhen": "The task requires long reading, comparison, filtering, editing, authentication, payment, or destructive review.", "requiredStates": [ "Configured and unconfigured complication, tile, or widget state.", "Normal glance state with one primary answer and short label.", "Ambient, dimmed, always-on, or wrist-down state.", "Fresh, stale, cached, unavailable, offline, and phone-disconnected states." ], "commonMisuses": [ "Shrinking a mobile dashboard or full card list into a watch tile.", "Showing stale data without a timestamp or unavailable state.", "Exposing private messages, health values, or payment details on the wrist.", "Using a wearable glance as a notification inbox." ], "keywords": [ "wearable", "glance", "watch", "glanceable", "complication", "wear", "tile", "smartwatch", "widget", "wrist", "ambient", "status", "face", "cross-device", "physical", "interaction", "ui-ux", "few-second", "surface", "safe", "handoff", "surfaces", "personal", "tiny", "battery-sensitive", "often", "visible", "others", "copying", "mobile", "pages", "dashboards", "notifications", "long", "controls", "onto", "create", "unreadable", "stale", "privacy-leaking" ], "lastVerified": "2026-06-13", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/wearable-glance.md", "json": "https://uxpatternsguide.com/agent/patterns/wearable-glance.json", "human": "https://uxpatternsguide.com/patterns/wearable-glance/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/wearable-glance-vs-notification-center-vs-summary-box-vs-dashboard-layout-vs-progress-bar-vs-notification-preferences.md" ] }, { "id": "window-splitter", "name": "Window splitter", "aliases": [ "splitter", "split pane", "split view", "resizable panes", "pane splitter", "resize handle", "moveable separator" ], "category": "Data Display And Exploration", "patternType": "ui-ux", "surfaceType": "Moveable separator for resizing adjacent panes", "maturity": "standard", "platforms": [ "web", "desktop", "mobile" ], "problem": "Complex workspaces often place related panes side by side, but fixed pane sizes waste space for some tasks while unlabeled or pointer-only splitters make resizing inaccessible, unpredictable, and state-destructive.", "useWhen": "Users need to compare, edit, inspect, or preview adjacent panes in one durable workspace.", "avoidWhen": "The divider is only decorative or structural.", "requiredStates": [ "Default split state with two labelled panes and a visible splitter position.", "Keyboard-focused splitter state with accessible name, orientation, value, min, and max.", "Pointer drag or step resize state with live pane size update.", "Arrow-key resize state with predictable increments." ], "commonMisuses": [ "Using a static separator line and calling it a splitter.", "Making resizing pointer-only with no keyboard or assistive-technology value.", "Letting panes collapse to unusable slivers without restore.", "Using a splitter when a drawer, details panel, or responsive layout would better match the task." ], "keywords": [ "window", "splitter", "split", "pane", "view", "resizable", "panes", "resize", "handle", "moveable", "separator", "data", "display", "exploration", "ui-ux", "resizing", "adjacent", "complex", "workspaces", "often", "place", "related", "side", "but", "fixed", "sizes", "waste", "space", "some", "tasks", "while", "unlabeled", "pointer-only", "splitters", "make", "inaccessible", "unpredictable", "state-destructive", "provide", "named" ], "lastVerified": "2026-06-10", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/window-splitter.md", "json": "https://uxpatternsguide.com/agent/patterns/window-splitter.json", "human": "https://uxpatternsguide.com/patterns/window-splitter/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/master-detail-vs-details-panel-vs-list-view-vs-window-splitter.md", "https://uxpatternsguide.com/agent/comparisons/user-controlled-layout-vs-custom-dashboard-vs-dashboard-layout-vs-saved-view-vs-window-splitter.md", "https://uxpatternsguide.com/agent/comparisons/window-splitter-vs-details-panel-vs-drawer-vs-side-navigation.md" ] }, { "id": "wizard", "name": "Wizard", "aliases": [ "setup wizard", "guided setup", "setup assistant", "configuration wizard", "creation wizard", "guided workflow" ], "category": "Input And Data Entry", "patternType": "ui-ux", "surfaceType": "Guided sequential setup assistant", "maturity": "standard", "platforms": [ "web", "mobile", "desktop" ], "problem": "Complex setup tasks become risky when users must know the dependency order, test requirements, generated outputs, and final consequences without a guided assistant that keeps each step honest.", "useWhen": "A setup, import, object creation, or configuration task has strict sequencing.", "avoidWhen": "The task is a short form that users should scan and submit on one page.", "requiredStates": [ "Not-started state that explains what the wizard will configure and how many major steps follow.", "Current guided step with a clear heading, local controls, and step-specific primary action.", "Disabled future step state before prerequisites pass.", "Completed step state based on saved valid setup data." ], "commonMisuses": [ "Using wizard chrome for a short edit form with no dependent sequence.", "Letting users finish before required tests, previews, or review pass.", "Treating step navigation as the whole wizard while leaving draft state and finish behavior undefined.", "Hiding conditional steps until after users relied on the displayed count." ], "keywords": [ "wizard", "setup", "guided", "assistant", "configuration", "creation", "workflow", "input", "data", "entry", "ui-ux", "sequential", "complex", "tasks", "become", "risky", "know", "dependency", "order", "test", "requirements", "generated", "outputs", "final", "consequences", "without", "keeps", "each", "step", "honest", "guide", "through", "bounded", "explicit", "state", "prerequisite", "validation", "step-specific", "actions", "preview" ], "lastVerified": "2026-06-08", "urls": { "markdown": "https://uxpatternsguide.com/agent/patterns/wizard.md", "json": "https://uxpatternsguide.com/agent/patterns/wizard.json", "human": "https://uxpatternsguide.com/patterns/wizard/" }, "comparisonUrls": [ "https://uxpatternsguide.com/agent/comparisons/complete-complex-form-vs-single-page-form-vs-multi-step-form-vs-wizard.md", "https://uxpatternsguide.com/agent/comparisons/onboarding-vs-empty-state-vs-wizard-vs-progressive-disclosure.md", "https://uxpatternsguide.com/agent/comparisons/progressive-disclosure-vs-disclosure-details-vs-accordion-vs-wizard.md", "https://uxpatternsguide.com/agent/comparisons/wizard-vs-multi-step-form-vs-step-navigation-vs-process-list.md" ] } ] }