Skip to main content
Frontend Glossary

Layouts · Page types

Settings Page

Also called: Preferences, Account settings, Settings, Options page

Groups lots of independent options by category, with category switching on the left or at the top and a short description for each option. Users come back anytime to change any one of them.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Build a settings page. On the left, a 200px category nav: "Profile, Account & security, Notifications, Appearance". The right side shows the current category. Each setting is one row, with the name and a line of gray description on the left and a switch or dropdown on the right. Save right after each change and show a "Saved" toast. Clicking "Change password" opens a dialog to handle it. At the very bottom of the page, add a separate "Danger zone" section, and deleting the account requires a second confirmation.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Settings Page is what you need.

Use Settings Page when

  • There are many independent options that can be grouped by category
  • Users come back now and then to change just one or two of them
  • Most options are simple controls like switches, radio buttons and dropdowns

Pick something else when

  • A set of fields that needs to be filled in and submitted together

    Use insteadSingle Page Form

  • The task has a clear order and users need to be guided through to the end

    Use insteadWizard

  • There are only two or three options, which fit in a dialog on the current page

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    All settings laid out on one page with no categories, so finding one takes forever

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    Toggling a switch gives no feedback, so users aren't sure if it was saved

  3. 03

    Some settings take effect right away while others need the "Save" button at the bottom, so the rules aren't consistent

  4. 04

    Dangerous actions like deleting the account are mixed in with normal options and have no second confirmation

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

Settings category navigation on the left (or at the top), and a grouped list of settings on the right. Each setting is one row, with the name and description on the left and the control on the right. There can be a separate danger zone at the bottom.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A settings page is where all the account and product options live, like "Profile, Account & security, Notifications, Appearance". When there are many options, category navigation goes on the left (or tabs across the top), and the right side shows the settings in the current category. Each setting takes one row: the name and a line of gray description on the left, and a switch, a dropdown or a "Change" button on the right.

The biggest difference from a Single Page Form is that the settings are independent of each other. Users usually come back to change just one or two, not fill in everything from top to bottom. So toggle-type options usually take effect right away, with a toast saying "Saved". Only sensitive actions like changing your password or phone number get their own confirmation dialog.

It's also different from a Wizard: a wizard is walked through once, in order, the first time, while a settings page is something you come back to anytime, in any order. Dangerous actions like deleting your account or your data should go in a separate section at the very bottom of the page and require a second confirmation.

Developer info
Term ID
layout-settings
DOM selectors
No DOM cues. This concept isn't detected directly on a page.
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026