Guidelines and checklist for context menus (Windows Store apps)
Guidelines that describe when and where you should include context menus in your Windows Store apps.
The context menu is a lightweight menu that gives users immediate access to actions on text (like clipboard commands) or UI objects in apps. The system provides apps with default context menus for text and hyperlinks. You can replace the default context menus with menus that show custom commands for text or hyperlinks, or you can create your own context menus that act on other UI objects (like thumbnails).
Use context menus only to show commands that are directly relevant to users and that cannot be readily accessed through the app toolbar or direct manipulation (like touch rotation).
Showing clipboard commands
Use a context menu to show clipboard commands (Cut, Copy, and Paste) for objects such as selected text. By default, the system shows Cut, Copy, and Paste commands for selected text. Common paste menu commands are Select All, Paste, and Undo. You can override these commands by showing a customized context menu. Where possible, mimic system behavior in your app by preserving the default commands.
Showing custom commands
The system comes with default context menus for text and hyperlinks. Apps can replace these context menus with their own context menus.
A custom command is appropriate to include in a context menu when it is not found in the app's toolbar and cannot be performed using direct interaction (like rotation).
Showing commands that operate on objects that can't be selected
Use the context menu to show commands for an object that needs to be acted upon but that can't be selected or otherwise indicated.
For example: A chat conversation may not be appropriate to add selection to; in this case a context menu could make commands available for each message in a chat conversation.
Don't add a command to the context menu when direct manipulation or selection is possible
Users should execute commands primarily by directly manipulating a UI element or by selecting a UI element and using a command that is on the app bar. This helps ensure commands are in predictable and discoverable screen locations.
For example, users should be able to rotate a picture by manipulating the image directly with their fingers instead of using a "Rotate" command in the context menu.
Don't duplicate commands in the context menu
If there is already a clear way to accomplish the action like direct manipulation or an existing app bar command , do not add a context menu command for that same action. Instead of relying on duplication, trust that users find commands by selecting an item or navigating to an item to act on it.
However, there is an exception for some actions that can be executed by keyboard shortcuts. If the action can only be executed by a keyboard shortcut, like CRTL+C to copy, it is okay to duplicate that action by adding a command to the context menu.
Don't show a context menu for the background of a page or for a large object
Instead, when you have commands that act on the background of a page or on a object that takes up the whole screen, use the app bar or add a command to your app's canvas to act on the page or object.
Keep command names short
The context menu has a maximum width that equates to approximately 50 characters. When command names are too long, they are truncated automatically and an ellipse ("…") replaces the missing characters. Avoid truncation of your commands in the context menu by keeping command names short.
Use sentence capitalization for each command name
The first character of the command should be uppercase and all of the remaining characters should be lowercase.
Use a separator to distinguish groups of related commands
Use separators in the context menus to group sets of commands together. Use a separator to divide app-specific or view-specific commands from a predictable set of commands, such as clipboard commands, that are shown together.
Don't use item accelerators
Item accelerators cannot be used with context menu commands. Do not use ampersands (&) at the beginning of command names in your menu.
Don't show a command in a context menu unless it is contextually relevant to the selection or object
Note that the context menu does not have a disabled state; the context menu doesn’t appear if there are no commands in it.
For example, if there is no text in the clipboard that can be pasted into text that the user can edit, the default context menu does not show the Paste command. Instead, it shows only the Cut and Copy commands.
Don't show a command that would result in an error
For example, do not show the paste command if the paste location cannot be edited.
Show the fewest number of commands possible, up to the six-command limit
If you're struggling to fit commands into the menu, ask yourself the following questions:
- Can this command be represented with direct manipulation?
- What would your user’s experience be like without this command?
- Is this command accessible in another way? What value, if any, is gained by duplicating the command in the context menu?
- Does the item have a page that represents it? If so, the command could be in the app bar or on the canvas on that page instead on the context menu in the collection.
- Does this command always need to be shown, or only in certain contexts?
Order custom commands in the context menu by importance, with the most important commands at the bottom
Order clipboard commands in the standard Cut, Copy, Paste order and place them at the bottom of the menu
If you want to show only two clipboard commands (for example, Cut and Paste) simply omit the unused command and otherwise preserve the order.
Position the context menu close to the object your user wants to act on.
The context menu should be positioned close to the object or selection that it is acting on. When showing the context menu, provide a rectangle for the object that it will be acting on, and the context menu will position itself near it. By default, a context menu should be centered above the object that it is acting on.
Dismiss the context menu
Programmatically dismiss the context menu when the context it was shown for does not exist anymore. This can be done by using cancel in the standard async pattern.
Build date: 11/29/2012