Die SlideShare-Präsentation wird heruntergeladen. ×

O'Reilly Webcast: Tapworthy iPhone App Design

•

15. Sep 2010

• •

Josh Clark
@globalmoxie
www.globalmoxie.com

Webcast hashtag:
#tapworthy

“Is It Worth It?”

What Makes Your App
Mobile?

Nächste Präsentationen

Nächste SlideShare

Mind the Gap: Designing the Space Between Devices - Josh Clark at UXI Studio

Mind the Gap: Designing the Space Between Devices - Josh Clark at UXI Studio

Wird geladen in …3

×

Hier ansehen

Menno Huisman - Meta Architecture

Mobile Monday Amsterdam

Apple Router.Ppt

Technology is the future

WesleyDRoberson

Do you know where you are

New interface technologies_and_teacher_prep_short

Reynold Redekopp

ICISTS KAIST Keynote Speech

Three Things First

O'Reilly Webcast: Tapworthy iPhone App Design

15. Sep 2010

• •

Herunterladen, um offline zu lesen

Slides from live O'Reilly webcast on Sept 14, 2010. Video:
http://www.youtube.com/watch?v=_JobmIurqCY

Tapworthy apps cope with small screens and fleeting user attention to make every pixel count, every tap rewarding. Learn to: capture the elusive ingredients of irresistible mobile interfaces; craft comfortable ergonomics for fingers and thumbs; dodge the usability gotchas of handheld devices; and turn tiny-touchscreen constraints to your advantage. Along the way, you'll get behind-the-scenes glimpses into the design process of popular apps including Facebook, Twitterrific, USA Today, Things, and others.

Designer, Developer, Author im Big Medium

Slides from live O'Reilly webcast on Sept 14, 2010. Video:
http://www.youtube.com/watch?v=_JobmIurqCY

Tapworthy apps cope with small screens and fleeting user attention to make every pixel count, every tap rewarding. Learn to: capture the elusive ingredients of irresistible mobile interfaces; craft comfortable ergonomics for fingers and thumbs; dodge the usability gotchas of handheld devices; and turn tiny-touchscreen constraints to your advantage. Along the way, you'll get behind-the-scenes glimpses into the design process of popular apps including Facebook, Twitterrific, USA Today, Things, and others.

Weitere Verwandte Inhalte

Opel Corsa C 9/00 bis 9/06, Opel Meriva 5/03 bis 4/10: So wird´s gemacht, Band 131 Rüdiger Etzold

Antarktis - die verbotene Wahrheit: Schaltstelle Geheimer Weltraumprogramme, Zentrale für interplanetaren Sklavenhandel, Landeplatz außerirdischer Flüchtlinge Michael E. Salla

VW Golf V 10/03-9/08, VW Touran I 3/03-9/06, VW Golf Plus 1/05-2/09, VW Jetta 8/05-9/08: So wird´s gemacht - Band 133 Rüdiger Etzold

Opel Astra H 3/04-11/09, Opel Zafira B 7/05-11/10: So wird´s gemacht - Band 135 Rüdiger Etzold

Lexikon der Symbole und Archetypen für die Traumdeutung Peter Chairon

Panzerketten: Die Gleisketten der deutschen Kettenfahrzeuge des Zweiten Weltkrieges Peter Schwarzmann

Das Original Handbuch des Spezialtiefbaus: Band 2: Geräte und Verfahren Heinrich Otto Buja

VW Golf VI 10/08-10/12: So wird's gemacht - Band 148 Rüdiger Etzold

VW Multivan / VW Transporter T5 115-235 PS, Diesel 86-174 PS ab 5/2003: So wird´s gemacht - Band 134 Rüdiger Etzold

Opel Astra G 3/98 bis 2/04, Opel Zafira A 4/99 bis 6/05: So wird's gemacht - Band 113 Rüdiger Etzold

Das neue Werkbuch Elektronik: Das komplette Know-how der Elektronik aktuell erklärt Rüdiger Klein

Der Haunebu Antrieb: So funktionier(t)en die legendären UFOs Holger Erutan

Der leichte Einstieg in die Elektrotechnik & Elektronik: Bauteile der Elektrotechnik · Solartechnik · Netzgeräte · Motoren und Generatoren · Messgeräte · Beleuchtung Bo Hanus

Enzyklopädie der Cannabiszucht: Fachbuch der Hanfgenetik Mike MoD

Die Blockchain-Revolution: Wie die Technologie hinter Bitcoin nicht nur das Finanzsystem, sondern die ganze Welt verändert Don Tapscott

