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.
Citation preview
1 Design for Fingers, Touch and People How people really hold
and touch their mobile devices @shoobe01 #mLearnCon
2 We are outnumbered. 3 More mobiles than computers. 4 80%
growth 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 12 13 Touch is not about
Finger size Reach No-go corners Pinpoint accuracy 14 151515 161616
171717 62% 24% 9% 18 19 20 21 (3438)(l )d =V 22 6 pt 8 pt 23 Make
your targets work. 24 Attract the eye Afford action Readable The
right size 25 26 Touch 27 28 29 CEP R95 29 30 31 Avoid the edges.
32 33 34 Design by zones. 35 36 FingersFingers get in the way. 3737
3838 39 Dont obscure your information or functions. 40 Work at
scale. 4141 42 Check at scale. 4343 4444 4545 46 10 design
guidelines for fingers, touch and people 47 1 Your users are not
like you. 49% 26% 10%36% 48 2 Move content and controls toward the
middle. 49 4 Dont obscure information 50 3 Make room for scrolling.
50 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 6 Whole rows, larger touch
targets. 53 6 Whole rows, larger touch targets. 54 7 Design by
zones. 55 8 Make taps affordable. 56 9 Respect edges and bezels 56
5757 10 Design, test and demo at scale. 58 Steven Hoober
[email protected] +1 816 210 0455 @shoobe01 shoobe01:
www.4ourth.com 59 60 4ourth.com/tppt 4ourth.com/tvid 61 Read more
on design for touch, mobile and people: 4ourth.com/wrtg 62
Appendix: Touch technology, additonal data, and other stuff 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 6464 65 66 6767 68 69 Capacitive Touch
Screen 70 Proximity Accelerometer Gryosensor Light color Gesture
Cover sensor Light level Capacitive Touch Screen 71 72 Programming
Touch Events 7373 74 Contact me for consulting, design, to follow
up on this deck, or just to talk: Steven Hoober [email protected]
+1 816 210 0455 @shoobe01 shoobe01 on: www.4ourth.com
