Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Human-first Web Design

Daniel Ryan
April 23, 2013

Human-first Web Design

Focussing on the needs of the real people using our websites.

Daniel Ryan

April 23, 2013
Tweet

More Decks by Daniel Ryan

Other Decks in Design

Transcript

  1. Human-first Web Design
    by Daniel Ryan

    View full-size slide

  2. Daniel Ryan
    • Master’s and Bachelor’s in History & Media
    • Developing since 1998
    • Background in the agency and
    freelance worlds
    • Director of Front-end Development at
    Obama for America 2012

    View full-size slide

  3. My time at
    Obama for America
    • First responsive campaign website in
    political history
    • Developed systems that engaged hundreds
    of thousands of volunteers
    • Registered over 1 million voters online
    • We raised over $690 million online, $125+
    million as a result of optimization and testing

    View full-size slide

  4. What is human-first
    web design?
    • Putting the needs of viewers above the needs of
    the organization
    • Reducing barriers to consumption
    and engagement
    • Employing a multi-screen strategy to reach
    people where they are
    • Preferring “better” over “more”

    View full-size slide

  5. Focusing on engaging
    real people living real lives

    View full-size slide

  6. Jakob Nielsen [dryan.com/hfwd9]
    One of usability's most hard-earned
    lessons is that "you are not the user." ...
    Design to optimize the user experience
    for outsiders, not insiders.

    View full-size slide

  7. Know your audience
    • You don’t know anything if you don’t
    have data to demonstrate the facts
    • Gather data with web analytics, visitor
    surveys and A/B testing
    • Your audience isn’t a monolith

    View full-size slide

  8. Get better information
    architecture
    • IA should be informed by clear goals for
    the site
    • Segment your site structure by either the
    top-level personas in your audience or by
    top-level actions that people want to take
    • No matter how well organized your site
    is, it’s hard to beat good search

    View full-size slide

  9. Case study:
    BarackObama.com
    navigation

    View full-size slide

  10. Your navigational structure
    reflects your org chart, not what
    your users are trying to find.

    View full-size slide

  11. Case Study:
    BarackObama.com nav
    November 2011

    View full-size slide

  12. Case Study:
    BarackObama.com nav
    July 2012

    View full-size slide

  13. Case Study:
    BarackObama.com nav
    November 6, 2012

    View full-size slide

  14. Design by committee
    just doesn’t work.

    View full-size slide

  15. Case Study: LeeUniversity.edu
    redesign

    View full-size slide

  16. Case Study: LeeUniversity.edu
    redesign

    View full-size slide

  17. Case Study: LeeUniversity.edu
    redesign
    118 Links!

    View full-size slide

  18. Reduce barriers
    • The more actions you give users to choose from,
    the less likely they are to do any of them
    • Having one, clear call-to-action is the most
    effective way to drive conversions
    • Use what you already know about a person to
    reduce friction
    • Nothing beats compelling content for
    driving engagement

    View full-size slide

  19. Target your content
    Use what you already know about a
    person to help focus their attention

    View full-size slide

  20. Engage your humans
    Leverage social networks
    to re-engage lapsed users

    View full-size slide

  21. Engage your humans
    Pre-fill form fields wherever possible

    View full-size slide

  22. Engage your humans
    Pre-fill form fields wherever possible
    dryan.com/hfwd1

    View full-size slide

  23. Create compelling content

    View full-size slide

  24. Reach users where they are
    • A multi-screen strategy is no longer
    a luxury
    • Mobile web usage will overtake desktop
    usage, as early as next year*
    • Your strategy should take a holistic
    approach combining SMS, email, social
    networks and the web
    Source: Chitika Insights [dryan.com/hfwd2]

    View full-size slide

  25. Making the case for mobile-
    first, responsive web design
    0
    5,000,000
    10,000,000
    15,000,000
    20,000,000
    25,000,000
    30,000,000
    Apr 2011 Jul 2011 Oct 2011 Jan 2012 Apr 2012 Jul 2012 Oct 2012
    Mobile traffic trippled over the course of the 2012 campaign
    Source: OFA Google Analytics

    View full-size slide

  26. Smart phone ownership amongst
    teen- and college-aged Americans
    22%
    37%
    41%
    Age 12-17
    7%
    65%
    28%
    Age 18-29
    Source: Pew Research Center [dryan.com/hfwd3] Source: Pew Research Center [dryan.com/hfwd4]
    Owns feature phone Owns smartphone No cell phone

    View full-size slide

  27. Source: Pew Research Center [dryan.com/hfwd6]
    Nearly one quarter of Americans
    under 30 access the Internet
    mostly from their phone

    View full-size slide

  28. Case Study: Planning to Vote

    View full-size slide

  29. Case Study: Planning to Vote
    Email SMS Social Phone
    Submit Plan
    Thank you
    Reminder night
    before
    Reminder two
    hours before
    Polling place
    lookup
    Invite friends to
    commit
    Alerts about
    changes
    Did you vote?
    Tell person to vote
    Do you need a
    ride?
    Voted Open
    Graph action

    View full-size slide

  30. Finally, prefer better
    over more

    View full-size slide

  31. It’s time to get off the
    carousel
    Source: Nielsen Norman Group [dryan.com/hfwd7]

    View full-size slide

  32. 1% of all visitors clicked
    any item in the carousel
    Source: Erik Runyon, Director of Web Communications, University of Notre Dame [dryan.com/hfwd8]

    View full-size slide

  33. There is no fold.

    View full-size slide

  34. Negative space is your
    biggest positive impact
    • Whitespace around paragraphs can
    increase comprehension by 20%
    [dryan.com/hfwd10]
    • Text attracts attention before graphics
    [dryan.com/hfwd11]
    • Whitespace defines the visual narrative of
    the page
    [dryan.com/hfwd12]

    View full-size slide

  35. Seriously.
    There is no fold.

    View full-size slide

  36. Steve Jobs
    It's in Apple's DNA that
    technology alone is not enough —
    it's technology married with liberal
    arts, married with the humanities…

    View full-size slide

  37. Thank you so much
    Daniel Ryan
    dryan.com | @dryan
    Deck available at dryan.com/humanfirst

    View full-size slide