Guidelines for selecting text and images (Windows Store apps)
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.
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.
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.
If your app requires a custom UI that supports text selection, we recommend that you follow the Windows 8 selection behaviors described here.
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.
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.
The following image demonstrates how to adjust a selection by dragging the gripper.
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).
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.
The following image demonstrates how to select a word by tapping within the word (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.
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 adjustable progress bar.
Image editor with cropping grippers.
Here are some do's and don'ts that will help you create a successful user interaction experience for your customers.
- 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.
- Don't allow selection of UI elements such as controls, labels, images, proprietary content, and so on.
Assess whether selection is an issue for your app and, if so, identify the areas of the UI where selection should be prohibited. For more information on disabling selection, see How to disable text and image selection.
- Guidelines for common user interactions
- Touch interaction design
- How to disable text and image selection
- Quickstart: Pointers
- Quickstart: DOM gestures and manipulations
- Quickstart: Static gestures
- Quickstart: Manipulation gestures
- Tutorial (Windows Store apps using C#/VB/C++ and XAML)
- Quickstart: Touch input
- Quickstart: Handling pointer input
- Tutorial (Windows Store apps using C++ and DirectX)
- Responding to touch input (DirectX and C++)
- Samples (DOM)
- HTML scrolling, panning and zooming sample
- Input: Instantiable gestures sample
- Samples (Windows Store app APIs)
- Input: Windows 8 gestures sample
- Input: XAML user input events sample
- XAML scrolling, panning, and zooming sample
- Samples (DirectX)
- DirectX touch input sample
- Input: Manipulations and gestures (C++) sample
Build date: 11/16/2013