SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)
•Download as KEY, PDF•
33 likes•3,157 views
The iPad and its entourage of Android tablets have introduced a new style of computing, confronting designers with unfamiliar aches and pains. Learn the symptoms (and fixes) for a range of new-to-the-world iPad interface ailments, including Greedy Pixel Syndrome, the dreaded Frankeninterface, and the "I Can't Believe It's Not Butter" bait and switch. Explore practical techniques and eye-opening gotchas of tablet interface design, all grounded in the ergonomics, context, psychology, and nascent culture of these new devices (both iOS and Android). The presentation inoculates you against common problems with close-up looks at successful iPad apps from early sketches to final design. Genial bedside manner is administered by Josh Clark, author of the O'Reilly books "Tapworthy: Designing Great iPhone Apps" and "Best iPhone Apps: A Guide for Discriminating Downloaders."
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (8)
Similar to SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)
Similar to SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning) (20)
More from Josh Clark
Recently uploaded
Recently uploaded (20)
SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)
- 1. iPad Design Headaches TAKE TWO TABLETS, CALL ME IN THE MORNING Josh Clark @globalmoxie Photo: aldoaldoz on flickr
- 5. #winning
- 6. #tigerblood
- 7. IPAD DESIGN MALADIES • Greedy pixel syndrome •Media hypertrophy •The frankeninterface •Popover pox •iPad elbow
- 8. IPAD HEALTH CHECK Low resting heart rate
- 9. IPAD DESIGN MALADY Greedy pixel syndrome
- 14. THE PRESCRIPTION • Big chunky elements • Generous space • Clarity trumps density • Tap quality trumps tap quantity
- 15. IPAD DESIGN MALADY Media hypertrophy
- 16. IPAD DESIGN MALADY Media overkill
- 22. Two weeks before the announcement…
- 28. A word about page flips
- 30. Familiarity & intimacy invite touch
- 31. THE PRESCRIPTION • Feature content, not interface •Honor overall brand identity •Old and tested ≠ old fashioned •Ask: Is different actually better?
- 32. IPAD DESIGN MALADY The frankeninterface
- 37. The tablet is the awesome bastard child of many parents.
- 40. THE PRESCRIPTION • Avoid mixed metaphors • Love the one you’re with • Provide touch cues and hints •Don’t abandon digital advantages
- 41. IPAD DESIGN MALADY Malady: Popover Pox
- 45. THE PRESCRIPTION • Use popovers to act on content • Use popovers for quick peeks • Avoid popovers for exploration and navigation
- 46. IPAD DESIGN MALADY iPad Elbow
- 48. I hate the iPad’s back button with the heat of a million suns.
- 49. Buttons are a hack.
- 62. The medium is the message
- 63. The message is the medium
- 70. THE PRESCRIPTION • Seek alternatives to buttons • Embrace big gestures • Let controls drift to corners • Avoid controls at top middle
- 71. A PLEA Explore multitouch gestures
- 72. Two hands
- 73. Uzu
- 74. Uzu video
- 75. Uzu
- 76. Share
- 77. THE PRESCRIPTION • Gestures = keyboard shortcuts • Embrace multitouch for modes • Play • Experiment, talk, share
- 78. Exciting!
- 79. I love you guys. @globalmoxie www.globalmoxie.com
Editor's Notes
- Lots of interesting experimentation.\nBut in that creative churn, also see a lot of common missteps.\nTalk: how to address and avoid these headaches. \nThe common interface maladies I’ve seen in first generation of iPad apps.\n\nWant to start by talking about two words in the title.\niPad and headaches.\n
- First the headaches.\nTablets have been around for a decade, but it was really only a year ago that Apple invigorated the form, created the mainstream market.\n\nThat was only 12 months ago. We are in REALLY early days.\nBonafide new platform introducing a new style of computing,\nwith new context, mindset, and ergonomics.\n\nAt the same time, we’ve also got lots of hype,\nnot just Apple crowing about their post-PC revolution,\nbut Apple’s competitors talking smack, too.\n\nThing is, only now really arriving in hands of people it’s intended for (NOT geeks and early adopters). Still figuring out exactly what it is and who it’s for.\n\nAnd as we sort it out, I see a lot of common problems and missteps. I’m going to call out some apps that fall into those design traps.\n\nI want to be clear, I admire every app that I mention here. It’s hard to do this stuff, and anyone who gets it even part right has my respect.\n\nNot that people are stupid or shouldn’t have tried these things.\nHave to experiment, so glad these things are happening.\nI’m going to look more positively at how to fix these headaches.\nSo that’s iPad headaches. The other word in my title that I need to talk about...\n\n
- ...is iPad.\n\nFocusing pretty much exclusively on iPad in this talk.\nThat wasn’t my original intent.\nWhen I pitched this panel six months ago...\n
- I assumed that by now we’d have some amazing tablets for\nAndroid, BlackBerry, WebOS, and Microsoft.\n\nThose are emerging, especially for Android. In terms of hardware, some interesting competitors are evolving.\n\nBut in terms of apps, in terms of design, in terms of operating system, they’re frankly not there yet.\nI have no doubt that they’ll improve, but they’re behind.\n\nAs with iPhone over 3yrs ago, Apple has set benchmark for new tablet market.\n
- The iPad defines the market.\nThe iPad’s competition are behind by more than just a year.\nKeep in mind that Apple’s been working on the iPad for YEARS behind the scenes, probably nearly a decade.\n\nThere’s a lot of subtlety and nuance that’s gone into the hardware and, in particular to the software.\nThat’s going to take time to match, and I don’t believe it will happen this year.\n\nApple’s secret is not just the device or its relatively low price.\nThey’ve got something more powerful going for them.\nAnd I think it’s pretty obvious that it’s....\n
- ...a highly polished user experience.\nThere’s a personal, even emotional touch that’s cooked into iOS. As I’ll talk about today, that sense of personal connection and even intimacy is unusually important for this new generation of touch devices.\n\nA lightness and a sense of fun animates the iPad in ways that its competitors haven’t yet managed. They may eventually. But for now, Apple’s polish and style defines the mainstream tablet market—and for better or worse, its emerging interface conventions, too.\n\nSo I’m looking at the iPad here,but much of this will apply to the next waves of other tablets, too.\n
- Actually, took headache title and turned it into a fullblown medical metaphor. \n
- Slower, more leisurely usage than iPhone, other handhelds,\nwhich tend to be used for quick sprints of activity.\n\nUser interviews: People get up and move to diff physical space. Reflects a different state of mind.\n\nDevice of leisure… contemplation. Leisure: reading, games, movies. Leaning back.\nBy contemplation I mean leaning back, too, but working/thinking.\nReleases mind like working w/paper pad.\nBig-picture planning w/to-do lists, sketches, outlining.\n\nDivision between computer and iPad: Between doing/thinking, tasking/relaxing.\n\nThe iPad is for flow.\n\nLow resting heart rate = default state of iPad user is one of leisure/contemplation\n
- Disease marked by irresistible desire to use every available pixel.\n\nTempting to gobble up all the available pixels. See it coming from two directions.\niPhone designers: woohoo we’ve got more space, blow it up.\nDesktop designers who say, close enough, let’s cram what we’ve got in there.\n\nGraphic designers know the value of white space and calm.\nMobile designers also know: clarity always trumps density.\nWe should strive for thoughtfulness and art in software,\nnot mounds of nerdy features or dense information displays.\n\nRule doesn’t change just because we have a larger screen, and in fact it’s just as important.\nAgain: iPad mindset is one of leisure and contemplation\n
- Design should complement that mindset. If user has low resting heart rate, so should app (exception of games, more adrenaline the better)\nWeather Station Pro: Casual, contemplative. Cute, even warm. Clean, simple, uncluttered.\nThat extra screen space doesn’t have to be jammed.\n
- Compare to Accuweather.com\nFirst of all, scary. But more important, jammed with information. More than you need at any given time.\n\nDon’t make me scan all this data for what I’m looking for. Instead, let me ask for it as I need it.\n\nShould use popovers, or encourage you to explore the content. Tap to see more, instead of all at once.\n\nThis is not about dumbing down your app. Complexity is okay.\nComplexity is good, it’s what gives our lives and our designs substance. It just shouldn’t be complicated.\nComplexity and complication are not the same thing.\n\nManage complexity not by presenting it all at once, but by managing it as a conversation.\n
- Funny enough, accuweather.com iPhone app does a better job at doing exactly that with less screen real estate.\n\nIt presents reasonably complex info on current conditions without overwhelming Nice start:But how to provide all of the day’s detailed info? That’s where the conversation comes in.\n\n
- Swipe at the current conditions to move into future.\nI see detailed conditions for one hour, and just temps for others.\nI ask the app about 10am by touching 10am.\nOnly when I ask for that info does it give it to me.\nQuestion, answer. Ask, receive.\n\nRequires more taps than just dumping the data. But each screen more digestible.\nIn great iPad interfaces, as in mobile, clarity trumps density.\n\nThe web has given us a squeamishness about extra clicks.\nBecause every link eats time, thanks to network latency.\nBut in apps where there’s no latency, smaller concern.\nIn mobile, I believe... tap quality far important than tap quantity.\nAs long as each tap delivers satisfaction (example), extra taps are ok.\n\nBut perhaps more important:\nYOU’RE USING THE CONTENT AS THE CONTROLS\nThis is the real revolution that touch screens are working.\n\n
- That’s the key prescription for greedy pixel syndrome.\nDesigns that breathe.\n\nThese are pretty standard tenets for great design anyway.\nListen to your intuition as a designer.\nDon’t cram stuff into the screen.\n\nThat noisy approach is related to the next iPad design headache.\n
- Condition marked by overdeveloped media,\nand/or chronically underdeveloped content.\n\nHypertrophy, pretty good huh?\nWhat I really mean is...\n
- Fancy, sizzlin’ interfaces awe-inspiring on first view but tire in everyday use.\n\nIll served by early emphasis on media.\nOur expectations were set that this would totally reinvent traditional media.\nMany took that expectation to heart.\n
- THE GLOBE OF NEWS!\nABC News app pastes latest videos onto a globe,like some kind of new-media papier-mâché project.\nAnd it’s a nifty little graphics feat. Spin to browse, click to watch.\n\nSure, interacting directly with this thing, cool! Props to ABC for experimenting and for a nifty visual effect.\n\nBut the interface doesn’t inform or enlighten. It does not organize the clips in any meaningful way. It actually keeps you from the content, hiding and distorting it with this gimmick.\n\nThe interface upstages the content.\nFriendly-seeming whiz-bang graphics don’t help us digest complex information.\nOr in this case even inane information.\n\nPlanet of news isn’t first planetary gimmick to fall short...\n
- Model of the solar system from 1800.\n\nEdward Tufte offered this as an example of the sin of pridefully obvious presentation. More attention to contraption than to content it aims to present.\n\nAs technologists, we often lose sight of this: *content* should defines app, not its machinery, not its technology.\n\nAs we create new interfaces, explore new possibilities, remember that the goal is not showcasing the form. Showcase the content, not the contraption.\n\nThat doesn’t mean that we can’t deploy awesome graphics and media.\n\nLet’s keep with the planetary theme....\n
- Solar Walk a more successful version.\nFly and zoom and swoop through the solar system.\nLike the ABC news globe, it’s spiffy 3d experience.\n\nBut it serves purpose: to underscore distance & time.\nComplex topics, effortlessly explained\nby putting you in the middle of it.\n\nOnly very little bit of chrome on right\nto help you speed or slow time. \nOtherwise, app is all content,\nvery little artifice or interface.\n\nTraditional media can likewise find new ways to display\ntheir content, too, but we have to make sure we use it\nto feature the content, not the effects.\n
- Comixology, company behind apps for Marvel Comics, DC and others.\nClever new way that’s all about the artwork but emphasizes cinematic appeal and storytelling.\nThis is reinvention by focusing on the content. But with new, immersive experience.\n\nStill worth saying, we’re repurposing here. This is still print media with a print metaphor.\nIs that okay?\nA lot of pressure on media companies to change, to use tablets to reinvent themselves.\n\nI’m not sure that media companies’ problem is necessarily one of form.\nAnd I’m not sure that they’re wrong for staying close to their traditional print look even in this new medium.\n\nMaking something new is good, it’s awesome, it’s fun.\nI love the new. We’re all in this business because we’re fascinated with the new. But new and change isn’t good in itself.\n\nDon’t be different to be different. Be different if you can be BETTER.\n
- The NY Times app doesn’t look new at all. It looks like the NY Times.\n\nSwipe left or right to flip pages. Tap to view. Work it like a newspaper.\nColumns, text presentation feel like newspaper. It’s familiar.\nNot exactly nostalgic but certainly sentimental, not in a bad way.\n\nMany have criticized news media for being too safe. Jesus, it’s a new platform, all you can think is to make it look like a newspaper?\n\nIt’s not for lack of imagination. This actually wasn’t the team’s original vision. Let’s step back a little over a year to last January.\n\n
- 2 weeks before Steve Jobs announced iPad, Apple secretly invited handful of people to come to Cupertino and prep demos\n\nAmong them:\nThree designers and developers from NYT... Jennifer Brook, Andre Behrens, Adam Kaplan\n\nSo Jennifer and Andre and Adam show up at Apple. Apple locks them in a server closet, tossed in some scattered documentation, said: “Make something cool, don’t embarrass us.”\n\nWith only need-to-know info about the iPad, they scrambled to build the NY Times demo in 2 weeks\n\nThey had their first concept running within 1st 48 hours.\n
- This was the first version of NY Times iPad app. Called concept The Deck,\nAndre developed in the fall in anticipation of iPad,\nsimilar to feature already on the website called the News Skimmer.\n\nThis was the first thing they got up and running on iPad.\nInteresting: NPR News, Pulse and others; similar concepts\nDanced around, realized it wouldn’t work.\n\nDidn’t fit the Times’ visual brand — not only of print but of 15 years of web. Brief not to create entirely new visual brand. Didn’t want to be jarring; on contrary, wanted comfort. Very mindful of that low resting heart rate I mentioned.\n\nSo, literally back to the drawing board.\n
- This is Jennifer’s sketchbook from that day.\nYou can see that she moved immediately back to the familiar news layout.\nIt felt right, it felt like The Times.\n
- This is what they came up with:\nNY Times Editor’s Choice\n\nVery strong print metaphor.\nFeels good, familiar to read a newspaper\nthat looks like newspaper.\n\nCouple of quibbles\nBut strong if conservative first effort.\n\n[slow]\nSometimes you can impress most by doing it quietly.\n\nThat was exactly the impression Flipboard made.\n
- Flipboard formats your Facebook, twitter and RSS feeds into a pretty magazine/newspaper format.\n\nSo while some called NY Times called nice but predictable.\nPretty much everyone was bowled over by Flipboard.\nBecause, holy shit: It looks like the NY Times!\n\nBecause for Twitter, Facebook, and RSS feeds, this presentation was new.\nThey somehow made your dizzy array of digital feeds look like a calm, staid newspaper. Enormously successful.\nTamed news for the calm sensibility of the iPad.\n\nAgain: it’s a platform that encourages leisure and contemplation. This turns a buzzing information storm into an easy-on-the-eyes custom magazine.\n\nFlipboard creates an entirely new interface by going to time-tested graphic design treatments. Pleasure to read your twitter feed this way.\nMassages your brain, uses familiar physical metaphor and actually follows that metaphor’s rules.\n\nDon’t underestimate power of humdrum. Old interface conventions not necessarily old-fashioned. Centuries of know-how about presenting and interacting with print. If there’s one thing printing daily has taught publishers: People desire routinely great, simple, straightforward daily news experience.\n\nNo spinning globes required.\n\n
- We’re in a period of discovering what native-to-the-tablet media looks like.\nNot just repurposing from web or print.\nBut born to the tablet.\n\nAnd our first steps are remaining close to our print legacy.\nAnd I believe that’s okay, even desirable.\nThe Daily, the first major daily tablet publication,\nsticks closely to carefully designed pages.\nEach page looks great in either portrait or landscape.\n\nAnd you have restrained but impressive use of media that draws you into the story.\nThese 360-degree images of scenes that let you look up, down, all over, even if you might get carried away.\n\nBut they draw you into the scene and, again, they focus on the content and let you explore it at your own pace -- again, calm contemplation.\n\nSo when I warn about the dreaded iPad illness, media hypertrophy,\nI don’t mean to say that media and animation can’t play a role.\nCan have an important cognitive, emotional impact.\n
- A lot of folks in the design community have commented\nthat the page flip has been abused, that it’s overly kitsch.\n\nOr worse, that it shows a pathetic lack of imagination, that we can’t get past our analog roots to invent something new for this new platform.\n\nHere’s a representative point of view from that camp...\n
- He’s got a point: bolting analog metaphors onto digital content: too cute.\nThese kinds of animations CAN be kitsch, Can certainly be distracting. Have to be careful.\n\nIf make it quick, adds to experience.\nReinforces the physical touch metaphor.\n\nGesture of the page turn is natural, easy, familiar. Unlike those sad desktop gimmicks,\ntouch changes the experience. Animation provides feedback to reinforce feel of reading book. Page flip is window dressing, sure, but the animation provides feedback to reinforce your design metaphor.\n\nBooks, newspapers carry sentiment/familiarity, okay to capitalize on that.\nFast animations that don’t distract, don’t take too much time, build that familiarity.\n\n
- Emotional attachment to software.\nThis is new: affection and intimate relation to mobile software\nfeeling that’s more familiar to physical objects that we have.\n\nIt’s not just our mobile devices that are accessories now\n(our phones, the iPod nano), but the apps too.\nMany iPhone/iPad users would tell you that the apps on phone say as much about them as the items in their bag or the pictures on their wall.\n\nEmotional satisfaction is a big part of a great user experience.\nThe connection of touch is one of the most intimate experiences.\n\nRealistic interfaces that invite touch, encourage emotional attachment.\nThe texture and look of a well loved leather journal.\nIf looks/behaves like treasured personal totem,\napp itself benefits from same emotional connotation.\n\nPhysicality invites touch, too.\nNot just in a “ooh, I want to touch that” way, but in terms of affordances.\nTexture and physicality gives clues about how the app works, where you should touch.\nApple really emphasizes in its interface guidelines. Make it realistic.\n\nBut you have to do more than throw some photoshop textures at it.\nApple’s own apps show the hazards, as we’ll see in a moment.\n
- First, though, here’s the inoculation against media overkill\nreally back to basics\ncommon-sense rules of good design,\nbut we can sometimes forget ourselves in our enthusiasm for the new\n
- I also call this the “I can’t believe it’s not butter” bait and switch \n\nIt’s an app whose visual design uses one interface metaphor, but its interaction actually uses another.\n\n
- Calendar: \nVery pretty, and of course you naturally know how to use it.\nJust swipe to turn the page, right? Nope: Buttons at bottom.\n\nYou have to embrace your interface metaphor.\nIf you’re going to make it look like a book, make it act like one.\n
- Contacts: swiping doesn’t turn page\nSwipe starts deleting content.\n\nPoint: Your interface metaphor should suggest how to use the app.\nAffordances (interface hints) that tell you where and how to use them.\nHere, the book metaphor is a confusing misdirection.\nCreates expectation that works like a book, but really through desktop-style buttons.\n
- To-do list app called Manage. Very pretty.\nBut you can’t actually act on these elements in the physical sense they suggest.\nDesk is full of metaphor clutter.\nToo many metaphors in one place. Choose one, make it feel natural.\n\nIf you go this route of aping a physical object:\nEMBRACE THE METAPHOR\n\nthink hard about new interaction opportunities it proposes.\nIn user testing I see this all the time:\nIf it looks like a physical object, people will try to interact with it like one.\nWhat does your interface suggest that they do with the content itself?\n\n
- Apple’s much more successful with Garageband app.\nHere’s a metaphor that behaves as it should.\nThe primary interface is actually playing the instrument. And the strings vibrate and move just like a regular instrument. You lose yourself in this, and it’s ridiculously fun.\n\nIt’s a literal metaphor that works.\n\nMeanwhile, you have many magazine apps that are TOO literal with metaphor.\nVery true to original print artifact.\nLittle more than PDFs. Clear exactly how to use\nBut difficult to find table of contents: no random access\n\nCalendar and contacts: designers following their metaphor half-heartedly in interaction\nMags: too literally and they miss interaction opportunities\n\nThis is understandable: Weird hybrid.\n\n
- Not a web, phone, desktop, not a paper/physical interface.\nYet it suggests elements of all.\n\nGreat opportunities, lots of tradition to draw from.\nBut have to be careful about mixed metaphors.\n
- USA Today: good job managing metaphor, reducing interface clutter.\nLooks like the newspaper.\nMore than paper. Enable more than flipping thru pages.\nNot about heavy-handed media, about thoughtful presentation.\n\nUSA Today: Traditional + digital advantages\nSubtle hints of newspaper, doesn’t overdo it.\nFamiliar but not cloying.\n\nGestures to move quickly through sectoins.\nBut not enough controls!\nRan out of time to indicate the section navigation.\n\nThese kinds of gesture shorthands still unknown.\nThose will develop. Standards will emerge.\nBut until then, we have a bit of a soup.\nSome apps have us page up and down, others left and right.\n\nBut the point here is that as you pursue a real-world metaphor,\ndon’t be so literal that you get trapped by analog limitations.\nUSA Today let’s you find content easily, random access to content,\nnot linear paging through a magazine.\n\n
- When in doubt, use the tools that Apple gives you.\nThe standard split view lets you get at sibling content, here browsing products in a store.\nFamiliar metaphor from email.\nReliable, easy, uncluttered access.\nPut related or secondary content just tap away.\n\nSplit view in portrait has lots of issues.\nObscures content, requires the tap of a tiny button.\nPopovers, too, have their own problems.\nTalk about that in a moment.\nBut efficient way to get at full content.\n
- \n
- Marked by popovers gradually spreading over the skin of your entire interface.\n
- I love Twitterrific.\nSimple, airy, straightforward way to read Twitter\nThey do a lot of things right.\nApp susceptible to popover pox, though.\n\n\n
- Quick overview of popovers.\nOn iPhone, you move through views by changing the whole screen\nDisorienting on a screen this size. Vertigo.\nSo Apple created the popover, kind of the right-click of the iPad.\n\nTap and hold a tweet, I can see actions.\n\n
- Tap avatar to peek into profile.\nGreat way to peek into info for a quick view.\nAnd for iPhone devs, wow, you can actually reuse your iphone views. Handy!\n\nTrouble is when you want to explore to navigate info.\nGreat thing about Twitter is that a brief piece of info can send you on this path of discovery about people, topics, conversations.\n\nTwitterrific lets you do this but boxes you into popovers.\nAwesome that it makes it so easy to explore tweets\nBut it misses the opportunity for that big airy view that tablets afford.\nInstead, I feel cramped and crowded.\nExact opposite of its overall main view.\nInterface claustrophobia.\n\nSo use popovers, definitely, but view it as a warning sign if you find yourself spending too much time.\n
- \n
- Pain caused by repeatedly dragging your meat pointer to tiny button in top corner.\n\n
- That tiny button in the top left of iPad apps\nis not easy enough to hit,\nyet I’m asked to hit it all the time.\n\nLots of iPad apps follow pattern you see in mail app.\nThe so-called split view for navigating layers of content.\nSo I’m reading this riveting email from Facebook.\nBut I want to pop out to my sent mail.\n\n[one tap]\nI have to hit this tiny target,\nnavigate this series of buttons.\nMakes me nuts.\n
- Fitts law describes how long it takes to hit a target with a tool or pointer, or move an object to a target.\nLike a mouse cursor to a button for example.\n\nBoils down to a common-sense conclusion: Smaller the target, further away it is, harder it is to hit.\nExplains why golf such miserable sport.\n\nStudies show Fitts law applies to touchscreens. The bigger touchscreen, more model applies.\n\nOn phones, problem not as pronounced. Can hit the entire screen with your thumb.\n\nOn iPad, you’re moving your whole arm, dragging this giant meat pointer.\n\nThose buttons, even though same size as the iPhone, suddenly much harder to use, cognitively and ergonomically.\n\nThere are alternatives, and I’ll get to that in a second. I first want to say: It’s not just the hassle of these buttons that’s the problem. There’s also a basic conceptual problem here.\n
- Touchscreen lets us tickle the brain in new ways because it’s more intimate to touch the thing you’re interacting with.\n\nBut touching a button is not really direct interaction.\nEVEN IN REAL WORLD, they work at a distance, light switch here to turn on light over there.\nNot intuitive. Learned behavior.\nJust because you’re touching *something* doesn’t mean you’re interacting directly with the primary object.\nButtons: physically, cognitively at distance from the object.\n\nButtons don’t create the intimacy we’re talking about. Direct interaction does.\n\nWhen you remove the mouse and cursor—prosthetics we've pointed at stuff for 25 years—all that remains is you and the device.\n\nThat forces—or should force—important changes in how we approach the designs of these interface. \n\nOur brains evolved to navigate physical space, to work directly with objects.\nWatch how toddlers use iPad. Right, direct manipulation of content.\nTap content directly, drag content across screen, nudge views away\nDon't get trapped in metaphors and hacks of\ntemporary alternate universe of computer interface.\nDesign for humans. Design for direct interaction.\n
- So what’s the big deal?\nWhat’s the difference between pointing with one of these, and using your finger?\n\nIt might seem like a subtle change, but it has important implications psychologically, ergonomically, even emotionally.\n\nTouchscreen interaction--particularly on larger touchscreens--gives us opportunity to explore information in ways that feel more personal and intimate, to use natural gestures that are far more intuitive than abstract metaphors of menus and buttons.\n\nAnd in terms of overcoming the dreaded disease, iPad elbow: we can also come up with actions that are physically more comfortable, too.\n\nWe’ve accumulated 30 years of interface conventions. I don’t suggest that we throw those away entirely, or even at all.\n\nBut we can certainly make things simpler by questioning whether our familiar interface controls are needed in some places.\n
- Pinball HD. The entire screen is a button.\nTap anywhere to get flippers to go.\nThink: Where are opportunities to eliminate buttons?\nI’ll follow that thought in a moment.\n\nFirst: Don’t want to say you should never use buttons.\nParticularly as we continue to develop gesture vocabulary -- the invisible controls that we use to swipe through touchscreen interfaces -- we need visible controls to help people.\n\nBut as we do that, we also should simultaneously\nprovide alternatives or shortcuts.\n
- Gestures are the keyboard shortcuts of touch interfaces.\nLet you get around the button press.\n\nSo keep the button, but give me a four-\nor five-finger touch\nas a short cut to open those popovers.\n\n
- Reeder for iPad is a good example. News feed reader.\nHas a back button to return to your list of feeds.\n
- Fast, quick action that uses entire screen as the control.\n\nBig screens invite big gestures.\nDon’t have to hit the little button.\nLet me just swipe or paw at the whole thing to take an action.\n
- Also, keep in mind:\nyou’re no longer using an abstract cursor, you’re using your finger.\nThat simple fact sometimes makes the old ways of doing things a little bit nonsensical.\n\nTouchUp is a great example of an app that steps back for a new perspective.\n\nTouchUp lets you draw filters or effects on photos.\nBrush these effects on, drawing them with your finger.\n\n\n
- What if you want a smaller brush?\nTraditionally you’d have a slider or some brush selector.\nBut the thing is, you have a brush, and it doesn’t change size.\n\nA setting to change my finger’s touch footprint \nto double or half actual size\nwould just be confusing, hard to get my head around.\n\nInstead of changing the brush size,\nyou change the canvas size. Pinch to zoom in or out.\n\nAnd then draw your next stroke.\nFinger always keeps its same physical size on the screen.\nIt’s the canvas that changes size.\n\nWhen you deal with touch,\nhave to rethink these familiar abstractions.\n\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- But before you say, oh, okay, I’ll just keep doing what I’ve been doing,\nscattering buttons hither and yon, and all I have to do is add some gesture shortcuts.\nStop.\nWe really do have the opportunity to introduce more natural navigation into our apps, get rid of buttons.\nTwitter for iPad managed to eliminate\nback button entirely.\nOh yes... the hated back button.\n\nThe app designed to really encourage exploration.\nInteract directly with words, URLs, entire content contexts.\n\nTap the content, slide these views around.\nEach tweet is its own panel,\nand you just paw thru your history.\nFlip through the stack of tweets, no back button needed.\n\nStill got controls there on the left. And that’s okay.\nParticularly for abstract actions, or for category organization, buttons remain the way to go.\n\nAgain, you’re doing all of this by working directly with the content, actually touching it. Panels and lists and words skitter across the screen at your touch.\n\nIn general, the tradeoff of UI design has been: the more features you add, the more controls you have to deal with.\n\nBut when you get rid of extra interface chrome and just let the content be the controls, that changes everything.\n\nThe content is the controls.\n
- In the 60s, Marshall McLuhan said:\nthe medium is the message.\n\nI think we may finally be moving to a place where...\n
- The message is the medium.\nThe information is the interface.\nThe content is the control.\n\nYou can have lots of features and complex information\nwithout having all the chrome.\n\nI believe touch will help us sweep away decades of buttons—menus—folders—tabs and administrative debris to work directly with the content. \nWe need to investigate new, more direct ways to interact with information, with software.\n\nI don’t mean to come off as draconian here.\nNot suggesting that we throw out our familiar interface metaphors entirely, or even at all.\nUse them when you need them, but recognize them for what they are: a hack. An abstraction. That said, they’re still the right solution in lots of cases. Just be skeptical.\n\nSo you decide to add buttons and controls to your app.\nWhere do you put them so that they don’t cause iPad elbow?\n
- On phones, put primary controls in thumb’s hot zone.\nHot zone for right-handed user.\nWhere the thumb most naturally comes to rest.\n
- iPad doesn’t have a conventional grip.\nHold it in all different ways.\nNo clear majority pref for portrait or landscape.\nCouch, bed, desk, standing.\nBarcalounger with bag of cheese puffs.\n\nTwo handed, side, top grip.\nAny part of screen is a likely tap target.\nBut bottom is bad for controls.\nThumb zone doesn’t apply here.\n
- Opposite of iPhone, back to web/desktop standards.\nVisually/ergonomically, better at top.\n\nInstapaper.\nPut controls at the bottom, they run into your belly when you’re on the couch, resting it on your stomach.\n\nIn fact, the corners in general are good.\nIn general, your grip will tend to be around the top 1/3 of the screen, so it’s convenient, comfortable. \n\nYou want to avoid putting controls at the center where your hand roams over the content, obscures it.\n\n\n
- Here’s the Daily again\nThere’s this scrubber control at the top...\n\n
- So you tap the scrubber, and it brings up this nice visual table of contents.\nAnd you can drag the scrubber left and right to move through the pages.\nTrouble is, when you do that your hand actually blocks the pages below.\nYou can’t use the scrubber and still see what you’re doing.\nA danger of putting controls at the top center of the screen.\nIt’s an age-old tenet of industrial design that you put the controls below the display.\nSo your hands don’t get in the way.\n\nYou can get around this here by swiping at the pages instead of using the scrubber.\nSo, problem solved. But since you launch the display by touching the scrubber,\nit’s not obvious that you can or should navigate the pages directly.\n\nBest practice: avoid controls at top middle of the screen.\n\n
- Howcast. Content optimized for landscape viewing.\nFor landscape, consider controls at side,\nwhere you’ll be holding it, and you have plenty of room.\n\n
- \n
- Vast unexplored territory that we as a community need to explore\nand experiment, along with our users.\n\nAs I’ve said:\nButtons are a hack, though effective.\nBetter to have interface metaphors that let you work directly on content.\nMultitouch gestures are a bit of a hybrid:\nGestures are the keyboard shortcuts of the touchscreen.\nShould rarely be the only way to do something, but provide smart shortcuts, more fluid use of the app.\n\nInstead of hitting that tiny button to trigger the popover, give me a five finger touch.\nLet me do a three-finger swipe to leap back out to the top of the Mail app.\nThese conventions don’t exist yet.\nApple hasn’t provided them, but they’re badly needed.\nSo we need to explore this as a community.\nSome thoughts.\n
- Multitouch means using more than one finger.\nOn phones, this is frankly impractical.\nIf hold it with one hand, you’re limited to thumb tapping.\nHave to have two hands free to do multitouch, or on lap/desk.\n\nIn my user labs, people avoid multitouch on phone. Awkward.\nEven pinch/zoom, prefer double-tap to zoom;\nnever find 2-finger single touch to zoom out.\n\nSince people don’t do multitouch on phones,\nand phones have so far been the only mainstream touchscreen device,\nthat means we have no culture of multitouch yet.\n\nThe iPad is first device w/market & opportunity to change that.\nUnlike phone, you pretty much have to use iPad with two hands.\nSo *always* have a full hand to use.\n\nAgain: a big screen invites big gestures.\nThink about treating entire screen as a control.\nSlap at whole screen instead of finding a finicky control.\nTwo-finger swipe to call up sidebar panels.\nGive me shortcuts, teach me new gestures.\n
- How do we teach this stuff?\nWhat does it even look like?\n\nWe might start with things like this.\nUzu is an iPad app:\nkinetic multitouch particle visualizer.\n\nIn a word, it’s a lava lamp, a toy to hypnotize stoners.\nOr that’s what it might seem.\n10-minute demo, edited down to 3 mins.\nIndulge me, want to show you how it works.\nGood lessons.\n
- \n
- Uzu is a toy. Or more like a musical instrument.\nIt seemed more like he was playing it rather than using it.\n\nWhen any of us master a device or an app or an instrument,\nthat’s how it feels.\nLook at all of you with keyboards.\n\nIntent fluidly transferred to action.\n\nIn Uzu, every finger triggers new mode.\nTen modes, ten fingers. Imagine the possibility.\n\nGestures give us opp to make apps that are like instruments.\nApps that you PLAY more than you USE.\nThat’s part of the genius of Garageband.\n\nI’ve talked a lot about mimicking physical interfaces\nto give cues about how we use touchscreen apps.\nVisual cues and animations in more static apps can give contextual hints about how to use touchscreen gestures.\n\nBut how do we train users for THIS? For something like Uzu?\nHere there are no visual cues, it simply has to be taught.\n\nThat’s where apps like Uzu can be usefu. Uzu is a toy.\nToys teach children how to interact with the world, teach cause and effect.\nThey’re FUN to use and explore.\nToys like uzu can teach us to use these devices and gestures.\nTrain ourselves in new culture, in gesture vocabulary.\n\nI say we can learn a lot from game developers right now;\ngames great at training us how to use unfamiliar controls,\nfollow invisible rules.\n
- This stuff is hard. Don’t go it alone. We have to talk about it.\n\nGestures are invisible and have to be learned.\nWe’ll stagger at this.\n\nThe creative process isn't just "Eureka!" moments,\nit's a lot of "oh sh*t!" and "what next??" moments.\n\nDon’t assume anyone else has nailed it, not even the big boys.\nTempting to follow market leaders: 'we copied NYR because of course they tested it'\n\nNY Times: 3 people in a server closet who built a v1 in 2 mos on top of a 2-wk demo.\nSeat of the pants.\nGood work, but say doesn’t feel it’s best work.\nThis is very early, and it’s dangerous to lock in on half-baked conventions.\n\nTalk. Ask questions. Find out if this is solid.\nNeed to help each other, we need to have conversations.\n\nThis is a time to be generous.\n
- \n
- New platforms don’t come along very often.\nJust inventing what this thing does, what iPhone does.\nBe expansive, let imagination roam.\n\nI’ve called out some apps for missteps,\nbut I applaud them for venturing out.\nI love what all of these apps are doing.\n\nImportant to try new things, throw everything we’ve got at the drawing board.\n\nBut be aware that our enthusiasm for the new is also an achilles heel.\nSome sober moments to ask: does this make sense?\n\nDesigners need to know this:\ninsightful work is part technical know-how,\nbut empathy, imagination, expansive world view generate breakthrus.\n\nCoolest job in the world. Inventing future.\nGo make something amazing.\n
- \n