Guidelines for flyouts
A flyout is a lightweight popup that is used to temporarily show UI that is related to what the user is currently doing. It can be used to show a menu, reveal a hidden control, show more details about an item, or ask the user to confirm an action. You should only show a flyout in response to a user tap or click. A flyout is always dismissed when the user taps outside of it.
- Use flyouts to show UI that you don't want on the screen all the time. A user can dismiss a flyouts at any time by simply tapping or clicking outside of it, or by pressing ESC. When the user makes a selection in the flyout, the flyout should be dismissed.
- Position a flyout next to its point of invocation. If the user taps a button in the app bar to bring up a flyout, then the flyout should appear above or below the app bar button. If showing the flyout above or below the control would obscure important content, then it can be placed to the left or right of it. When you implement a flyout you position it by specifying the object to which you want it anchored and the side of the object on which it should appear. flyouts should be center-aligned to their anchor unless the anchor is on the very edge of the screen (such as the user-tile flyout in the Start screen).
- Use flyouts for the following:
Collecting information: If the user selects an action that requires more input, such as choosing an option or typing information, then that UI can be placed in a flyout to keep the user in their original context. For example, let's say that in a map app, users can label the locations they tag. Users tap the location to tag it, and the app presents a flyout so that users can enter their label.
Example: In the browser, to pin an item to the Start screen, the user taps the Pin icon on the app bar. The user then enters the name of the new tile in a flyout
Warnings and confirmations: Warn the user before they take a potentially destructive action.
Example: In a photo app, the user presses a delete icon in the toolbar. Next to the toolbar button, a flyout appears that warns the user that the photos will be permanently deleted, and provides the delete command. The user can easily press the revealed delete command that appears, or dismiss the flyout if they pressed the delete icon by accident.
Note The only warnings or errors that should go in a flyout are those that can be shown immediately and are a direct result of user action. For more information, see Choosing the right UI surfaces: Errors.
Drop-down menus: If a button in an app bar has more than one option, then display a drop-down menu in the flyout to let the user pick the option.
Example: In an email app, the user presses Respond on the app bar, and a menu is displayed to let the user choose among ways to respond: Reply, Reply All, or Forward. If the user presses the Cancel button on the app bar, then a menu is displayed to let the user choose between the ways to Cancel: Discard or Save Draft.
Note Use context menus, not flyouts, for contextual actions on text selections.
Displaying more info: Show more details about an item on the screen that the user is interested in.
Example: In the browser, while browsing InPrivate, the user selects the InPrivate icon. A flyout then appears to give the user more information about InPrivate mode. Most of the time the browser UI is kept clean, but if requested can provide more detail for users that are interested.
- Identify the order in which users use the TAB key to navigate from one item to another in your flyout. Be sure to set your tab indices to positive values (0 is considered the same as not set) and make sure the range of tab indices within the flyout does not overlap with the ranges of tab indices for elements outside the flyout, or users will jump between the flyout and the main app page.
- Don't dismiss a flyout programmatically unless the user has pressed a command button or selected a menu item in the flyout. A flyout should not be dismissed automatically if the user has simply toggled a setting, for instance.
- Don't use a flyout if the message, error, warning, or other piece of UI is not invoked directly by the user at that moment. Example: Notifications that updates are available, a trial has expired, or the Internet is not available, should not be displayed in flyouts. For guidance on how to surface this UI, see Choosing the right UI surfaces: Errors.
- Don't use a flyout if an experience is one that requires prolonged interaction, multiple screens, or lots of UI. Instead, integrate the UI into the canvas of the app. For example:
- The user is working through a wizard with a lot of text entry.
- The user is changing a long list of settings.
- Don't use a flyout for the primary list of commands for your app. Use the app bar for that. For more info, see Guidelines for app bars.
- Don't use a flyout if a menu is required solely for commands about a text selection. Use a context menu instead. See Guidelines for context menus.
- Don't include controls on a flyout that are not necessary for the situation. For example, if there are no actions for the user to take, then don't include any buttons. There is no need for Close or OK buttons; relying on light-dismiss (in which the flyout disappears when the user touches anywhere on the screen outside of the flyout) will do just fine. Similarly, if a title isn't absolutely necessary, then don't include a title.
- Don't add extra padding beyond what is provided by the flyout itself. The flyout should be as small as possible given its content.
- Don't position flyouts in non-contextual places, such as the center of the screen, for the following reasons:
- When UI is shown in a position disconnected from the action that invoked it, the user needs to go searching for this UI and is slowed down. The overall experience is disrupted, creating less pleasant and fluid UI.
- The user may not notice that the flyout has appeared and may accidentally dismiss it by continuing to tap, making your app feel unresponsive.
- Users expect that centered (or other arbitrarily positioned windows) contain a Close or Cancel button, and would use them even if a light-dismiss option was present, undermining your goal of lightweight UI.
Parts of a flyout
A flyout has three components: the title, the main content, and command buttons.
Here are recommendations for when to use each component for each common use of the flyout.
- Collecting information:
Title None Main content Include just the controls you need. Keep any instructions or "Learn More" links to a minimum. If the user is changing a setting or toggling an on/off switch, for example, then the change should commit as soon as it is made. Interacting with custom content should not dismiss the flyout; unless there is a command button, the user should be in control of dismissing the flyout manually. Controls If a button is just meant to commit the user's changes, then it isn't required and those changes should be committed automatically. If the button begins some action (such as Login, or Save Document), or the user has entered text that they want to commit, then a button is appropriate and the flyout should be dismissed when the user presses the button. But the user can cancel without committing by light-dismissing the flyout.
- Warnings and confirmations:
Title None Main content State the warning that the user should consider before taking the action. Do not phrase it as a question. Controls Include just the action that the user initiated, such as Delete. Do not include the opposite action or a Cancel button; that can be achieved by dismissing the flyout.
- Drop-down menus:
Title None Main content List the menu items that the user can interact with. Controls Use the MenuCommand for these buttons.
- Displaying more info:
Title Optional title to relate status, or a description of an icon that was used to invoke it. Main content Include the information. Controls Put optional buttons to do more with the information in the flyout.
- For designers
- Adding app bars
- Adding context menus
- Guidelines for flyouts
- Guidelines for clipboard commands
- Laying out your UI
- Guidelines for message dialogs
- For developers (HTML)
- For developers (XAML)
- Flyout class