Optimize the Window store app design for touch input and get touchpad support by default.
Design a Windows store app that users can interact with through the touchpad. The touchpad combines an indirect multi-touch input and precise input of a pointing device such as a mouse. This combination makes the touchpad suitable for both Windows 8.1 touch-optimized UIs and smaller targets for desktop environment efficiency applications.
This topic describes the design considerations for touchpad interaction. For information about implementing touchpad interactions, see responding to touchpad interactions.
Windows 8.1 Touch Pad language
Windows 8.1 Provides a set of simple touchpad interactions that are common throughout the system.
Terminology |
Description |
Right-click with two finger clicks |
Use two finger taps to display the app bar with global commands, or use two fingers to click on the element to select it and display the app bar with contextual commands. Note When the Select or Apply Bar command does not fit the UI behavior, the two-finger tap displays the context menu. However, we strongly recommend that you use the app bar for all command behaviors. |
Slide two fingers to pan |
Sliding is primarily used for panning interactions, but it can also be used to move, draw, or write. |
Pinch and stretch to scale |
Pinch and stretch on the Touchpad resize and semantic zoom. |
Edge of System command |
Swipe from the right edge of the touchpad (or the left edge of a right-to-left layout) to display a charm that contains system commands. Swipe from the left edge of the touchpad (or the right edge of a right-to-left layout) to display a list of running apps. |
Click and right-click zones |
Simulates the left and right button functions of a mouse device. |
Hover to learn |
Hover over an element to display more detailed information or instructional visualizations, such as ToolTips, without committing the action. For more information about ToolTips, see Add ToolTips. |
Use one finger to tap for the main action |
Use a single finger to tap an element and invoke its main action (such as starting an app or executing a command). |
Use one finger to hold and swipe to rearrange |
Drag the element. |
Use one finger to hold and swipe to select text |
Press and swipe inside the selectable text to select it. Double-click to select a Word. |
Visual Feedback Guide
- When the touchpad cursor is detected (by moving or hovering events), the mouse-specific UI is displayed to indicate the functionality that the element displays. If the touchpad cursor does not move for a certain period of time, or if the user initiates touch interaction, let the touchpad UI fade out gradually. This will make the UI clean and tidy.
- Do not use the mouse to get hover feedback, the feedback provided by the element is sufficient.
- Do not display visual feedback if the element does not support interactivity, such as static text.
- Do not use the focus rectangle in conjunction with the touchpad interaction. The focus rectangle is reserved for keyboard interaction.
- Displays visual feedback for all elements that represent the same input target.
For a more general guide to visual feedback, see the Visual feedback Guide.
Win8 Interactive ux--Touch pad interaction