Josh Clark - Designing for Touch

FOR DECADES, we explored the digital world with prosthetics called mouse, keyboard, and cursor. We nudged plastic bricks across our desks. We directed onscreen arrows to poke buttons from afar. We clicked icons. We pointed at pixels.

But then we started holding those pixels in our hands. Thanks to smartphones, billions of people wrangle touchscreens every day, all day. We now touch information itself: we stretch, crumple, drag, flick it aside. This illusion of direct interaction changes the way we experience the digital world, and it requires designers to adopt new techniques and perspectives. Touch introduces physicality to designs that were once strictly virtual; for the first time, digital designers have to ask themselves, How does this design feel in thehand?

Thats what this book is about. Touchscreens are everywhere: cabs, vending machines, wristwatches, airplane seats, dressing-room mirrors, and of course the gadgets we carry in our pockets and handbags. Nearly half of Americans bought a touchscreen tablet between 2010 and 2014; in 2011, Apple sold more iPads in a single year than all the Macs it sold in the previous twenty-eight years total ( http://bkaprt.com/dft/00-01/ , http://bkaprt.com/dft/00-02/ ). And touch has arrived on the desktop, with hybrid tablet/laptop devices that combine keyboard, cursor, and touchscreen.

Despite this inundation of touch devices, most websites remain stubbornly optimized for mouse and cursor. Its past time for designers to catch up with a new generation of web-savvy gadgets. Responsive design jolted the industry with the simple truth that the web is not limited to a single output (the desktop screen). Now comes another revelation: the web is not limited to a single input. Touch is one part of an intricate choreography of inputs that might include keyboard, mouse, phone pad, Kinect-style natural gesture, speech, stylus, or dashboard knobs, as well as onboard sensors like camera, audio, GPS, and more. This complex mix affects not only the layout, but also the essential concept of your design. Designing for touch goes way beyond making buttons bigger for fat fingers.

This slender volume gives you a running start with most touch projects, diving into detail on popular form factorsphones, tablets, phablets, and desktop hybrids. Ill describe how design imperatives shift according to software environment, and how designs should flex to make way for non-touch inputs.

This means revisitingand in many cases chuckingthe common solutions of the last thirty years of traditional interface design. Youll discover entirely new methods instead, including design patterns, touchscreen metrics, ergonomic guidelines, and interaction metaphors that you can use in your websites and apps right now. The heritage and sources for these techniques may surprise you. Well search for design patterns in vintage gizmos. Well plumb video games and car dashboards for interaction lessons. Along the way, youll learn to surface invisible gestures, discover the subtle power of animation, and find out why a toddler is your best beta tester. Crack your knuckles, limber up those fingers, and lets get started.