How users interact with input devices (HTML)

Applies to Windows only

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

 

Related topics

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

 

 

Show:
© 2014 Microsoft