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. 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
  2. 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
  3. 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”
  4. 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.
  5. 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
  6. 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
  7. 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
  8. Target your content Use what you already know about a

    person to help focus their attention
  9. 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]
  10. 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
  11. 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
  12. Source: Pew Research Center [dryan.com/hfwd6] Nearly one quarter of Americans

    under 30 access the Internet mostly from their phone
  13. 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
  14. 1% of all visitors clicked any item in the carousel

    Source: Erik Runyon, Director of Web Communications, University of Notre Dame [dryan.com/hfwd8]
  15. 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]
  16. 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…
  17. Thank you so much Daniel Ryan dryan.com | @dryan Deck

    available at dryan.com/humanfirst