If you like this presentation – show it...
Fingers, Thumbs and PeopleDesigning for the way your users really holdand touch their phones and tablets @shoobe01 #UXPA2014 29 MINUTES To read entire deck word for word. TIMING/VIDEO Remove auto-advancing after creating a video version: Workaround: In the menu bar: “Slide Show” > “Set Up Show…” In the “Advance slides” section select “Manually” Clear the timings completely: Select all the slides Right click a slide > “Slide Transition…” In the “Advance slide” section uncheck “Automatically after” Don’t forget user videos to add more proof???
We are outnumbered.
Many more mobiles than computers.
80% growth in use in 2013.
Users prefer mobile.
Design for mobile.
What we used to know: What we used to know: 44 px
But now we know for real.
1,333 19 120,626,225 651 31
Touch is not about Finger size Thumb reach No-go corners Pinpoint accuracy iPhones only
Where do I start?
10 design guidelines for fingers, touch and people
1. Your users are not like you.
1. Design for every user. Accept that users change. Plan for every device. Your users are not like you.
2. Place key actions in the middle. Secondary actions along the top and bottom. Users prefer to touch the center of the screen.
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.
Add test app, short scroll, to the back.
Add test app, long scroll, to the back.
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.
40 62% 24% 9%
(3438)(l) d = V
5. Support all input types. Predict use by device class. Account for distance by adjusting sizes. Different devices are used in different ways.
6. Make touch targets as large as possible. Tap entire containers. Design in lists and large boxes. Touch is imprecise.
See old slideshow. This used to have more animation, but why?
Design by zones. Don’t force edge selection. Very large spacing along the top and bottom. Touch is inconsistent. 7.
8. Attract the eye. Afford action. Be readable. Inspire confidence. People only click what they see.
9. Provide room for edge taps and off-screen gestures. Don’t forget cases and bezels.
10. Paper is your friend. Test and demonstrate on real devices. Pixels are a lie. Plan accordingly. Work at human scales.
Steven Hoober firstname.lastname@example.org +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com
Read more on design for touch, mobile and people: 4ourth.com/wrtg
Appendix: Touch technology, additonal data, and other stuff
26% Orientation: 60% Landscape, 40% portrait, but… which device did you mean? 84% touch with the right hand. Age, sex, region? No perceptible changes but…
Capacitive Touch Screen
Proximity Accelerometer Gryosensor Light color Gesture Cover sensor Light level Capacitive Touch Screen
Programming Touch Events
Contact me for consulting, design, to follow up on this deck, or just to talk: Steven Hoober email@example.com +1 816 210 0455 @shoobe01 shoobe01 on: www.4ourth.com @shoobe01 #UXPA2014