Settings - Patterns - Material Design (original) (raw)

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 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.

Important settings appear at the top of the list

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

Settings should not:

• Be frequently accessed (Move these to a toolbar)
• Contain information about the app, such as a version or licensing information (Move these to a Help screen)
• Manage user accounts (Present these in the main flow of your app, such as a side nav)

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 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Grouped settings for Languages and input

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 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.

Labels align with the screen title

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.

Don’t.

Avoid repeating words from the label in the 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
• Indicate what happens when a setting is enabled

Do.

Start the description with a verb.

Do.

Explain the current status of the setting.

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

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

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

All other settings

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

Sleep
After 10 minutes of inactivity

Do.

The secondary text conveys the current state of the setting.

Screen timeout
Adjust the delay before the screen automatically turns off

Don’t.

Avoid describing the setting. Show the setting’s status instead.

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

Be direct and understandable.

Use tactile feedback

Don’t.

Indicate status with specific details placed within the appropriate context.

Hotspot & tethering Hotspot on

Do.

Hotspot & tethering Provide internet to other devices through your mobile data connection

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.