Guidelines for visual feedback (Windows Store apps) (Windows)

4 out of 5 rated this helpful - Rate this topic

In this article

Considerations and recommendations
Do's and Don'ts
Related topics

Important APIs

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.

Use the built-in controls exposed through the Windows Store apps language frameworks (Windows Store apps using JavaScript and Windows Store apps built for Windows using C++, C#, or Visual Basic) to get Windows 8 visualizations for free. If your app features custom interactions that require customized feedback, you must ensure the feedback is appropriate, and doesn't distract a user from their task. This can be of particular issue in game or drawing apps where the visual feedback could conflict with or even obscure critical UI.

Here are some examples of built-in visualizations in Windows 8.

Touch visualization

Mouse visualization

Pen visualization

Considerations and recommendations

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.

Important

We don't recommend changing the interaction behavior of the built-in gestures.

Informational user interface

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 for small targets

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.

Occlusion tooltips for actions and commands

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.

Informational pop-up

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.

Context menu

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).

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

Self-revealing interactions

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.

Screen shot showing an unselected state.

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.

Screen shot showing the animation for selection.

Without lifting the finger, swipe to actually select the item.

Screen shot showing the animation for drag and drop.

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.

Do's and Don'ts

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

Do's

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'ts

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 visual feedback (Windows Store apps)