Edit

Share via

Guidelines for touch targets

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

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, WinUI 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

  • Last updated on