Designpixil

Designpixil · saas-design

SaaS Settings Page Design That Doesn't Confuse Users

How to design SaaS settings pages that are actually usable — information architecture, grouping logic, form patterns, and the mistakes that turn settings into a support liability.

Anant JainCreative Director, Designpixil·Last updated: June 2026

Settings pages are the most neglected surface in most SaaS products. They receive the least design attention, accumulate technical debt the fastest, and generate more support tickets than almost any other part of the product.

The reasons are understandable: settings pages are built incrementally, each new feature adding a few more settings to whatever section seems closest, without anyone auditing the growing complexity. The result — a settings section that users actively dread navigating — creates real costs: support tickets, failed integrations, billing errors, and users who enable the wrong permissions because they couldn't find the right setting.

This guide covers the design decisions that make settings pages actually usable.

The Core Problem: Settings Organised for Developers, Not Users

The settings page is usually the part of the product where the database structure is most visible. Categories reflect how settings are stored — user preferences in one table, workspace settings in another, billing in a third — not how users think about configuration.

The user mental model for settings is task-oriented: "I want to set up my team's notification preferences." "I want to connect our CRM." "I want to change my password." "I want to update our billing details."

The developer mental model is entity-oriented: "Account settings." "User settings." "Integration settings." "Billing settings."

These overlap, but not perfectly. A notification preference might be split between user-level settings and workspace-level settings — one in each section — because of how notifications are architected in the backend. The user who wants to "manage notifications" has to look in two places.

The fix is to audit every setting from the user's perspective. For each setting, ask: what task is the user trying to accomplish when they'd change this? What would they call this task? Where would they look for it first?

The Right Information Architecture for Settings

The most durable settings structure for B2B SaaS products:

Personal settings

Settings that apply to the individual user, regardless of their workspace or role:

  • Profile (name, photo, display preferences)
  • Notifications (what events trigger notifications and where they go)
  • Security (password, two-factor authentication, active sessions)
  • Preferences (language, timezone, theme, keyboard shortcuts)

Workspace / Account settings (admin-only)

Settings that apply to the whole workspace, managed by administrators:

  • General (workspace name, URL, logo)
  • Team members (inviting, removing, changing roles)
  • Permissions (what roles can do what)
  • Single sign-on and authentication policies

Integrations

All third-party connections in one place:

  • Connected integrations with status indicators (connected/disconnected/error)
  • Available integrations to add
  • Webhook and API configuration

Billing

Payment and subscription management:

  • Current plan and usage
  • Payment method
  • Billing history and invoices
  • Upgrade/downgrade options

This structure works because it maps to four distinct mental models: myself, my team, my tools, my payment. Users who need to change a setting can predict which section to check without reading every section header.

Navigation Within Settings

Settings navigation patterns in order of usability:

Left sidebar navigation (best for 8+ sections): A persistent sidebar shows all settings categories at once, allowing users to navigate without returning to an index. Works well for products with deep settings hierarchies.

Tab navigation (good for 4–8 sections): Tabs across the top or left for the main categories, with sub-navigation within each. Simpler than a sidebar for products with fewer categories.

Index page (acceptable for simple products): A grid of settings cards that link to each section. Works when there are fewer than 8 sections and users are likely to already know which section they need.

Avoid: accordion navigation inside settings panels. It creates a visual promise that there's a simple amount of settings, which breaks down as the product grows. Settings always have more items than the initial design anticipated.

Form Design Inside Settings

Most settings pages are forms. The form design principles that matter most in settings context:

Label placement

Labels above inputs (not to the left) work better for settings forms because settings often have longer labels than standard forms — "Allow team members to invite other users to the workspace" doesn't fit comfortably to the left of an input.

Toggle vs. checkbox vs. select

  • Toggle: Binary on/off settings where the state is immediately obvious (notifications enabled/disabled)
  • Checkbox: Multi-select options where multiple can be true simultaneously (which notification types to receive)
  • Select/dropdown: Mutually exclusive options with three or more choices (notification frequency: immediately, hourly digest, daily digest)

The mistake: using checkboxes for binary settings because they're simpler to implement. Checkboxes require reading the label to know the current state. Toggles communicate state visually.

Confirmation for high-risk changes

