Guidelines for visual feedback (Windows Store apps)
Visual feedback (also referred to as contact visualizations or feedback UI) helps users recognize whether their interactions with your app are detected, interpreted, and handled as they intended. Visual feedback can help users understand, learn, and adapt to your app, the system, and the input device by indicating the success of an interaction, improving the users sense of control, encouraging interaction, relaying system status, and reducing errors.
Visual feedback is critical for touch interactions that require accuracy and precision. For example, your app should clearly indicate the location of a tap to let a user know if they missed their target, how much they missed it by, and what adjustments they must make.
Here are some examples of built-in visualizations in Windows 8.
Feedback UI is generally dependent on the input mode (touch, mouse, pen/stylus, keyboard, and so on). For example, the built-in feedback for mouse usually involves moving and changing the cursor, while touch and pen require contact visualizations, and keyboard input and navigation uses focus rectangles and highlighting. Ensure you provide feedback that supports and is suitable for all input modes.
We don't recommend changing the interaction behavior of the built-in gestures.
One of the primary forms of visual feedback is informational UI (or disambiguation UI). Informational UI identifies and displays info about an object, describe functionality and how to access it, and provide guidance where necessary. Tooltips, rich tooltips, and context menus are typically used to provide this feature.
Informational UI is particularly useful for overcoming fingertip occlusion (obstruction) and improving touch interactions with your app. It even has a built-in gesture dedicated to it: press and hold. For more info on providing informational UI, see Displaying popups and Adding context menus.
Press and hold is a timed interaction, which are typically discouraged in Windows 8. A timed interaction is acceptable in this case as it is used as a tool for learning and exploration (for more info, see Touch interaction design). The recommended length of time depends on the type of informational UI. Here are the recommended time thresholds.
|Informational UI type||Timing||Activation||Usage|
|Occlusion tooltip (for scrubbing and small targets)||0 ms||Yes||For rapid clarification of actions. Typically used for commands.|
|Occlusion tooltip (for actions)||200 ms||Yes|
|Informational pop-up (rich tooltip)||~2000 ms||No||For slower, more deliberate exploration and learning. Typically used with collection items.|
|Self-revealing interaction||~2000 ms||No|
|Context menu||~2000 ms||No||Exposes a limited set of commands related to the selected object.|
Occlusion tooltips describe the occluded target. These tooltips are useful when targeting and activating items smaller than a standard touch target size, such as hyperlinks on a webpage.
You can replace these tooltips with an informational pop-up after a certain time threshold has passed. For example, use an occlusion tooltip to show the occluded text of the hyperlink and then replace the tooltip with a pop-up containing the URL.
These tooltips describe the action or command that occurs when a user lifts their finger from an element. These tooltips are useful when targeting and activating a button or similar control.
A small-target tooltip can be followed by an action tooltip after a certain time threshold has passed. In this case, the small-target tooltip should expand to include the additional info in the action tooltip.
These tooltips reveal secondary info about an element. For example, an informational pop-up could be a text description of an image, the full text of a truncated title, or other info relevant to the target.
Informational pop-ups typically contain info that doesn't need to be made available immediately and, in some cases, might be distracting if shown too quickly. A longer time threshold lets users be more deliberate about obtaining the info.
After a rich tooltip is displayed, the object is no longer activated when the user lifts their finger. The reason for this is that info gleaned from the tooltip might influence the user to not to activate the item.
We recommend that the visual design and info in the rich tooltip be distinct and more substantial than that of a standard tooltip.
The context menu is a lightweight menu that gives users immediate access to actions (like clipboard commands) on text or UI objects in Windows Store apps.
The touch-optimized context menu consists of two parts. A visual cue, the hint, is displayed as a result of a hold interaction. Then, the context menu itself is displayed after the hint disappears and the user lifts their finger. For more info on context menus, see Adding context menus.
The following images demonstrate how to invoke the default context menu for text by tapping within a selection or on a gripper (press and hold can also be used).
A self-revealing interaction is an informative visual cue or animation that demonstrates how to perform an action with a target object and provides a preview of the result of that action.
These next few images show the self-revealing interaction for a cross-slide selection on the Start screen. When a user touches an app tile (without dragging the tile) the tile slides down (as if being dragged) to reveal the selection check mark that would appear if the app were actually selected.
Press finger down on an item to start the self-revealing interaction for selection. The self-revealing interaction demonstrates what action will be performed on the item.
Without lifting the finger, swipe to actually select the item.
If the user continues to slide their finger, the self-revealing visualization changes to show that the object can now be moved.
After a self-revealing interaction is displayed, the object is no longer activated when the user lifts their finger.
Here are some do's and don'ts that will help you create a great user interaction experience for your customers.
- Provide visual feedback no matter how brief the contact.
This helps the user to:
- Confirm that the touch screen is working.
- Identify whether the target is touch-enabled or responsive.
- Identify whether the user missed their intended target.
- Display feedback immediately for all interaction events.
- Provide feedback that consists of subtle, intuitive cues that don't distract users.
- Ensure touch targets stick to the fingertip during all manipulations.
- Don't use touch visualizations in situations where they might interfere with the use of the app.
For more info, see ShowGestureFeedback.
- Don't display feedback unless it is absolutely necessary.
Keep the UI clean and uncluttered by not showing visual feedback unless you are adding value that is not available elsewhere. Never display tooltips if they repeat text that is already visible. Tooltips should be reserved for specific occasions, such as truncated text (text with ellipsis) that is not displayed when the item is selected, or where additional information is required to understand or use your app.
- Don't use the press and hold gesture for anything other than informational UI.
Don't customize the visual feedback behaviors of the built-in Windows 8 gestures, as this can create an inconsistent and confusing user experience.
- Don't show visual feedback during panning or dragging; the actual movement of the object on the screen is sufficient. But if the content area doesn't pan or scroll, then use visualizations to indicate the boundary conditions.
For more info, see Guidelines for panning.
- Don't display feedback for a control that isn't identified as the target.
Visual feedback is critical when relying on touch input for activities that require accuracy and precision based on location. Displaying feedbackevery time you detect touch input helps the user understand any custom targeting heuristics defined by your app and its controls.
- Guidelines for common user interactions
- Touch interaction design
- 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)
- Input: DOM pointer event handling sample
- 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/29/2012