Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
2
Fingers, Thumbs and People
Designing for the way your users really hold
and touch their phones and tablets
@shoobe01 #sx...
3
We are outnumbered.
4
5
6
Users prefer mobile.
7
8
9
1,333observations on the street
19academic studies correlated
120,626,225 touch events
651observations in schools, offic...
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 n...
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 t...
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 fo...
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 devic...
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 impr...
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 ta...
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...
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
Upcoming SlideShare
Loading in …5
×

Fingers, Thumbs & People - 15 minute version

1,630 views

Published on

Presented at SXSW 2015. See other presentations and 4ourth.com/Touch for a more full description of all the data and issues covered here

  • Be the first to comment

Fingers, Thumbs & People - 15 minute version

  1. 1. 1
  2. 2. 2 Fingers, Thumbs and People Designing for the way your users really hold and touch their phones and tablets @shoobe01 #sxsw #sxsw15
  3. 3. 3 We are outnumbered.
  4. 4. 4
  5. 5. 5
  6. 6. 6 Users prefer mobile.
  7. 7. 7
  8. 8. 8
  9. 9. 9 1,333observations on the street 19academic studies correlated 120,626,225 touch events 651observations in schools, offices and homes 31analyzed pov videos in context
  10. 10. 10
  11. 11. 11 10 design guidelines for fingers, touch and people
  12. 12. 12 1.Your users are not like you.
  13. 13. 13
  14. 14. 14
  15. 15. 15 1. • Design for every user. • Accept that users change. • Plan for every device. Your users are not like you.
  16. 16. 16 2.People prefer to touch the center of the screen.
  17. 17. 17
  18. 18. 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. 19. 19 3.People prefer to view the center of the screen.
  20. 20. 20
  21. 21. 2121
  22. 22. 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. 23. 23 4.Fingers get in the way.
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 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. 28. 28 5.Different devices are used in different ways.
  29. 29. 292929 62% 24% 9%
  30. 30. 30
  31. 31. 31
  32. 32. 32
  33. 33. 33 4 pt 6 pt 7 pt 8 pt 10 pt
  34. 34. 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. 35. 35 6.Touch is imprecise.
  36. 36. 36
  37. 37. 37
  38. 38. 38 CEP R95 38
  39. 39. 39
  40. 40. 40
  41. 41. 41 6. • Make touch targets as large as possible. • Tap entire containers. • Design in lists and large boxes. Touch is imprecise.
  42. 42. 42 7. Touch is inconsistent.
  43. 43. 43
  44. 44. 44
  45. 45. 45
  46. 46. 46 11 mm
  47. 47. 47 • Design by zones. • Don’t force edge selection. • Very large spacing along the top and bottom. Touch is inconsistent.7.
  48. 48. 48 8.People only click what they see.
  49. 49. 49
  50. 50. 50
  51. 51. 51 8. • Attract the eye. • Afford action. • Be readable. • Inspire confidence. People only click what they see.
  52. 52. 52 9.Phones are not flat
  53. 53. 53
  54. 54. 54
  55. 55. 5555
  56. 56. 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. 57. 57 10. Work at human scales.
  58. 58. 5858
  59. 59. 5959
  60. 60. 60 XHDPI: 320ppi XXHDPI: 480ppi MDPI: 160ppi Really: 267ppi Really: 445ppi Really: 180ppi 83% 92% 112%
  61. 61. 61 10. • Paper is your friend. • Test and demonstrate on real devices. • Pixels are a lie. Plan accordingly. Work at human scales.
  62. 62. 62
  63. 63. 63 Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com
  64. 64. 64 Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com 4ourth.com/Touch
  65. 65. 65

×