How People Really Hold and Touch (their Phones)

2 775 570 vues

Publié le

For the newest version of this presentation, always go to: 4ourth.com/tppt
For the latest video version, see: 4ourth.com/tvid

Presented at ConveyUX in Seattle, 7 Feb 2014

For the newest version of this presentation, always go to: 4ourth.com/tppt
For the latest video version, see: 4ourth.com/tvid

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.

How People Really Hold and Touch (their Phones)

  1. 1 Design for Fingers, Touch and People How people really hold and touch their mobile devices @shoobe01 #mLearnCon
  2. 2 We are outnumbered.
  3. 3 More mobiles than computers.
  4. 4 80% growth 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
  12. 12
  13. 13 Touch is not about • Finger size • Reach • No-go corners • Pinpoint accuracy
  14. 14
  15. 151515
  16. 161616
  17. 171717 62% 24% 9%
  18. 18
  19. 19
  20. 20
  21. 21 (3438)(l )d =V
  22. 22 6 pt 8 pt
  23. 23 Make your targets work.
  24. 24 • Attract the eye • Afford action • Readable • The right size
  25. 25
  26. 26 Touch
  27. 27
  28. 28
  29. 29 CEP R95 29
  30. 30
  31. 31 Avoid the edges.
  32. 32
  33. 33
  34. 34 Design by zones.
  35. 35
  36. 36 FingersFingers get in the way.
  37. 3737
  38. 3838
  39. 39 Don’t obscure your information or functions.
  40. 40 Work at scale.
  41. 4141
  42. 42 Check at scale.
  43. 4343
  44. 4444
  45. 4545
  46. 46 10 design guidelines for fingers, touch and people
  47. 47 1 Your users are not like you. 49% 26% 10%36%
  48. 48 2 Move content and controls toward the middle.
  49. 49 4 Don’t obscure information
  50. 50 3 Make room for scrolling. 50
  51. 51 5 Account for distance by adjusting size. 2.5” 3.5” 5” 7-10” In Stand 4 pt 6 pt 7 pt 8 pt 10 pt
  52. 52 6 Whole rows, larger touch targets.
  53. 53 6 Whole rows, larger touch targets.
  54. 54 7 Design by zones.
  55. 55 8 Make taps affordable.
  56. 56 9 Respect edges and bezels 56
  57. 5757 10 Design, test and demo at scale.
  58. 58 Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com
  59. 59
  60. 60 4ourth.com/tppt 4ourth.com/tvid
  61. 61 Read more on design for touch, mobile and people: 4ourth.com/wrtg
  62. 62 Appendix: Touch technology, additonal data, and other stuff
  63. 63 • Orientation: 60% Landscape, 40% portrait, but… which device did you mean? • 84% touch with the right hand. • Age, sex, region? No perceptible changes but…
  64. 6464
  65. 65
  66. 66
  67. 6767
  68. 68
  69. 69 Capacitive Touch Screen
  70. 70 Proximity Accelerometer Gryosensor Light color Gesture Cover sensor Light level Capacitive Touch Screen
  71. 71
  72. 72 Programming Touch Events
  73. 7373
  74. 74 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

×