Settings

The Settings page is a very common pattern, and users know what to expect when they go there. They can turn off notifications, manage the profile privacy, or change page appearance.

It may be tempting to use the settings page for links that don't fit anywhere else, but that's only going to confuse and distract users. The purpose of settings is to get in, make changes, and get out. If it's a more important feature or isn't related to users' preferences about their profile, it can go somewhere else.

Prioritize the order of settings' controls according to how often users actually use them. User research can help you learn the frequency and decide on the right order of parameters on a page.

The controls that users adjust often should sit on top of the list and be notably visible. In turn, the controls that users change rarely should be secondary and should be placed at the bottom of the list. If secondary options are for advanced users only, you can hide them under the Advanced Settings button.

Make sure settings are easy to find and not buried within submenus. Users shouldn’t have to search for them when they want to change something. For example, the bottom bar is perfect for actions that users need at their fingertips. Another typical placement is in one of the top corners of an app.

Grouping related settings makes it easier to navigate the page. This is especially important if you have more than a handful of options on your Settings page.

You can group settings by type — account details, security, time and date, etc. — or use case. Use white space, dividers, and headings to make the page easy to scan. When well-executed, this practice makes navigating settings a breeze.

Use simple language when writing labels and helper text for your controls. Most of your users aren't developers — unless it's your target audience. Which means that they won't understand highly technical jargon.

This is especially important when writing helper text. Explain in simple words what a particular control does. Aspire to write in a way your audience can understand the first time they read it.^[1] This will help users gauge which controls they need to change without googling the issue.

Display each setting's current status clearly beside its name. Use toggle switches to show whether settings are active or not. For those with additional details, a brief label should summarize the current configuration. This setup lets users quickly grasp and review their choices without having to navigate to different pages just to confirm settings.

Consider adding search functionality if your product has more than a couple of setting controls. Complicated products like web browsers can really benefit from it. 

Users can waste valuable time scrolling to find the setting they’re looking for. This can be even more challenging if the page has sub-menus. Fortunately, you help users find what they’re looking for quickly and easily by adding a search function.

Some settings are self-explanatory, while others need a bit more explanation for users to understand what they do. Add additional text to settings that aren’t immediately understandable. Keep that helper text short and straightforward. 

Keep in mind the proximity principle: related elements should be placed near one another. That principle is vital for helper text. Users shouldn’t be wondering which setting the helper text refers to.

Place destructive actions like logging out or removing the account at the bottom. The rationale is simple — if you want to keep your users around for longer, don't make the exit the first thing they see.

Another concern is that users can accidentally click on destructive action buttons and make a mistake they didn't intend to. Placing such buttons at the end of the list makes it less likely. Other means of preventing accidental clicks are setting destructive actions apart with color or separating them from other actions with extra white space.^[2]

Make important alerts highly visible. Some elements like changes in privacy policy deserve to jump the queue. Draw attention to such changes by adding an alert notification badge and moving it to the top. Any time you need to ensure that users see important information, place it at the top rather than further down the page.

You can also use this type of alert to boost revenue by announcing things like plan upgrades. Other examples include an expiring trial or low remaining cloud storage space.