Export (0) Print
Expand All

Touch Visualizations

When users touch the screen on an interactive surface device, the Microsoft Surface software displays generalized visual feedback called touch visualizations.

In the following illustration, the system displays a glow under three touches (labeled 1) and provides a tether (labeled 2) between a touch and an item on the screen. When a touch is first made, an expanding ring appears around the touch that fades after a second. In the following illustration, the Input Simulator tool has been used to simulate a finger (outlined in orange) and a blob (outlined in green).

Default touch visualizations

Example touch visualizations

Touch visualizations are intended to improve user interactions with Surface in three ways:

  • Reduce ambiguity

    When a user touches the interactive surface device, the Surface software should clearly indicate to the user that the software receives the touch. Otherwise, the user might think that the system is broken or that the user is trying to interact with it incorrectly. Touch visualizations display visual feedback to users to indicate that the system captured the touch and that the device made for Surface is using the touch or group of touches.

    For example, if a user attempts to drag an object beyond a certain location, the Surface software displays visualizations that are designed to inform the user that the system is aware that the user is trying to do something, instead of simply ignoring further attempts to move the object in that direction.

  • Clarify hit-testing

    Hit-testing on Surface controls uses a single point. A user might touch a control but not touch the hit-testing point. To help the user understand this situation, the Surface software displays different visuals for captured and uncaptured touches. In both situations, when the user lifts a finger, the touch visualization shrinks to show the point that is used for hit-testing.

  • Visualize touch captures

    Some controls can capture a touch that then slides outside the control's bounds. If a user later tries to use such a control with another touch, the control will not work. Touch visualizations provide a visual indication that the control still has the original touch.

    For example, suppose that a user places an object (such as a pen, cell phone, or book) on a button and then pushes the object aside. If the button captured a touch, that button could not be pressed, because all touches must be released before a button is considered pressed. In this situation, touch visualizations provide visual clues that the button is still associated with the accidental touch. The following image shows two touches being captured by a button.

Contact visualizations - Button example

Touch visualizations on a button

Implementing Touch Visualizations

Certain Surface controls include touch visualizations automatically. For example, the SurfaceButton control uses touch visualizations to show that a touch on the button continues to be associated with the button until it is removed from the device made for Surface.

For many applications, the built-in touch visualizations provide excellent usability and offer consistency in the look-and-feel with other Surface applications.

Only place a TouchVisualizer control at the root of a full-screen window. This location is the default in the SurfaceWindow template. If your application applies a TouchVisualizer control to an item that is smaller than the full screen, the visualizations inside are scaled down to match, frequently making them too small for users to see.

If you want to change or disable touch visualizations, the Surface SDK includes several ways to modify touch visualizations:

  • Modify the colors that touch visualizations uses. For more information, see Touch Visualization Colors.

  • Change the adapter that a control uses. Changing the adapter can change the anchor point that is used for the tethers or change whether visualizations are shown in certain situations. For more information, see Touch Visualization Adapters.

  • Disable touch visualizations on one or more controls in an application. For more information, see Disabling Touch Visualizations for Surface Applications.

    Make sure that any control on which you disable touch visualizations still provides clear visual feedback to users.

You can also disable touch visualizations for certain applications on individual devices made for Surface. For more information, see Disabling Touch Visualizations for Surface Applications.

Did you find this information useful? Please send us your suggestions and comments.

© Microsoft Corporation. All rights reserved.
© 2015 Microsoft