Designing for Touch

I’m woefully behind on my webbish related reading, but I’m trying this week to change all that and it starts with finishing Designing for Touch by Josh Clark. Clark’s well known in the world of the web for his passion about interaction design and in particular all the new and varied ways we relate to, use, and design for the multi device world we live in. In Designing for Touch, he doesn’t disappoint with a small volume absolutely packed with information.

This book has so much information in so few pages that at times it was a bit overwhelming, in a good way. There is so much to think about now when designing a site or application, and Clark does a fantastic job of pointing out the truly important aspects. I particularly enjoyed the way he spent so much time on gestures and coaching users to discover the gestures that are important in your app. But what strikes me the most about designing for touch, it is the small details. Ensuring your forms bring up the right keyboard, allowing users to discover your gestures, and thinking about making things efficient for the user are the ways in which your application succeeds. And in the end, these things matter for all screen sizes and whether the user is using their hands or a mouse.

And, as usual, the writing and tone of the book is spot on. I laughed out loud at times, and I underlined some passages just because I loved the turn of phrase. Thank you A Book Apart for your continued excellence and Josh Clark for sharing your wisdom.

I read the paper copy of the book and have my highlights broken up by chapter below:

Chapter 1

In the same way real-world objects disappoint when they are physically awkward, your touchscreen interfaces will fail if they are uncomfortable in the hand. This interplay of digits with digital is the crux of designing for touch. (p. 5)

When touch is introduced, cold pixels somehow take on the warmth and emotional investment of physical objects. (p. 15)

…[T]he touchscreen isn’t a complete mouse replacement, but rather a welcome addition to the mix…. (p. 15)

And that’s the most striking consistency across the form factors we’ve reviewed: thumbs do the driving now matter how large the screen. (p. 16)

Which actions should be inviting, and which should challenge ever so slightly? (p. 17)

Assume that people will lose sight of everything below the object when they touch it—and of the object itself. This affects how you label controls and confirm touches. (p. 19)

We need to change the way we think about designing for larger screens. We need to change our thinking about screens, period. They deceive and distract us. What we think we know about screens often takes our designs in the wrong direction. (p. 18-19)

Chapter 2

The new pointer media query targets gadgets with fine or course pointing tools—or even on pointer at all, like voice- or keyboard-only interfaces. (p. 45)

Because any device might be used for touch, we must assume it will be. In the face of this uncertainty, it’s our job to ensure that the layout is accessible to both cursors and fingers. Every web design—and the same goes for native desktop apps—should be finger friendly. (0. 48)

The forthcoming standard for CSS4 media queries will introduce a new hover media query that controls styles based on the device’s hover ability. (p. 51)

No matter how chunky or dainty a person’s fingers may be, the surface area of fingertips against the screen is remarkably consistent. (p. 54)

Chapter 3

You can treat these shortcuts as power-user options by spiriting them away behind hidden panels and revealing them with a gesture. (p. 65)

Tap quality is far more important than tap quantity. As long as each tap delivers something—new info, a completed task, or even a smile—that’s a quality tap that maintains momentum. (p. 68)

A tool intended to feature content shouldn’t hide it or give you a thumb sprain to find it. (p. 72)

Chapter 4

Unfortunately while our hands have a robust vocabulary for speaking to people and objects, we’re still in the grammar-school stages of a gestural language for touch-screens. (p. 93)

When it’s not convenient to interact with the primary object, adding a control to work it from a distance is ingenious. (p. 103)

Buttons are workarounds for moments direct interaction isn’t possible. (p. 103)

When we create the illusion of direct interaction with information, we can finally say that the message is the medium. (p. 105)

…[W]hen gestures hinge on simple interactions based on the physical world, you may not have to do much education. (p. 108)

Quick-to-discover gestures, combined with well-labeled traditional controls, should always form the foundation of your interface. Always make it easy to figure out your application’s basic actions. But don’t shy from deploying more abstract gesture shortcuts as alternatives alongside standard controls, like keyboard shortcuts on the desktop. (p. 114)

Chapter 5

Explicit help is okay by the way. I’ve heard designers say, “If your interfaces needs explanation, you’ve failed.” It isn’t true. While basic features should be easy and obvious from the get-go, advanced features always need a little instruction, even in the most well-considered interface. (p. 146-147)

Walkthroughs beat tutorials. (p. 150)

It’s like training with wheels: you’re moving on your own, but with a few supports to keep you from falling. (p. 150)

The best teaching interfaces notice your activity, inactivity, and overall learning progress, and adapt their guidance accordingly. That’s where leveling up comes in. (p. 152)