Mobile Day - Fingers, thumbs and people
•
0 likes•452 views
The document discusses design considerations for touchscreen interfaces based on observations of how users physically interact with their mobile devices. Some key points discussed include: placing important interactive elements in the center of the screen where users naturally look and touch; leaving space around interactive elements for fingers; making touch targets large due to imprecise touch; designing differently for different device classes and sizes; and attracting users' eyes to visible interactive elements since they only interact with what they see. The document advocates designing based on how users really hold and interact with their diverse mobile devices.
More Related Content
Viewers also liked
Viewers also liked (16)
Similar to Mobile Day - Fingers, thumbs and people
Similar to Mobile Day - Fingers, thumbs and people (20)
More from Software Guru
More from Software Guru (20)
Recently uploaded
Recently uploaded (20)
Mobile Day - Fingers, thumbs and people
- 1. 1 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Fingers, Thumbs, and People Designing for the way your users really hold and touch their phones and tablets Steven Hoober @shoobe01 Mobile Day Mexico #mobiledaysg
- 2. 2 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 3. 3 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 4. 4 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 5. 5 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 6. 6 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 7. 7 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 8. 8 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 9. 9 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 10. 10 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 11. 11 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 12. 12 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 13. 13 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 14. 14 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 15. 15 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Understanding technology and history
- 16. 16 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch What we used to know:What we used to know: 22 mm ISO 9241-9
- 17. 17 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 18. 18 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch What we used to know:What we used to know: 44 px
- 19. 19 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 20. 20 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 1,333observations on the street 19academic studies correlated 120,626,225 touch events 651observations in schools, offices and homes 31analyzed POV videos in context
- 21. 21 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 22. 22 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 23. 23 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 24. 24 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 25. 25 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 26. 26 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 27. 27 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 28. 28 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 29. 29 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Device diversity is human diversity.
- 30. 30 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 31. 31 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 49% 26% 10%36%
- 32. 32 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 65%60% 84%
- 33. 33 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 33
- 34. 34 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 35. 35 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 36. 36 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Design for every user. • Accept that users change, shift, and move. • Plan for every device. Device diversity is human diversity.
- 37. 37 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch People touch the center of the screen.
- 38. 38 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 39. 39 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 40. 40 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 41. 41 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Place key actions in the middle. • Secondary actions along the top and bottom. • People will shift their grip as needed. People touch the center of the screen.
- 42. 42 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch People look at the center of the screen.
- 43. 43 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 44. 44 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Fingers, Thumbs, and People Designing for the way your users really hold and touch @shoobe01 #mobiledaysg
- 45. 45 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Place key content in the middle. • Allow users to scroll content to comfortable viewing positions. People look at the center of the screen.
- 46. 46 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Fingers get in the way.
- 47. 47 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 48. 48 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 49. 49 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 50. 50 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 51. 51 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 52. 52 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 53. 53 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • 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
- 54. 54 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Different devices are used in different ways.
- 55. 55 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 55
- 56. 56 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 56 62% 24% 9%
- 57. 57 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 58. 58 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 59. 59 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 60. 60 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 2.5” 3.5” 5” 7-10” In Stand 4 pt 6 pt 7 pt 8 pt 10 pt
- 61. 61 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Type size in points Device class Minimum Basic content Enhanced content H3 H2 H1 Small phone 4 5.5 7.2 8.5 10.8 14.4 Large phone 6 8.5 10.8 12.6 16.2 21.6 Phablet 7 9.8 12.6 14.7 18.9 25.2 Small tablet 8 11.2 14.4 16.8 21.6 28.8 Large tablet / desktop 10 14 18 21 27 36
- 62. 62 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch At least 7:1 for normal text At least 4.5:1 for large text Black & White is 23:1
- 63. 63 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Support all input types. • Predict use by device class. • Account for distance by adjusting sizes. Different devices are used in different ways.
- 64. 64 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Touch is imprecise.
- 65. 65 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch CEP R95 65
- 66. 66 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 67. 67 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 68. 68 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Make touch targets as large as possible. • Tap entire containers. • Design in lists and large boxes. Touch is imprecise.
- 69. 69 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Touch is inconsistent.
- 70. 70 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 71. 71 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 72. 72 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 73. 73 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 74. 74 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 75. 75 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 76. 76 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 8 mm
- 77. 77 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 11 mm
- 78. 78 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Design by zones. • Don’t force edge selection. • Very large spacing along the top and bottom. Touch is inconsistent.
- 79. 79 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch People only click what they see.
- 80. 80 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 81. 81 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 82. 82 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Attract the eye. • Afford action. • Be readable. • Inspire confidence. People only click what they see.
- 83. 83 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Phones are not flat.
- 84. 84 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 85. 85 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 86. 86 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 87. 87 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Provide room for edge taps and off-screen gestures. • Consider context; where and how will your users work with their devices. Phones are not flat.
- 88. 88 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Work at human scales.
- 89. 89 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 90. 90 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 91. 91 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 91
- 92. 92 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 93. 93 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 94. 94 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch XHDPI: 320ppi XXHDPI: 480ppi MDPI: 160ppi Really: 267ppi Really: 445ppi Really: 180ppi 83% 92% 112%
- 95. 95 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch
- 96. 96 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch • Paper is your friend. • Test and demonstrate on real devices. • Pixels are a lie. Plan accordingly. Work at human scales.
- 97. 97 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com
- 98. 98 @shoobe01 #mobiledaysg Fingers, Thumbs, and People Designing for the way your users really hold and touch 4ourth.com/Touch