In his Designing for Touch talk at An Event Apart in Seattle, WA 2013 Josh Clark shared how to consider the ergonomics of designing for touch as it permeates an ever-increasing range of devices. Here are my notes from his talk:
- Through the history of Web design, we've hit a few points where we've realized we're doing things wrong: table layouts, Web standards, and more. Touch is heralding a similar transition.
- There is no one true input for the Web. We have to contend with fingers, mice, keyboards, and more.
- Touch is no longer just isolated to smartphones and tablets. Every desktop design has to be touch-friendly now.
- Web design has been considered a visual medium. But today its not just how your pixels look on the screen, its how they feel. We’re no longer visual designers but industrial designers as well.
- On touch screens, there’s real ergonomics to design toward. Touch is a physical interaction: how do things feel in your hand? How do designs work with your hand?
Phone Guidelines
- There are three ways to hold a phone: one thumb/one hand, two hands/one finger or thumb, and two hands/two thumbs. 49% of people observed using phones outside, used one thumb/one hand. But when you add in two handed thumb use, you are looking at 75% of thumb use.
- The thumb zone: the most comfortable area for touch with one-handed use. This flips standard navigation controls from the Web on their head. The bottom is now the better area for important controls.
- Content at the top, controls at the bottom. This is a common industrial design convention that’s now making its way to the software. We don’t want our fingers covering the content when we are interacting with.
- Don't worry so much about left vs. right positioning, the important decisions are around top vs. bottom positioning of controls.
- Content at the top, controls on the bottom is an age-old industrial design pattern that allows you to make sure people can use controls without obscuring content.
- On Android, however, system controls are on the bottom of the device. To avoid collisions with these controls, Android recommends placing app controls at the top. This means our fingers often overlap content.
- On the Web, fixed positioning and limited height make fixed positioning controls at the bottom in mobile Web browsers harder. Some browsers also include their own toolbar at the bottom once again crowding out space. Instead a page footer navigation pattern can provide quick access to navigation controls with an anchor link at the top.
- iOS apps: controls at screen bottom. Android apps: controls at screen top. Web: controls at page bottom.
Tablet Guidelines
- Like phones, there are a number of different ways to hold a tablet. But generally, you are holding on it's side.
- On tablets, its still about ergonomics of thumb use. Consider using the upper sides of the screen on tablets for navigation controls. Favor the sides and corners -avoid the top center.
- Minimal effort is required to get to the sides of a screen, as compared to the top or bottom.
- Bottom-aligned scrubbers, where you want to pan and preview content might be an exception to the rule.
- Designing for large tablets: favor sides and corners; avoid top center; use bottom to see effect in canvas.
Hybrid Guidelines
- Hybrid laptops and tablets that run Windows 8 are entering the market, these devices require touch on traditional desktops and laptops.
- On these devices, touch is often preferred to mouse and keypad interactions when both are available.
- To avoid gorilla arm issues, people often pull their screens forward and use their thumbs on the sides (bottom sides) of the device.
- To optimize for thumb-based use, you might want to place primary controls on the left side of the screen. This does not mean main navigation options but frequently used controls instead.
- Thumb controls on the left side for key content like share actions.
- These comfortable to touch areas are very different from desktop conventions.
- Screen size is a lousy way to detect a touchscreen. There’s no reliable way to detect touch on all devices.
- CSS4 media queries are exploring a pointer:coarse attribute to allow people to change styles for touch-based interactions.
- Since we can't reliably detect touch on all device. All desktop designs have to be touch-friendly.
- Treat hover as an enhancement, not a critical element of your interface (the only way to get things done).
Touch Target Sizes
- The optimal touch target size is 7mm, based on the average size of human finger tips and pads. CSS2.1 defines a pixel as 1/96 of an inch. So 7mm should be 30pixels. However, things aren’t so easy because of dynamic viewports.
- Pixels are variable in a dynamic viewport. To account for this we need to use 44 pixels, instead of 30. That’s about 2.75ems.
- Apple mostly uses a 44px rhythm to design the key apps in iOS. As long as you get 44 pixels in one dimension, you can use 29 for the other dimension. This creates a visual harmony based on a physical dimension.
- Think physically. Interfaces for the hand but of the hand as well.
- When you follow touch target sizing guidelines, you trade off density. That is, you end up with less room on the screen. That can be a good thing. On all interfaces, especially mobile, clarity trumps density.
- Simple is terrific but simplistic is not. Don’t loose important complexity. Complexity gives our lives and interfaces texture. People don’t want dumbed down interfaces. They want uncomplicated experiences.
- On larger screens, people assume the empty space must be filled. This leads to unnecessarily cluttered interfaces.
- On small screens, secondary information can be a swipe away. Use the principle of progressive disclosure to reveal information as it is needed. Progressive disclosure” manages complexity by revealing it gradually.
- Extra taps and clicks are not evil when you can manage the performance issue. On mobile we might want to rethink our aversion to additional steps. As long as each tap is a quality tap that keeps the scent of information strong, its not a wasted tap.
- However be mindful of long scrolls that obscure what content is on a screen. Off-canvas elements can help you manage this.
Beyond Touch
- The best touch interface is sometimes no touch at all. Using sensors and speech is the next frontier for interaction design. This is no longer science fiction but reality.
- The challenge for us over the next few years is not designing for one input but many.
- Digital is becoming more physical, while physical is becoming more digital. How do we allow all our interfaces to blend into the real world?