Guidelines for app settings (Windows Store apps) (Windows)

9 out of 23 rated this helpful - Rate this topic

Summary

Learn how best to use the Settings charm and Flyouts in your app.

In this article

User experience guidelines
Related topics

Important APIs

This topic describes best practices for using the Settings charm to display app settings. People swipe from the side of the screen to display the charms and then press the Settings charm to display the Settings pane. The Settings pane includes both app and system settings.

App settings

The top part of the Settings pane lists entry points for your app settings. Each entry point opens a settings Flyout that displays the settings themselves. Entry points let you create categories of settings, grouping similar or related controls together.

Rate and reviewWindows provides two entry points, Permissions and Rate and review. Only apps that are installed through the Windows Store have the Rate and review entry point. Side-loaded enterprise apps don't have this entry point.

Standard PC settings

The bottom part of the Settings pane includes PC settings provided by the system, like volume, brightness, and power.

User experience guidelines

General principles

Use the Settings charm as the primary entry point to all of your app's settings, and put all of your settings in the Settings pane.
When needed, you can link from your app UI to the Settings pane or deep-link to a specific settings Flyout.
Keep your settings simple and few. Define smart defaults and decrease the number of settings as much as possible.
When a user changes a setting, the app should reflect the change immediately. Apply settings changes instantly or as soon as people are done interacting with the Flyout, and use a light dismiss UI surface, so users can dismiss it by touching outside of the surface or by moving focus from the app.

Choose the right settings

Configuration options that affect the behavior of the app as a whole and that are adjusted only occasionally, like choosing between Celsius or Fahrenheit as default units for temperature in a weather app, or changing account settings for a mail app.
Options that depend on the user’s preferences, like music, sound effects, or color themes.
App info that's not needed very often, such as privacy statements, help, app version, or copyright info.
A link to your Privacy Policy if you have Internet Connection declared in your capabilities. Forgetting to do this is the most common certification blocker!
Don't include commands that are part of a typical app workflow, like changing the brush color in an art app. These commands belong on an app bar or on the canvas. For more info, see Guidelines for app bars.

Add entry points

Entry points are text that appear at the top of the Settings pane and generally open settings Flyouts, where you can display one or more settings options. Once you have a list of settings you want to include, consider these guidelines for the entry points:

Group similar or related options together under one entry point. Avoid adding more than four entry points.
Display the same entry points regardless of the app context. If some settings are not relevant in a certain context, disable them in the app settings Flyout.
Use descriptive, one-word labels for your entry points whenever possible. For example, for account-related settings, call the entry "Accounts" rather than "Account settings." If you want only one entry point for your settings and the settings don't lend themselves to a descriptive label, use "Options" or "Defaults."
If going directly to the web instead of a Flyout, let the user know with a visual clue, for example, "Help (online)" or "Web forums" styled as a hyperlink. Consider grouping multiple links to the web into a Flyout with a single entry point. For example, an "About" entry point could open a Flyout with links to your terms of use, privacy statement, and app support.
Combine less-used settings into a single entry point so that more common settings can each have their own entry point. Put content or links that are primarily informational-only in an "About" entry point.
Don’t duplicate the functionality in the "Permissions" pane. . This pane is system-controlled and apps can't change it.

Define your settings UI

Tip for developers: For JavaScript apps, use the SettingsFlyout control, which implements the UI guidelines in this section and supports predefined CSS classes to achieve the recommended styling. For other app models, you need to create a custom settings UI. Use the following guidelines to ensure that your UI is consistent with the guidelines. For more info, see Application settings sample.

Create a consistent experience by always launching a settings Flyout (or Flyout-like UI surface) from your entry points.
Use a light-dismiss surface that overlays the app content and dismisses when the user touches the app, when the app loses activation, like when charms are opened, and when the user snaps the app. This lets people change a setting quickly and get back to the app.
Place your Flyout on the same side of the screen as charms so that it forms a complete UI flow. Use the SettingsEdgeLocation property to determine which side of the screen the setting charm appears on.
Slide the Flyout in from the same side of the screen, rather than from the top or bottom of the screen.
Flyouts must be full screen height, regardless of orientation, and should be narrow (346 pixels) or wide (646 pixels). Choose the size that's appropriate for the content and don't create custom sizes.
The Flyout header should include a back button, the name of the entry point that opened the Flyout, and the app’s icon.
The header background color and border color should reflect the app color (same as the background color of your tile.
The border color should be the same color, but 20% darker.
Display settings contents on a white background.

Add settings to settings Flyouts

Present content from top to bottom in a single column, scrollable if necessary, but limit scrolling to a maximum of twice the screen height.
Consider using these controls for settings:
- Toggle switch: To let users set values on or off.
- Radio button group: To let users choose one item from a set of up to 5 mutually exclusive, related options.
- Select control: To let users choose one item from a set of 6 or more text-only items.
- Text input box: To let users enter text. Use the type of text input box that corresponds to the type of text you're capturing from the user, such as email or password.
- Hyperlink: When the action takes the user to another UI surface and dismisses the current settings UI.
- Button: To let users initiate an immediate action without dismissing the current settings UI.
Use controls consistently for settings of the same type. Add a descriptive message if one of the controls is disabled. Place this message above the disabled control.
Animate content and controls as a single block after the settings Flyout and header have animated. Animate the contents by using the enterPage or EntranceThemeTransition animation with a 100px left offset.
Use section headers, paragraphs, and labels when they aid with hierarchy and clarity. These elements are optional in settings Flyouts.
If you need to repeat settings, use an additional level of UI or an expand/collapse model, but avoid hierarchies deeper than two levels. For example, a weather app that provides per-city settings could list the cities and let the user tap on the city to either open a new Flyout or expand to show the settings options.
If loading controls or web content takes time, use the indeterminate progress control. For more info, see Guidelines and checklist for progress controls.
Don't use buttons for navigation or to commit changes.

Inappropriate use of settings

Don't add commands that are part of the common app workflow. These commands should be placed in the app bar or on the app canvas.
Don't use an entry point to perform an action directly. Entry points should open a Flyout or the browser.
Don't use the Settings pane for navigation. When the Settings pane closes, people should be in the same place in the app that they were when they entered settings. The app bar is a more appropriate place for navigation. For more info, see Defining layout, navigation, and commands.
Don't use the SettingsFlyout class as a general-purpose control. It's intended only for settings Flyouts launched from entry points.

Guidelines for app settings (Windows Store apps)