Monday, April 20, 2015

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

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.
Published in: Mobile, Technology, Business





Transcript

  • 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
at