I gave this talk at Design for Mobile in Chicago on Sept 22. I added an outline of what I said to the speaker notes section. Here's the scoop:
The iPad has 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 this new device. 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."
28. THE PRESCRIPTION
• Feature content, not interface
•Honor overall brand identity
•Old and tested ≠ old fashioned
•Ask: Is different actually better?
Talk focuses on iPad.
As with iPhone 3yrs ago, Apple has set benchmark for new tablet market.
About to see an avalanche of new tablets, most of them Android.
Microsoft working on something too, and BlackBerry.
But I’m not optimistic about the first generation of iPad competitors.
From Microsoft, not yet clear what OS it will run, jockeying within the company.
I gather Windows 7 currently has the edge over Windows Phone 7.
Android tablets based on an OS not yet designed for tablet.
For the moment, Apple defines the tablet market—and for better or worse, it’s emerging interface conventions, too.
So, this talk focuses on iPad interface, but I expect that much of this will apply to new wave of tablets, too.
Looking at interface maladies I’ve seen in first generation of iPad apps.
We are in REALLY early days.
Bonafide new platform introducing a new style of computing, with new context, mindset, and ergonomics.
First truly multitouch mass consumer device: new gesture vocabulary required.
Still in midst of lots of hype
Still not in hands of people who actually use it.
Still figuring out exactly what we’re doing.
Going to call out some common problems, but I admire every app that I mention here.
It’s hard to do this stuff, and anyone who gets it even partly right has my respect.
So important to experiment right now, to take risks, and it’s important for all of us to learn from each other’s mistakes as well as our successes.
iPad is a device of leisure… contemplation.
User interviews: People get up and move to diff physical space
Reflects a different state of mind.
Division between work and leisure;
computer for work, tablet for leisure
computer for doing, tablet for thinking
computer for tasking, tablet for relaxing
(Doesn’t mean people don’t do work with iPad, but its form encourages broader, often more creative and expansive mindset)
Just because people are in leisure mode doesn’t mean you can waste their time.
As mobile designers, we know focus and efficiency are important on phones.
You might think you have more leeway on tablets, but you don’t.
In handhelds, it’s because people on go, chaotic situations, hurry.
iPad, more leisurely, more stable, and you’re more likely to have their attention.
But app switching. Moving among apps.
Reading a book, switch to safari.
Reading Twitter, switch to to-do list.
Still have to optimize for primary tasks.
Big screen, more time... doesn’t mean you can get lazy.
Winnow features, winnow chrome, focus.
Tempting to gobble up all the available pixels.
Let’s use up that expansive screen.
See it coming from two directions.
iPhone designers: woohoo we’ve got more space, blow it up.
Desktop designers who say, close enough, let’s cram what we’ve got in there.
As graphic designers, we know the value of white space and calm.
As mobile designers we know: clarity always trumps density.
Strive for thoughtfulness and art in software, rather than a pile of features or dense information displays.
Rule doesn’t change just because we have a larger screen, and in fact it’s just as important. Again: iPad mindset is one of leisure and contemplation
Design should complement that mindset.
If user has low resting heart rate, so should app
(exception of games, more adrenaline the better)
Weather Station Pro.
Casual, contemplative. Cute, even warm.
Clean, simple, uncluttered.
That extra screen space doesn’t have to be jammed.
Accuweather.com
Crowded, dense, scary graphics. No need to put ALL that content on a single screen, difficult to scan and parse.
Should use popovers. Tap to see more.
Tap quantity isn't nearly as important as tap quality. Don't fret about putting some features another tap away. Clarity trumps density.
This is not about dumbing down your app.
You don’t have to remove features and info from your app, but push them into other views.
Complexity is okay. Complexity is good, it’s what gives our lives and our designs substance.
It just shouldn’t be complicated. Complexity and complication are not the same thing.
Condition marked by overdeveloped media,
and/or chronically underdeveloped content.
Fancy, sizzlin’ interfaces
awe-inspiring on first view
but tire in everyday use.
Ill served by early emphasis on media.
Our expectations were set that this would totally reinvent traditional media.
Many took that expectation to heart.
ABC News app pastes latest videos onto a globe
Spin to browse, click to watch.
Nifty graphics trick, but 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.
Feel this with other media apps, too.
Popular Science. Yahoo Entertainment.
Planet of news isn’t the first planetary interface gimmick to fall short.
Model of the solar system from around 1800.
Elaborate gears to show you the mechanism.
Edward Tufte used this in “Envisioning Information” to illustrate “the sin of pridefully obvious presentation”: more attention to contraption than to content it aims to present.
*Content* should define app, not its machinery, not its technology.
That doesn’t mean that we can’t deploy awesome graphics and media.
Solar Walk a more successful version of the solar system model.
You’re just exploring content, zooming through the solar system.
Like the ABC news globe, it’s a spiffy 3d experience.
But the animation serves a purpose, directly tied to the content, underscoring time, distance, space.
The app is all content, very little artifice or interface.
Solar Walk a more successful version of the solar system model.
You’re just exploring content, zooming through the solar system.
Like the ABC news globe, it’s a spiffy 3d experience.
But the animation serves a purpose, directly tied to the content, underscoring time, distance, space.
The app is all content, very little artifice or interface.
This caution against media overkill doesn’t mean more traditional media can’t find new ways to display content.
Comixology is the company behind apps for Marvel Comics, DC and others.
It zooms and pans around comic book frames in a way that’s all about the artwork but emphasizes its cinematic appeal and storytelling.
This is reinvention by focusing on the content. but with new, immersive experience.
Still worth saying, this is repurposing. This is print media with a print metaphor.
A lot of pressure on media companies to change that, to reinvent their form, but I’m not sure that the problem is necessarily one of form.
And I’m not sure that they’re wrong for staying close to their traditional print look even in this new medium.
Making something new is good, it’s awesome, it’s fun.
I 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.
Don’t be different to be different. Be different if you can be BETTER.
This caution against media overkill doesn’t mean more traditional media can’t find new ways to display content.
Comixology is the company behind apps for Marvel Comics, DC and others.
It zooms and pans around comic book frames in a way that’s all about the artwork but emphasizes its cinematic appeal and storytelling.
This is reinvention by focusing on the content. but with new, immersive experience.
Still worth saying, this is repurposing. This is print media with a print metaphor.
A lot of pressure on media companies to change that, to reinvent their form, but I’m not sure that the problem is necessarily one of form.
And I’m not sure that they’re wrong for staying close to their traditional print look even in this new medium.
Making something new is good, it’s awesome, it’s fun.
I 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.
Don’t be different to be different. Be different if you can be BETTER.
This caution against media overkill doesn’t mean more traditional media can’t find new ways to display content.
Comixology is the company behind apps for Marvel Comics, DC and others.
It zooms and pans around comic book frames in a way that’s all about the artwork but emphasizes its cinematic appeal and storytelling.
This is reinvention by focusing on the content. but with new, immersive experience.
Still worth saying, this is repurposing. This is print media with a print metaphor.
A lot of pressure on media companies to change that, to reinvent their form, but I’m not sure that the problem is necessarily one of form.
And I’m not sure that they’re wrong for staying close to their traditional print look even in this new medium.
Making something new is good, it’s awesome, it’s fun.
I 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.
Don’t be different to be different. Be different if you can be BETTER.
NY Times doesn’t look new at all. Looks like NY Times.
Simple paging swipe left or right to flip pages. Tap to view.
The columns feel like a newspaper, it has an oddly familiar feeling.
Not exactly nostalgic but certainly sentimental and not in a bad way.
Some have criticized news media for being too safe.
It’s not for lack of imagination.
This wasn’t the team’s original vision.
Andre Behrens, Jennifer Brook, Adam Kaplan
Invited to Cupertino two weeks before the iPad announcement.
Spent those 2 weeks in a server closet to hustle together a demo.
This was their first mockup of NY Times iPad app.
Based on Article Skimmer, which Andre created for nytimes.com.
Called concept The Deck, developed in the fall in anticipation of iPad.
This was the first thing they got up and running on an iPad.
(Interesting: NPR News, Pulse and others, both would later embrace similar concepts)
Realized it wouldn’t work, didn’t feel like the Times (neither the paper nor the website) and felt it wouldn’t meet readers’ expectations of the visual brand.
So, the day after finishing that initial prototype, back to the drawing board.
Jennifer Brooks’ sketches of what would become the iPad app.
Very strong print metaphor.
Feels good, familiar to read newspaper that looks like newspaper.
Couple of quibbles: column design narrow
Not enough content with this very small selection.
Both issues will be addressed in a new version next month.
Also: shouldn’t put key controls on bottom of screen for reasons I’ll explore later.
The point: Sometimes you can impress most by doing it quietly.
Flipboard actually looks a helluva lot like NY Times
Some called NY Times called nice but predictable, yet pretty much everyone was bowled over by Flipboard.
Because: for Twitter, Facebook, and RSS feeds, this presentation was new.
They somehow made your dizzy array of digital feeds look like a calm, staid newspaper. Enormously successful.
Again: it’s a platform that encourages leisure and contemplation. Flipboard turns a buzzing information storm into an easy-on-the-eyes custom magazine.
Flipboard creates an entirely new interface by going to time-tested graphic design treatments.
Don’t underestimate power of humdrum, of the familiar.
Old interface conventions not necessarily old-fashioned.
If there’s one thing printing daily has taught publishers:
People desire routinely great, simple, straightforward daily news experience.
No spinning globes required.
Doesn’t mean media and animation can’t play a role.
Animation can have an important and useful cognitive impact.
For at least 2 decades, people have trotted out desktop apps.
As if that’s what we were all waiting for.
Oh, THAT’s why I don’t read Cat Fancy on my computer.
Many have commented that page flip has been abused, or overly kitsch.
These kinds of animations CAN be kitsch, have to be careful.
If animations take too long or get in the way or, they distract from content.
But nods to the past are okay. There’s charm to a page flip, unlike horse shit in your car.
If make it quick, it adds to the experience. Reinforces the physical touch metaphor.
The gesture of the page turn is natural, easy, familiar.
Not like the sad desktop gimmicks of yesteryear, here the experience and mechanical gesture really does feel like turning the page of a book.
Familiar is good.
Emotional attachment to software. This is new: affection for mobile software.
It’s a feeling that’s more familiar to physical objects that we have.
It’s not just our mobile devices that are accessories, but their apps too.
Many 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.
Emotional satisfaction is a big part of a great user experience.
The connection of touch is one of the most intimate experiences.
Realistic interfaces that invite touch encourage emotional attachment.
The texture and look of a well loved leather journal. If looks/behaves like treasured personal totem, app itself benefits from same emotional connotation.
Physicality invites touch, too.
Not just in a “ooh, I want to touch that” way, but in terms of affordances.
Texture and physicality gives clues about how the app works, where you should touch.
Apple really emphasizes in its interface guidelines. Make it realistic.
But you have to do more than throw some photoshop textures at it.
Apple’s own apps show the hazards, as we’ll see in a moment.
These are really back to basics, common-sense rules of good design, but we can sometimes forget ourselves in our enthusiasm for the new
I also call this the “I can’t believe it’s not butter” bait and switch
It’s an app whose visual design uses one interface metaphor, but its interaction actually uses another.
Calendar: ooh, a lovely desk calendar.
Very pretty, and of course you naturally know how to use it.
Just swipe to turn the page, right? Um, no. Have to use the buttons at bottom.
You have to embrace your interface metaphor.
If you’re going to make it look like a book, make it act like one, too.
Contacts: Tapping doesn’t turn page here, either.
Actually brings up the delete button.
Point: Your interface metaphor should suggest how to use the app.
Affordances (interface hints) that tell you where and how to use them.
Here, the book metaphor is a confusing misdirection.
Creates expectation that works like a book, but really through desktop-style buttons.
To-do list app called Manage. Very pretty.
But you can’t actually act on these elements in the physical sense they suggest.
Too many metaphors in one place. Choose one, make it feel natural.
If you go this route of aping a physical object:
EMBRACE THE METAPHOR
think hard about new interaction opportunities it proposes.
In user testing I see this all the time:
If it looks like a physical object, people will try to interact with it like one.
What does your interface suggest that they do with the content itself?
Don’t make people tap buttons, let them interact directly with the content.
Meanwhile, you have many magazine apps that are TOO literal with metaphor.
Very true to original print artifact.
Little more than PDFs. Clear exactly how to use
But difficult to find table of contents: no random access
Calendar and contacts: designers following their metaphor half-heartedly in interaction
Mags: too literally and they miss interaction opportunities
This is understandable: Weird hybrid.
Not web, phone, desktop, nor a paper/physical interface.
Yet it suggests elements of all four.
The tablet is the awesome bastard child of many parents.
Great opportunities, lots of tradition to draw from.
But have to be careful about mixed metaphors.
USA Today: good job managing metaphor, reducing interface clutter.
Looks like the newspaper.
More than paper. Enable more than flipping thru pages.
Not about heavy-handed media, about thoughtful presentation.
USA Today: Traditional + digital advantages
Subtle hints of newspaper, doesn’t overdo it.
Familiar but not cloying.
Gestures to move quickly through.
But not enough controls!
Gestures will develop. Standards will emerge.
Ran out of time to indicate the section navigation.
Marked by popovers gradually spreading over the skin of your entire interface.
I love Twitterrific. Simple, airy, straightforward way to read Twitter. They do a ton of things right, but the app is susceptible to popover pox.
On iPhone, you move through views by changing the whole screen. That would be disorienting on a screen this size. Vertigo. So Apple created the popover, kind of the right-click of the iPad.
Tap and hold a tweet, I can see actions.
Tap avatar to peek into profile.
Great way to peek into info for a quick view.
And for iPhone devs, wow, you can actually reuse your iphone views. Handy!
Trouble is when you want to explore to navigate info.
Great thing about Twitter is that a brief piece of info can send you on this path of discovery about people, topics, conversations.
Twitterrific (and it’s hardly the only one) lets you do this but corrals you into popovers.
Awesome that it makes it so easy to explore tweets, but misses the opportunity for that big airy view that tablets afford.
So use popovers, definitely, but view it as a warning sign if you find yourself spending too much time inside them.
Pain caused by repeatedly dragging your arm across the screen, especially to that tiny button in top corner.
Fitts’ Law: The smaller the target, and the farther away it is, the harder it is to hit.
Studies have shown that Fitts law applies to touchscreens, too, with the model fitting better with a bigger touchscreen.
On phones, problem not as pronounced. Can hit the entire screen with your thumb. On iPad, you’re moving your whole arm, and those buttons, even though they’re the same size on the iPhone, suddenly much harder to use ergonomically.
Touchscreen lets us tickle the brain in new ways because it’s more intimate to touch the thing you’re interacting with.
But touching a button is not really direct interaction.
Even in real world, they work at a distance. Just because you’re touching *something* doesn’t mean you’re interacting directly with the primary object. Buttons don’t create the intimacy we’re talking about. Direct interaction does, content as control.
Our brains evolved to navigate physical space, to work directly with objects.
Don't get trapped in the metaphors and hacks of this temporary alternate universe of computer interface.
Design for humans. Design for direct interaction.
Pinball HD. The entire screen is a button.
Tap anywhere to get flippers to go.
Think: Where are opportunities to eliminate buttons?
I’ll follow that thought in a moment.
First: I don’t mean to say you should never use buttons. Particularly 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.
But when add controls, at least make them comfortable to hit.
So where do you put controls for comfort on the iPad?
On phones, put primary controls in thumb’s hot zone.
Hot zone for right-handed user.
Where the thumb most naturally comes to rest.
iPad doesn’t have a conventional grip.
Hold it in all different ways.
Couch, bed, desk, standing.
Two handed, side, top grip.
Any part of screen is a likely tap target.
But bottom is bad for controls.
Thumb zone doesn’t apply here.
Opposite of iPhone, back to web/desktop standards.
Visually/ergonomically, better at top.
Instapaper.
Put controls at the bottom, they run into your belly when you’re on the couch, resting it on your stomach.
Howcast. Content optimized for landscape viewing.
For landscape, consider controls at side,
where you’ll be holding it, and you have plenty of room.
Apple’s split view locks this in, fixing controls at left in landscape.
Left optimizes for right-handed users, 85-90% of users.
Familiar desktop conventions here, and it works.
Controls on top or at left.
Vast unexplored territory that we as a community need to explore
and experiment, along with our users.
Buttons are a hack, though effective.
Better to have interface metaphors that let you work directly on content.
Multitouch gestures are a bit of a hybrid:
Gestures are the keyboard shortcuts of the touchscreen.
Should rarely be the only way to do something, but provide smart shortcuts, more fluid use of the app.
Instead of hitting that tiny button to trigger the popover, give me a five finger touch.
Let me do a three-finger swipe to leap back out to the top of the Mail app.
These conventions don’t exist yet.
Apple hasn’t provided them, but they’re badly needed.
So we need to explore this as a community.
Multitouch = using more than one touch, more than one finger at once.
On phones, this is frankly impractical.
If hold it with one hand, you’re limited to thumb tapping.
People avoid multitouch on handheld. Awkward.
Since phones are the only mainstream touchscreen device, means we have no culture of multitouch yet.
The iPad has the opporunity to change that.
Unlike phone, you pretty much have to use it with two hands.
So always have a full hand to use for gestures, multi-finger touch always possible.
Big screen invites big gestures.
Kinetic multitouch particle visualizer.
In a word, it’s a lava lamp, a toy to hypnotize stoners.
But it uses fingers to trigger different modes. Ten modes, one for each finger.
A ten finger press essentially triggers a controls mode, letting you slide your hand instead of working artificial controls like sliders.
Uzu is a toy. Or more like a musical instrument.
It feels more like you’re playing it rather than *using* it.
When any of us master a device or an app or an instrument, that’s how it feels.
Intent fluidly transferred to action.
Gestures give us opp to make apps that are like instruments.
Play more than just use.
Toys are useful.
Toys teach children how to interact with the world, teach cause and effect.
Toys like uzu can teach us to use these devices and gestures.
We should play as developers.
Twitter recently released its official iPad app.
Loren: “I would definitely call this an experiment.”
Playful gestures.
More important, Twitter demonstrates a way to eliminate the back button, work directly with content, by exploring the content itself, sliding around the content in a visual history of your exploration.
Don’t go it alone. We have to talk about this stuff.
Gestures are invisible and have to be learned. But our culture is full of examples of that, customs that are unlabeled with no explanation.
Travel abroad for a while to see how disorienting that can be.
Customs that are effortless for natives disorienting for us.
The creative process isn't just perfect "Eureka!" moments, it's a lot of "oh shit!" and "it’s 2am and I have to do SOMETHING" moments.
But as we explore possibilities of gestures...
'we copied this because well known company X did it, and we assumed they tested it', and you get a cascade of conventions that arose from somebody’s rushed deadline work.
So understand that everything you see right now is an experiment. Question it, test it, discuss it. Important to work together on this.
At least for the moment, iPad is almost certainly AT LEAST the fourth media device for the person using it. TV, Computer, Phone. As we switch among media for these things, we need to get better at helping that transition become seamless.
Instapaper, Netflix, Amazon, grocery lists
Relationships between mobile products are more important than the products themselves. It is about the ecosystem
iPad test participants were unanimous in saying that they're not impressed that brands have iPad apps - to them it's just mandatory.
We’re all cloud developers now.
New platforms don’t come along very often.
Just inventing what this thing does, what iPhone does.
Be expansive, let imagination roam.
I’ve called out some apps for missteps, but I applaud them for venturing out. I love what all of these apps are doing.
It’s important to try new things, throw everything we’ve got at the drawing board.
But we also have to be aware that our enthusiasm for the new is also an achilles heel. Have to have some sober moments to ask: does this make sense?
As designers we know this:
insightful work is part technical know-how, but empathy, imagination, expansive world view generate breakthrus.
We have the coolest job in the world. Inventing future.
Go make something amazing.