fingers, thumbs & people - 15 minute version
TRANSCRIPT
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
64
Steven Hoober
+1 816 210 0455
@shoobe01
shoobe01:
www.4ourth.com
4ourth.com/Touch
65