Command patterns

Applies to Windows and Windows Phone

You can place commands and controls on several surfaces in your Store app, including the app canvas, pop-ups, dialogs, and app 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.

In Store apps, commands are the interactive UI elements that a user can use to take action. A command is different from a navigation element in that a navigation element moves the user to a different page, whereas a command lets the user take an action on the current page. Navigation elements make an app usable. Commands make an app useful.

For more info about the different command surfaces in apps, see Laying out your UI.

Command types

Filter

Filter commands remove or hide content within a data set, based on some criteria. For example, a user might choose to view only those games in the Windows Store that are categorized as "Adventure."

 

Windows Store search for Adventure games

 

Pivot

Pivot commands reorganize content within a data set and gives a different view of the data based on the pivot. For example, a user might choose to organize songs by album, artist, or songs.

 

Xbox music app

 

Sort

Sort commands change the order in which content is displayed within a data set. For example, a user might choose to destinations in a travel app by popularity.

 

Bing Travel app

 

View

View commands change the style or method in which content is displayed. For example, in an app that finds hotels, a user might choose view hotels on a map instead of in a list.

 

Expedia app

 

Hint

You can place hint commands on your canvas if you think they'll benefit your users. For example, in the Mail app in Windows 8.1, there's an "ellipses" command that hints at additional options. Clicking on it displays the app's app bar, in addition to the conventional Windows methods that display an app bar.

 

Mail app with app bar hint

 

You can design such hints to match the style of your app. This news app uses the same app bar hint, plus a flag with a menu icon that displays a page of menu choices.

 

News Bento app with menu and app bar hints

 

Others

Any interactive UI element that enables the user to take action within the current view is a command. Here are some examples.

 

Examples of other commands

 

Examples of custom commands

Command placement

On the canvas

If a command (or a command menu) is critical and is constantly needed for the user to complete the core scenarios, put it on the canvas. For example, in the Mail app in Windows 8.1, core commands like response, new, and delete appear on the canvas when a mail is selected.

 

Mail app with on canvas commands

 

Bottom app bar

Sometimes you don’t want commands to clutter the canvas and affect your user's ability to consume the app content. Use the bottom app bar to display commands to users on demand. The bottom app bar shows commands that are relevant to the user's context, usually the current page or the current selection.

The bottom app bar works well for both single- and multi-select commanding. You can program your app so that the app bar appears when a user selects objects.

 

objects selected, app bar appears

 

Command placement guidelines

You can have variations in how you position commands within the app bar, but you should consider the following:

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

We recommend the following command placement guidelines:

Place persistent or 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.

Persistent commands placed on the right

 

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.

In this example, we decided to move the view command set to the left and keep the filter/sort set on the right. When map view is active, the map view commands appear to the right of the view command set.

Commands separated on the left and right edges

 

Show/hide disabled commands. These are commands that are not relevant in certain circumstances. When they do appear, they should not disrupt the ordering of persistent commands.

In this example, map view is active and the map view commands appear to the right of the view command set.

Commands with one command disabled

 

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.

In this example, the view command set slides over to the right to make room for the selection command set.

Selection commands on the far left

 

Placement of common commands

Some commands are common and appear in many apps. To create consistency and instill confidence, we recommend the following guidelines when deciding where to place common commands in the app bar.

Place selection commands on the far left, whether they are contextual commands that appear on selection, or commands that affect 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.

Contextual selection commands replacing the Select all command after the user selects something

 

Place new item commands against the right edge of the bar. New item commands can be add, create, compose, or any command that creates a new entity. New item commands should be 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 be used only to represent the "New" command, and it should not appear anywhere else in an app bar.

New item command on right edge of bar

 

Place delete commands to the left of new item 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.

App bar commands for Delete and New

 

Place remove commands to the left of add 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/Add should always appear in this order.

App bar commands for Remove and Add

 

Place clear commands to the left of new item 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 as "Clear selection."

App bar commands for Clear and New

 

For examples of command placement in the bottom app bar, see the Windows Store app gallery.

Grouping commands into menus

Sometimes it is more efficient to group multiple commands into a command menu. Menus let you present more options with less space. Menus can include interactive controls.

In this example, the sort command displays a simple menu that makes it easy for users to choose a sorting option. The filter command displays a set of controls in a menu that lets users filter items by more complex criteria.

app bar commands grouped into menus

 

Context menus

Context menus often contain clipboard actions, such as cut, copy, and paste. Context menus can also contain commands that apply to content that cannot be selected, such as 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.

Users invoke context menus by pressing and holding the content on touch devices, or right-clicking the content with a mouse.

 

context menu from a link in Bing

 

  • Applies to Windows

Leverage the charms

When you design a Windows Store app, you get four very useful commands in the charms: search, share, devices, and settings. Users invoke the charms by swiping from the right edge of the screen or pointing the mouse cursor toward the top or bottom right corner of the screen.

 

Swipe from the right edge for the charms

 

Search: Let your users quickly search your app's content from anywhere in the system, including from other apps.charms
Share: Let your users share content from your app with other people or apps, and receive shared content.
Start: The Start charm takes the user to the Start screen. Apps do not interact with this charm. The behavior is automatic and is always the same.
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.

 

Avoid duplicating app contract functionality on your app's canvas or in the app bar.

Related topics

Guidelines for app bars
Guidelines for context menus
Guidelines for clipboard commands
Charms and contracts

 

 

Show:
© 2014 Microsoft