Mobile Settings Design

Dive into the basics of designing an intuitive and helpful mobile Settings page
Mobile Settings Design Lesson

When default settings are set properly, most users rarely visit the Settings page. However, users should have no trouble finding the proper settings and applying changes when an emergency occurs.

The Settings page allows users to customize an app and manage push notifications, app appearance, privacy, time zones, login credentials, etc. Apps, too, can get a lot of valuable data about users through app permission requests and information stored on the device.

Naturally, designers shouldn't underestimate this task. You may only guess your users' preferences and their flow of adjusting settings, but assumptions are never enough. Designing an intuitive and helpful Settings page requires collaboration with user research findings or, at the very least, following design guidelines and heuristics.

Include important settings directly in the application Bad Practice
Include important settings directly in the application Best Practice

Generally, each mobile device has the default Settings application, where users can set general settings for each app. However, sending users to the native Settings app to make basic adjustments can be risky. They may get lost and frustrated, fail to fine-tune the proper settings, or decide that they don't have the time and energy to carry out the task. Eventually, this causes them to leave the app.

Instead of forcing users to do things they aren't familiar with, include important settings directly in the app. For example, many applications allow users to manage notifications without leaving the application.

Another option is to guide users to the relevant section of the default Settings app from within the app itself. For example, if users don’t give an app permission to access their location at the initial stage, make sure they can do it later and guide them to where they can do it in Settings.

Group settings Bad Practice
Group settings Best Practice

Long lists of settings can overwhelm users, making it hard to find what they're looking for.

The design principle of proximity recommends Placing related settings close together and keeping unrelated ones apart. When you group settings into clear categories, users can find options more easily.

Write category headings in plain language that users understand. Skip the technical terms that only developers know and use words that match how your users talk about your product.

Establish visual hierarchy Bad Practice
Establish visual hierarchy Best Practice

Designers establish hierarchy through scale, color, typography, and other techniques to highlight important elements and guide users' attention. Hierarchy makes pages easier to scan so users can find what they need faster.

Avoid presenting settings as one continuous list or relying too heavily on divider lines, which can create visual noise. Instead, break dense settings pages into clear sections with descriptive headings and use white space as a natural divider between groups. This creates visual breathing room without cluttering the interface.

Describe settings clearly Bad Practice
Describe settings clearly Best Practice

Most users rarely visit Settings and often fear technical language. Use plain, familiar terms that help users easily access important features. Settings categories can use simple nouns or noun-verb combinations for clarity. To find the right words, listen to how your users describe your product's features.

You can research user vocabulary through:

  • Online surveys
  • Forum discussions
  • Support tickets
  • App store reviews
  • Social media comments

For advanced options, provide brief explanations below labels. Keep descriptions concise and link to detailed support pages when needed.

Use toggle switches for immediate changes Bad Practice
Use toggle switches for immediate changes Best Practice

Toggle switches work well in Settings pages for immediate changes, while checkboxes are better for changes that need confirmation. Don't mix these on the same page - if some settings require a Submit button, use checkboxes for all options.

Make toggle states clear by:

  • Using both visual changes and labels
  • Showing clear on/off states
  • Avoiding ambiguous descriptions

Write clear toggle labels that describe the feature's action rather than its state. For example, use "Shake to Send Feedback" instead of "Shake to Send Feedback Off" - the toggle's visual state will indicate whether it's enabled or disabled.

Split settings into basic and advanced

Settings pages often contain many options, from common ones like notifications to complex security settings. To avoid overwhelming users, designers use progressive disclosure to organize these options:

Primary settings:

  • Visible to everyone
  • Cover common needs
  • Easy to understand

Advanced settings:

  • Hidden under "Advanced Settings"
  • Include complex options
  • Target experienced users

This approach respects both novice and advanced users, reduces cognitive load, saves screen space, and improves scannability.[1]

Use confirmations for important or destructive actions Bad Practice
Use confirmations for important or destructive actions Best Practice

Passwords, email addresses, and payment methods fall into the category of sensitive information and an app shouldn't change such data without notifying users and getting their permission. Ask for users' confirmation to update this data via an in-app message, clearly explaining the issue and asking them to confirm this action.

Furthermore, destructive actions like deleting or deactivating an account also require users' consent via in-app messages and/or email. It allows users who might have accidentally selected an action to undo it and prevent serious issues like data loss. Confirmations may appear annoying to some users but they inform them about what's happening in the app and take care of their data safety.

Keep in mind that users don't read instructions and alerts word by word, so make sure confirmation dialogs are concise, direct, and informative. Ideally, users should be able to understand the issue by taking one glance at the heading. Try to sound friendly but avoid inappropriate jokes and goofy or ambiguous headings like "Oops" or "Are you sure?"

Ideally, the default settings should provide the experience users expect when downloading an app and meet their primary goals. That's why user research is a vital step in the product development process. Design decisions based on your team's experiences or preferences have nothing to do with the needs of end-users.

You may guess and build assumptions about what settings will be right for your users, but it's difficult to be accurate. Eventually, products released without user research turn into junk and cost businesses a lot of time and resources.

Instead, you may find a group of users, conduct a few user interviews, and find out how people expect things to work. For example, if it's a messenger app, consider asking the target audience questions like:

  • Do you expect a messenger app to download all shared media with cellular data when Wi-Fi isn't available?
  • Do you expect other app users to see your profile photo and the time of your last visit?
  • Do you want to share your live location with all your contacts?

If the list of settings is so long that users need to scroll a few times to find what they need, grouping related settings may not be enough. Consider adding a search bar to simplify the process.

Since typing usually increases the interaction cost, include a search auto-suggest that offers users real-time search suggestions within an on-screen dropdown menu.

On the flip side, users often don’t know exactly what settings they need or what they’re called. So, before adding the search functionality, try to minimize and simplify the Settings page first.

Put destructive items at the bottom Bad Practice
Put destructive items at the bottom Best Practice

Hiding options for deleting an account or even logging out from users is a dark design pattern. However, due to their destructive nature, they shouldn't be too prominent. Keeping them at the top of the Settings page can result in users accidentally clicking them. It can cause anxiety and require users to do extra work like logging back in. If they forget their credentials, such accidental clicks can result in a lot of added stress and cognitive load.

Putting destructive actions at the bottom of the Settings page and setting them apart with the use of color or icons reduces the likelihood of accidental clicks. Moreover, it has become a common design pattern, and many users expect these actions to appear last on the Settings page screen.

Put essential items at the top

The most important and most-used settings should go first. Users find them immediately, allowing them to complete their tasks faster. However, the decision of which settings should be primary should not rely on your assumptions alone.

Card sorting can be a useful UX research method when you need to define the order and naming of items.[2] In such studies, participants are asked to order settings or organize them into logical groups that make sense to them. This allows you to see what patterns emerge and what settings seem most relevant to users. You can also ask people if settings' names appeal to them and encourage them to suggest their own variants.

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>