Designing for Touch: Mobile Design is Industrial Design

Notas do Editor

2. I wrote a book for O’Reilly this year called Tapworthy. Not about code or marketing, but about design and user experience; what makes a great iPhone app: how to “think iPhone” Best apps account for whole range of softer, human, non-technical considerations Psychology, ergonomics, culture, aesthetics, efficiency. Form/context of iPhone puts special demands on us as interaction designers, unfamiliar to folks accustomed to desktop design One of those aspects is the impact of designing for fingers and thumbs. This talk is about the practical principles that you can immediately use to organize your views. But more than just saying HOW, I hope to get across WHY. But first, want to talk about an AWESOME Swiss Army Knife.
3. The Wenger Giant. No photoshop shenanigans here, this is a real knife. Guinness world record: most multifunctional pen knife. 87 tools, 141 functions. Cigar cutter, laser pointer, golf reamer. Clearly ridiculous but intentionally so. 100th anniversary: include every gadget ever included. Fun bit of humor and whimsy—from the Swiss! But as a knife, it’s a failure. Usability problems obvious, won’t linger long. Heavy physical load, heavy cognitive load 87 tools, just finding the one you want is a challenge. In a mobile interface: Clarity should trump density, less is more More features you have, more controls you need.Too much in small space Ergonomically unsuited to purpose: Pocket knife can’t fit in pocket.
4. Simple and elegant in contrast, but lots of similarities with Swiss Army Knife: Mobile devices, small, pocket-sized, meant to be worked by hands and fingers. One gadget at a time, one app at a time. Simple, specialized tools, right for job, focused. Switch quickly between apps Big toolbox: Yours doesn’t have to do everything, just a small focused slice. Overwhelm if try to do too much. Successful iPhone apps depend on design restraint. Not just because of physical constraints, which the Giant flaunts, but because it’s handheld and works by touch. That means you’re doing something more than just pushing pixels...
5. Not literally. Virtual, flickering liquid crystals. But an interface explored by human hands, unlike desktop Not just graphic design: industrial design Your app’s design determines how hands physically interact with the iPhone Here again, it’s similar to a knife...
6. Until you open one of its gadgets, a Swiss Army knife isn’t a knife at all. It’s just a handle. A blank.
7. Blank slate. Impose any interface. Requires touch, which defines device in very physical way. Real ergonomics: How does it feel in your hand? Specifically, one hand. Optimize for one-handed use
8. Thumb has its limits. And this is it. Hot zone for right-handed user. Right thumb is most comfortable tapping this region when phone held in right hand.
9. Primary controls at bottom. Standard toolbar and tab bar Opposite of desktop. Frequently used buttons at bottom left. Edit: Lesser used controls at top right.
10. These principles are reflected in everyday physical objects. Fingers (or feet) obscure view. Have to clear the way. Content at top. Controls at bottom.
11. Content at top. Controls at bottom.
12. Content at top. Controls at bottom.
13. Organize left to right. Conveniently, that’s also how we read.
14. Here, you see that common functions placed in hot zone, and delete in toughest place to tap. But what about lefties? 10%-15% Optimizing for righties actively hurts those guys.
15. Some apps, including Twitterrific, offer option to flip controls for lefties. A good option for especially tap-intensive apps. The problem is that now you’re organizing importance of controls from right to left, which is not how we’re accustomed to reading. So again, lefties are inconvenienced. Have to gauge importance of tap convenience vs ease of scanning.
16. PCalc calculator on Mac for 20 years. Always used mouse and keyboard, not hands. Used that desktop design in 1.0 as-is. But with numbers on left instead of right, people found it uncomfortable, asked are you left-handed? Swapped it in later versions Kept original layout as an option, though, for lefties.
17. Swapped the layout in subsequent versions. Kept original layout as an option, though, for lefties.
18. Layout important but also button size How big is finger tip? Apple has very precise opinion on that: 44 points — about ¼” Spread of fingertip as contact point on screen. Size of target that finger can reliably hit iOS 4 introduced points to account for different screen resolutions. One point is one pixel on older phones 2 pixels on iPhone 4, since it has twice the screen resolution. When designing native apps, think in points, not pixels. 44x44 minimum ideal 44 shows up all over standard controls....
20. Compromise necessary sometimes. Have to get all the letters of the keyboard on the screen. Squeeze to 29 width. As long as one dimension is at least 44, can squeeze other to 29. Practical minimum for buttons: 29x44 points
21. Again, though, 44 appears everywhere. Nav bar, height of rows in standard list view, tool bar. Every element in proportion, not only to one another but to the finger itself. Not only for the hand, but of the hand Design to a 44-point rhythm Don’t think 44 just for buttons but for overall layout
22. Don’t have to be super literal Home screen grid organized in 88, multiple of 44 Looks right, but literally feels right Gives you easy, to read, easy to touch interface.
23. Sometimes, though, touchscreen interfaces are _too_ easy to touch. Art of self defense against mistaps, something I call gesture jiujitsu. The problem: Ease/sensitivity of touchscreen can work against you. Buttons get pushed when don’t intend it. Surprise calls from handbags and backpockets. Carelessly delete data by tapping wrong item. Awkward or challenging gestures can protect against mistaps.
24. Get a taste of this very first time you use iPhone. “Slide to unlock” control greets you. Just enough concentration and precision. “Slide to power off” and “slide to answer” Ensures it’s you doing the work, not phone rattling around in bag.
25. Swipe to delete picks up on that same motion. Swipe and tap difficult enough not to do by accident. Still intuitive. This gesture is a shortcut for the three taps to delete. Careful series of taps also an effective defense. Like a lock-laden door like a triple-tap defense is a headache if you’re in a hurry. Use these combination locks sparingly, for rare actions Or provide a shortcut, like swipe to delete.
26. Extra taps are a time-honored tradition in software protection. Confirmation screens: “Are you really sure you want to do that?” Apple tells you to use action sheets for confirmation dialogs, like the one shown here. Nagging approach rarely effective, Annoys more than helps We develop an immunity, sail through without thinking. Too easy to dismiss, too annoying to heed. Apple lets you turn off confirmation in Mail app. Underlying idea is sound: Work harder to do something you might regret later. Awkward gesture or multi-tap can do just as well without annoyance.
27. Ultimate backstop is undo, just take it back. Undo with shake emerging standard, but many still unaware of it. Shake in general a troubled gesture: great for novelty features, but disruptive/awkward Draws attention to hardware and away from task. Breaks spell, pulls you out of flow Tough to keep a low profile. Esp: iPad Easy to trigger by accident. Fine to implement it. But might not be only option. Novel alternative is to offer temporary undo button. Gmail -> five seconds to call back that email.
28. Instapaper: similar limited-time undo button. Instapaper saves long articles to read later. Saves place when you pause midway through. Marco: Got emails from people upset lost place by status bar. Data loss. Changes toolbar for five seconds after scroll “Restore to position” button to take it back. After-the-fact defensive design. Examples of defensive design for touch screens. Going to talk more about gestures in ipad talk
29. Not only small buttons but too close. Not just button size but spacing Closer tap areas are, larger they should be
30. Call Global and Skype. Very close together but by making the buttons large and chunky, still easy to hit without error. The exception is the buttons on the bottom of Call Global. Trouble w/proximity when you get close to bottom tab bar. User testing: Mistaps occur most frequently occur at bottom of screen, where you have collisions with main navigation tab. Call Global: Small buttons jammed against tab bar. Skype easier because the buttons are bigger. Still, zone above tab bar should be avoided where possible.
31. Compromise sometimes necessary: USA Today When developing app, USA Today team considered all kinds of locations for the “i” info icon and refresh button. This is what they wound up with. But they discovered it was nearly impossible to hit those targets. Too small.
32. Decided to make the tap area bigger than the icon itself. Even though physical footprint of button was small, the tap area would be large enough to hit without error.
33. Trouble is, Apple got there first, tab bar extended into canvas, making their problem even worse. Had to design custom tab bar to work around the problem. Point is, if you’re going to take tap risks, you have to do everything you can to minimize the impact.
34. Things checkbox Might seem counter-intuitive but: Success of small interfaces relies on big elements Chunky buttons, generous spacing. Not just ergonomics, but cognitive Less there, easier to take in at once
35. When can fit everything on one screen, do it Out of sight, out of mind <- particularly true in distracted mobile context Matter of brain and strain: Fire up brain cells to think what’s missing Scrolling requires extra thought, extra swipes. Your job as designer is to reduce both. Reinforces illusion of physical device Fixed screen gives sense of solidity
36. Approach works best for utility apps. Weather app is the prototypical utility app. Take it in all at once Border makes it clear entire screen. Sense of solidity.
37. Surf Report. This class of apps: Graphically rich, telegraph quickly. Glance test. Apps pass glance test when: hold at arm’s length, can still soak up the info quickly.
38. Tea Round: Popular in UK where it tells you whose turn it is to brew the tea. Most apps need more than a big teacup. Can’t just strip out all controls or information.
39. Or can you? It depends on what your audience wants. Umbrella: The Simplest Weather Forecast “Do I need an umbrella today?” All I need from weather. Less almost always more in mobile More specifically: Just enough is always more. Mobile environment distracting, competing w/ big bright world Identify the goal, figure out bare minimum needed, identify the primary tasks. optimize the hell. Some apps do require more features. Facebook & Joe Hewitt. Facebook launched as stripped-down companion app, users hated it. Demanded far more functionality. The app required high degree of complexity. Now more popular on mobile than desktop Features don’t have to be stripped out, but has to remain simple. Complexity is good. Complexity gives texture to our lives, to the world, to our software. Our job as designers is not to remove complexity, not to dumb down apps. Our job is to manage complexity, to make complexity uncomplicated.
40. Accuweather.com Not prettiest app but does a nice job of handling dense info. Weather: Dense info, dew point at 11am This no scroll view provides rich weather info. Uses content as controls, revealing more info about specific content when you tap it. More taps, but each screen more digestible. Improves tap quality even though increases quantity. Tap quality more important than tap quantity.
41. USA Today Experimented a lot with no-scroll screens, often with good success. Here, accordion control to manage their pictures screen. Lots of chrome but with a purpose. Animation hint to show people how to use the accordion control.
42. Tried to do it with news, but obviously didn’t work. Went back to a standard list view. Sometimes you just need to scroll, that’s okay. Animation hint at top of screen. Be scroll skeptic, but no need to be dogmatic. Scrolling/flicking part of the fun.
43. Less successful when they tried it with headlines. This early mockup shows the approach only showed one headline at a time on the headlines page. Unacceptable. Went back to list view
44. Whether or not you decide to go with no-scroll screens, useful exercise to ask: can this be one screen? Scroll skepticism often leads to simpler layouts, and that’s the point. It’s a useful filter to help you: Eliminate controls, turn content into controls Do you really need all those features? What’s the minimum you need to offer?
45. If you’re building an app to fly an airplane, you might build this...
46. ...when your customers really want this. What’s their goal? Help them get there as fast as they can.
47. Momento: Great micro-journal, record moments of the day. Can attach things to your moment with icons on screen, but doesn’t leave much room for the main event, the content. Common problem for Twitter apps
48. Tweetie solved it elegantly. The standard view shows no secondary tools. Focused entirely on primary task: Tapping out a tweet.
49. Instead, hides tools behind a secret panel. Secondary tools are shifted to a secondary view. Trouble with secret panels is that they have to be discoverable. Latch hidden in plain sight. In recent releases, added animation hint. Optimize each screen for the primary task. Secondary tools and controls behind hidden doors and secret panels.
50. All of this takes a lot of thought and planning. Simple is hard, and effortless takes lots of work. You have to think ahead.
51. My friends’ six-year old hatched a scheme to trap her grandmother in a cage. Complex plans are best worked out on paper. Involve stakeholders at this stage, even getting them to participate in the sketches. Changing paper is cheap, but changing pixels is often expensive.
52. Things did a complete paper prototype before starting to build.
53. Get to screen as soon as possible after you’ve got your paper flow planned. Early PCalc prototypes let developer James Thomson get a feel for the device. Make sure it feels right, buttons well sized, in comfortable position.
54. On left: Early prototype for Twitterrific, final screen on right. Lets you test before investing in the expensive, pixel-perfect work of aesthetic design. It’s the bones of the app, the features and controls and layout, that will determine whether it’s tapworthy.