Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
1
Fingers, Thumbs and People
Designing for the way your users really hold
and touch their phones and tablets
@shoobe01 #UX...
2
We are outnumbered.
3
Many more mobiles
than computers.
4
80% growth in use in 2013.
5
Users prefer mobile.
6
Design for mobile.
7
8
What we used to know:What we used to know:
44 px
9
But now we know for real.
10
11
1,333
19
120,626,225
651
31
12
Touch is not about
• Finger size
• Thumb reach
• No-go corners
• Pinpoint accuracy
• iPhones only
13
Where do I start?
14
10 design guidelines for fingers,
touch and people
15
1.Your users are not like you.
1616
171717
18
19
49%
26% 10%36%
20
1.
• Design for every user.
• Accept that users change.
• Plan for every device.
Your users are not like you.
21
2.Users prefer to touch the center of
the screen.
22
23
24
2.
• Place key actions in the middle.
• Secondary actions along the top and
bottom.
Users prefer to touch the center of...
25
3.Users prefer to view the center of
the screen.
26
2727
28
3.
• Place key content in the middle.
• Allow users to scroll content to
comfortable viewing positions.
Users prefer to...
29
4.Fingers get in the way.
3030
3131
32
33
34
35
36
37
4.
• Make room for fingers around
targets.
• Put your content or functions where
they won’t be covered.
• Leave room fo...
38
5.Different devices are used in
different ways.
393939
404040
62%
24%
9%
41
42
43
44
(3438)(l
)d
=V
45
2.5”
3.5”
5”
7-10”
In Stand
4 pt
6 pt
7 pt
8 pt
10 pt
46
5.
• Support all input types.
• Predict use by device class.
• Account for distance by adjusting
sizes.
Different devic...
47
6.Touch is imprecise.
48
49
50
CEP R95
50
51
52
53
6.
• Make touch targets as large as
possible.
• Tap entire containers.
• Design in lists and large boxes.
Touch is impr...
54
7. Touch is inconsistent.
55
56
57
58
59
60
8 mm
61
11 mm
62
• Design by zones.
• Don’t force edge selection.
• Very large spacing along the top and
bottom.
Touch is inconsistent.7.
63
8.People only click what they see.
64
65
66
8.
• Attract the eye.
• Afford action.
• Be readable.
• Inspire confidence.
People only click what they see.
67
9.Don’t forget cases and bezels.
6868
69
9.
• Provide room for edge taps and off-
screen gestures.
Don’t forget cases and bezels.
70
10. Work at human scales.
7171
7272
7373
7474
7575
76
XHDPI: 320ppi XXHDPI: 480ppi MDPI: 160ppi
Really: 267ppi Really: 445ppi Really: 180ppi
83% 92% 112%
77
78
10.
• Paper is your friend.
• Test and demonstrate on real
devices.
• Pixels are a lie. Plan accordingly.
Work at human...
79
Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01:
www.4ourth.com
80
81
4ourth.com/tppt
4ourth.com/tvid
82
Read more on design for touch,
mobile and people:
4ourth.com/wrtg
83
Appendix:
Touch technology, additonal
data, and other stuff
84
• Orientation: 60% Landscape, 40% portrait,
but… which device did you mean?
• 84% touch with the right hand.
• Age, sex...
8585
86
87
8888
89
90
Capacitive Touch
Screen
91
Proximity
Accelerometer
Gryosensor
Light color
Gesture
Cover sensor
Light level
Capacitive Touch
Screen
92
93
Programming Touch Events
9494
95
Contact me for consulting, design, to
follow up on this deck, or just to talk:
Steven Hoober
steven@4ourth.com
+1 816 2...
Próxima SlideShare
Cargando en…5
×

Fingers, Thumbs & People: Designing for the way your users really hold and touch their phones and tablets

For the newest version of this presentation, always go to: 4ourth.com/tppt
For the latest video version, see: 4ourth.com/tvid
Summary in text and all the linked articles, research and references are at: 4ourth.com/Touch

We are finally starting to think about how touchscreen devices really work, and design proper sized targets, think about touch as different from mouse selection, and to create common gesture libraries.

But despite this we still forget the user. Fingers and thumbs take up space, and cover the screen. Corners of screens have different accuracy than the center. It's time to re-evaluate what we think we know.

