Touch

Create thoughtful mobile designs with easy touch targets, awareness of how users hold devices and optimal interaction areas.

Hand holding iPhone with another hand making a swiping gesture Hand holding iPhone with another hand making a swiping gesture

Fit for fingers

Touch aids users in understanding where they can physically interact with the screen simply and naturally.

Gestures

People often touch with more than one finger. Touch interactions should be similar no matter the number of fingers touching the screen.

A finger tapping a screen A finger tapping a screen

Tap

Invokes a primary action

A finger tapping a screen with the point of impact indicating that the finger has touched the screen twice A finger tapping a screen with the point of impact indicating that the finger has touched the screen twice

Double tap

Not commonly used on mobile devices

A finger pressing on a screen and holding A finger pressing on a screen and holding

Press-and-hold

Displays content without user commitment

A finger swiping a screen, with the point of impact colored to indicate that the finger moved from left to right A finger swiping a screen, with the point of impact colored to indicate that the finger moved from left to right

Swipe or flick

To scroll, or pan from side to side

A hand pinching two fingers together on a screen A hand pinching two fingers together on a screen

Pinch

Primarily used for content with semantic zoom (out)

A hand with the thumb and first finger moving away from each other on a screen A hand with the thumb and first finger moving away from each other on a screen

Stretch

Primarily used for content with semantic zoom (in)

A finger sliding down while touching a screen A finger sliding down while touching a screen

Vertical slide

Primarily used for scrolling

A finger sliding right to left on a screen A finger sliding right to left on a screen

Horizontal slide

Primarily used for panning interactions

A hand holding a phone making shaking movements A hand holding a phone making shaking movements

Shake

To undo or redo an action

Avoid interactions that require compound gestures such as double-tap or timed press-and-hold interactions. They are often triggered accidentally and are difficult to time correctly.

Feedback

Increase users’ confidence by providing immediate visual feedback when they touch the screen. Interactive elements react by changing color, size or by moving.

Targets

A well-designed touch experience balances size, spacing and visuals to make controls easier to press.

An animated gif of a point on a screen being touched by an invisible finger, indicating users being slightly inexact when they push touchscreen buttons
  • Touch screens sense the geometric center of a user’s contact point.
  • Users are imprecise in their movements.
  • Touch targets are not visible and can be larger than the related visual element.
A smaller information button being blown up to be larger and easier to push A smaller information button being blown up to be larger and easier to push
  • Frequently touched areas should have larger touch targets.
  • A user interface element should be 60 to 100 percent of the touch target.
  • Sequential tasks, such as multi-delete, require additional space for precision.
  • Design grids provide adequate space between tangible user interface elements.

Target sizes

There’s no perfect size for touch targets. Different sizes work for different situations. Actions with severe consequences or frequently used actions require large touch targets with enough padding to avoid accidental taps.

Two 7mm by 7mm buttons side-by-side with 2mm space in between the buttons
  • 7 by 7 mm is a good size if touching the wrong target can be corrected in one or two gestures.
  • At 326 PPI, 90 px is equal to 7 mm.

Finger sizes

A mouse and pen are precise but fingers are not, 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.

An index finger size ranging from an infant finger point at 8mm to a giant finger point at 19mm, the average is 11mm An index finger size ranging from an infant finger point at 8mm to a giant finger point at 19mm, the average is 11mm

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. Any point size less than 25 px is too small, and can contribute to a poor user experience.

An infographic showing the best point size at 9mm, and an okay point size at 5mm An infographic showing the best point size at 9mm, and an okay point size at 5mm

When accuracy matters, you cannot afford accidental taps on actions that produce major consequences, such as close or delete.

Postures

Designing touch experiences requires knowledge of how the devices are held by different users. The user’s environment and physical comfort affect how long a grip is used and how often it’s changed.

An animated gif showing two hands moving a tablet from portrait to landscape and back again
  • Optimize the interface for different kinds of grips.
  • Think about how landscape or portrait modes affect 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.

Interaction areas

Tablets are most often held along the side, making the bottom corners ideal for interactive elements. Most users hold a tablet with the left hand and touch it with the right. Place interactive elements within reach of the thumbs.

A tablet and a smart phone, with areas of the screens highlighted by where it's easiest to touch (bottom half) to hardest to touch (top half)

Reading areas

Content in the top half of the screen is easier to see than content on the bottom half where it can be blocked by the hands or ignored.

A tablet and a smart phone, with areas of the screens highlighted by where it's easiest to read to hardest to read, with the easiest being in the top half

Holding postures

People grip tablets in a few different ways. Think about common “on the go” scenarios in which people mostly read, browse and do a little light typing. Mobile devices tend to be used on the bus, in coffee shops and in front of the TV, where distractions are higher.

One hand

Touch screens sense the geometric center of a user’s contact point.

  • Right or bottom edge actions
  • Lower right corner blocked by hand
  • For accuracy, limit how far people have to reach
A tablet being held by the left hand, with the right hand using the screen A tablet being held by the left hand, with the right hand using the screen

Two hands

Hold with two hands, use thumbs to interact.

  • Lower-left and lower-right corner actions
  • Anchored thumbs increase accuracy
  • Middle of screen is difficult to reach
A tablet being held by two hands, with the thumbs being used to interact with the screen A tablet being held by two hands, with the thumbs being used to interact with the screen

Resting on lap

Rest device on a lap or table and interact with two hands for faster typing

  • Bottom half of screen offers quick interaction
  • Lower corners blocked by hands
  • Need for reaching is reduced
A tablet presumably being rested on something with both hands interacting with pointer fingers on the screen A tablet presumably being rested on something with both hands interacting with pointer fingers on the screen

Propped up

Used for watching movies where little interaction is required

  • Bottom half of screen offers quick interaction
  • Touching top blocks content
  • Interaction at a distance reduces accuracy
A tablet propped up by its case with no human interaction A tablet propped up by its case with no human interaction
Back to top