Touch interactions for Windows

Applies to Windows only

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.

 

User interacting with tablet by using touch

 

In this article:

Design principles for touch

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.

Touch language

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.

Touch targets

Size vs. efficiency: Target size influences error rate

Chart that shows how touch errors decrease for larger targets.

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 recommended minimum size

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.

9x9 recommended size for accuracy

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.

5x5 minimum size

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.

 

Accessibility

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.

Fingers sizes

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!

Chart that shows the wide variation in finger widths

Posture and grip

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.

Interaction areas

Because slates are most often held along the side, the bottom corners and sides are ideal locations for interactive elements.

Interaction areas

Reading areas

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.

Reading areas

Common grips

GripGrip and interactionDesign considerations
Grip with one hand and interact with the otherOne hand holding, one hand interacting with light to medium interaction
  • Right or bottom edges offer quick interaction.
  • Lower right corner might be occluded by hand and wrist.
  • Limited reaching makes touching more accurate.
  • Reading, browsing, email, and light typing.
Grip with both hands and interact with thumbsTwo hands holding, thumbs interacting with light to medium interaction
  • Lower left and right corners offer quick interaction.
  • Anchored thumbs increase touching accuracy.
  • Anything in the middle of the screen is difficult to reach.
  • Touching middle of screen requires changing posture.
  • Reading, browsing, light typing, gaming.
Both hands interactingDevice rests on table or legs, two hands interacting with light to heavy interaction
  • Bottom of the screen offers quick interaction.
  • Lower corners might be occluded by hands and wrists.
  • Reduced need for reaching makes touching more accurate.
  • Reading, browsing, email, heavy typing.
Passive interaction with no gripDevice rests on table or stand, with or without interaction
  • Bottom of screen offers quick interaction.
  • Touching top of the screen occludes content.
  • Touching top of screen might knock a docked device off balance.
  • Interaction at a distance reduces readability and accuracy.
  • Increase target size to improve readability and precision.
  • Watching a movie, listening to music.

 

Related topics

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)

 

 

Show:
© 2014 Microsoft. All rights reserved.