1

2

Fingers, Thumbs and People

Designing for the way your users really holdand touch their phones and tablets

@shoobe01 #sxsw #sxsw15

3

We are outnumbered.

4

5

6

Users prefer mobile.

7

8

9

1,333 observations on the street

19 academic studies correlated

120,626,225 touch events

651 observations in schools, offices and homes

31 analyzed pov videos in context

10

11

10 design guidelines for fingers,touch and people

12

1.Your users are not like you.

13

14

15

1.

• Design for every user.

• Accept that users change.

• Plan for every device.

Your users are not like you.

16

2.People prefer to touch the center of

the screen.

17

18

2.

• Place key actions in the middle.

• Secondary actions along the top and

bottom.

• People will shift their grip as needed.

People prefer to touch the center of

the screen.

19

3.People prefer to view the center of

the screen.

20

2121

22

3.

• Place key content in the middle.

• Allow users to scroll content to

comfortable viewing positions.

People prefer to view the center of

the screen.

23

4.Fingers get in the way.

24

25

26

27

4.

• Make room for fingers around

targets.

• Put your content or functions where

they won’t be covered.

• Leave room for gesture and scroll.

Fingers get in the way.

28

5.Different devices are used in

different ways.

292929

62%24%

9%

30

31

32

33

4 pt

6 pt

7 pt

8 pt

10 pt

34

5.

• Support all input types.

• Predict use by device class.

• Account for distance by adjusting

sizes.

Different devices are used in

different ways.

35

6.Touch is imprecise.

36

37

38

CEP R95

38

39

40

41

6.

• Make touch targets as large as

possible.

• Tap entire containers.

• Design in lists and large boxes.

Touch is imprecise.

42

7. Touch is inconsistent.

43

44

45

46

11 mm

47

• Design by zones.

• Don’t force edge selection.

• Very large spacing along the top and

bottom.

Touch is inconsistent.7.

48

8.People only click what they see.

49

50

51

8.• Attract the eye.

• Afford action.

• Be readable.

• Inspire confidence.

People only click what they see.

52

9.Phones are not flat

53

54

5555

56

9.• Accessibility is for everyone, even

you.

• Make interactions work with the

environment.

• Provide room for edge taps and off-

screen gestures.

Phones are not flat

57

10. Work at human scales.

5858

5959

60

XHDPI: 320ppi XXHDPI: 480ppi MDPI: 160ppi

Really: 267ppi Really: 445ppi Really: 180ppi

83% 92% 112%

61

10.

• Paper is your friend.

• Test and demonstrate on real

devices.

• Pixels are a lie. Plan accordingly.

Work at human scales.

62

63

Steven Hoober

steven@4ourth.com

+1 816 210 0455

@shoobe01

shoobe01:

www.4ourth.com

64

Steven Hoober

steven@4ourth.com

+1 816 210 0455

@shoobe01

shoobe01:

www.4ourth.com

4ourth.com/Touch

65