Mikrocontroller in der Elektronik: Mikrocontroller programmieren und in der Praxis einsetzen Herbert Bernstein

Heißzeit: Mit Vollgas in die Klimakatastrophe - und wie wir auf die Bremse treten Mojib Latif

Koi Karpfen halten: Koi-Haltung leicht gemacht – Grundlegendes zur artgerechten Haltung von Kois Mark Husemeyer

Lean Production - Grundlagen: Das Prinzip der schlanken Produktion verstehen und in der Praxis anwenden. Schlank zur Wertschöpfung! Maximilian Tündermann

Öl und Gas - Im Netz der Konzerne Gerhard Konzelmann

Das liebe Auto - Geschichten von Schüsseln und Flitzern (ungekürzt) Hans Eckart Rübersamen

Unter Strom: Unser Umstieg in die Elektromobilität Florian Prince

Das Klima im New Dark Age James Bridle

Elon Musk: Wie Elon Musk die Welt verändert – Das ungekürzte Hörbuch Ashley Vance

Shopfloor Management für Einsteiger: Erste Schritte zu einer wertschöpfungsorientierten Führung. Theoretische Grundlagen, -begriffe und praktische Tools zur Einführung in KMUs Malte Schechler

Die Autodoktoren - Zwei drehen am Rad: Die besten Geschichten aus der Werkstatt (Ungekürzte Lesung) Hans-Jürgen Faul

Lean Management für Einsteiger: Erfolgsfaktoren von Lean Management – Lean Leadership & Co. als langfristige Erfolgsgaranten Maximilian Tündermann

Ragazza motorizzata: Auf einer halben Vespa um ganz Italien Nati Rasch

Der Geist in der Maschine: Künstliche Intelligenz und menschliches Leben Frankfurter Allgemeine Archiv

Elon Musk: Wie Elon Musk die Welt verändert – Die Biografie Ashley Vance

Die Verantwortliche Elektrofachkraft: VEFK-Struktur und Betriebliche Elektrosicherheit für Unternehmer, Fach und Führungskräfte Matthias Surovcik

Familie Pfäffling Agnes Sapper

O'Reilly Webcast: Tapworthy iPhone App Design

Josh Clark @globalmoxie www.globalmoxie.com Webcast hashtag: #tapworthy
“Is It Worth It?”
What Makes Your App Mobile?
I’m micro-tasking. I’m local. I’m bored.
I’m Micro-Tasking photo: envisionpublicidad at ickr
I’m Local photo: quasimondo at ickr
Shopper Babelshot SoundCurtain
I’m Bored photo: thomashawk at ickr
Think Big, Build Small
Tapworthy apps... • Focus on mobile context • Optimize for micro-tasking • Use sensors to enhance local context • Create opportunities for exploration • Complex ≠ complicated • Do one thing and do it well
You’re Designing a Physical Device
44
44
44
44 44 44
88 88
Be a Scroll Skeptic
Edit, Edit, Edit
Text
Finger-Friendly Design • Use the thumb’s hot zone. • Design to a 44-point rhythm. • Be generous with space. • Content at top, controls at bottom. • Avoid scrolling where practical. • Put secondary controls behind hidden doors.
Thanks! @globalmoxie www.globalmoxie.com
O’Reilly online course Tapworthy iPhone Design Starts October 20, 2010 Eight-week online course http://training.oreilly.com
40% off (50% off ebook) Discount code 4CAST www.oreilly.com

Hinweis der Redaktion

Design and user experience; what makes a great iPhone app.
Not about code or marketing.
How to &#x201C;think iPhone&#x201D;

Best apps account for whole range of non-technical considerations
Psychology, ergonomics, culture, aesthetics, efficiency.

Form/context of iPhone puts special demands

Focus on iPhone, handheld, not iPad
iPad&#x2019;s form / context &#x2192; different animal.
Designing for handheld touchscreen very different than desktop.

Next hour, look at those considerations from big picture
then zoom down into nitty-gritty pixel-perfect details
But first, want to talk about an AWESOME Swiss Army Knife.
Wenger Giant: Holds Guinness world record for most multifunctional pen knife.
Made for company&#x2019;s 100th anniversary to include every gadget ever included in a Swiss Army knife.
87 tools, 141 functions. Cigar cutter, laser pointer, golf reamer.
Bit of humor and whimsy, but as a knife, it&#x2019;s a failure.
Heavy physical load, heavy cognitive load
Mobile interface: Clarity should trump density, less is more
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&#x2019;t have to do everything, just a small focused slice.
Overwhelm if try to do too much.
Successful iPhone apps depend on design restraint.
Focus is important.
Launching app uses scarce resources: time, attention, thought
Use mobile apps when mobile: grocery, tv, conversation
Share attention in distracted, rushed settings.
People have better things to do.
If app doesn&#x2019;t compete, we&#x2019;ll move on.
Chew through apps: We download 10 apps/mo, few launched even 20 times.
Not worth even tiny effort they require.

