In his Designing for Touch talk at An Event Apart in Atlanta, GA 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:
- 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?
Designing for Thumbs
- 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.
- 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. Instead a page footer navigation pattern can provide quick access to navigation controls with an anchor link at the top.
- 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.
- Bottom-aligned scrubbers, where you want to pan and preview content might be an exception to the rule.
What About Hybrids?
- Hybrid laptops and tablets that run Windows 8 are entering the market, these devices require touch on traditional desktops and laptops.
- 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.
- 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.
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.
- 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.
- Extra taps and clicks are not evil. 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.
- 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?