| UI or UX | UI + UX - Dedicated page shell and section map for settings destinations | UI + UX - Dedicated user or app configuration management surface | UI + UX - Persistent local hierarchy at the side of content | UI + UX - Section-switching component | UI + UX - Dismissible slide-in navigation sheet | UI + UX - Existing-profile readiness and enrichment flow | UI + UX - Persistent hub for communication, consent, topic, privacy, language, and personalization choices | UI + UX - Sectioned enterprise configuration form |
| UI guidance | Render a settings page as a stable destination with a clear page title, section list, selected section, section summary, grouped setting rows or links, current-location cues, search or find-in-settings for larger products, and a reliable way back to the product area that opened it. | Render settings management as a durable configuration surface with a clear Settings or Preferences entry point, grouped categories, current values, setting descriptions, ownership or scope labels, dependencies, save or immediate-apply behavior, status feedback, search or section navigation for larger sets, and reset or restore defaults where appropriate. | Render a vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator. | Render a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab. | Render a navigation sheet that enters from the start edge or bottom, is opened by an explicit control, and presents grouped destination items with selected state. | Render profile setup as a focused completion surface for an existing account or profile, with current profile preview, missing recommended fields, managed-field notices, visibility controls, skip or do-later paths, and clear save state. | Render a preference center as a returnable hub with categories for communications, channels, topics or interests, notification delivery, privacy and data sharing, cookie or tracking consent, personalization, language or locale, required messages, managed values, source-of-truth status, and save feedback. | Render one coherent form surface with a clear title, section navigation or section headings, current section state, grouped controls, persistent labels, helper text, required indicators, error summary, field-level errors, review or summary state, and one save contract. |
| UX guidance | Use a settings page when users must orient within many account, app, workspace, security, notification, privacy, billing, device, integration, or display sections before changing a value. | Use settings management when users need to review and change persistent app, account, workspace, notification, privacy, display, integration, or system behavior outside the immediate task flow. | Use side navigation to help users move within a complex section without losing the current page's position in that section. | Help users switch between sibling sections in the same page context without changing routes or losing local work. | Use a navigation drawer for destinations that need to be available but not constantly visible, especially on constrained screens or complex apps with secondary sections. | Use profile setup when a user already has a usable account or profile and needs guided help to make the profile complete enough for collaboration, public identity, trust, or discovery. | Use a preference center when users need durable control over what they receive, which channels may be used, which topics they want, which consent purposes are active, how personalization uses their data, and which choices cannot be disabled. | Use a complete complex form when users must edit many related product settings together and need to inspect dependencies across sections before saving. |
| Good UI | A workspace Settings page has a title, left section list, selected Security section, summary cards for sign-in, members, audit log, and tokens, plus a breadcrumb back to the workspace. | A notification settings page groups channels, quiet hours, digest frequency, and workspace scope; each row shows current value, effect, dependency, and whether changes save immediately. | A settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current. | Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab. | A mobile app bar menu button opens a left modal drawer with Inbox selected, grouped labels, account switcher, and a visible scrim behind it. | A workspace profile setup checklist shows that display name is complete, photo is optional with initials fallback, title is managed by HR, time zone helps scheduling, and location visibility is set to Team only. | A customer account preference center shows Email, SMS, Push, Topics, Cookies, Data sharing, Language, and Required service messages, each with current status, scope, and last saved time. | A policy configuration form has Basics, Rules, Approvals, Notifications, and Review sections; Approvals shows an error because the threshold in Rules requires at least two approvers. |
| Bad UI | A page called Settings is a long flat list of unrelated links, invoices, help articles, destructive account actions, and onboarding reminders with no section identity. | A page called Settings mixes billing invoices, destructive account deletion, onboarding tips, profile setup, search results, and global navigation with no grouping or save model. | A sidebar mixes Dashboard, Reports, Sign out, Help, Team, API, Billing, and Marketing with no section grouping. | Tabs wrap unpredictably or look like unrelated buttons. | A hamburger opens a full-height list with no scrim, no close control, and no visible selected destination. | A complete your profile banner blocks the product until the user uploads a photo, birthday, phone number, location, and social links. | A single Receive updates switch hides whether it controls marketing email, SMS, push, product notices, analytics consent, or service messages. | A single grid shows Nm, Rule, Appr, Esc, Mail, JSON, Mode, and Owner fields with no labels, fieldsets, section status, or error ownership. |
| Good UX | A user opens Settings from a project, lands on Workspace notifications, sees the current section highlighted, searches for retention, and can return to the project after editing. | A user turns off weekly digest emails, sees the setting save immediately, keeps urgent security emails enabled, and understands the workspace-level override. | Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded. | Users switch between sibling sections without leaving page context or losing panel-local notes. | Users open the drawer, select Sent, the drawer closes, and Sent becomes the visible destination while Inbox scroll state is preserved. | A user adds time zone and pronouns, leaves photo and social links blank, sees the team-card preview update, and returns to the project they were working on. | A user turns off promotional email, keeps outage SMS and account security email, changes language to Spanish, withdraws ad personalization, and sees which transactional messages remain required. | A user raises a spend threshold, validates the form, is moved to the Approvals section, adds a second approver and escalation owner, reviews the complete policy, and saves without re-entering earlier values. |
| Bad UX | A user follows a settings deep link and cannot tell whether they are changing personal, workspace, or organization settings because the page shell has no section context. | A user changes a privacy setting thinking it affects only one project, but the value applies to the whole account. | Users must reopen a drawer every time they move between sibling pages in the same desktop section. | Using tabs as primary navigation to unrelated pages. | Selecting a drawer item changes the destination behind the sheet but leaves the drawer covering the new page. | A user provides a personal phone number to dismiss a profile-completion warning, then discovers it is visible to external collaborators. | A user declines analytics in a cookie banner but later cannot find the preference center needed to withdraw personalization consent after signing in. | A user clicks Save, sees three generic errors somewhere in the page, and must scan many controls to discover which section owns each problem. |
| Best fit | A product has multiple settings sections and users need a durable destination to find the right area. | Users need to inspect and change persistent app, account, workspace, privacy, notification, display, integration, device, or system behavior. | A product area has several related pages arranged in a visible hierarchy. | Users switch between sibling panels frequently. | A constrained app needs access to more destinations than fit in the visible navigation surface. | Users already have an account or profile and need guided help to complete, review, enrich, or update it. | Users need to revisit and change communication, consent, topic, personalization, privacy, channel, language, or data-sharing choices. | A product configuration has many related fields across named sections. |
| Avoid when | There is only one simple in-context setting that can be changed where the user already is. | The task is a one-time transaction, submission, setup wizard, or onboarding flow. | The product only has a few pages and does not need a hierarchy. | The destinations are unrelated pages. | Users need constant visibility of the local hierarchy while working in a section. | The user is creating their first profile identity rather than completing an existing profile. | The product only needs a small app setting unrelated to communications, consent, or personalization. | The form is a short related set of fields that fits a simple single-page form. |
| Required state | Settings landing or overview state with section groups | Settings overview with categories and current values | Default state with the local section hierarchy visible beside content. | Default active tab and visible panel. | Closed state with a clear opener such as a menu button. | Current profile preview with existing values | Overview with preference categories and current effective status | Initial draft state with named sections, required-field convention, grouped controls, and save unavailable or clearly pending validation. |
| Accessibility burden | Use landmarks, headings, and section labels so the settings page, section navigation, selected section, and content region are programmatically distinct. | Use headings, section labels, fieldsets, and persistent labels so settings groups and controls have clear programmatic names. | Use a labeled navigation landmark that distinguishes local side navigation from primary navigation. | Expose the active tab and associated panel. | Give the opener an accessible name such as Open navigation menu. | Use explicit field labels and required or optional text for every profile value. | Group categories with headings, fieldsets, legends, and persistent labels that name the affected channel, purpose, topic, source, and scope. | Use semantic headings, fieldsets, legends, and persistent labels so each section and field group has a programmatic name. |
| Common misuse | Treating Settings as a miscellaneous link dump for billing, help, onboarding, profile completion, invoices, support, and destructive account actions. | Using settings as a dumping ground for unrelated navigation, billing, help, profile setup, onboarding, or destructive account actions. | Duplicating global navigation links in the side navigation. | Using tabs as a primary site navigation system. | Hiding the app's most important destinations in a drawer on mobile. | Calling every optional field required profile completion. | Using one master preference switch for communication, privacy, cookies, topics, and required messages. | Calling a dense settings table a complex form without section status, labels, or validation ownership. |