Command design for Windows Store apps

You can place commands and controls on several surfaces 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.

See these features in action as part of our App features, start to finish series:  Windows Store app UI, start to finish

Use the canvas

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.

Use the charms

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 bars

Use the app bars to display commands to users on-demand. The bottom app bar shows commands relevant to the user's context, usually the current page or the current selection. The top app bar, also called the navigation app bar or nav bar, shows navigational elements, such as the back button and page selectors, that move the user to a different page.

The app bars aren't visible by default. They appear when a user swipes a finger from the top or bottom edge of the screen. The app bars can also appear programmatically on object selection or on right click.

The app bars are 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 bars visible to ease multi-select scenarios.

Use context menus

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.

Command placement

Let's use a fictional restaurant app to illustrate the process of organizing commands for the app bar, focusing on a browsing scenario.

Organize commands

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?

Create command sets

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

Create menus

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.

Place commands on the app bar

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.

1. 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.

2. 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.

3. 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.

4. 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.

Use standard placement for common commands

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: 6/20/2013