Touchpad design guidelines

Article
06/24/2021

Design your app so that users can interact with it through a touchpad. A touchpad combines both indirect multi-touch input with the precision input of a pointing device, such as a mouse. This combination makes the touchpad suited to both a touch-optimized UI and the smaller targets of productivity apps.

touchpad

Touchpad interactions require three things:

A standard touchpad or a Windows Precision Touchpad.

Precision touchpads are optimized for Windows app devices. They enable the system to handle certain aspects of the touchpad experience natively, such as finger tracking and palm detection, for a more consistent experience across devices.
The direct contact of one or more fingers on the touchpad.
Movement of the touch contacts (or lack thereof, based on a time threshold).

The input data provided by the touchpad sensor can be:

Interpreted as a physical gesture for direct manipulation of one or more UI elements (such as panning, rotating, resizing, or moving). In contrast, interacting with an element through its properties window or other dialog box is considered indirect manipulation.
Recognized as an alternative input method, such as mouse or pen.
Used to complement or modify aspects of other input methods, such as smudging an ink stroke drawn with a pen.

A touchpad combines indirect multi-touch input with the precision input of a pointing device, such as a mouse. This combination makes the touchpad suited to both touch-optimized UI and the typically smaller targets of productivity apps and the desktop environment. Optimize your Windows app design for touch input and get touchpad support by default.

Because of the convergence of interaction experiences supported by touchpads, we recommend using the PointerEntered event to provide mouse-style UI commands in addition to the built-in support for touch input. For example, use previous and next buttons to let users flip through pages of content as well as pan through the content.

The gestures and guidelines discussed in this topic can help to ensure that your app supports touchpad input seamlessly and with minimal code.

The touchpad language

A concise set of touchpad interactions are used consistently throughout the system. Optimize your app for touch and mouse input and this language makes your app feel instantly familiar for your users, increasing their confidence and making your app easier to learn and use.

Users can set far more Precision Touchpad gestures and interaction behaviors than they can for a standard touchpad. These two images show the different touchpad settings pages from Settings > Devices > Mouse & touchpad for a standard touchpad and a Precision Touchpad, respectively.

standard touchpad settings

^{Standard\ touchpad\ settings}

windows precision touchpad settings

^{Windows\ Precision\ Touchpad\ settings}

Here are some examples of touchpad-optimized gestures for performing common tasks.

Term	Description
Three-finger tap	User preference to search with Cortana or show Action Center.
Three finger slide	User preference to open the virtual desktop Task View, show Desktop, or switch between open apps.
Single finger tap for primary action	Use a single finger to tap an element and invoke its primary action (such as launching an app or executing a command).
Two finger tap to right-click	Tap with two fingers simultaneously on an element to select it and display contextual commands.
Two finger slide to pan	Slide is used primarily for panning interactions but can also be used for moving, drawing, or writing.
Pinch and stretch to zoom	The pinch and stretch gestures are commonly used for resizing and Semantic Zoom.
Single finger press and slide to rearrange	Drag an element.
Single finger press and slide to select text	Press within selectable text and slide to select it. Double-tap to select a word.
Left and right click zone	Emulate the left and right button functionality of a mouse device.

Hardware

Query the mouse device capabilities (MouseCapabilities) to identify what aspects of your app UI the touchpad hardware can access directly. We recommend providing UI for both touch and mouse input.

For more info about querying device capabilities, see Identify input devices.

Visual feedback

When a touchpad cursor is detected (through move or hover events), show mouse-specific UI to indicate functionality exposed by the element. If the touchpad cursor doesn't move for a certain amount of time, or if the user initiates a touch interaction, make the touchpad UI gradually fade away. This keeps the UI clean and uncluttered.
Don't use the cursor for hover feedback, the feedback provided by the element is sufficient (see the Cursors section below).
Don't display visual feedback if an element doesn't support interaction (such as static text).
Don't use focus rectangles with touchpad interactions. Reserve these for keyboard interactions.
Display visual feedback concurrently for all elements that represent the same input target.

For more general guidance about visual feedback, see Guidelines for visual feedback.

Cursors

A set of standard cursors is available for a touchpad pointer. These are used to indicate the primary action of an element.

Each standard cursor has a corresponding default image associated with it. The user or an app can replace the default image associated with any standard cursor at any time. UWP apps specify a cursor image through the PointerCursor function.

If you need to customize the mouse cursor:

Always use the arrow cursor () for clickable elements. don't use the pointing hand cursor () for links or other interactive elements. Instead, use hover effects (described earlier).
Use the text cursor () for selectable text.
Use the move cursor () when moving is the primary action (such as dragging or cropping). Don't use the move cursor for elements where the primary action is navigation (such as Start tiles).
Use the horizontal, vertical and diagonal resize cursors (, , , ), when an object is resizable.
Use the grasping hand cursors (, ) when panning content within a fixed canvas (such as a map).