Downloaded 58 times
Uploaded bySteven Hoober
Fingers, Thumbs & People - 15 minute version
The document outlines design guidelines for mobile user interfaces based on extensive observations and studies of how users interact with their devices. Key insights include the preference for central touch and view zones, the need for accommodating fingers and different device interactions, and the importance of designing touch targets that are large and easily accessible. Overall, the content emphasizes designing for diverse users and optimizing the mobile experience by considering human factors.
Fingers, Thumbs & People - 15 minute version
- 1.
- 2. 2 Fingers, Thumbs andPeople Designing for the way your users really hold and touch their phones and tablets @shoobe01 #sxsw #sxsw15
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. 9 1,333observations on thestreet 19academic studies correlated 120,626,225 touch events 651observations in schools, offices and homes 31analyzed pov videos in context
- 10.
- 11. 11 10 design guidelinesfor fingers, touch and people
- 12. 12 1.Your users arenot like you.
- 13.
- 14.
- 15. 15 1. • Design forevery user. • Accept that users change. • Plan for every device. Your users are not like you.
- 16. 16 2.People prefer totouch the center of the screen.
- 17.
- 18. 18 2. • Place keyactions in the middle. • Secondary actions along the top and bottom. • People will shift their grip as needed. People prefer to touch the center of the screen.
- 19. 19 3.People prefer toview the center of the screen.
- 20.
- 21.
- 22. 22 3. • Place keycontent in the middle. • Allow users to scroll content to comfortable viewing positions. People prefer to view the center of the screen.
- 23. 23 4.Fingers get inthe way.
- 24.
- 25.
- 26.
- 27. 27 4. • Make roomfor 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.
- 28. 28 5.Different devices areused in different ways.
- 29.
- 30.
- 31.
- 32.
- 33. 33 4 pt 6 pt 7pt 8 pt 10 pt
- 34. 34 5. • Support allinput types. • Predict use by device class. • Account for distance by adjusting sizes. Different devices are used in different ways.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. 41 6. • Make touchtargets as large as possible. • Tap entire containers. • Design in lists and large boxes. Touch is imprecise.
- 42. 42 7. Touch isinconsistent.
- 43.
- 44.
- 45.
- 46.
- 47. 47 • Design byzones. • Don’t force edge selection. • Very large spacing along the top and bottom. Touch is inconsistent.7.
- 48. 48 8.People only clickwhat they see.
- 49.
- 50.
- 51. 51 8. • Attract theeye. • Afford action. • Be readable. • Inspire confidence. People only click what they see.
- 52.
- 53.
- 54.
- 55.
- 56. 56 9. • Accessibility isfor everyone, even you. • Make interactions work with the environment. • Provide room for edge taps and off- screen gestures. Phones are not flat
- 57. 57 10. Work athuman scales.
- 58.
- 59.
- 60. 60 XHDPI: 320ppi XXHDPI:480ppi MDPI: 160ppi Really: 267ppi Really: 445ppi Really: 180ppi 83% 92% 112%
- 61. 61 10. • Paper isyour friend. • Test and demonstrate on real devices. • Pixels are a lie. Plan accordingly. Work at human scales.
- 62.
- 63. 63 Steven Hoober steven@4ourth.com +1 816210 0455 @shoobe01 shoobe01: www.4ourth.com
- 64. 64 Steven Hoober steven@4ourth.com +1 816210 0455 @shoobe01 shoobe01: www.4ourth.com 4ourth.com/Touch
- 65.
Editor's Notes
- #3 There’s lots of room up in the front half of the room. It’s only 15 minutes, so come up and take a seat… OKAY Let me first say: Mobiles are NOT the next big thing. They are already here.
- #4 There are so many mobile devices, there’s more than one for each human on the planet. Over 7 billion devices—not sold, but IN USE, right now.
- #5 In 2014 more than 1 billion Android devices were activated. Smartphones are 3/4 of all new mobiles sold, and Android is over 80% of the market. For contrast it takes Microsoft four years to sell as many licenses. The desktop and laptop computer installed base is actually dropping.
- #6 Even with all this scale in place, mobile traffic is growing faster… 80% year over year. Mobile is not used “on the go,” but all day, and all over.
- #7 By everyone. Mobile is the platform of choice. 2/3rd the people in the US only have a mobile internet device, or prefer to use their mobile over a desktop or laptop—even when one is available in front of them or in the next room.
- #8 So we must design for Mobile... And we must do that without resorting to gut instinct, believing rumor without proof, or thinking our opinions are more valid than anyone else’s. For example, unlike the commonly-used chart Kevin showed us, thumbs can’t stretch to reach other parts of the screen so this is wrong.
- #9 We know THIS is the way people tap, that they do it by shifting their grip, a lot. Thumb reach doesn’t matter.
- #10 We know because of research. Some I have conducted, and existing work by others which I analyzed. And we’re now getting usage data from other countries, from other devices, gathered in different ways, and as people do things like carry around their shopping.
- #11 Now we know how to design not for pixels, but for people.
- #12 I have boiled all the data I have -- down to these 10 basic behaviors or truths you can use to design for touch and people -- in the real world.
- #13 It’s easy to make assumptions, and confuse empathy with your own point of view.
- #14 Your users are not like you, or your friends, but work in a myriad of ways. They change the way they work with their phones, regularly shifting their grip.
- #15 People are comfortable changing their hand position, to allow them to touch the screen in different ways… …to do different things with their devices, as they change tasks and context.
- #16 Don’t make assumptions about one type of user, or assume what is a popular device today will be important tomorrow. You will end up disregarding all others. Design for every user, and every way of use. Plan for your design to work on any device.
- #17 People, in general, for every portable touchscreen device, prefer to touch the center of the screen.
- #18 For example people will naturally move a list of content to the center of the screen, before selecting it. You will find that most taps are in about the center half to 2/3rds of the screen.
- #19 So place all your key actions in that middle area of the screen, and place options, or secondary paths along the top and bottom edges. Don’t worry about how far you can reach with one hand, even on bigger phones and tablets. People will shift their grip to reach the secondary actions along the edges and even in the far corner, without complaint.
- #20 Conveniently, this extends to viewing as well.
- #21 Follow the classic mobile pattern of list views, and put your main content and interaction in the middle of the page.
- #22 Make sure titles, messages, status displays and other content on the edges are secondary. And don’t snap content to fit the screen. Let users scroll, and provide padding so they can bring the end of the content towards the middle.
- #23 Even if it isn’t tappable, make sure key information is in the middle of the page. Sometimes, this means providing extra room or other provisions to let users scroll longer content to the middle of the viewport.
- #24 Fingers, hands and thumbs are opaque, and can get in the way.
- #25 Since we shift our grip, and use different devices, where are fingers and thumbs ARE varies… …so we account for any position in our design.
- #26 When your selectable list has long labels, people scroll to the far right to get to the most empty area they can. And for Arabic or Hebrew, right-to-left languages, the opposite has been observed, so we’re sure this is true.
- #27 This varies by device size, but ONLY because of how much room content takes up on the screen.
- #28 Tablet users also prefer to touch the center, and will move their hand there when there’s free space. Always make sure that touch targets are large enough to be seen, big enough to see the clicked state when the your finger is actually touching it… …and try to provide room for users to feel comfortable scrolling.
- #29 Respect user choice instead of complaining about fragmentation.
- #30 Large tablets, like the 10” iPads, are used almost as computer replacements, about 2/3rd of the time in a stand… …and ¼ of the time with physical keyboards.
- #31 As devices get larger, they are used less and less held in the hand. And the smaller the device is, the more it is used on the move, like walking around the house or office.
- #32 The larger devices get, the further away from the eye they are used.
- #33 Due to angular resolution, minimum text sizes vary based on device size: from 4 point for small handsets held close to the eye, to 10 points for devices set on tables or in stands.
- #34 These are minimum sizes,… …so use much larger for most content or to account for difficult contexts.
- #35 Support all input types, keyboards AND touch, especially if you are building responsive websites, or expect to make an app for tablet and handset. Account for distance by adjusting the sizes of readable items like type, icons, text fields, checkboxes and buttons.
- #36 People are never going to be able to precisely click your target. There’s always inaccuracy. Accept this, and account for it in design.
- #37 Capacitive touchscreens only detect is the centroid (or geometric center) …
- #38 …of the part of your finger that gets flattened against the screen.
- #39 The phone can’t sense how big your finger is, how hard you pressed, how big the contact area is, which way it is facing, or anything else. All it gets is a point that it assigns to be the touched coordinates. And that point is never, ever perfectly aligned.
- #40 When we accept everything is imprecise, we stop calling these errors, and refer to tolerances instead. Plan for imprecision and problems as part of the process. Provide the largest practical touch targets…
- #41 Don’t just code the word or icon as a link.
- #42 But make touch targets as large as possible, using entire containers such as rows, boxes and buttons, not just the icon or word. Remember that real users work with your touch interface in the real world. Don’t try to “add on” touch design. Make your design touch-centric at the grid, template and architectural level to provide enough room, and the right kind of interactivity.
- #43 The largest variable in inaccuracy is not environmental conditions, familiarity with touchscreens, or age…
- #44 …but the position on the screen your users are trying to tap.
- #45 People are more accurate tapping the middle of the screen on all mobile devices. They are also more confident at the center, so will slow down to tap corner or edge targets.
- #46 Sides are a little worse than the center, The top and bottom require much more room, And corners require about twice the space between targets as the center.
- #47 Yes, it’s the same for tablets, too.
- #48 Be sure to provide plenty of space for menus and controls along the top and bottom edges of the screen,… …and place unrecoverable or annoying-to-exit items far from others to avoid frustrating accidents.
- #49 Always start your interactions with what works. Simple controls, that work in expected ways. And the most expected controls are those that are visible, and communicate what they will do.
- #50 If it doesn’t look clickable, people don’t know it is. Underlines aren’t bad for text, inline, but especially for apps you mostly need to bound (or box) items, and be sure not to bound non-clickable items.
- #51 Clickable items need to not just afford their action (making it clear what it does) but do so CONSISTENTLY. CLICK If most items in your design are whole selectable rows or buttons,… CLICK …don’t have one row suddenly be an underlined link.
- #52 Visual targets, whether words, icons or some other shape or UI widget must: — Attract the user's eye. — Be drawn so that the user understands that they are actionable elements. — Be readable, so the user understands what action they will perform. — Be large and clear enough the user is confident that he can easily tap them. Following the size rules I already showed you per device class.
- #53 Phones are not flat.
- #54 People are real, dimensional, and not quantifiable as pixels on a screen. They use their phone in real environments, so we must set aside the assumption that the interaction is entirely with a flat glass rectangle.
- #55 Even simply holding a grocery bag in the other hand makes your touch accuracy degrade. Massively. How are people using your app? Where? What else are they doing? Because I promise they are not all sitting down and patiently staring at their phone.
- #56 Plenty of phones have a raised bezel, or case to protect the screen. They are literally not flat, so not everyone can get their finger to the edge of the screen for edge gestures, or tapping the checkbox at the very edge of the list item. Pad the edges to build for edge gestures or taps.
- #57 ALL people are, as Robin Christopherson says, Temporarily Disabled. Designing with environments and people in mind like this can assure your mobile device works for EVERY user, ALL the time. We work in loud environments, with glare and rain, cannot touch the device, are distracted. Subtle cues may not work, so multi-encode indicators and responses to interaction.
- #58 Start your design at scale.
- #59 There are many templates you can print that allow you to sketch at the scale of your expected devices.
- #60 Later: get off the computer, and try the interface and interaction on the actual device, outdoors, walking around, in loud places and however you think people will use it.
- #61 Be aware that classes of display sizes and device pixel ratios mean your intended design may be MUCH smaller or larger on any particular device. Make no assumptions about what it will look and act like in the real world and check yourself.
- #62 Paper continues to be the best way to design, and keeps being our friend by working at any scale we want. Try out your work on real devices doesn’t need real code. Take a photo of the whiteboard, crop it, and stick it on a phone. Does it still make sense? Plan to design everything about to account for under-sized targets and type. This often is safe anyway; and I often say everything should be 30% larger for users in worse environments, with bad eyesight, etc. anyway.
- #63 Most of all, within what you can control; always remember to design for hands, fingers, and thumbs Remember you don’t design for iPhone or Android, for cars or kiosks, for Web or apps but for people. Remember to have empathy for users, to respect their choices, and their ways of working. Account for the limits of their life, their environment and their abilities…
- #64 Even when your implementation is constrained by technology, remember to avoid designing for pixels or code, but to always consider what effect your work will have in the real world, when people look at, hold and touch the screen. Thanks very much for listening, and you can contact me with any questions you have about the info in the presentation.
- #65 This link up here is always the latest version of this presentation, and all the research I have performed or referenced. QUESTIONS… Cards, stickers… **************** [STOP] ****************
- #66 GO BACK