Guidelines for touch targets

  • Artikel

All interactive UI elements in your Windows application must be large enough for users to accurately access and use, regardless of device type or input method.

Supporting touch input (and the relatively imprecise nature of the touch contact area) requires further optimization with respect to target size and control layout as the larger, more complex set of input data reported by the touch digitizer is used to determine the user's intended (or most likely) target.

All UWP controls have been designed with default touch target sizes and layouts that enable you to build visually balanced and appealing apps that are comfortable, easy to use, and inspire confidence.

In this topic, we describe these default behaviors so you can design your app for maximum usability using both platform controls and custom controls (should your app require them).

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

Fluent Standard sizing

Fluent Standard sizing was created to provide a balance between information density and user comfort. Effectively, all items on the screen align to a 40x40 effective pixels (epx) target, which lets UI elements align to a grid and scale appropriately based on system level scaling.

Note

For more info on effective pixels and scaling, see Screen sizes and breakpoints

For more info on system level scaling, see Alignment, margin, padding.

Fluent Compact sizing

Applications can display a higher level of information density with Fluent Compact sizing. Compact sizing aligns UI elements to a 32x32 epx target, which lets UI elements to align to a tighter grid and scale appropriately based on system level scaling.

Examples

Compact sizing can be applied at the page or grid level.

Page level

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

Grid level

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

Target size

In general, set your touch target size to 7.5mm square range (40x40 pixels on a 135 PPI display at a 1.0x scaling plateau). Typically, UWP controls align with 7.5mm touch target (this can vary based on the specific control and any common usage patterns). See Control size and density for more detail.

These target size recommendations can be adjusted as required by your particular scenario. Here are some things to consider:

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

Samples

Archive samples