Steven reviews his ongoing research into how people actually interact with mobile devices, presents some new ideas on how we can design to avoid errors and take advantage of this new knowledge, and leaves you with 10 (relatively) simple steps to improve your touchscreen designs tomorrow.

  • Inicia sesión para ver los comentarios

Fingers, Thumbs & People: Designing for the way your users really hold and touch their phones and tablets

  1. 1 Fingers, Thumbs and People Designing for the way your users really hold and touch their phones and tablets @shoobe01 #UXPA2014
  2. 2 We are outnumbered.
  3. 3 Many more mobiles than computers.
  4. 4 80% growth in use in 2013.
  5. 5 Users prefer mobile.
  6. 6 Design for mobile.
  7. 7
  8. 8 What we used to know:What we used to know: 44 px
  9. 9 But now we know for real.
  10. 10
  11. 11 1,333 19 120,626,225 651 31
  12. 12 Touch is not about • Finger size • Thumb reach • No-go corners • Pinpoint accuracy • iPhones only
  13. 13 Where do I start?
  14. 14 10 design guidelines for fingers, touch and people
  15. 15 1.Your users are not like you.
  16. 1616
  17. 171717
  18. 18
  19. 19 49% 26% 10%36%
  20. 20 1. • Design for every user. • Accept that users change. • Plan for every device. Your users are not like you.
  21. 21 2.Users prefer to touch the center of the screen.
  22. 22
  23. 23
  24. 24 2. • Place key actions in the middle. • Secondary actions along the top and bottom. Users prefer to touch the center of the screen.
  25. 25 3.Users prefer to view the center of the screen.
  26. 26
  27. 2727
  28. 28 3. • Place key content in the middle. • Allow users to scroll content to comfortable viewing positions. Users prefer to view the center of the screen.
  29. 29 4.Fingers get in the way.
  30. 3030
  31. 3131
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37 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.
  38. 38 5.Different devices are used in different ways.
  39. 393939
  40. 404040 62% 24% 9%
  41. 41
  42. 42
  43. 43
  44. 44 (3438)(l )d =V
  45. 45 2.5” 3.5” 5” 7-10” In Stand 4 pt 6 pt 7 pt 8 pt 10 pt
  46. 46 5. • Support all input types. • Predict use by device class. • Account for distance by adjusting sizes. Different devices are used in different ways.
  47. 47 6.Touch is imprecise.
  48. 48
  49. 49
  50. 50 CEP R95 50
  51. 51
  52. 52
  53. 53 6. • Make touch targets as large as possible. • Tap entire containers. • Design in lists and large boxes. Touch is imprecise.
  54. 54 7. Touch is inconsistent.
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60 8 mm
  61. 61 11 mm
  62. 62 • Design by zones. • Don’t force edge selection. • Very large spacing along the top and bottom. Touch is inconsistent.7.
  63. 63 8.People only click what they see.
  64. 64
  65. 65
  66. 66 8. • Attract the eye. • Afford action. • Be readable. • Inspire confidence. People only click what they see.
  67. 67 9.Don’t forget cases and bezels.
  68. 6868
  69. 69 9. • Provide room for edge taps and off- screen gestures. Don’t forget cases and bezels.
  70. 70 10. Work at human scales.
  71. 7171
  72. 7272
  73. 7373
  74. 7474
  75. 7575
  76. 76 XHDPI: 320ppi XXHDPI: 480ppi MDPI: 160ppi Really: 267ppi Really: 445ppi Really: 180ppi 83% 92% 112%
  77. 77
  78. 78 10. • Paper is your friend. • Test and demonstrate on real devices. • Pixels are a lie. Plan accordingly. Work at human scales.
  79. 79 Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com
  80. 80
  81. 81 4ourth.com/tppt 4ourth.com/tvid
  82. 82 Read more on design for touch, mobile and people: 4ourth.com/wrtg
  83. 83 Appendix: Touch technology, additonal data, and other stuff
  84. 84 • Orientation: 60% Landscape, 40% portrait, but… which device did you mean? • 84% touch with the right hand. • Age, sex, region? No perceptible changes but…
  85. 8585
  86. 86
  87. 87
  88. 8888
  89. 89
  90. 90 Capacitive Touch Screen
  91. 91 Proximity Accelerometer Gryosensor Light color Gesture Cover sensor Light level Capacitive Touch Screen
  92. 92
  93. 93 Programming Touch Events
  94. 9494
  95. 95 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: www.4ourth.com

×