Overview
A concise set of touch interactions used consistently throughout the system will make our apps feel familiar and aligned with other apps users already know. We can increase confidence by making our interface easier to learn and use.
Team
Liz H., Cameron C., Blake H., Brandon H., Allison H., Patrick C., Hyun S.
Gestures
Global. Simple. Accessible.
Touch user interface enables not only the sense of touch to activate computer-based functions, it also allows the user, particularly those with visual impairments, an added level of interaction based upon tactile or Braille input.
- Forget what you know about mouse & keyboard. Touch is a different beast
- Allow ample room for gestures to limit interference errors
- Provide adequate visual indication when items are actionable
- Visually help users understand what action they are performing
- Content that can be moved should follow finger
- Make it naturally simple. Limit the number of supported gestures
- Use fingers for what they are good at
- Keep interaction reversible
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.
* Interactions that require compound gestures such as double tap or press and hold need to be performed within a certain amount of time.
* Avoid timed interactions like these because they are often triggered accidentally and are difficult to time correctly
Interaction feedback
Increase user confidence by providing immediate visual feedback whenever the screen is touched. All interactive elements should react by changing color, changing size, or by 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.
Touch Targets
Invisible. Pragmatic. Strategic.
Designing for touch is a complex balance between size, spacing, and visuals. Achieving this balance reduces what is known as the “index of difficulty in target acquisition,” or, in other words, it makes controls easier to press.
- Touchscreens sense the geometric center of a users contact point
- Touch is imprecise. Precise movements are hard
- Touch targets are not visible and can be larger than the related visual element
- Frequently touched UI should have larger touch targets
- UI elements should be 60-100% of the touch target
- UI elements too close to the edge of the screen are more difficult to hit
- Sequential tasks require additional space for precision (multi delete)
- Use the grid to help provide adequate space between TUI elements
Finger sizes
A mouse and pen are precise, while fingers aren’t, and small targets require precision. Use large targets that support direct manipulation and provide rich touch interaction data. Swiping down on a large item is quick and easy because the entire item is a target for selection.
* People often blame themselves for having “Fat” fingers but even baby fingers are wider then most touch targets.
Size vs efficiency
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 with enough padding to avoid accidental taps.
7×7 mm is a good size if touching the wrong target can be corrected in one or two gestures.
At 135 DPI
40 px = 7mm
10 px = 2mm padding
Contact points
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.
When accuracy matters, actions like close, delete or other severe consequences, you cant afford accidental taps
At 135 DPI
5 px = 1mm
Postures
Insightful. Considerate. Friendly.
Designing for touch is more than designing what’s displayed on the screen. It requires designing for how the device will be held (single hand, both hands). Immediate environment and physical comfort also affect how long a grip is used and how often it’s changed.
- Optimize the interface for different kinds of grips
- Think about how landscape or portrait modes effect your content
- Anchored thumbs increase touching accuracy
- Touching top of screen might knock a docked device off balance
- Anything in the middle of the screen is difficult to reach
- Interaction at a distance reduces readability and accuracy
- Touching top of screen might knock a docked device off balance
- When holding with two hands, action in the middle requires changing posture
Interaction areas
Because slates are most often held along the side, the bottom corners and sides are ideal locations for interactive elements. In addition, Most people hold a slate with their left hand and touch it with their right. In general, elements placed on the right side are easier to touch. Phone interactions are mainly thumb based and placing interactive elements within reach of the thumb’s reach are ideal.
Reading areas
Content in the top half of the screen is easier to see than content on the bottom half which is often blocked by the hands or just plain ignored.
Holding positions
Typically, different people have a few favorite grips when holding a tablet. Your designs should consider the different holding position and interactions required. Think about common “On the Go” scenarios where people tend to read, browse, and do a little light typing the most. Remember the environment matters as well. Mobile devices tend to be used on the bus, in coffee shops, in front of the tv where distractions are higher.
One Hand – Hold with one hand and interact with the other hand
- Right or bottom edge actions
- Lower right corner blocked by hand
- Limit reaching for accuracy
Two Hands – Hold with two hands and use your thumbs to interact
- Lower leG and right corner ac0ons
- Anchored thumbs increase accuracy
- Middle of the screen is difficult to reach
Rest on Lap – Rest device on lap or table and interact with two hands for faster typing
- Bottom offer quick interaction
- Lower corners blocked by hands
- Reduced need for reaching
Prop Up – Used for watching movies where little interaction is required
- Bottom offer quick interaction
- Touching top blocks content
- Interaction at a distance reduces accuracy