Commanding design for Windows Store apps
You have several surfaces you can place commands and controls on in your Windows Store app, including the app window, pop-ups, dialogs, and bars. Choosing the right surface at the right time can mean the difference between an app that's a breeze to use and one that's a burden.
For a downloadable version of this topic, go here.
Users should be able to complete the core scenarios just by using the canvas. Whenever possible, let users directly manipulate the content on the app's canvas, rather than adding commands that act on the content.
For example, in a Restaurant browsing app, finding and viewing restaurant details should be done on the canvas by tapping, panning, or selecting content.
Leverage the charm and app contracts to enable common app commands. Avoid duplicating app contract functionality on your app's canvas or in the app bar.
- Search: Let your users quickly search through your app's content from anywhere in the system, including other apps. And vice versa.
- Share: Let your users share content from your app with other people or apps, and receive shared content.
- Devices: Let your users enjoy audio, video, or images streamed from your app to other devices in their home network.
- Settings: Consolidate all of your settings under one roof and let users configure your app with common mechanism they're already be familiar with.
Use the app bar to display commands to users on-demand. The app bar shows commands relevant to the user's context, usually the current page, or the current selection.
The app bar is not visible by default. It appears when a user swipes a finger from the top or bottom edge of the screen. The app bar can also appear programmatically on object selection or on right click.
The app bar is transient, going away after the user taps a command, taps the app canvas, or repeats the swipe gesture. If needed, you can keep the app bar visible to ease multi-select scenarios.
You can use context menus for clipboard actions (like cut, copy, and paste), or for commands that apply to content that cannot be selected (like an image on a web page).
The system provides apps with default context menus for text and hyperlinks. For text, the default context menu shows the clipboard commands. For hyperlinks, the default menu shows commands to copy and to open the link.
Let's use a fictional restaurant app to illustrate the process of organizing commands for the app bar, focusing on a browsing scenario.
The first step is to identify all the app commands and organize them by the scenario or location. Below is the list of commands commonly used when browsing for a restaurant.
- What commands should appear throughout the entire app?
- What commands should show only on certain pages?
- What commands should use charms or go in settings?
Next we group commands into command sets. The app bar displays command sets as a unit, with a divider between the sets.
- What commands are functionally related?
- What commands toggle different view types?
- What commands should appear when a selection is made?
|View commands||Filter commands||Sort commands|
|Selection commands||Map view commands||New Item commands|
Next, consider whether your command sets would work better in a command menu.
- Is the app bar too crowded or are there too many commands to fit?
- Is there a set that would benefit from longer labels or interactive controls?
Menus let you present more options in less space and include interactive controls.
In this example, the Sort menu pops up a simple list that makes choosing options easy. The Filter menu pops up a set of controls that lets users filter items by more complex criteria.
There are a few ways to position commands within the app bar, and variations may occur depending upon certain circumstances. Below are command placement rules that should be followed whenever possible.
Predictability To the extent possible, use consistent interaction and command placement across all views of your app.
Ergonomics Consider how the placement of specific commands can improve the speed or ease with which a command can be acted upon.
Aesthetics Limit the number of commands to avoid the app bar from looking complicated. Choose icons that are easy to understand or predict. Keep text labels short.
Place persistent commands on the right
Start by placing default commands on the right side of the app bar. If there are only a few commands, the app bar may end up with commands only on the right.
In this example for the Browse commands, the view command set and the filter/sort set are persistent.
Use the edges
If there is a larger number of commands, separate distinct command sets on the left or the right to balance out the app bar and to make commands more ergonomically accessible.
Here we decide to move the view command set to the left and keep the filter/sort set on the right. In this example, when map view is active the map view commands appear to the right of the view command set.
Show/hide disabled commands
Commands that are not relevant in certain circumstances should be hidden. When they do appear, they should not disrupt the ordering of persistent commands.
In this example, when map view is active the map view commands appear to the right of the view command set.
Insert selection commands
Commands that appear as a result of the user making a selection go on the far left, sliding over any commands that may have been there. This makes selection commands more noticeable and easier to access.
Here the view command set slides over to the right to make room for the selection command set.
Some commands are common and appear in many apps. To create consistency and instill confidence, you should follow these guidelines when deciding where to place commands in the app bar.
Selection commands Commands related to your selection always appear on the far left, whether they are contextual commands that appear on selection, or commands that affect your selection.
In this example, before users select anything, a "Select all" command appears on the left. After users select something, the other selection commands appear on the left.
New Item command If your app calls for a "New" command, where any new type of entity is created (add, create, compose), place that command against the right edge of the bar. This gives every "New" command, regardless of the specific app or context, consistent placement and makes it easily accessible with thumbs.
In this example, the "New review" command lets users create a new restaurant review. Other commands, related to "New review," are placed next to it to the left.
The + glyph should only be used to represent the "New" command, and it should not appear anywhere else in an app bar.
Delete commands Use Delete/New if your app is about managing individual entities that may persist outside of your particular application, like in a mail or camera app. Delete/New should always appear in this order.
Remove commands Use Remove/Add if your app is about managing a list, such as a to-do list, a list of cities in a weather app, or a list of bookmarked restaurants. Remove should always appear to the left of Add.
Clear commands Use clear if you are taking a destructive action on all possible items. Use the command label to be explicit about what the command will act on, such "Clear selection."
Build date: 5/14/2013