Designing for Touch
The mobile smart device has taken over the world, and with it the touchscreen interface. There are over two billion portable touchscreen devices in use today, and hundreds of millions more installed in cars and kiosks.
It's time to set aside personal biases, and ignore poorly-founded guidelines like Apple's 44px for how people use their touchscreen devices. Now we have real data, and can design to proven, universal, human-centric standards.
I am sure you came here to find out how big to make touch targets. The simplest I can say is: 7 mm at the center, 9 mm along the edges, 12 mm in the corners.
People view and touch the center of the screen most, and best. Not the bottom, not some thumb-sweep zone. The center. The green blob here is actual touch accuracy data:
But to design for touch really well, you need to understand these 10 user behaviors, and the accompanying guidelines, to make your designs work for touch and people in the real world.
- Your users are not like you.
It's easy to make assumptions, and confuse empathy with your own point of view. Your users are not like you, or your friends. And neither are you. We are bad at observing ourselves as well.
- Design for every user.
- Accept that users change.
- Plan for every device.
- People prefer to touch the center of the screen.
Users, in general, for every portable touchscreen device, prefer to touch the center of the screen.
- Place key actions in the middle.
- Secondary actions along the top and bottom.
- People prefer to view the center of the screen.
Conveiently, this center preference for tapping extends to viewing and more.
- Place key content in the middle.
- Allow users to scroll content to comfortable viewing positions.
- Fingers get in the way.
Finger size doesn't matter for touch accuracy. But fingers are opaque. They get in the way.
- Make room for fingers around targets.
- Put your content or functions where they won't be covered.
- Leave room for gesture and scroll.
- Different devices are used in different ways.
Stop saying "fragmentation" as though it is bad. Respect user choice. These devices are different, because people's needs are different, and this is reflected in the way the devices are used.
- Support all input types.
- Predict use by device class.
- Account for distance by adjusting sizes.
- Touch is imprecise.
People are never going to be able to precisely click your target. There's always inaccuracy. But you can account for it in design.
- Make touch targets as large as possible.
- Tap entire containers.
- Design in lists and large boxes.
- Touch is inconsistent.
Touch isn't just inaccurate, but it's inconsistently inaccurate. Or at least it seems to be.
- Design by zones to account for different accuracy at different places on the screen.
- Don't force edge selection, since edges are less accurate.
- Leave very large spacing along the top and bottom edges.
- People only click what they see.
Don't force users to explore your app to find features. But start 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.
- Attract the eye.
- Afford action.
- Be readable.
- Inspire confidence.
- Phones are not flat.
Devices are used by real people, in the real, 3D world.
- Design for every environment, and every user. How does your design work with noise, distraction, glare?
- Remember cases and bezels: Provide room for edge taps and off-screen gestures.
- Work at human scales.
Size guidelines are fine, but you can help yourself a lot and reduce your math time by just checking your work at scale.
- Paper is your friend.
- Test and demonstrate on real devices.
- Pixels are a lie. Plan accordingly.
Or: get the 15 minute SXSW15 PPT
Learn More About Designing for Touch
I've consolidated everything that we know for sure about how people touch, and how to design for touchscreens. If you spend your time designing or building touch experiences, you should really read up on this.
Since my understanding has evolved over time, the older articles and research reports are not always complete. Some people quoting only the older research are therefore not getting the right conclusions.
- Insights on Switching, Centering, and Gestures for Touchscreens UXmatters, September, 2014.
- The Rise of the Phablet: Designing for Larger Phones UXmatters, November, 2014.
- Making mLearning Usable: How We Use Mobile Devices The eLearning Guild, April, 2014 (paywall).
- Common Misconceptions About Touch UXmatters, March 18, 2013.
- Design for Fingers and Thumbs Instead of Touch UXmatters, November 11, 2013.
- How Do Users Really Hold Mobile Devices? UXmatters, February 18, 2013.
Designing Like This Every Day
Guidelines are great, but how do you remember them? We've all forgotten principles and project goals even when we tape them to the wall. Well, how about keeping them in your wallet, or integrating into your design process?
- Get a wallet sized Touch Template and keep type and touch guidelines with you all the time. Check any app or site, any time to remember, or prove your point and show how smart and prepared you are.
- Download the FREE Touch Overlays and integrate them into your favorite design tool. Well, as long as it's InDesign, Illustrator, Photoshop, Omni Graffle, Visio, PowerPoint or something that can work with those files.
While a lot of the information I provide in the links above is from my own research, a lot is not. This is a list of research reports, articles and other information I used to inform my work, as well as interesting background on technology.
Do be careful referencing these. Some are there as counter-examples, and are just here for completeness and to tell the larger story. They may be wrong or out of date.
- Wikipedia. Touchscreen Wikipedia.
- Wikipedia. HP-150. Wikipedia.–Probably the first commercially available touchscreen, the IR-grid style, all-in-one HP-150 desktop PC sold from 1983 onward, followed by an unbroken series of touchscreens in all sorts of devices and settings.
- Apple. Layout & Appearance. Apple iOS Human Interface Guidelines.–An Apple point–which is not the same as the typographer's 1/72-inch point–is a device-independent pixel that was originally 44 pixels on the displays of the early iPhone and iPod Touch. On the iPhone, this point was somewhat too small at 6.74 millimeters–maybe because they were assuming fingertips instead of thumbs. The size of a point is increasingly variable because it is based on device-scaling ratios. Most critically, since late 2012, the iPad Mini has drawn everything by pretending it is a full-sized iPad, so all items appear smaller on the screen–even touch targets. This random scaling is something Apple is leaning into with the whole iPhone 6 series, all in the name of reducing "fragmentation" though it just makes our job harder.
- Google. Metrics and Grids. Android Design.– Suggests 48 dp, which is worse than the iOS standards, as there is almost always mismatch between the assumed pixel density and the actual pixel density of the screen. Actual sizes can be 30% smaller or larger than expected.
- Android Minimum Button Height: 48dp = 9mm? Stack Overflow.– A discussion of the scale issues associated with using Android dp for physical sizes.
- Nokia. UX Checklist. Symbian Design Guidelines.– "The preferred minimum size of a UI element is 7 x 7 mm for index finger use and 8 x 8 mm for thumb use." It is difficult to tell which digits a user might employ, but it's best to assume thumbs. 8 millimeters is almost a suitable size, but a bit small. By the way, a number of Nokia guidelines were borrowed from my older work back at another agency. We worked it out with attribution later, but still interesting I've been setting touch guidelines forever.
- Microsoft. Windows 8 Touch Guidance.–Microsoft suggests 7-millimeter targets for most uses; 9 millimeters for more important targets, but allows 5-millimeter targets "when it just won't fit." More important, they also advise putting 2 millimeters between targets. This gets their recommendation much closer to a proven usable size. They also discuss finger width as being 11 millimeters, but seem to do nothing with this measurement, which is good because that's not important.
- Human Factors & Ergonomics Society. ANSI/HFES 100-2007 Human Factors Engineering of Computer Workstations. Santa Monica, CA: Human Factors and Ergonomics Society, 2007–This standard suggests a button size of at least 9.5 millimeters, but these recommendations are for the design of "computer workstations," or desktop computers.
- International Organization for Standardization. Ergonomic Requirements for Office Work with Visual Display Terminals (VDTs)–Part 9: Requirements for Non-keyboard Input Devices. Geneva, Switzerland: International Organization for Standardization, 2000–This standard recommends a button size that is equal to the breadth of the distal finger joint of a 95th percentile male–that is, approximately 22 to 23 millimeters. This is extremely large, not to mention that contact patches are not the full width of a finger on most devices. However, some of these standards may derive from the use of interference touchscreens, which sense the entire finger size using a field in front of the screen. Technology matters, so use these standards with caution.
- Flashback Friday: The First Car Equipped With a Touchscreen in 1989. Dave Syverson Auto Center, September 26th, 2014.–An example of a consumer touchscreen from the 1980s, with photos and everything!
- T., Anthony. Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes. Smashing Magazine, February 21, 2012.–An example that, while it uses some data, also generally refers to finger sizes rather than contact patches. Logic works only if our basic data and assumptions are correct.
- Meyer, John. The Pursuit of Tappiness: Six Easy Ways to Make Your Website Tablet-Friendly. UX Magazine, January 2, 2013.–There is a terrific counter-example to the pixel-centric craze among the many comments.
- Pavlus, John. Fat Thumb: A One-Handed Alternative to Pinch-to-Zoom. Fast Co Design, February 4, 2013.–A possible near-future, commercial software product that may exploit the sensing of different sizes of contact patches to infer pressure.
- Nielsen, Jakob, and Raluca Budiu. Mobile Usability. Berkeley, California: The Nielsen Norman Group, 2013–Making feedback big enough to be seen around the user's finger is a basic usability guidelines for visual design on mobile and tablets.
- Sesto, Mary E., Curtis B. Irwin, Karen B. Chen, Amrish O. Chourasia, and Douglas A. Wiegmann. Effect of Touch Screen Button Size and Spacing on Touch Characteristics of Users With and Without Disabilities, in Human Factors: The Journal of the Human Factors and Ergonomics Society, June 2012, Volume 54, Number 3–The study found that 20-millimeter buttons worked best and larger spacing didn't help, but they measured the force used, not targeting accuracy–apparently because of a special need of the disabled cohort. While these findings are not directly applicable, the 20-millimeter size is reasonable when accounting for inaccuracy due to motor-function issues.
- Parhi, Pekka, Amy K. Karlson, and Benjamin B. Bederson. Target Size Study for One-handed Thumb Use on Small Touchscreen Devices, in Proceedings of the 8th Conference on Human-Computer Interaction with Mobile Devices and Services. New York: ACM, 2006–The "target size of 9.2 mm for discrete tasks and targets of 9.6 mm for serial tasks should be sufficiently large for one-handed thumb use on touchscreen-based handhelds." They used CEP-R95, and there was no improvement when increasing to 11.5 mm. This paper does conflate target and interference for the most part, very often putting test items adjacent to each other. Quoted by Nielsen in Mobile Usability as recommending a target size of around 10 mm, which I can agree with.
- Lee, Seungyon, and Shumin Zhai. The Performance of Touch Screen Soft Buttons, in Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. New York: ACM, 2009–10-millimeter buttons resulted in 98 to 99.4% accuracy. Reducing button size caused users to switch from thumb to finger. iPhone keyboard buttons resulted in high accuracy (90%), but a third slower typing speed, and there was a huge jump in necessary corrections when typing on the narrow keyboard. I think they measured accuracy as the ability to enter the right value, not the first-time ability to hit the right target and, therefore, missed critical interference issues.
- Park, Yong S., Sung H. Han, Jaehyun Park, and Youngseok Cho. Touch Key Design for Target Selection on a Mobile Phone, in Proceedings of the 10th International Conference on Human Computer Interaction with Mobile Devices and Services. New York: ACM, 2008–Really interesting research because participants did hold the device and use their thumb to interact, and the results show the accuracy rate plotted by screen location. Size recommendations resulted from this study as well–specifically, that 10 millimeters is better than 7 millimeters, and 4 millimeters is sort of a disaster.
- Schildbach, Bastian, and Enrico Rukzio. Investigating Selection and Reading Performance on a Mobile Phone While Walking, in Proceedings of the 12th International Conference on Human Computer Interaction with Mobile Devices and Services. New York: ACM, 2010– "Whilst performance decreases, cognitive load increases significantly when reading and selecting targets when walking. Furthermore, the results show that the negative effect regarding target selection can be compensated by increasing the target size, but the text reading task did not yield better performance results for a larger text size due to the increased demand for scrolling." This study's results: 6.74-millimeter buttons had an error rate of up to 23%; buttons of about 10 millimeters were much better; and 20-millimeter buttons solve almost all problems, even when walking. Small buttons make people slow down due to cognitive loading. Small, 6-point text results in no performance degradation when walking, but is perceived by some as being worse. There is a middle ground because of the need to scroll. Text sizes that are too large are also bad.
- Henze, Niels, Enrico Rukzio, and Susanne Boll. 100,000,000 Taps: Analysis and Improvement of Touch Performance in the Large. Proceedings of the 13th International Conference on Human Computer Interaction with Mobile Devices and Services. New York: ACM, 2011–There were several million somewhat-qualified clicks from a game on Android. "Below 15mm the error rate dramatically increases and jumps to over 40% for targets smaller than 8mm." There are nice charts on error rates by position, showing basically that the edges are much worse, pretty symmetrically.
- Gilbert, Juan E., Aqueasha M. Martin, Gregory Rogers, Jerome McClendon, and Josh Ekandem. Hey, That's Not Who I Voted For!: A Study on Touchscreen Ballot Design, in Interactions, November 2012–This article conflates target and interference; all tested designs have buttons hard against each other. Interesting information on indicator and visual-target focus. Discusses labels attracting taps and checkmarks to indicate selection.
- Sears, A. Improving Touchscreen Keyboards: Design Issues and a Comparison with Other Devices, in Interacting with Computers Volume 3, 1991–This is fairly early research on mounted touchscreens, and many refer to it, but I'd be wary of almost any specifications that rely on this too strongly for mobile devices.
- Hoober, Steven, and Eric Berkman. Designing Mobile Interfaces. Sebastapol, California: O'Reilly, 2012–See Appendix D: Human Factors, section "Size of the Stimulus: Visual Angle," which includes a formula for calculating visual angle, or angular resolution.
- Clark, Josh. Designing for Touch. A Book Apart, 2015
- Plait, Phil. Resolving the iPhone Resolution. Discover, June 10, 2010.–In the guise of adding science to the hype around the original release of the Apple Retina display on an iPhone, Discover published an easy-to-read discussion of the math behind angular resolution and why it matters more than absolute size.
- Wikipedia. Circular Error Probable. Wikipedia, undated.
- Hoober, Steven. Web to Mobile - Testing How Well It Will Work. Donttouchme, October 28, 2011.–The first time I wrote about how to test for interference on actual devices, using a circle template.
- 4ourth Mobile Patterns Wiki. 4ourth Mobile Touch Template. 4ourth Mobile, undated.–I've created this tool to increase awareness of the problems of touch interference and make it easy to test for it. The video demonstrates measuring for interference and explains why it's important, as well as how to use the other features of the tool.
- Carey, John. Getting in Touch with Capacitance Sensor Algorithms. Embedded, September 9, 2009.–A good overview of how capacitive touchscreens work and how to make them work better. (This article is comprehensive and gets pretty technical, so you might want to skim past any parts you don't understand.)
- Ganapati, Priya. Finger Fail: Why Most Touchscreens Miss the Point. Wired, March 4, 2010.–Good general overview of the issues of technical accuracy on capacitive touchscreens, which may be another good reason to use larger targets, because tolerance stacking means adding device inaccuracy to user inaccuracy. In fact, I used to suggest that, with bezel use, edge targets could be smaller; but because accuracy is poor at the edges of the screen, I no longer recommend this .
- Hoober, Steven, and Eric Berkman. Designing Mobile Interfaces. Sebastapol, California: O'Reilly, 2012–See the section Provide Constraints, around page 317, which discusses how scrolling should typically lock to one axis once scrolling starts.
- Hurff, Scott Using science to make truly tappable user interfaces. scotthurff.com, January, 2017.
- Sottek, T.C. Transit Wireless to Expand Cell Coverage to 30 NYC Subway Atations by 2013 with Support from T-Mobile and AT&T. The Verge, November 19, 2012. "Customers use only 20 percent of voice traffic underground compared to an above-ground cell site, but 5 times more data."
- Clark, Josh. Designing For Touch. .net Magazine, February 1, 2012.
- Diaz, Jesus. This Is Why the iPhone's Screen Will Always Be 3.5 Inches. Gizmodo, October 8, 2011.
- Wikipedia. Handedness Wikipedia.
- Hoober, Steven. Mobile Input Methods. UXmatters, November 1, 2012.
- Wroblewski, Luke. Responsive Navigation: Optimizing for Touch Across Devices. LukeW Ideation + Design, November 2, 2012.
- Fulton, Troy. Does Your mLearning Play Nicely with the IT Department? Learning Solutions Magazine. 13 February 2013.
- Fulton, Troy, and Bill Brandon. Bring Your Own Device: Are You Ready? Learning Solutions Magazine. 4 June 2012.
- Gottfredson, Conrad. Pave the Way for mLearning with mSupport. Learning Solutions Magazine. 19 June 2013.
- Haag, Jason. Using Augmented Reality for Contextual Mobile Learning. Learning Solutions Magazine. 25 November 2013.
- Shank, Patti. eLearning Guild Research: Mobile Learning for Supporting Workers' Performance. Learning Solutions Magazine. 16 May 2013.
- Villar, Mayra. On Social and Mobile Learning Architectures. Learning Solutions Magazine. 30 September 2013.
- Casebourne, Imogen. How Mobile Learning Is Done: Nine Case Studies from Around the World. The eLearning Guild, 2013.
- Quinn, Clark. Mobile Learning: The Time Is Now. The eLearning Guild, 2012.
- Shank, Patti with Ganci, Joe. Authoring Tools 2013: What We're Using, What We Want. The eLearning Guild, 2013.
- Unrein, Judy. HTML5 and eLearning: What Managers and Practitioners Must Know. The eLearning Guild, 2012.
- Google. The New Multi-screen World: Understanding Cross-platform Consumer Behavior. 2012.
- David, Matthew. Lessons Learned from A Massive Mobile Christmas. Inside Tech Talk. 6 January 2014.
- Koch, Peter-Paul. Browser stats for Q4. QuirksMode. 17 January 2014.
- Bérard, François. Measuring the Linear and Rotational User Precision in Touch Pointing. Proceedings of the 2012 ACM International Conference on Interactive Tabletops and Surfaces. New York: ACM, 2012—A detailed, well-designed exploration of separating physical pointing limits from other aspects of touch. It turns out that people can control their finger positions to an accuracy of around 0.1 mm. However, except in cases where a user interface provides enhancements—such as the edit magnifier in iOS—this is irrelevant, and we must consider all aspects of perception that result in pointing accuracy.
- Parhi, Pekka, et al. Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices. Proceedings of MobileHCI 2006. New York: ACM, 2006—Clear research findings that interference sizes are smallest at the center of the screen and notably worse at the corners. If you have access to the paper, see Figure 6 for a simple explanation.
- Park, Yong S., et al. Touch Key Design for Target Selection on a Mobile Phone. Proceedings of Mobile HCI 2008. New York: ACM, 2008—All users appear to have cradled the phone and used their thumb to tap, which is good to know. The authors made special note that the bottom of the screen was hard to tap accurately.
- Perry, Keith B., and Juan P. Hourcade. Evaluating One-Handed Thumb Tapping on Mobile Touchscreen Devices. Proceedings of Graphics Interface 2008. New York: ACM, 2008—Evaluated users both walking and standing, and all held the device with one hand and tapped with the thumb.
- Xu, Wenchang, et. al. Digging Unintentional Displacement for One-handed Thumb Use on Touchscreen-Based Mobile Devices. Proceedings of the 14th International Conference on Human-Computer Interaction with Mobile Devices and Services. New York: ACM, 2012—Detailed discussion of inaccuracies that liftoff induces on mobile handsets, with some exploration of the biomechanics that are involved and how those inaccuracies change according to the position on the screen. Interesting notes about changes in accuracy over time, which will inform any gesture standards that may eventually emerge.
- Wikipedia. Lower Third. Wikipedia, undated.—In the US, the term for bars at the bottom of the TV screen that provide labeling and context for what is currently on the screen is the chyron, pronounced ky’ron. We sorely need a term for docked toolbars, which are in such common use for displaying different kinds of information and controls.
- Bragdon, Andrew, et al. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. Proceedings of Graphics Interface 2008. New York: ACM, 2011—One of the few papers that I have found that very carefully explores gestures. The research is still foundational, so we can currently draw few conclusions that are applicable to design.
- Wilson, Andrew D., and Sabrina Golonka. Embodied Cognition Is Not What You Think It Is. in Frontiers in Psychology, February 2013, Volume 4, Number 58. Retrieved October 25 – This article is very long for an introduction, but very clearly explains how embodied cognition works, why it matters in the real world, and the multiple approaches to embodied cognition that you will run into as you read more research.
- Oremus, Will. The One Big Problem with the Enormous New iPhone Slate, September 19, 2014.
- Hurff, Scott. How to Design for Thumbs in the Era of Huge Screens. Quartz, September 19, 2014.
- Schmidt ,Mikkel. Mobile UI Ergonomics: How Hard Is It Really to Tap Different Areas of Your Phone Interface?. Medium, October 17, 2014.
- Bergstrom-Lehtovirta, Joanna, and Antti Oulasvirta. Modeling the Functional Area of the Thumb on Mobile Touchscreen Surfaces. Proceedings of the 32nd Annual ACM onference on Human Factors in Computing Systems (CHI '14). New York: ACM, May 2014.
- Ng, Alexander, Stephen A. Brewster, and John H. Williamson, Investigating the Effects of Encumbrance on One- and Two-Handed Interactions with Mobile Devices. Proceedings of the 32nd Annual ACM Conference on Human Factors in Computing Systems (CHI '14). New York: ACM, May 2014.
- Callender, Mark N., A Conceptual Design of a General Aviation Hands-on-Throttle and Stick (HOTAS) System. University of Tennessee, 2003.
- Human Factors Design Standard. Federal Aviation Administration: Washington, DC, updated in 2012.
Invite Me Over, Buy Things From Me
Want to hear me talk about this? Then just invite me to speak your event. Have specific questions or want me to help your company? I can do that too, just contact me.
Buy a tools to help with your mobile touchscreen design. Order a Touch Template or get a free set of Touch Overlay stencils today.