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 8 COMMANDING Overview
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 used
when 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?
ls Lhe app bar Loo 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

FilLer by caLegory
FilLer by price
FilLer by raLing
Open now

All
$25-$50
_
Sort
1
8y raLing
8y maLch
8y disLance



New plan
_

_
Filter
by rating

_
Filter by
distance

_
Filter by
store hours

_
Filter by
area

_
Sort by
match
1
_
Sort by
distance
1
_
Sort by
rating
1
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
1
_
Sort by
distance
1
_
Sort by
rating
1
_
J
My location
_
Redo search
on current view
_
_
_
_
_
Wishlist

My location
J
New plan
_

_
View items
as a list

_
View items
on a map

_
Wishlist

COMMANDING Placement WINDOWS 8

We 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.
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 EDGES 2
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, 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 COMMANDS 4
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 COMMANDS 3
_
List view

_
Map view

_
Filter

_
Sort
1
_
List view

_
Map view

_
List view

_
Map view

_
List view

Redo search
_
J
My location
_

_
Map view
New plan
_

_
Filter

_
Sort
1
New plan
_

_
Filter

_
Sort
1
New plan
_

_
Filter

_
Sort
1
New plan
_

_
_
Wishlist

COMMANDING Placement WINDOWS 8

We 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.
Special App Bar commands
Some 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, sliding 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 with 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 always
be 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
1
New plan
_

_
Wishlist

COMMANDING Placement WINDOWS 8