Tapworthy
Designing iPhone Interfaces for
     Delight and Usability

                     Josh Clark
                    ...
“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 o...
You’re Designing a
 Physical Device
44
44
44
44

44

44
88
88
Be a Scroll Skeptic
Edit, Edit, Edit
Finger-Friendly Design
• Use the thumb’s hot zone.
• Design to a 44-pixel rhythm.
• Be generous with space.
• Content at t...
agna.         nc aliq
                                              uam
                 isus m        h at nu
       llus...
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Upcoming SlideShare
Loading in...5
×

Tapworthy: Designing iPhone Interfaces for Delight and Usability

19,526

Published on

This SXSW presentation covers: the elusive ingredients of "tapworthy" apps; why building iPhone apps is like designing a physical gadget; usability gotchas on handheld devices; and how the best iPhone designers turn constraints — limited screen space and fleeting user attention — into advantages for their apps. Along the way, Josh shares behind-the-scenes glimpses into the design process of popular apps including Facebook, Twitterrific, USA Today, Things, and others.

The presentation is by designer, developer, and author Josh Clark, previewing ideas from his upcoming book, "Tap Happy: Designing Great iPhone Apps" from O'Reilly Media.

Published in: Technology, News & Politics
5 Comments
75 Likes
Statistics
Notes
No Downloads
Views
Total Views
19,526
On Slideshare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
714
Comments
5
Likes
75
Embeds 0
No embeds

