Skip to content

Latest commit

 

History

History
172 lines (119 loc) · 8.31 KB

guidelines-for-targeting.md

File metadata and controls

172 lines (119 loc) · 8.31 KB
author Description title ms.assetid label template ms.author ms.date ms.topic ms.prod ms.technology keywords ms.localizationpriority
Karl-Bridge-Microsoft
This topic describes the use of contact geometry for touch targeting and provides best practices for targeting in Windows Runtime apps.
Targeting
93ad2232-97f3-42f5-9e45-3fc2143ac4d2
Targeting
detail.hbs
kbridge
02/08/2017
article
windows
uwp
windows 10, uwp
medium

Guidelines for targeting

Touch targeting in Windows 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.

Important APIs: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

This topic describes the use of contact geometry for touch targeting and provides best practices for targeting in UWP apps.

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

In general, set your touch target size to 9 mm square or greater (48x48 pixels on a 135 PPI display at a 1.0x scaling plateau). Avoid using touch targets that are less than 7 mm square.

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 the 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

Most users won't realize a visual target is touchable if it's less than 4.2 mm square (60% of the recommended minimum target size of 7 mm).
Actual target size 7 mm square Greater than or equal to 9 mm square (48 x 48 px @ 1x)
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 UWP 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.

Related articles

Samples

Archive samples