@shoobe01

#mLearnCon

Design for Fingers,

Touch and People
How people really hold and touch their
mobile devices
@shoobe01 #mLearnCon

@shoobe01
#mLearnCon

We are outnumbered.

@shoobe01
#mLearnCon

More mobiles than computers.

@shoobe01
#mLearnCon

80% growth in 2013.

@shoobe01
#mLearnCon

Users prefer mobile.

@shoobe01
#mLearnCon

Design for mobile.

@shoobe01
#mLearnCon

@shoobe01
#mLearnCon

What we used to know:

44 px

@shoobe01
#mLearnCon

But now we know for real.

@shoobe01
#mLearnCon

10

@shoobe01
#mLearnCon

1,333
19
120,626,225
651
11

@shoobe01
#mLearnCon

12

@shoobe01
#mLearnCon

Touch is not about

Finger size

Reach

No-go corners

Pinpoint accuracy

13

@shoobe01
@shoobe01
#mLearnCon
#ConveyUX

14

@shoobe01
#mLearnCon

15

@shoobe01
#mLearnCon

16

@shoobe01
#mLearnCon

24%

62%
9%

17

@shoobe01
#mLearnCon

18

@shoobe01
#mLearnCon

19

@shoobe01
#mLearnCon

20

@shoobe01
#mLearnCon

V=

(3438)(l)
d

21

@shoobe01
#mLearnCon

6 pt

8 pt

22

@shoobe01
#mLearnCon

Make your targets work.

23

@shoobe01
#mLearnCon

Attract the eye

Afford action
Readable
The right size
24

@shoobe01
#mLearnCon

25

@shoobe01
#mLearnCon

Touch

26

@shoobe01
#mLearnCon

27

@shoobe01
#mLearnCon

28

@shoobe01
#mLearnCon

CEP R95

29

@shoobe01
#mLearnCon

30

@shoobe01
#mLearnCon

Avoid the edges.

31

@shoobe01
#mLearnCon

32

@shoobe01
#mLearnCon

33

@shoobe01
#mLearnCon

Design by zones.

34

@shoobe01
#mLearnCon

35

@shoobe01
#mLearnCon

Fingers
get in the way.

36

@shoobe01
#mLearnCon

37

@shoobe01
#mLearnCon

38

@shoobe01
#mLearnCon

Dont obscure your

information or functions.

39

@shoobe01
#mLearnCon

Work at scale.

40

@shoobe01
#mLearnCon

41

@shoobe01
#mLearnCon

Check at scale.

42

@shoobe01
#mLearnCon

43

@shoobe01
#mLearnCon

44

@shoobe01
#mLearnCon

45

@shoobe01
#mLearnCon

10 design guidelines for fingers,

touch and people

46

@shoobe01
#mLearnCon

1 Your users are not like you.

26%

36%

10%

49%
47

@shoobe01
#mLearnCon

2 Move content and

controls toward
the middle.

48

@shoobe01
#mLearnCon

4 Dont obscure
information

49

@shoobe01
#mLearnCon

3 Make room
for scrolling.

50

@shoobe01
#mLearnCon

5 Account for distance by adjusting size.

In Stand
10
75
pt

8 pt
7-10

pt

6 pt
3.5
2.5
4 pt

51

@shoobe01
#mLearnCon

6 Whole rows, larger

touch targets.

52

@shoobe01
#mLearnCon

6 Whole rows, larger

touch targets.

53

@shoobe01
#mLearnCon

7 Design
by zones.

54

@shoobe01
#mLearnCon

8 Make taps affordable.

55

@shoobe01
#mLearnCon

9 Respect edges
and bezels

56

@shoobe01
#mLearnCon

10 Design, test and

demo at scale.

57

@shoobe01
#mLearnCon

Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01:
www.4ourth.com
58

@shoobe01
#mLearnCon

59

@shoobe01
#mLearnCon

4ourth.com/tppt
4ourth.com/tvid

60

@shoobe01
#mLearnCon

Read more on design for touch,

mobile and people:
4ourth.com/wrtg

61

@shoobe01
#mLearnCon

Appendix:
Touch technology, additonal
data, and other stuff
62

@shoobe01
#mLearnCon

Orientation: 60% Landscape, 40% portrait,

but which device did you mean?
84% touch with the right hand.
Age, sex, region? No perceptible changes
but

63

@shoobe01
#mLearnCon

64

@shoobe01
#mLearnCon

65

@shoobe01
#mLearnCon

66

@shoobe01
#mLearnCon

67

@shoobe01
#mLearnCon

68

@shoobe01
#mLearnCon

Capacitive Touch
Screen

69

@shoobe01
#mLearnCon

Gesture

Proximity

Light level
Light color

Cover sensor

Capacitive Touch
Screen
Gryosensor
Accelerometer
70

@shoobe01
#mLearnCon

71

@shoobe01
#mLearnCon

Programming Touch Events

72

@shoobe01
#mLearnCon

73

@shoobe01
#mLearnCon

Contact me for consulting, design, to follow up

on this deck, or just to talk:
Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01 on:

74
www.4ourth.com