Guidelines for selecting text and images

Article
09/17/2013

This topic describes the new Windows UI for selecting and manipulating text, images, and controls and provides user experience guidelines that should be considered when using these new selection and manipulation mechanisms in your Windows Store app.

See this feature in action as part of our App features, start to finish series: User interaction: Touch input... and beyond

Touch optimization

Text selection and manipulation is particularly susceptible to user experience challenges introduced by touch interactions. Mouse, pen/stylus, and keyboard input are highly granular: a mouse click or pen/stylus contact is typically mapped to a single pixel, and a key is pressed or not pressed. Touch input is not granular; it's difficult to map the entire surface of a fingertip to a specific x-y location on the screen to place a text caret accurately.

Considerations and recommendations

Use the built-in controls exposed through the language frameworks in Windows 8 to build apps that provide the full platform user interaction experience, including selection and manipulation behaviors. You'll find the interaction functionality of the built-in controls sufficient for the majority of Windows Store apps.

When using standard Windows 8 text controls, the selection behaviors and visuals described in this topic cannot be customized.

Text selection

If your app requires a custom UI that supports text selection, we recommend that you follow the Windows 8 selection behaviors described here.

Editable and non-editable content

To accommodate the less precise targeting behavior of touch interactions, the selection and manipulation user experience visuals (such as "grippers" that both indicate a selection can be adjusted and identify the interaction target) have been completely redesigned for Windows 8.

With touch, selection interactions are performed primarily through gestures such as a tap to set an insertion cursor or select a word, and a slide to modify a selection. As with other Windows 8 touch interactions, timed interactions are limited to the press and hold gesture to display informational UI. For more information, see Guidelines for visual feedback.

There are no changes to selection behavior when using mouse, pen/stylus, and keyboard in Windows 8.

Windows 8 recognizes two possible states for selection interactions, editable and non-editable, and adjusts selection UI, feedback, and functionality accordingly.

Editable content

Tapping within the left half of a word places the cursor to the immediate left of the word, while tapping within the right half places the cursor to the immediate right of the word.

The following image demonstrates how to place an initial insertion cursor with gripper by tapping near the beginning or ending of a word.

Tap (or press and hold) left side of a word to place a caret and gripper at the beginning of that word. Tap (or press and hold) the right side of a word to place a caret and gripper at the end of that word.

The following image demonstrates how to adjust a selection by dragging the gripper.

Drag the gripper in either direction to adjust selection (the first gripper remains anchored and a second gripper is displayed). Drag either gripper to make subsequent adjustments.

The following images demonstrate how to invoke the context menu by tapping within the selection or on a gripper (press and hold can also be used).

Tap (or press and hold) within the selection or on a gripper to invoke the context menu.

Note These interactions vary somewhat in the case of a misspelled word. Tapping a word that is marked as misspelled will both highlight the entire word and invoke the suggested spelling context menu.

Non-editable content

The following image demonstrates how to select a word by tapping within the word (no spaces are included in the initial selection).

Tap within a word to select it (no spaces are included in the initial selection).

Follow the same procedures as for editable text to adjust the selection and display the context menu.

Object manipulation

Wherever possible, use the same (or similar) gripper resources as text selection when implementing custom object manipulation in a Windows Store app. This helps provide a consistent interaction experience across the platform.

For example, grippers can also be used in image processing apps that support resizing and cropping or media player apps that provide adjustable progress bars, as shown in the following images.

Media player with progress gripper

Media player with adjustable progress bar.

Image with crop grippers

Image editor with cropping grippers.

Do's and Don'ts

Here are some do's and don'ts that will help you create a successful user interaction experience for your customers.

Do's

Use font glyphs when implementing your own gripper UI.
The gripper is a combination of two Segoe UI fonts that are available system-wide. Using font resources simplifies rendering issues at different dpi and works well with the various UI scaling plateaus.

When implementing your own grippers, they should share the following UI traits:
- Circular shape
- Visible against any background
- Consistent size
Provide a margin around the selectable content to accomodate the gripper UI.
If your app enables text selection in a region that doesn't pan/scroll, allow a 1/2 gripper margin on the left and right sides of the text area and 1 gripper height on the top and bottom sides of the text area (as shown in the following images). This ensures that the entire gripper UI is exposed to the user and minimizes unintended interactions with other edge-based UI.
Hide grippers UI during interaction.
Eliminates occlusion by the grippers during the interaction. This is useful when a gripper isn't completely obscured by the finger or there are multiple text selection grippers.

Eliminates visual artifacts when displaying child windows.