How People Really Hold and Touch (their phones)
•
11 likes•9,286 views
Despite decades of research and years of us all carrying a touchscreen mobile handset around, there’s a lot of myth, disinformation and half truth about how they work, and how best to design for touch. Steven has evaluated dozens of studies and performed some of his own to find out how your users really grasp their phones, and how to make touch targets that work reliably. Find out how humans interface with touchscreen mobile devices, and how you can apply this information to your designs today. Presented at MoDevUX2013, 10 May 2013 and based on two articles with many references you should probably read also: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Recommended
Recommended
More Related Content
More from Steven Hoober
More from Steven Hoober (20)
Recently uploaded
Recently uploaded (20)
How People Really Hold and Touch (their phones)
- 1. 1 How People Really Hold & Touch How about some data? @shoobe01 #MoDevUX2013
- 2. 2 What do we know?
- 3. 3 What do we know? • iPhone is sized for one hand
- 4. 4 What do we know? • iPhone is sized for one hand • The width of fingers varies
- 5. 5 What do we know? • iPhone is sized for one hand • The width of fingers varies • 44 points is the ideal target size
- 6. 6 What do we know? • iPhone is sized for one hand • The width of fingers varies • 44 points is the ideal target size
- 7. 7
- 8. 8
- 9. 9
- 10. 10
- 11. 11
- 12. 12 • Visual targets • Touch targets • Interference
- 13. 13 Visual targets must: • Attract the user's eye. • Look like actionable elements. • Afford the specific action. • Be trustworthy.
- 14. 14
- 15. 15
- 17. 17 2.5-inch Phone 3.5–5-inch Phone 9–10-inch Tablet Text 4 pt 1.4 mm 6 pt 2.1 mm 8 pt 2.8 mm Icons F 6 pt 2.1 mm 8 pt 2.8 mm 10 pt 3.5 mm Minimum Visual Targets:
- 18. 18 44 points
- 19. 19 44 points
- 20. 20 (1 pt = 1/72”)
- 21. 21
- 22. 22 Touch Targets: Minimum 17 pt / 6 mm Preferred 23 pt / 8 mm Maximum 43 pt / 15 mm
- 23. 23 Interference: Measured on center Minimum 23 pt / 8 mm Preferred 28 pt / 10 mm
- 24. 24
- 25. 25
- 26. 2626
- 27. 27 2.5-inch Phone 3.5–5-inch Phone 9–10-inch Tablet Text 4 pt / 1.4 mm 6 pt / 2.1 mm 8 pt / 2.8 mm IconsF 6 pt / 2.1 mm 8 pt / 2.8 mm 10 pt / 3.5 mm Minimum Visual Targets: Minimum 17 pt / 6mm Preferred 23 pt / 8 mm Maximum 43 pt / 15 mm Touch Targets: Minimum 23 pt / 8 mm Preferred 28 pt / 10 mm Interference: Measured on center
- 28. 28 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
Editor's Notes
- What do we know about how people interact with touchscreen mobile devices? …
- We think that…
- 1) The iPhone is the perfect size for one handed use, so all right-thinking people carry an iPhone, and use it with one hand, in portrait, tapping with their thumb.
- 2) That people’s fingers vary in width, so any touchscreen needs to account for that.
- 3) But somehow also that a 44 point (Apple points here) box is the ideal touch target. And so on.
- Wrong, irrelevant and wrong.We make assumptions, use hearsay, and apply personal biases. We need to stop this. There's research. If you don't know, look aroundor ask. If the answer is not out there, do the research yourself.
- I did some. I found that there wasn’t good research, but lots of assumptions about how people held devices, so I looked at 1,333 people holding their phones, and found this. People hold their phones in lots of different ways. Under half are one-handed, using their thumb.
- So the traditional view of what holding a phone means, with easy, harder and impossible areas to touch…
- Becomes a lot more complex.If you believe everything important is at the top of the screen, it might not be easily selectable. BUT… …if you follow other guidelines to put dangerous or rarely used items in the hard to reach area at the top of the screen… it may not work and people shift their hands.
- And even for one handed use, people move around to reach where they need.
- And if that isn’t enough to drive you crazy, people shift. Between two handed for typing… and cradling for general tapping and scrolling, for example. I don’t have a simple answer yet, but think about people, their contexts, needs and expectations instead of assuming any one thing about how they will reach and tap.
- Speaking of tapping, what you most need to remember is that there are THREE facets of touch, not one. Sorry, you cannot remember a single number and make sure touch targets are that size.
- Visual targets are important. As much as no-affordance interfaces and secret gestures are a trendy way to insist you are making delightfully surprising experiences, making simple click targets makes everything just work. Visual targets must: Attract the user's eye.Be drawn so that the user understands that they are actionable elements.Bereadable, so the user understands what action they will perform.Be large and clear enough the user is confident that he can easily tap them.
- Many of us are failing to do this. When you make a button, or a line item with nice separators or colored backgrounds, but only make the text the clickable item, you have failed. Even if the words look like links, the row is also perceived to be a link. The user sees a line item, or a button, and will usually try to click that. The whole area, and you make sure they miss by making the target something else. Stop it.
- How big should words, buttons and lines be? It depends. On how far away the device is from the user. For visual, NO absolute size is ever true.
- Angular resolution matters, and that’s calculated based on the distance between the screen and the viewer’s eyeballs. Get your cameras out…
- BecauseI did the math for you, and here are some guidelines. This is all already published in an article you can google, and I will share this deck so you don’t have to take photos.
- Touch targets. First, the Apple guideline of 44 points.
- No. Never. Pretend it never happened. When it was 44 px that was a problem, but now that Apple makes many devices, and this is a range of physical sizes, the obvious problem arises that people’s fingers do not have resolution. Our fingers are always the same size. You need to measure, specify, and when possible code, in physical sizes. Inches, millimeters, points, picas, twips, or whatever is available and you are happy with.
- Not incidentally, an Apple point is an insulting lie. There’s a physical unit of measure called a point, or typographers point, which is very convenient for this sort of stuff. It has NO relation to the new Apple point. I use typographers points here, so don’t get confused.
- As it turns out, it’s not really important how big our fingers are, except insofar as they obscure part of the screen, which is something else. Our finger squishes against the screen and only a part gets flattened and detected. My research indicates this is pretty much the same for everyone. Children press really hard, so have a larger relative contact patch for example. There is some variability based on task, so people can use fingertips and press lightly.
- And it hardly matters, because phones mostly don’t pick up the size, and work exclusively with the centroid of the contact.What matters is the Circular Error of Probability or the pointing accuracy of people with their fingers. There’s a bit of a range here, depending on the user’s attention, care and the environment in which they operate. Not to mention the ability of the user themselves.
- What really matters is interference. Why are you worried about touch targets and taking notes right now? To avoid accidental clicks. Interference is what happens when two or more targets are close enough together that they all fall into a single CEP. The user might hit any of them with a single selection. If you can only remember one number to check to assure your design is touch-friendly, make it this one. 8 mm if you have to, 10 mm if you possibly can. More is generally better if you have the room.
- Defining as spacing between buttons won’t do it. Your link or button is so variable, what you need is a guideline for interference alone. As you see, you can check for it digitally, if you set Photoshop or Fireworks to the right pixel density. Hint, it’s NEVER 72 dpi. It’s different for every device.
- Better is to work at device scale directly. Draw on printouts…
- …or put your designs on the actual device screen and measure it directly to make sure. You can use the 8 and 10 mm circles from any old circle template you get at the art supply store (or these days, Amazon), but I made up my own little tool I keep in my pocket, because this is so important.
- Since everyone loves actionable information, what’s better than numbers. Here are all the numbers I had in the deck in one place, and it might even be up for a minute so you can all take photos, if I am not out of time yet. I will be posting this to Slideshare in the next few minutes, as well, and all the info I presented is published with sources in a couple of articles, so look it up or ask me for the links.
- If you miss these addresses, just Google my name and you’ll find me.