1 Fingers, Thumbs and People Designing for the way your users really hold and touch their phones and tablets @shoobe01 #UXPA2014

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 the screen. 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 view the center of the screen. 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 wont be covered. Leave room for gesture and scroll. Fingers get in the way. 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 devices are used in different ways. 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 imprecise. 54 7. Touch is inconsistent. 55 56 57 58 59 60 8 mm 61 11 mm 62 Design by zones. Dont 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.Dont forget cases and bezels. 6868 69 9. Provide room for edge taps and off- screen gestures. Dont 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 scales. 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, region? No perceptible changes but 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 210 0455 @shoobe01 shoobe01 on: www.4ourth.com