Responding to touchpad interactions (HTML)
Design and build Windows Store apps that users can interact with through a touchpad.
See Responding to touchpad input (XAML) for Windows Store app using C++, C#, or Visual Basic.
Learn about events with Quickstart: adding HTML controls and handling events
App features, start to finish: Explore this functionality in more depth as part of our App features, start to finish series
User experience guidelines:
The platform control libraries (HTML and XAML) provide the full Windows user interaction experience, including standard interactions, animated physics effects, and visual feedback. If you don't need customized interaction support, use these built-in controls.
If the platform controls are not sufficient, these user interaction guidelines can help you provide a compelling and immersive interaction experience that is consistent across input modes. These guidelines are primarily focused on touch input, but they are still relevant for touchpad, mouse, keyboard, and stylus input.
- Guidelines for common user interactions
- Guidelines for optical zoom and resizing
- Guidelines for panning
- Guidelines for rotation
- Guidelines for Semantic Zoom
- Guidelines for visual feedback
Samples: See this functionality in action in our Windows Store app samples.
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 the Windows 8.1 touch-optimized UI and the smaller targets of productivity apps and the desktop environment. Optimize your Windows Store app design for touch input and get touchpad support by default.
Because of the convergence of interaction experiences supported by touchpads we recommend providing 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.
Windows 8.1 supports a set of familiar gestures that are optimized for touchpad input. The gestures and guidelines discussed in this topic help you ensure your app supports touchpad input seamlessly and with minimal code.
Here are some guidelines for supporting touchpad interactions.
Windows 8.1 provides a concise set of touchpad interactions that 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.
Hover over an element to display more detailed info or teaching visuals (such as a tooltip) without a commitment to an action. For more info on tooltips, see Adding tooltips.
Use a single finger to tap an element and invoke its primary action (such as launching an app or executing a command).
Tap with two fingers simultaneously to display the app bar with global commands or on an element to select it and display the app bar with contextual commands.
Note Two finger tap to display a context menu if selection or app bar commands are not appropriate UI behaviors. However, we strongly recommend that you use the app bar for all command behaviors.
Slide is used primarily for panning interactions but can also be used for moving, drawing, or writing.
The pinch and stretch gestures are commonly used for resizing and Semantic Zoom.
Drag an element.
Press within selectable text and slide to select it. Double-tap to select a word.
Swiping from the right edge (or left edge on right-to-left layouts) of the screen reveals the charms that expose system commands.
Swiping from the left edge (or right edge on right-to-left layouts) reveals a list of running apps.
Emulate the left and right button functionality of a mouse device.
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 on querying device capabilities, see Quickstart: Identifying pointer devices.
- 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 Cursors 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 on visual feedback, see Guidelines for visual feedback.
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. Windows Store apps specify a cursor image through the PointerCursor function.
If you need to customize the touchpad 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).
- Responding to user interaction