Skip to main content
Responding to touchpad interactions (Windows Runtime apps using JavaScript and HTML)

Applies to Windows only

Design and build Windows Store apps that users can interact with through a touchpad.

Tip  The info in this topic is specific to developing Windows Store apps using JavaScript.

See Responding to touchpad input (XAML) for Windows Store app using C++, C#, or Visual Basic.

Prerequisites:  If you're new to developing Windows Store apps using JavaScript, have a look through these topics to get familiar with the technologies discussed here.

Create your first Windows Store app using JavaScript

Roadmap for Windows Store apps using JavaScript

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 interaction, start to finish (HTML)

User interaction customization, start to finish (HTML)

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.

Samples:  See this functionality in action in our Windows Store app samples.

User interaction customization, start to finish sample

Input: Device capabilities sample

Input: DOM pointer event handling sample

HTML scrolling, panning and zooming sample

Input: Manipulations and gestures (JavaScript) sample

Input: Instantiable gestures sample

Overview

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.

User experience guidelines for supporting touchpad interactions

Here are some guidelines for supporting touchpad interactions.

The Windows 8.1 touchpad language

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.

TermDescription

Hover to learn

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.

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

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.

Edges for system commands

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.

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 on querying device capabilities, see Quickstart: Identifying pointer 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 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.

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. Windows Store apps specify a cursor image through the PointerCursor function.

If you need to customize the touchpad cursor:

  • Always use the arrow cursor ( Arrow cursor) for clickable elements. Don't use the pointing hand cursor ( Pointing hand cursor) for links or other interactive elements. Instead, use hover effects (described earlier).
  • Use the text cursor ( Text cursor) for selectable text.
  • Use the move cursor ( 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 ( Vertical resize cursor, Horizontal resize cursor, Diagonal resize cursor (lower left, upper right), Diagonal resize cursor (upper left, lower right)), when an object is resizable.
  • Use the grasping hand cursors ( Grasping hand cursor (open), Grasping hand cursor (closed)) when panning content within a fixed canvas (such as a map).

Related topics

Conceptual
Responding to user interaction