Any setting change that:

  • Affects other users' access
  • Cannot be easily reversed
  • Has billing implications
  • Sends an external communication

...should have a confirmation step. The confirmation should be specific about the consequence: "This will remove access for all 12 team members immediately. This cannot be undone." Not "Are you sure?"

Empty states in settings

Settings sections that have no items yet (no integrations connected, no team members added, no API keys created) should have designed empty states with a clear call to action — "Connect your first integration" with a primary button — not a blank section with no guidance.

Permission Visibility: Who Sees What

In multi-role B2B SaaS, different users have access to different settings. The design question: should non-admin users see settings they don't have access to, or should those settings be hidden?

The better pattern: show but disable with an explanation. A non-admin user who wants to change workspace settings should see those settings, but with a lock icon and "You need admin access to change this. Contact your admin." This has two advantages: it tells users the setting exists (preventing "can I do X?" support tickets), and it shows them who to contact to change it (reducing escalation friction).

Completely hiding settings that users don't have access to creates a different problem: users who need to escalate a request can't tell their admin what to change because they've never seen the setting.

The Dangerous Settings Problem

Every SaaS product has dangerous settings — actions that are difficult or impossible to reverse:

  • Deleting the account
  • Exporting all data
  • Revoking API keys (which may break integrations)
  • Changing the workspace URL (which breaks existing links)
  • Removing all members from a workspace

These settings should:

  1. Be visually separated from regular settings — placed at the bottom of their section, with a visible divider and different visual treatment (subtle red background, warning icon, different button style)
  2. Require a confirmation step that describes the specific consequence
  3. Use typed confirmation for the most destructive actions (type the workspace name to confirm deletion)
  4. Show the scope of the action ("This will delete 847 records and cannot be recovered")

The most common failure: putting a "Delete Account" button at the same visual weight as other settings buttons. Users who accidentally click it, even if a confirmation dialog appears, are more likely to dismiss it quickly if they're already in a context where they were taking deliberate settings actions.

Settings as a Search Problem

As products grow, settings pages become difficult to navigate by category alone. Users who know what they want but don't know where it is benefit from settings search.

A search field in the settings navigation that searches across all settings labels (and optionally their descriptions) solves this problem for power users and reduces support tickets for "where do I find X?"

The implementation requirement: every setting needs a searchable label and ideally synonyms — "two-factor authentication" should also return results for "2FA", "two factor", and "authentication app".


If your settings page is generating support tickets, failing integrations, or getting described as confusing by your users, it's worth a focused design review. Book a free 30-minute call and we'll look at your specific settings structure.

Frequently Asked Questions

What is the most common mistake in SaaS settings page design?+

Organising settings by the database structure rather than by how users think about configuration. Most SaaS products add settings to the nearest-seeming category incrementally, producing sections with 30 items in no coherent order. The fix is to audit settings from the user's task perspective: what are they trying to accomplish, and where would they look for it?

Should settings be in a modal or a separate page?+

Separate page for global account or workspace settings. Modals work for contextual settings that apply to a specific item (an individual integration, a specific workflow), but are wrong for global settings. Separate pages allow direct linking, browser history navigation, and proper screen space for complex form interactions.

How should settings be organised?+

By user role and scope: Personal (profile, notifications, security, preferences), Workspace/Account (team members, permissions — admin-only), Integrations, and Billing. This structure maps to four distinct user mental models: myself, my team, my tools, my payment.

How should settings changes be saved — auto-save or explicit save?+

Auto-save works for low-risk, immediately reversible settings (notification preferences, display options). Explicit save buttons are better for high-risk settings (password changes, billing, team permissions). Never auto-save changes that require infrastructure updates or have unintended consequences.

Should non-admin users see settings they can't access?+

Yes — show but disable with an explanation. A non-admin who sees a locked setting knows it exists and knows who to contact to change it. Completely hiding restricted settings creates support tickets from users who can't tell their admin what to request.

Related reading: SaaS Dashboard Design Best Practices · B2B SaaS UI Design Principles Every Founder Should Know · Product Design for SaaS Startups

Our work

Task management
AI analytics dashboard
Transdyne / Healthcare transcription saas
View more work

Work with us

Senior product design for your SaaS or AI startup.

30-minute call. We look at your product and tell you exactly what needs fixing.

Related

← All articles