commanding guidelines

7/28/2019 Commanding Guidelines

1/4

The canvas

Charms

The app bar

Context menus

Users should be able to complete core scenarios just by using content on 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 charms and app contracts to enable common app commands. Avoid duplicating app

contract functionality within your apps canvas or app bar.

Use the App Bar to make commands available to users on-demand. The App Bar is used to show

commands relevant to the users 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 is transient, dismissing after the user initiates a command

or after tapping away on the app canvas. It can also be dismissed by repeating the swipe gesture.

When content is selected the app bar should appear automatically to show contextual commands.

If needed, the app bar may be left visible to facilitate multi-select scenarios.

You can use context menus for clipboard actions (such as 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 in the browser, the default menu

shows a command to copy the link and a command to open the link.

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 print, 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 a

common mechanism theyre already familiar with.

You have several surfaces you can place commands and controls on in your Metro style 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.

WINDOWS 8COMMANDINGOverview


2/4

Organize commands

Create command sets

Create menus

The first step is to complete an inventory of all the app

commands and organize them by the scenario or location

to which they relate. Below is the list of commands usedwhen browsing for a restaurant.

Next we organize commands in to command sets.

Command sets determine which commands are displayed

together as a unit. Dividers appear between command sets

in the app bar.

Menus allow us to take commands sets and fold those

related commands in to a single item on the app bar.

What commands should appear through the entire app?

What commands should show only on certain pages?

What commands should use Charms or go in Settings?

What commands are functionally related?

What commands toggle different view types?

What commands should appear when a selection is made?

Is the app bar too crowded?

Want to display several related commands

all at once?

Would commands benefit from greater

interactivity?

FOOD WITH FRIENDS BROWSE COMMANDS

VIEW COMMANDS

SELECTION COMMANDS MAP VIEW COMMANDS NEW ITEM COMMAND

FILTER COMMANDS SORT COMMANDS

An advantage to using a menu is

the ability to show many options

at once, so the user can see

controls together rather than

having separate menus.

In this example, the Sort menu

shows a basic list, where the

Filter menu exposes options with

more rich, detailed controls.

Filter

Filter by category

Filter by price

Filter by rating

Open now

All

$25-$50

Sort

By rating

By match

By distance

New plan

Filter

by rating

Filter by

distance

Filter by

store hours

Filter by

area

Sort by

match

Sort by

distance

Sort by

rating

Redo search

on current view

View items

as a list

View items

on a map

Filter

by rating

Filter by

distance

Filter by

store hours

Filter by

area

Sort by

match

Sort by

distance

Sort by

rating

My location

Redo search

on current view

Wishlist

My location

New plan

View items

as a list

View items

on a map

Wishlist

COMMANDINGPlacement WINDOWS 8We are using Food with Friends, a fictional restaurant finding app, to illustrate the process of organizing commands for the app bar. This is

focused on the apps scenario of browsing for a restaurant.


3/4

Placing commands on the App Bar

PLACE COMMANDS IN CONSISTENT POSITIONS THROUGHT THE APP

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: Use consistent interaction and command

placement across all views of your app.

Start by placing 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 Browse commands, we start by placing the

new plan, view command set, and the filter/sort set on the

right side of the app bar.

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 new plan and 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.

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

complicating your app. Choose icons that are easy to

understand or predict. Keep text labels short.

1

USE THE EDGES2

Commands that appear as a result of the user making a

selection go on the far lef t, sliding over any commands that

may have been there. This makes selection commands more

noticeable and easier to access.

Here, when a restaurant is selected on the canvas, the View

command set slides over to the right to make room for the

Wishlist command.

INSERT SELECTION COMMANDS4

Commands that are not relevant in certain circumstances

should be hidden. When they do appear, they should not

disrupt the ordering of persistent commands.

SHOW/HIDE DISABLED COMMANDS3

List view

Map view

Filter

Sort

List view

Map view

List view

Map view

List view

Redo search

My location

Map view

New plan

Filter

Sort

New plan

Filter

Sort

New plan

Filter

Sort

New plan

Wishlist

COMMANDINGPlacement WINDOWS 8We are using Food with Friends, a fictional restaurant finding app, to illustrate the process of organizing commands for the app bar. This is

focused on the apps scenario of browsing for a restaurant.


4/4

Special App Bar commandsSome commands are common and will appear in many apps. In order to create consistency and instill

confidence, there is specific guidance for how these commands should be placed in the App Bar.

SELECTION COMMANDS

Commands related to selection should always appear on the

far left, whether they are commands that initation a selection,

or contextual commands that appear after a selection has

been made.

In this example, before a selection is made , only a Select all

command appears on the left. After a selection is made , the

contextual commands appear on the far left, sl iding the other

commands over to the right.

NEW 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 wi th thumbs.

In this example the New plan command enables users to plan

a new dinner outing with friends, so we place it against the

right edge.

The glyph should only be used for New and should alwaysbe placed against the right edge of the app bar.

DELETE COMMAND

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.

Delete

New

REMOVE COMMAND

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.

Remove

Add

CLEAR COMMAND

Use Clear if you are taking a

non-destructive action on items. Use the

command label to be explicit about

what the command will act on, such

Clear selection.

Clear selection

Pin

View on map

Select all

Clear selection

A

A

B

B

List view

Map view

Filter

Sort

New plan

Wishlist

COMMANDINGPlacement WINDOWS 8

commanding guidelines

Documents