Last week, Luke Wroblewski brought us the first video in his “Re-imagining Apps for Ultrabook” series titled Touch Interfaces, which went over the impact of touch and touch design principles. This week, he released the second video, titled Touch Targets. In this video, Luke goes over the importance of designing good targets for touch, as well as how postures impact how we use our devices.
Touch design is all about content
There’s no getting around it: touch is here to stay, and more and more devices are adapting touch-enabled features, controls, and form inputs to satisfy consumers’ ever-growing appetite for tactile input. Touch devices make it all about the content; that is, direct interaction with content. However, our fingers just aren’t as precise as we’d like them to be, which makes designing for touch a different kind of challenge than designing for the traditional keyboard and mouse.
Best sizes for touchable controls
What makes controls on the screen easy to touch? The best touch target size for touchable controls is 23 x 23 px, which equals out to 6mm in physical dimensions. This is the optimum size for reducing the number of errors (not to mention frustration!) when we accidentally don’t touch the right things with our fingers, not to mention conflicting with another control. Making things just a little bit bigger is an important part of touch design.
Target size and error rates
Target size of controls definitely influences error rate. When targets get too small, error rates shoot up. Does that mean our fingers are too fat? No, not at all – it’s just that the average size finger is bigger than the average size control, and when you put those two together it doesn’t always work out so well.
Two kinds of input methods
Whether you’re converting an already existing application or building a new one from scratch, you can really go two ways as far as input method: keyboard and mouse first, or touch first then keyboard and mouse as a backup/tandem. Both methods of input have minimum acceptable control sizes.
For example, if you’re looking to revamp a keyboard and mouse first app, you can take an existing set of controls and enable them to be used with touch. You can accomplish this by:
- Space: space out controls more in touch mode, make them easily touchable
- Auto: turn on touch mode automatically when a touch input is detected; i.e., if someone is editing text, the interface can see that they are using a finger and space out controls accordingly for ease of input
- Size: our fingers need a bigger landing pad than a mouse does, so make controls that will play to this rather than against it
From desktop to touch-enabled: points to remember
One example used in the video of a touch-optimized desktop app adapted to take advantage of the Ultrabook touch features was a social networking app made just for storm chasers called “Tweester”. Three main points were made in the adaptation of this app for touch:
- Proper touch target sizes are essential
- The content is the interface
- Watch your forms!
We’ve all tried to fill out a form with our fingers on a smartphone or tablet, right? Talk about frustrating. With touch-enabled forms like the ones in the Tweester app, rethinking is essential. Instead of the standard text box, a touch-enabled form might result in designs like instant input mode, virtual keyboards, different input controls like sliders, radio buttons, or check boxes. These kinds of controls reduce reliance on the keyboard, as well as unnecessary steps.
Keep it simple
Luke reiterated the idea of simplicity in design in this second video. Touch forces simplification. Developers have to decide which actions are the most important, what stays on the screen, and what goes away. This process might seem more difficult, but in the end, you wind up with software that is easier to understand and thus, more often used.
The second half of this video focused on common patterns of posture and how it relates to designing for touch. For instance, most people are right-handed, which affects how we hold our devices. There are both easy to hit areas and hard to hit areas in the tablet and the smartphone.
The ergonomics of Ultrabooks
What about Ultrabooks? What kind of posture can we expect from these touch-enabled devices? A recent study by Daria Loi showed that people actually got very close to the Ultrabook screen, using their thumbs and index fingers to control what they were looking at. Touch-enabled Ultrabooks are still quite new to the market, thus, the ergonomics of how we use these devices isn’t quite set in stone, but so far, the reaction has been very positive.
Touch and Postures: two things that go together
Touch is a fundamental human instinct, and it’s a game changer in app development. Touch forces us to rethink how we design. There are a few basic principles to remember when designing for touch:
- Use appropriate sizes
- Maintain space between controls
- Important actions must be in easy to reach spaces on the screen
- Optimize controls for touch
- Simple is better.
Touch is only going to gain popularity as we move along to the fall release of touch-enabled Ultrabooks and Windows 8. Mainstream adoption of touch by both consumers and enterprise customers is at the beginning of what it could be. When in doubt, lean towards implementing touch into your designs for an increasingly more demanding audience.