Patterns - Settings¶
App settings let users indicate preferences for how an app should behave.
- App settings are located under the “Settings” label in your app’s navigation.
- Setting controls should capture user preferences.
- The settings shown should either affect most users or provide critical support to a minority of users.
Placement options¶
- Side navigation
- Toolbar menu
Settings components¶
- Labels
- Secondary text
- Switch or checkbox settings
- Status
Placement¶
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).
Usage¶
Settings should be well-organized, predictable, and contain a manageable number of options.
Provide an overview¶
- A user should be able to quickly see the most important or frequently used settings and their 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.
Select appropriate settings¶
Settings should:¶
- Save user preferences
- Get accessed infrequently.
- Be used by most users.
- Be used by a minority of users, but are essential to supporting their needs.
Choose polite defaults¶
The default value for a setting should:
- Represent the selection most users would choose.
- Be neutral and pose little risk.
- Use less battery or mobile data.
- Only interrupt when important.
Grouping settings¶
Show the most important or frequently used settings upfront.
Divider lines¶
Use divider lines to group together several related settings. Avoid using dividers between each individual setting.
Section titles (optional)¶
Grouped settings can include a section title. Section titles should be specific, avoiding ambiguous names like “Other” or “Miscellaneous.”
15+ settings¶
- Related settings are best grouped under a subscreen.
- Use consistent terms: the label of the setting that opens a group should match the subscreen title.
Labels and secondary text¶
Labels :¶
Make your labels brief and meaningful. Labels will wrap to multiple lines if necessary.
-
Labels should:
- Capitalize only proper nouns and the first word of a label.
- Start with the most important text
- Avoid negative terms like "Don't" or "Never" in favor of neutral terms like "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 title.
- Technical jargon, unless it's widely understood by your target audience.
Alignment :¶
All labels should align with the left edge of the screen title. This provides a simpler, unified appearance.
Secondary text (optional) :¶
Secondary text helps the user better understand the current state of a setting. If the label is sufficient on its own, don't add secondary text.
Switch or checkbox settings¶
Switch and checkbox settings that require precise descriptions may add a single-line description under the label.
- Descriptions should convey information about a setting’s state or status.
- Descriptions should indicate what happens when a setting is enabled.
- Settings that require longer explanations may add a description on a second screen.
- All Other settings : For non-switch settings, secondary text should only show the current status of a setting.
Writing guidelines¶
- Be direct and understandable.
- Indicate status with specific details placed within the appropriate context.
- Use familiar acronyms when there aren’t better alternatives. Convey how and why an unfamiliar setting exists.