Guidelines for app settings
Windows provides a Settings pane by default for every Windows Store app. The top portion of the Settings pane lists "entry points" for your app settings. Each entry point opens a Settings flyout that displays the settings options themselves. This topic describes best practices for creating and displaying app settings.
Users swipe from the side of the screen to display the charms and then press the Settings charm to show a Settings pane.
Note Windows adds two default entry points to every Settings pane in a Windows Store app: Permissions and Rate and review. Note that if your app isn't installed through the Windows Store (if, for example, it's a side-loaded enterprise app), your app's Settings pane won't include a Rate and review entry point. The bottom portion of the Settings pane includes system settings like volume, brightness, and power.
All Windows Store apps include a Settings pane with Permissions and Rate and Review sections by default. Following are examples of additional settings that belong in the Settings pane:
- Configuration options that affect the behavior of the app and don't require frequent readjustment, 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.
Commands that are part of the typical app workflow (for example, changing the brush size in an art app) shouldn't be in the Settings pane. Instead, put commonly used commands on the top or bottom app bar. To learn more about command placement, see Command patterns. Guidelines for app bars provides recommendations for app bar use.
- Create entry points for all of your app settings in the Settings pane.
- Keep your settings simple. Define smart defaults and keep the number of settings to a minimum.
- If necessary, link from elements of your app's UI to the Settings pane or deep-link to a specific Settings flyout. For example, you can link to your help Settings flyout from a "Help" button in the bottom app bar as well as from a "Help" entry point in the Settings pane.
- When a user changes a setting, the app should reflect the change immediately. Apply settings changes instantly or as soon as a user is done interacting with the flyout.
- Use the Settings flyout controls available for WinJS (SettingsFlyout) and XAML (SettingsFlyout). These controls implement the UI design guidelines (described in the Design a Settings UI section) by default.
- Don't include commands that are part of common app workflow, like changing the brush color in an art app, in app settings. These commands belong on an app bar or on the canvas. For more info, see Command patterns for a conceptual overview and Guidelines for app bars.
- Don't use an entry point in the Settings pane to perform an action directly. Entry points should open Settings flyouts.
- Don't use the Settings pane for navigation. When the Settings pane closes, a user should be in the same place in the app that they were when they clicked the Settings charm. The top app bar is a more appropriate place for navigation.
- Don't use the Settings flyout classes as all-purpose controls. They're intended only for Settings flyouts launched from entry points in the Settings pane.
Entry points are the labels that appear at the top of the Settings pane and 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 to your Settings pane.
- Display the same entry points regardless of the app context. If some settings are not relevant in a certain context, disable them in the Settings flyout.
- Use descriptive, one-word labels for your entry points when 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."
- 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 only contain information in an "About" entry point.
- Don’t duplicate the functionality in the "Permissions" pane. Windows provides this pane by default and you can't modify it.
Note The Settings flyout controls available in WinJS and XAML follow these guidelines by default, except for those pertaining to header and border color. Use these controls (SettingsFlyout (HTML) or SettingsFlyout (XAML)) to ensure that your Settings flyouts follow UI guidelines and deliver a consistent user experience.
- Always launch a Settings flyout from entry points in your Settings pane.
- Use a light-dismiss surface that appears on top of the main app content and disappears when the user clicks outside the flyout or resizes the app. This lets people change a setting quickly and get back to the app.
- Make sure that your Settings flyout appears on the same side of the screen as the charms and Settings pane. Use the SettingsEdgeLocation property to determine which side of the screen the Settings charm appears on.
- Slide the flyout in from the same side of the screen as your Settings pane, rather than from the top or bottom of the screen.
- A flyout must be full screen height, regardless of orientation, and should be narrow (346 pixels) or wide (646 pixels). Choose the width 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 should be the same as the background color of your tile.
- The border color should be the same color as the header, but 20% darker.
- Display Settings content on a white background.
- Present content from top to bottom in a single column, scrollable if necessary. Limit scrolling to a maximum of twice the screen height.
Use the following controls for app settings:
- Toggle switches: To let users set values on or off.
- Radio buttons: To let users choose one item from a set of up to 5 mutually exclusive, related options.
- Text input box: To let users enter text. Use the type of text input box that corresponds to the type of text you're getting from the user, such as an email or password.
- Hyperlinks: To take the user to another page within the app or to an external website. When a user clicks a hyperlink, the Settings flyout will be dismissed.
- Buttons: To let users initiate an immediate action without dismissing the current Settings flyout.
- 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 content using the enterPage or EntranceThemeTransition animations with a 100px left offset.
- Use section headers, paragraphs, and labels to aid organize and clarify content, if necessary.
- 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 an indeterminate progress control to indicate to users that info is loading. For more info, see Guidelines for progress controls.
- Don't use buttons for navigation or to commit changes. Use hyperlinks to navigate to other pages, and instead of using a button to commit changes, automatically save changes to app settings when a user dismisses the Settings flyout.
- For designers
- Command patterns
- Guidelines for app help
- Guidelines for app bars
- Guidelines for the select control
- For developers (HTML)
- Laying out your UI
- Quickstart: Adding app settings
- Quickstart: Add app help
- Controls list
- For developers (XAML)
- Laying out your UI
- Quickstart: Add app settings
- Quickstart: Add app help
- Controls list
- Application settings sample