Use a settings page when the design problem is the durable page shell, section map, entry route, and responsive layout for settings; use settings management for the value-change contract, side navigation for broad app navigation, and tabs for peer views within one local setting area.
Use a settings page when the design problem is the durable page shell, section map, entry route, and responsive layout for settings; use settings management for the value-change contract, side navigation for broad app navigation, and tabs for peer views within one local setting area.
Practice the judgment: Imagine this situation: Side navigation and settings section navigation use identical styling, making users think they left the app area when they only changed settings sections. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Settings page | Settings management | Side navigation | Tabs | Navigation drawer | Profile setup | Preference center | Complete complex form |
|---|---|---|---|---|---|---|---|---|
| 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. | Help the person reach a clear task outcome. | Avoid tabs when users must compare panels, read panels sequentially, or complete required workflow steps. | After a drawer item is chosen, close the drawer, update the active destination, and return focus or reading position predictably so users see the result of navigation. | 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. | Make the effective result clear before and after save: what changes now, what stays required, which rows are policy-managed, which external system owns the value, and where users can withdraw consent or unsubscribe. | 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 | Settings search finds a row but hides the section path, making the result hard to revisit later. | Users change the wrong scope because local, account, workspace, and organization settings look identical. | The side navigation highlights Settings while the page heading is Audit log. | Tabs wrap unpredictably or look like unrelated buttons. | A drawer overlays desktop content even though users need to switch between sibling pages repeatedly. | 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 long settings page saves invalid combinations because validation checks each field in isolation and ignores dependencies between threshold, approvers, and escalation owner. |
| 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. | Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel. | 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 jumps from Review back to Rules, changes a dependency, and sees Review marked stale until the affected sections pass validation again. |
| Bad UX | Settings search finds a row but hides the section path, making the result hard to revisit later. | 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 opts out of marketing email but continues receiving promotional SMS because the channel matrix was hidden. | 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 destinations are top-level product areas that belong in global navigation. | 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. | Splitting tightly related settings across pages so dependencies are invisible during editing. |