When people look at icon on home screen:
Worth it? Worth attention? Worth time? Worth tapping?
Or put another way: Is it tapworthy?
Little detour to mention importance of style and charm.
Convertbot. Dreary task handled with toylike style.

Most of this talk is going to focus on simplicity & efficiency,
but it&#x2019;s not all about reducing tap quantity. Improving tap quality.

Convertbot isn&#x2019;t the most efficient conversion utility.
But people return to it because it&#x2019;s fun.

Emotional attachment to software?
Deeply personal nature of iPhone.

One way to create attachment is create sense of luxury. Wood, metal, glass.
Similarly, Bebot. Example of thinking about charm.
Really capable sound synthesizer with theramine effects,
whole range of tools for adjusting music.
Obvious thing would have been to make a keyboard or soundboard.

Instead, robot crooner.

Important to keep things familiar, efficient (Is this as simple as it might be)
But at same time, ask: Am I going far enough?
Don&#x2019;t get distracted by razzle dazzle.
As extraordinary as your app might be,
only tapworthy if useful in mobile context.

Mobile not just on the go: on the couch, in kitchen
Features, use cases for nontraditional computing environ.

Easy to lose sight of mobile context.
Tempting to think of regular computer.
True technically, but not in context.
Just because the device can do sophisticated computing, doesn&#x2019;t mean *I* want to.

Does it do something people will want on the go?
By and large our brains are in one of 3 modes when using iPhone app.
Micro-tasking: Quick dashes of short tasks, get in and get out.
Device of convenience and context.
Wedge its use in between other activities.
Captures lost time. Grocery store lines, subway commutes.
Anticipate dashes and short sprint.
Identify recurring tasks, optimize for those tasks, then: polish, polish, polish
Things To-Do List
Optimized for adding to-dos and checking them off.

Add a to-do list by tapping that plus sign in lower left.

Every screen has it.
No matter where you are, one tap away from adding task

Mail app:
new message button on every screen

Identify primary tasks and optimize the hell out of em.

Constant presence of these controls important
but so is a call to action&#x2026;
Gowalla: location-sharing service for announcing whereabouts
All about the check-in, doing it quickly.
Big chunky button is a call to action

Not only optimizes for checking in quickly, but
Makes it obvious what to do
Identify primary recurring task, optimize for it, make it drop-dead easy.
Something&#x2019;s wrong if people can&#x2019;t immediately figure out how to do the primary task of your app.
First personal computer: knows so much about you
Sensors -- Sight, hearing, touch
Use sensors to give personal context to tasks and info
A Bike Now and Trees Near You.
Use location information to connect with niche audiences.

Proliferation of geotagging &#x2192; Information ghosts
Great apps: goggles see only the ghosts that interest us.
Feed personal passion with hyperlocal info

Maps are the obvious use.
Again, useful to think: am I going far enough?
How can I take this further?
Not just what&#x2019;s around you but what&#x2019;s in front of you.
Not just what&#x2019;s near me
What&#x2019;s right in front of me?
Use sensors: Add highly personal context to tasks/info
Nothing more tapworthy than helping someone survive dull-as-paste moment
Games most popular in app store.
iPhone great for this for same reason it&#x2019;s great for micro-tasking: Always there
Video game, high literature, low humor
Make me laugh.
Boredom floats industry of moron tests & fart-sound apps
Full-fledged software genre
Software not just for work now: Want entertainment, distraction
That&#x2019;s new for mainstream: software is content, not a tool.
Workaday apps can meet this need, too.
Here RunKeeper (running/exercise journal)
and Lose It (calorie counter)
Personal stats as video game

Novelty apps, games, books, news, youtube, twitter. All story.
Common thread: exploration.

Productivity apps great at providing exploration,
especially apps that collect personal data.
Where you&#x2019;ve been, where going
Explore our own personal history, video game for narcissists.