No notes for slide
  • I’m a designer and developer, and I write books about the iPhone for O’Reilly.

    I’m just wrapping up a new book about iPhone app design, “Tap Happy: Designing Great iPhone Apps.”

    The book hits stores in May 2010, and you can preorder now at Amazon or oreilly.com.
  • Wenger Giant: Holds Guinness world record for most multifunctional pen knife.
    Made for company’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’s a failure.
    Heavy physical load, heavy cognitive load
    Mobile interface: Clarity should trump density, less is more
    Ergonomically unsuited to its purpose, a pocket knife that can’t fit in the pocket.
  • Simple and elegant in contrast, but lots of similarities with Swiss Army Knife:
    Mobile devices, small, pocket-sized, meant to be worked by hands and fingers.
    One gadget at a time, one app at a time.
    Simple, specialized tools, right for job, focused.
    Switch quickly between apps
    Big toolbox: Yours doesn’t have to do everything, just a small focused slice.
    Overwhelm if try to do too much.
    Successful iPhone apps depend on design restraint.
    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’t compete, we’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?
  • Attracted to great apps for same reasons we’re attracted to people:
    Easy on eyes; fun to spend time with; make us laugh; attentive, not too demanding; rewarding of loyalty; help us get things done; make us feel good about ourselves.

    I’d totally tap that.

  • Will talk lots about efficiency and focus, not much about aesthetics.
    But quickly: Not just tap quantity but quality.
    Tapbots does a dreary task with style, toylike
    Emotional attachment.
    Swiss Army knife ridiculous but people buying it as a piece of whimsy
    Create sense of luxury with textures: Wood, metal, glass.
  • Only tapworthy if useful in mobile context.
    Why would I want this app anytime anywhere?
    Optimize feature set for when not at home or desk.
    Is this stuff I’ll use on the go?
    Easy to lose sight of mobile context.
    Just because you can do it, doesn’t mean I want to use it.
  • 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.
    Optimize.
  • Things To-Do List
    Add a to-do list by tapping that plus sign on every screen
    Mail app same: compose message button on every screen
  • Gowalla urban location game
    All about the check-in
    Not just making option always available
    Big chunky call to action
    Make it obvious what to do
  • First personal computer: knows so much about you
    Sensors -- Sight, hearing, touch
    Use sensors to give personal context to tasks and info
  • Maps most familiar instance of this, but much more than just finding nearest Starbucks.
    Huge amount of geotagged info: Information ghosts
    Geotagging -> Connect with niche audiences
    Feed personal passion with hyperlocal info
  • Not just what’s near me
    What’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’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’s new for mainstream.
  • Common thread: exploration.
    Games, books, news, youtube, twitter. All story.
    Workaday apps can do it too
    Personal data is a story to explore.
    Where you’ve been, where going
    Personal stats as video game
    Not just about optimizing for micro-tasking
    Afford opportunities for leisurely crawl
    Optimize for quick sprints but also provide something to explore
  • 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

  • “Do I need an umbrella today?”
    Don’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’t have to be stripped out, but has to remain simple.
    Complexity is good, as long as it’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’t edit, here’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’s handheld, works by touch
    That means you’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’s design determines how hands physically interact with the iPhone
  • Until you open one of its gadgets, a Swiss Army knife isn’t a knife at all. It’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’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%
    Optimizing for 90% 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’re organizing importance of controls from right to left, which is not how we’re accustomed to reading.
    So again, lefties are inconvenienced. Have to gauge importance of tap convenience vs ease of scanning.
  • 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?
    Target can comfortably and reliably hit 44 pixel target.
    Spread of fingers, 1/4”.
    44x44 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.
    Practical minimum for buttons: 29x44
  • Not only for the hand, but of the hand
    Every element in proportion, design to a 44-pixel rhythm
    Not only to one another but to finger
    Use 44 not just for buttons but overall
  • Don’t have to be super literal
    Home screen grid organized in 88, multiple of 44
    Looks right, but literally feels right
  • Had one of these bad boys in the 1980s
    Not only small buttons but too close. Aim for 5, get 8 or 2.
    Not just button size but spacing
    Closer they are, larger they should be
  • You get into real trouble with proximity when you get too close to the bottom tab bar.
    Usability tests show time and again that this is a real trouble area, a frequent location of mis-taps, made all the more frustrating by the fact that a wrong tap can take you to a whole other screen.

    Call Global on left, Skype on right. Call Global has these tiny buttons and you almost always end up going to the World Call screen when you mean to tap that Balance button. Skype easier because the buttons are bigger. That zone above the tab bar should be avoided where possible.


  • As always, sometimes you’re in tough spot and you have to make do. When they were developing the app, the USA Today team considered all kinds of locations for the “i” info icon and the refresh button shown here at the bottom of the screen. Wanted it toward the button because they didn’t want to compete with the branding and weather at the top.

    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.
  • Trouble is, Apple got there first, tab bar extended into canvas, making their problem even worse.

    Had to design custom tab bar to work around the problem. Point is, if you’re going to take tap risks, you have to do everything you can to minimize the impact.
  • Things checkbox
    Small interfaces need big elements
    Not just ergonomics, but visual and cognitive considerations
    Less there, easier to take in at once
  • When can fit everything on one screen, do it
    Out of sight, out of mind
    Matter of brain and strain: Fire up brain cells to think what’s missing
    Reinforces illusion of physical device
    Fixed screen gives sense of solidity
  • Scroll skepticism especially important for Utility apps.
    Take it in all at once
    Border makes it clear entire screen.
    Sense of solidity.
  • Graphically rich, telegraph quickly.
    Surf Report
    Glance test: make it out at arm’s length
  • Tea Round
    Whose turn it is to brew tea
    Most apps need more than a big teacup
  • AccuWeather.com
    Weather: Dense info, dew point at 11am
    How to provide more info?
    This no scroll view provides rich weather info.
    Uses content as controls.
  • Accordion
    A lot of chrome, but serves to accentuate the content categories.
    Animation provides subtle training about how to use accordion.
  • 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’t scroll.

    If you’re going to have scrolling content, be sure the primary controls remain within view.
  • Tapworthy apps -> all elements have to be tapworthy
    Get rid of as much chrome as you can.
    Being a scroll skeptic encourages you to put every element through a tapworthy filter
    Eliminate controls
    Turn content into controls
    Do you really need all those features?
    What’s the minimum you can do?
  • If you’re building an app to fly an airplane, you might build this...
  • ...when your customers really want this. What’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’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 to a secondary view.
    Can’t be too secret. Latch hidden in plain sight.

  • Meebo uses a similar approach for emoticons
  • Meebo uses a similar approach for its emoticons.
  • Twitterrific likewise reveals a custom keyboard of options when you tap the asterisk to reveal actions for a tweet.
  • Twitterrific likewise reveals a custom keyboard of options when you tap the asterisk to reveal actions for a tweet.
  • 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’ 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’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’s the bones of the app, the features and controls and layout, that will determine whether it’s tapworthy.

  • Tapworthy: Designing iPhone Interfaces for Delight and Usability

    1. 1. Tapworthy Designing iPhone Interfaces for Delight and Usability Josh Clark SXSW 2010
    2. 2. “Is It Worth It?”
    3. 3. What Makes Your App Mobile?
    4. 4. I’m micro-tasking. I’m local. I’m bored.
    5. 5. I’m Micro-Tasking photo: envisionpublicidad at ickr
    6. 6. I’m Local photo: quasimondo at ickr
    7. 7. Shopper Babelshot SoundCurtain
    8. 8. I’m Bored photo: thomashawk at ickr
    9. 9. Think Big, Build Small
    10. 10. 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
    11. 11. You’re Designing a Physical Device
    12. 12. 44
    13. 13. 44
    14. 14. 44
    15. 15. 44 44 44
    16. 16. 88 88
    17. 17. Be a Scroll Skeptic
    18. 18. Edit, Edit, Edit
    19. 19. Finger-Friendly Design • Use the thumb’s hot zone. • Design to a 44-pixel rhythm. • Be generous with space. • Content at top, controls at bottom. • Avoid scrolling where practical. • Put secondary controls behind hidden doors.
    20. 20. agna. nc aliq uam isus m h at nu llus at r “Phase itae nib ulum v nec. Vestib py: Hap Great Tap ing sign pps De e A On bookshelves hon iP May 2010 1 Preorder: 1 Josh C lark www.oreilly.com Josh Clark www.globalmoxie.com twitter: @globalmoxie
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×