Touch interactions for Windows
Windows 8.1 provides a concise set of touch interactions that are used throughout the system. Applying this touch language consistently makes your app feel familiar to what users already know. This increases user confidence by making your app easier to learn and use. For information on touch language implementation, see Gestures, manipulations, and interactions.
In this article:
Provide immediate feedback
Increase user confidence by providing immediate visual feedback whenever the screen is touched. Interactive elements should react by changing color, changing size, or by moving. Items that are not interactive should show system touch visuals only when the screen is touched.
Content follows finger
Elements that can be moved or dragged by a user, such as a canvas or a slider, should follow the user's finger when moving. Buttons and other elements that do not move should return to their default state when the user slides or lifts their finger off the element.
Keep interactions reversible
If you pick up a book, you can put it back down where you found it. Touch interactions should behave in a similar way—they should be reversible. Provide visual feedback to indicate what will happen when the user lifts their finger. This will make your app safe to explore using touch.
Allow any number of fingers
People often touch with more than one finger and don’t even realize it. That's why touch interactions shouldn’t change radically based on the number of fingers touching the screen. Just like the real world, sliding something with one or three fingers shouldn't make a difference.
Press and hold to learn
This touch interaction causes detailed information or teaching visuals (for example, a tooltip or context menu) to be displayed without a commitment to an action. Anything displayed this way should not prevent users from panning if they begin sliding their finger.
Important Press and hold can be used for selection in cases where both horizontal and vertical panning is enabled.
Tap for primary action
Tapping on an element invokes its primary action, for instance launching an app or executing a command.
Slide to pan
Slide is used primarily for panning interactions but can also be used for moving (where panning is constrained to one direction), drawing, or writing. Slide can also be used to target small, densely packed elements by scrubbing (sliding the finger over related objects such as radio buttons).
Swipe to select, command, and move
Sliding the finger a short distance, perpendicular to the panning direction (where panning is constrained to one direction), selects objects in a list or grid. Display the app bar with relevant commands when objects are selected.
Pinch and stretch to zoom
While the pinch and stretch gestures are commonly used for resizing, they also enable jumping to the beginning, end, or anywhere within the content with semantic zoom. Semantic zoom provides a zoomed out view for showing groups of items and quick ways to dive back into them.
Turn to rotate
Rotating with two or more fingers causes an object to rotate. Rotate the device itself to rotate the entire screen.
Swipe from edge for app commands
App commands are revealed by swiping from the bottom or top edge of the screen. Use the app bar to display app commands.
Swipe from edge for system commands
Swiping from the right edge of the screen reveals the charms that expose system commands.
Swiping from the left edge cycles through currently running apps.
Sliding from the top edge toward the bottom edge of the screen closes the current app.
Sliding from the top edge down and to the left or right edge places the current app on that side of the screen.
Note Users can perform direct manipulations like the slide-to-pan, pinch-to-zoom, and turn-to-rotate interactions simultaneously and with any number of touch points.
Size vs. efficiency: Target size influences error rate
There's no perfect size for touch targets. Different sizes work for different situations. Actions with severe consequences (such as delete and close) or frequently used actions should use large touch targets. Infrequently used actions with minor consequences can use small targets.
Target size guidelines
7x7 mm: Recommended minimum size
7x7 mm is a good minimum size if touching the wrong target can be corrected in one or two gestures or within five seconds. Padding between targets is just as important as target size.
When accuracy matters
Close, delete, and other actions with severe consequences can’t afford accidental taps. Use 9x9 mm targets if touching the wrong target requires more than two gestures, five seconds, or a major context change to correct.
When it just won't fit
If you find yourself cramming things to fit, it’s okay to use 5x5 mm targets as long as touching the wrong target can be corrected with one gesture. Using 2 mm of padding between targets is extremely important in this case.
As you plan the UI and the interactions supported by your app, keep in mind the wide range of abilities, disabilities, and preferences of your users. Follow accessible design principles from the beginning to help make your app accessible to the widest possible audience. For more info on planning for accessibility, see Guidelines for accessibility.
People often blame themselves for having "fat fingers." But even baby fingers are wider than most touch targets.
The image on the left shows the width of the average adult finger is about 11 millimeters (mm) wide, while a baby's is 8 mm, and some basketball players have fingers wider than 19 mm!
Designing for touch is more than designing what’s displayed on the screen. It requires designing for how the device will be held (grip).
Typically, different people have a few favorite grips when holding a tablet.
The current task and how it’s presented usually determines which grip is used. However, the immediate environment and physical comfort also affect how long a grip is used and how often it’s changed.
Try optimizing your app for different kinds of grips. But if an interaction naturally lends itself to a specific grip, optimize for that.
Because slates are most often held along the side, the bottom corners and sides are ideal locations for interactive elements.
Content in the top half of the screen is easier to see than content in the bottom half, which is often blocked by the hands or ignored.
|Grip||Grip and interaction||Design considerations|
|One hand holding, one hand interacting with light to medium interaction||
|Two hands holding, thumbs interacting with light to medium interaction||
|Device rests on table or legs, two hands interacting with light to heavy interaction||
|Device rests on table or stand, with or without interaction||
- Responding to user interaction
- Downloadable version of Touch interactions
- User interaction: Touch input... and beyond
- Guidelines for targeting (Windows Store apps)
- Guidelines for touch keyboard and handwriting panel (Windows Store apps)