How users interact with input devices (HTML)

Artykuł
08/31/2015

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

Touch	Touchpad	Mouse	Keyboard (hardware)	Pen/Stylus
Select
Swipe opposite the scrolling direction (see Guidelines for cross-slide)	Tap two fingers	Right-click	Spacebar	Swipe opposite the scrolling direction (see Guidelines for cross-slide)
Show app bar
Swipe from top or bottom edge	Swipe from top or bottom edge	Right-click	Windows Logo Key+Z, menu key	Swipe from top or bottom edge
Show charms
Swipe from right edge	Swipe from right edge	Hover over top or bottom-right corner	Windows Logo Key+C	Swipe from right edge
Context menu
Tap on selected text, press and hold	Tap two fingers on selected text, press and hold	Right-click	Menu key	Tap on selected text, press and hold
Launch/activate
Tap	Tap	Left-click	Enter	Tap
Scrolling short distance
Slide	Slide two fingers	Scroll bar, arrow keys, left-click and slide	Arrow keys	Scroll bar
Scrolling long distance
Slide (including inertia)	Slide two fingers (including inertia)	Scroll bar, mouse wheel, left-click and slide	Page up, Page down	Scroll bar
Rearrange (drag)
Slide opposite the scrolling direction past a distance threshold (see Guidelines for cross-slide)	Press, hold, and slide	Left-click and slide	Ctrl-C or Ctrl-X, Ctrl-V	Slide opposite the scrolling direction past a distance threshold (see Guidelines for cross-slide)
Zoom
Pinch, stretch	Pinch, stretch	Mouse wheel, Ctrl+mouse wheel, UI command	Ctrl+Plus(+) or Minus(-)	UI command
Rotate
Turn	Turn	Ctrl+Shift+mouse wheel, UI command	Ctrl+Plus(+) or Minus(-)	UI command
Insert cursor/select text
Tap, tap on gripper	Tap	Left-click+slide, double-click	Arrow keys, Shift+arrow keys, Ctrl+arrow keys, and so on	Tap, tap on gripper
More information
Press and hold	Press and hold	Hover (with time threshold)	Move focus rectangle (with time threshold)	Press and hold
Move focus
N/A	N/A	N/A	Arrow keys, Tab	N/A
Interaction feedback
Touch visualizations	Cursor movement, cursor changes	Cursor movement, cursor changes	Focus rectangles	Pen visualizations