How users interact with input devices (HTML)

Here's a list of common interactions, and how they map to gestures across touch, touchpad, mouse, keyboard , and pen/stylus for Windows 8.1.

See this feature in action as part of our App features, start to finish series: User interaction: Touch input... and beyond

Interactions and devices

Windows 8.1 supports a variety of input devices, from touch to keyboard. It also provides an intuitive and efficient interaction experience that is unique to each device, but functionally consistent across devices and modes, such as touch keyboard, mouse wheel, and pen eraser.

Design the UI of your Windows Store app for touch but consider the design implications for a variety of devices:

  • Touchpad, which combines touch and mouse experiences
  • Mouse
  • Pen/stylus, specialized for digital ink
  • Keyboard devices, for text editing and command shortcuts
TouchTouchpadMouseKeyboard (hardware)Pen/Stylus
Select
Swipe opposite the scrolling direction (see Guidelines for cross-slide)Tap two fingersRight-clickSpacebarSwipe opposite the scrolling direction (see Guidelines for cross-slide)
Show app bar
Swipe from top or bottom edgeSwipe from top or bottom edgeRight-clickWindows Logo Key+Z, menu keySwipe from top or bottom edge
Show charms
Swipe from right edgeSwipe from right edgeHover over top or bottom-right cornerWindows Logo Key+CSwipe from right edge
Context menu
Tap on selected text, press and holdTap two fingers on selected text, press and holdRight-clickMenu keyTap on selected text, press and hold
Launch/activate
TapTapLeft-clickEnterTap
Scrolling short distance
SlideSlide two fingersScroll bar, arrow keys, left-click and slide Arrow keysScroll bar
Scrolling long distance
Slide (including inertia) Slide two fingers (including inertia)Scroll bar, mouse wheel, left-click and slidePage up, Page downScroll bar
Rearrange (drag)
Slide opposite the scrolling direction past a distance threshold (see Guidelines for cross-slide)Press, hold, and slideLeft-click and slide Ctrl-C or Ctrl-X, Ctrl-VSlide opposite the scrolling direction past a distance threshold (see Guidelines for cross-slide)
Zoom
Pinch, stretchPinch, stretchMouse wheel, Ctrl+mouse wheel, UI commandCtrl+Plus(+) or Minus(-)UI command
Rotate
TurnTurnCtrl+Shift+mouse wheel, UI commandCtrl+Plus(+) or Minus(-)UI command
Insert cursor/select text
Tap, tap on gripperTapLeft-click+slide, double-clickArrow keys, Shift+arrow keys, Ctrl+arrow keys, and so onTap, tap on gripper
More information
Press and holdPress and holdHover (with time threshold)Move focus rectangle (with time threshold)Press and hold
Move focus
N/A N/A N/A Arrow keys, TabN/A
Interaction feedback
Touch visualizationsCursor movement, cursor changesCursor movement, cursor changesFocus rectanglesPen visualizations

 

Conceptual

Responding to user interaction

Touch interaction design

Reference

Windows.UI.Core

Windows.UI.Input

Windows.UI.Xaml.Input

Samples (DOM)

HTML scrolling, panning and zooming sample

Input: DOM pointer event handling sample

Input: Instantiable gestures sample

Samples (Windows Store app APIs)

Input: Manipulations and gestures (JavaScript) sample

Input: Windows 8 gestures sample

Input: XAML user input events sample

XAML scrolling, panning, and zooming sample

Samples (DirectX)

DirectX touch input sample

Input: Manipulations and gestures (C++) sample