Not just micro-tasking... Create opportunities for leisurely crawl
Optimize for quick sprints but provide something to explore
Boredom buster
Be expansive in planning.
Still inventing this. Something amazing invented for iPhone every day, keep at it.
Come up with all the ideas you can, then kill all but a special few.
Figure out the minimum you need to do what you want to do, and polish.
Do one thing, do it well.
Find your primary use cases
Identify recurring tasks
Optimize
&#x201C;Do I need an umbrella today?&#x201D;
Don&#x2019;t need to have tons of features to be best
Less almost always more in mobile
But have to fulfill primary task.
Some apps do require more features: Facebook
Features don&#x2019;t have to be stripped out, but has to remain simple.
Complexity is good, as long as it&#x2019;s not complicated.
Last point especially important.
Tapworthy apps consist only of tapworthy features.
Put every feature through that filter:
Is it worth effort? Does it make user more awesome?
If don&#x2019;t edit, here&#x2019;s the risk.
More features you have, more controls you need.
Too much in small space
Both knife and iPhone have physical constraints (which Giant flaunts)
Small screen, but more important, it&#x2019;s handheld, works by touch
That means you&#x2019;re doing more than pushing pixels
Not literally. Virtual, flickering liquid crystals.
But an interface explored by human hands, unlike desktop
Not just graphic design: industrial design
Your app&#x2019;s design determines how hands physically interact with the iPhone
Until you open one of its gadgets, a Swiss Army knife isn&#x2019;t a knife at all. It&#x2019;s just a handle. A blank.
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
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.
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.
These principles are reflected in everyday physical objects.
Fingers (or feet) obscure view.
Have to clear the way.
Content at top.
Controls at bottom.
Content at top.
Controls at bottom.
Content at top.
Controls at bottom.
Organize left to right.
Conveniently, that&#x2019;s also how we read.
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.
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&#x2019;re organizing importance of controls from right to left, which is not how we&#x2019;re accustomed to reading.
So again, lefties are inconvenienced. Have to gauge importance of tap convenience vs ease of scanning.
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.
Swapped the layout in subsequent versions.
Kept original layout as an option, though, for lefties.
Layout important but also button size
How big is finger tip? Apple has very precise opinion on that: 44 points &#x2014; about &#xBC;&#x201D;
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....
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
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&#x2019;t think 44 just for buttons but for overall layout
Don&#x2019;t have to be super literal
Home screen grid organized in 88, multiple of 44
Looks right, but literally feels right
Not only small buttons but too close.
Not just button size but spacing
Closer tap areas are, larger they should be
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.
Compromise sometimes necessary: USA Today

When developing app, USA Today team considered all kinds of locations for the &#x201C;i&#x201D; 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.
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.
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&#x2019;re going to take tap risks, you have to do everything you can to minimize the impact.
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
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&#x2019;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
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.
Surf Report.

This class of apps:
Graphically rich, telegraph quickly.
Glance test.

Apps pass glance test when:
hold at arm&#x2019;s length, can still soak up the info quickly.
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&#x2019;t just strip out all controls or information.
Sometimes scrolling is necessary,
but shouldn&#x2019;t necessarily be your default.
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.
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.
Tried to do it with news, but obviously didn&#x2019;t work.

Went back to a standard list view.
Sometimes you just need to scroll, that&#x2019;s okay.

Animation hint at top of screen.

Be scroll skeptic, but no need to be dogmatic.
Scrolling/flicking part of the fun.
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
Scrolling necessary sometimes
Long lists: email, news feeds, to-do lists
But have to keep main controls in view
Here the Wall/Info/Photos tabs scroll out of view
In Facebook v3, changes in overall navigation provided room to anchor those controls to the bottom instead, so they don&#x2019;t scroll.

If you&#x2019;re going to have scrolling content, be sure the primary controls remain within view.
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&#x2019;s the point.

It&#x2019;s a useful filter to help you:
Eliminate controls, turn content into controls
Do you really need all those features?
What&#x2019;s the minimum you need to offer?
If you&#x2019;re building an app to fly an airplane, you might build this...
...when your customers really want this. What&#x2019;s their goal? Help them get there as fast as they can.
Momento: Great micro-journal, record moments of the day.
Can attach things to your moment with icons on screen, but doesn&#x2019;t leave much room for the main event, the content.
Common problem for Twitter apps
Tweetie solved it elegantly.
The standard view shows no secondary tools. Focused entirely on primary task: Tapping out a tweet.
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.
All of this takes a lot of thought and planning.
Simple is hard, and effortless takes lots of work.
You have to think ahead.
My friends&#x2019; 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.
Things did a complete paper prototype before starting to build.
Get to screen as soon as possible after you&#x2019;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.
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&#x2019;s the bones of the app, the features and controls and layout, that will determine whether it&#x2019;s tapworthy.