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

More Decks by Daniel Ryan

Other Decks in Design


  1. Human-first Web Design by Daniel Ryan

  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
  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
  4. None
  5. 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”
  6. Focusing on engaging real people living real lives

  7. 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.
  8. 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
  9. 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
  10. Case study: BarackObama.com navigation

  11. Your navigational structure reflects your org chart, not what your

    users are trying to find.
  12. Case Study: BarackObama.com nav November 2011

  13. Case Study: BarackObama.com nav July 2012

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

  15. Design by committee just doesn’t work.

  16. Case Study: LeeUniversity.edu redesign

  17. Case Study: LeeUniversity.edu redesign

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

  19. 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
  20. Target your content Use what you already know about a

    person to help focus their attention
  21. Engage your humans Leverage social networks to re-engage lapsed users

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

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

  24. Create compelling content

  25. 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]
  26. 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
  27. 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
  28. Source: Pew Research Center [dryan.com/hfwd6] Nearly one quarter of Americans

    under 30 access the Internet mostly from their phone
  29. Case Study: Planning to Vote

  30. 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
  31. Finally, prefer better over more

  32. It’s time to get off the carousel Source: Nielsen Norman

    Group [dryan.com/hfwd7]
  33. None
  34. 1% of all visitors clicked any item in the carousel

    Source: Erik Runyon, Director of Web Communications, University of Notre Dame [dryan.com/hfwd8]
  35. There is no fold.

  36. 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]
  37. Seriously. There is no fold.

  38. 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…
  39. Thank you so much Daniel Ryan dryan.com | @dryan Deck

    available at dryan.com/humanfirst