Guidelines for targeting

Article
09/17/2013

This topic describes the use of contact geometry for touch targeting in the new Windows UI and provides user experience guidelines that should be considered when using these new targeting mechanisms in your Windows Store apps.

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

Overview of targeting through contact geometry

Touch targeting in Windows 8 uses the full contact area of each finger that is detected by a touch digitizer. The larger, more complex set of input data reported by the digitizer is used to increase precision when determining the user's intended (or most likely) target. This ensures a much more satisfying experience for the user by improving accuracy and instilling confidence in their touch interactions.

The following recommendations describe how to optimize your application for touch targeting.

Measurements and scaling

To remain consistent across different screen sizes and pixel densities, all target sizes are represented in physical units (millimeters). Physical units can be converted to pixels by using the following equation:

Pixels = Pixel Density × Measurement

The following example uses this formula to calculate the pixel size of a 9 mm target on a 135 pixel per inch (PPI) display at a 1x scaling plateau:

Pixels = 135 PPI × 9 mm

Pixels = 135 PPI × (0.03937 inches per mm × 9 mm)

Pixels = 135 PPI × 0.35433 inches

Pixels = 48 pixels

This result must be adjusted according to each scaling plateau defined by the system.

Thresholds

Distance and time thresholds may be used to determine the outcome of an interaction.

For example, when a touch-down is detected, a tap is registered if the object is dragged less than 2.7 mm from the touch-down point and the touch is lifted within 0.1 second or less of the touch-down. Moving the finger beyond this 2.7 mm threshold results in the object being dragged and either selected or moved (for more information, see Guidelines for cross-slide). Depending on your app, holding the finger down for longer than 0.1 second may cause the system to perform a self-revealing interaction (for more information, see Guidelines for visual feedback).

Target sizes

There are no definitive recommendations for how large a target should be or where it should be placed within your app. The size and target area of an object depend on various factors, including the user experience scenarios and interaction context.

The following diagram shows how target size is typically a combination of a visual target, actual target size, and any padding between the actual target and other potential targets.

Diagram showing the recommended sizes for the visual target, actual target, and padding.

The following table lists the minimum and recommended sizes for all components of a touch target.

Target component	Minimum size	Recommended size
Padding	2 mm	Not applicable.
Visual target size	< 60% of actual size	90-100% of actual size
Actual target size	9 x 9 mm (48 x 48 px @ 1x) For elements that are smaller than recommended by UX guidelines, the distance from the center of one element to the center of the other element should be at least 9mm.	Not applicable
Total target size	11 x 11 mm (approximately 60 px: three 20-px grid units @ 1x)	13.5 x 13.5 mm (72 x 72 px @ 1x) This implies that the size of the actual target and padding combined should be larger than their respective minimums.

These target size recommendations can be adjusted as required by your particular scenario. Some of the considerations that went into these recommendations include:

Frequency of Touches: Consider making targets that are repeatedly or frequently pressed larger than the minimum size.
Error Consequence: Targets that have severe consequences if touched in error should have greater padding and be placed further from the edge of the content area. This is especially true for targets that are touched frequently.
Position in the content area
Form factor and screen size
Finger posture
Touch visualizations
Hardware and touch digitizers

Targeting assistance

Windows provides targeting assistance to support scenarios where the minimum size or padding recommendations presented here are not applicable; for example, hyperlinks on a webpage, calendar controls, drop down lists and combo boxes, or text selection.

These targeting platform improvements and user interface behaviors work together with visual feedback (disambiguation UI) to improve user accuracy and confidence. For more information, see Guidelines for visual feedback.

If a touchable element must be smaller than the recommended minimum target size, the following techniques can be used to minimize the targeting issues that result.

Tethering

Tethering is a visual cue (a connector from a contact point to the bounding rectangle of an object) used to indicate to a user that they are connected to, and interacting with, an object even though the input contact isn't directly in contact with the object. This can occur when:

A touch contact was first detected within some proximity threshold to an object and this object was identified as the most likely target of the contact.
A touch contact was moved off an object but the contact is still within a proximity threshold.

This feature is not exposed to Windows Store app using JavaScript developers.

Scrubbing

Scrubbing means to touch anywhere within a field of targets and slide to select the desired target without lifting the finger until it is over the desired target. This is also referred to as "take-off activation", where the object that is activated is the one that was last touched when the finger was lifted from the screen.

Use the following guidelines when you design scrubbing interactions:

Scrubbing is used in conjunction with disambiguation UI. For more information, see Guidelines for visual feedback.
The recommended minimum size for a scrubbing touch target is 20 px (3.75 mm @ 1x size).
Scrubbing takes precedence when performed on a pannable surface, such as a webpage.
Scrubbing targets should be close together.
An action is canceled when the user drags a finger off a scrubbing target.
Tethering to a scrubbing target is specified if the actions performed by the target are non-destructive, such as switching between dates on a calendar.
Tethering is specified in a single direction, horizontally or vertically.

Conceptual

Guidelines for common user interactions

Touch interaction design

Tutorial (Windows Store apps using JavaScript)

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: Pointers

Tutorial (Windows Store apps using C++ and DirectX)