Patterns chevron_right Settings

Settings

Application settings let users indicate their preferences for how an app or service should behave.

Placement Expand and collapse content An arrow that points down when collapsed and points up when expanded.

All of an app’s settings should be reached via the “Settings” label. Do not use synonyms such as “Options” or “Preferences.”

Side navigation

If side navigation such as a navigation drawer exists, include “Settings” below all other items (except Help & Feedback).

Apps without navigation

Place Settings in the toolbar menu below all other items (except Help & Feedback).

Settings in the navigation drawer

Settings in the toolbar menu

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Settings should be well-organized, predictable, and contain a manageable number of options.

Provide an overview

A user should be able to quickly understand all available settings and their current values.

If there are many settings, prioritize the ones most likely to interest users. Less important settings can be grouped and moved to their own screen.

Important settings appear at the top of the list

Select appropriate settings        

Controls that belong in settings:

  • Capture a user preference
  • Get accessed infrequently
  • Are used by the majority of users
  • Are used by a minority of users, but are essential to supporting their needs

Settings should not:

  • Be frequently accessed actions. (Move these items to a toolbar.)
  • Contain information about the app, such as a version number or licensing information. (These should move to a Help screen.)
  • Manage user accounts. (Present these actions within the main flow of your app, such as within a side nav.)

Choose polite defaults

The initial value for each setting should:

  • Represent the default most users would choose
  • Be neutral and pose little risk
  • Use less battery or mobile data
  • Only interrupt when important

Grouping settings Expand and collapse content An arrow that points down when collapsed and points up when expanded.

For large lists of settings, cluster settings into multiple shorter lists. Arrange them according to the total number of settings in the Settings panel in your app.

7 or fewer
Don’t group at all.

9 to 10
Group related settings under one or two section dividers. For settings that can't be grouped:

  • If important, list them at the top without a section divider.
  • Otherwise, list them at the bottom with a section divider called "Other," in order of importance.

11 to 15
Group related settings under two to four section dividers. Combine sets of two related settings into a single setting.

For example, two related settings with checkboxes could combine into a single multiple-choice setting.

16 or more
Group four or more related settings under a subscreen. Use consistent terminology, making sure that the subscreen’s title matches the label of the setting which opens it.

Grouped settings for interruptions

Related settings grouped under a subscreen

Labels and secondary text Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Labels

Make your labels brief and meaningful.

Labels should:

  • Capitalize only the first word of each label, and proper nouns.
  • Put the most important text of your label first.
  • Rephrase negative words like "Don't" or "Never" into neutral terms such as "Block."
  • Use impersonal labels like "Notifications" instead of "Notify me." Exception: If referring to the user is necessary for understanding the setting, use the second person ("you") rather than the first person ("I").

Labels should avoid:

  • Generic terms, such as: Set, Change, Edit, Modify, Manage, Use, Select, or Choose
  • Repeating words from the section divider or subscreen title
  • Technical jargon, unless it's widely understood by your target audience

Secondary text

Secondary text is optional. If the label is sufficient on its own, don't add a secondary text description.

Notifications
Show notifications

Don't.

Avoid repeating words from the label in secondary text.

Switch or checkbox settings

Settings that require precise descriptions may add a single-line description underneath the settings label. Descriptions should:

  • Convey what happens when a setting is enabled
  • Use words that don't already appear in the label

Enable NFC
Allow data exchange when the phone touches another device

Do.

Start the description with a verb.

Settings that require longer explanations may add a description on a second screen.

Underneath the label, show status text of the switch as "On" or "Off.”

Add the switch itself and a longer description to a second screen.

All other settings

For non-switch settings, secondary text should show the current status of a setting only.

Sleep
After 10 minutes of inactivity

Do.

Screen timeout
Adjust the delay before the screen automatically turns off

Don't.

Writing guidelines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Be direct and understandable.

Vibrate on touch

Do.

Use tactile feedback

Don't.

Indicate status with specific details placed within the appropriate context.

Sleep
After 10 minutes of inactivity

Do.

Screen timeout
Adjust the delay before the screen automatically turns off

Don't.

Use keywords that describe settings accurately.

Screen lock
Pattern

Do.

If the user hasn’t set up a screen lock, the secondary text should say “None.”

Change screen lock
Change or disable pattern, PIN, or password security

Don't.

Use familiar acronyms when there aren’t better alternatives. Convey how and why an unfamiliar setting exists.

NFC
Allow data exchange when the phone touches another device

Do.

NFC
Use Near Field Communication to read and exchange tags

Don't.