designing for TOUCH josh clark @bigmediumjosh Learn more about the book, Designing for Touch: http://abookapart.com/products/designing-for-touch Brief books for people who make websites No 14 15% discount Josh Clark DESIGNING FOR TOUCH EVOLVEDFT foreword by Brad Frost abookapart.com We’re here to talk about the science of interface design. It used to be straightforward. Mouse and cursor everywhere. Same inputs. That’s changing. Just as the shape and nature of our screens are changing—our outputs— we’re now wrangling a whole diferent set of inputs too. Touch certainly the most popular alterative input method. Not just on our mobile screens... hands and fingers are coming to life on our desktops, too. As advertised, this workshop is about designing for touch. We’ve been dealing with touch on smartphones, and tablets are coming on strong. So sure, I’ll talk about guidelines for designing on phones and tablets. But perhaps more important, I’ll also talk about designing for touch on the desktop. [next] Because friends, touch has erupted on the desktop, with touchscreen laptops, with hybrid tablet devices like Surface or iPad Pro w/keyboard. no, it’s okay. TOUCH THAT As advertised, this workshop is about designing for touch. We’ve been dealing with touch on smartphones, and tablets are coming on strong. So sure, I’ll talk about guidelines for designing on phones and tablets. But perhaps more important, I’ll also talk about designing for touch on the desktop. [next] Because friends, touch has erupted on the desktop, with touchscreen laptops, with hybrid tablet devices like Surface or iPad Pro w/keyboard. Not just hardware but software. Windows and Chrome OS elevate touch as a first-class citizen on desktop operating systems. And that has some thorny implications for responsive design. ULTIMATELY, IT MEANS THIS: All desktop designs have to be touch-friendly, not just mobile. But first...let’s begin at the beginning: With the basics, with first principles. Not just hardware but software. Windows and Chrome OS elevate touch as a first-class citizen on desktop operating systems. And that has some thorny implications for responsive design. ULTIMATELY, IT MEANS THIS: All desktop designs have to be touch-friendly, not just mobile. But first...let’s begin at the beginning: With the basics, with first principles. Not just hardware but software. Windows and Chrome OS elevate touch as a first-class citizen on desktop operating systems. And that has some thorny implications for responsive design. ULTIMATELY, IT MEANS THIS: All desktop designs have to be touch-friendly, not just mobile. But first...let’s begin at the beginning: With the basics, with first principles. I have an ugly truth for you, friends. To date, we’ve thought about web design as a visual pursuit. A feat of visual design, of information design. So we naturally approach our work in visual terms, we think in pixels. But when you add touch to the mix... we go beyond the visual... and to the physical. So we naturally approach our work in visual terms, we think in pixels. But when you add touch to the mix... we go beyond the visual... and to the physical. It’s not just how your pixels LOOK but how they FEEL It’s not just how your pixels look. But how they feel. How do your pixels feel in the hand? designing for TOUCH • Touchscreen layouts • Gestures Let’s go back just a few years. To the release of a revolutionary new phone. The thing worked in a wholly diferent way from what came before, but newcomers and technophiles alike were charmed by it. Industry observers called it intuitive, efcient, even fun. The new phone quickly became a status symbol, owned by a select few at first. As time went by, nearly everyone got one, and now we find its operation so natural that we can barely imagine phones working any other way. You guys know the revolutionary new gadget I’m talking about. Bell Telephone’s remarkable Push-Button phone. In time we’d call it TouchTone. The year was 1963. In retrospect, its layout seems so obvious. So familiar, no other design seems possible. But that wasn’t the case. ---- Bell researchers tested 16 diferent keypad variations, searching for the design that enabled the fastest, most reliable dialing. So familiar, no other design seems possible. But that wasn’t the case. ---- Bell researchers tested 16 diferent keypad variations, searching for the design that enabled the fastest, most reliable dialing. Bell Lab scientists brought customers into the laboratory. Telephone usability testing. They measured dialing speeds to fractions of a second. They asked callers about the comfort and feel of the keypads. They played with button tension and whether buttons should make a click sound when pressed. So they were certainly interested in the keypad’s visual layout BUT EVEN MORE CRUCIALLY... they were concerned with its feel, its ease of use by the human hand. The layout of the buttons had to be MORE than aesthetically pleasing; it had to be optimized for physical use. Fast forward to today, and we’re learning the same lessons all over again. You’re not “just”a visual designer. That means you’re not just a visual designer anymore. You’re an industrial designer. You’re also an industrial designer. Or at least your job now includes aspects of industrial design, the art of crafting a physical thing. Because when you design a touchscreen interface, you have real, honest ergonomics to consider. In a very real sense, you’re designing a physical device. Not literally. Virtual, flickering liquid crystals But because they’re explored by human hands— unlike desktop experiences to date— you’re designing how hands interact Been dealing with this on mobile for 5 years. Phones and tablets confront us with a blank slate. Invite us to impose our own interface, ANY INTERFACE. Because that interface requires touch, defines device in very physical way. Soldering circuit boards, molding plastic, diecast Real ergonomics: Again how does it feel in your hand? 15 49% 36% % htp://www.uxmaters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php Basically three ways to hold a phone. [next] Steven Hoober did a field study, observed over 1300 people in the street tapping away at their phones. Big plurality, nearly half, were tapping with one hand, with their thumb. We switch between these grips often, very contextual. The most popular though is that one-handed grip. Gives us freedom to use the other hand. To write, to hold cofee, to juggle a baby. But I want to pause to look at that middle one, too, where we hold the phone in one hand and jab with the other. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php This picture shows a finger doing the tapping. Turns out that most of the time, when we use this hold and stab posture, it’s not actually the finger that does the work. Instead, Steven observed: 72% of the time people use the cradle grip, WE USE OUR THUMB. 75 % of phone interactions Add it up, and that means 75% of our phone interactions are these two grips. Three quarters of the time, WE TAP THE SCREEN WITH ONE THUMB. We often talk about how we’re designing for fingers... All thumbs. In reality, we’re designing for thumbs. As we’ll see, that truth cuts across other device types, too. Thumbs are awesome. But they have their limits. And this is it: the thumb-tapping hot zone. Fan-shaped comfort zone for thumb when held in right hand. Bottom of the screen opposite side of the thumb— left side for the right thumb— where tapping is easiest, where thumb naturally rests Obviously thumb can reach anywhere onscreen, but this is most comfortable zone. Important implications: That’s why iOS puts primary controls at bottom. Turns desktop convention on its head LEFT VS RIGHT Steven’s study found that two-thirds of the time, we tap the screen with the right hand. But very fluid about which hand we use. More important bit is top vs bottom. And look what’s NOT in the thumb zone: edit button. Twitter does something similar: navigation at bottom, and the New Tweet button at top. Because you don’t want to let tweets get away from you accidentally. You don’t HAVE to put data-changing buttons at top right. If it’s the primary action that you want people to take over and over again, then put it down at the bottom. That’s what Swarm does for checkin. (Twitter’s post button actually isn’t the primary action; navigation/reading is primary.) Here are a few examples. Feet at bottom, scale at top. Design to keep fingers out of way of content. Hands, feet, fingers at bottom to make room for display at top. Consider this a cardinal rule: put controls below content. Labels and active states too. Move them out of the way of the obscuring finger. Familiar pattern for keyboards. (And evidence of why you have to test your design on the device, not just draw it on desktop.) We’ve been focusing on iOS examples. In iOS, controls sink to screen bottom. But it all depends on who gets there first. So the story changes a little bit for Android. Complicated by the presence of system buttons on the bottom. They’re doing the right thing: controls below content. The trouble is, where do you put YOUR app controls.