This topic describes best practices for adding Flyouts, and lists any requirements your app needs to meet to be accepted in the Windows Store.
When to use a Flyout
Flyouts are great at showing UI that you don't want on the screen all the time. The user can close a Flyout at any time by simply tapping or clicking outside of it, or by pressing ESC. If users are in control of bringing up new UI, they must also be in control of dismissing it. When the user makes a selection in the Flyout, the Flyout should be dismissed.
Do not 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.
Flyouts are useful in your app for any of a number of reasons. Typical uses of a Flyout are:
-
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 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 Context menus are meant for contextual actions when selecting text; Flyouts should be used to create drop-down menus from UI elements such as buttons.
-
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.
When to not use a Flyout
Avoid Flyouts in the following scenarios:
- If a message, error, warning, or other piece of UI is not invoked directly by the user at that moment, then it should not be a Flyout
- 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.
- If an experience is one that requires prolonged interaction, multiple screens, or lots of UI, then you should 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.
- Avoid using a Flyout for the primary list of commands for your app. Use the app bar for that. See Guidelines and checklist for app bars.
- If a menu is required solely for commands about a text selection, then use a context menu instead. See Guidelines and checklist for context menus.
Designing a Flyout
A Flyout is created by using the WinJS.UI.Flyout control. Custom content is specified using free-form HTML.
The key to designing a good Flyout is to keep it as simple as possible. Don't include parts of a Flyout that are not necessary for the situation.
Size: The Flyout should be as small as possible given its content. It doesn't need extra padding beyond what is provided by the Flyout itself. If a control isn't absolutely necessary, then don't include it. 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.
Position: The Flyout should always be positioned near its point of invocation. If the user tapped on a toolbar button to bring up a Flyout, then the Flyout should show above or below the toolbar 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.
The Flyout is positioned by specifying the object to anchor it to and the side of the object that it should appear on. 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).
Flyouts should never be positioned in non-contextual places such as the center of the screen, for several 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.
Tab order: People often use the TAB key to navigate around the screen, so identify the order in which users should be able to move 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 do not overlap with tab indices ranges for elements outside the Flyout, or people will jump between the flyout and the main app page.
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. - Menus:
Title None Main content List the menu items that the user can interact with. 
Controls No buttons are necessary because the user makes a direct selection in the list. - 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.
Security considerations
The following articles provide guidance for writing secure C++ code.
Related topics
Build date: 11/29/2012
