Human-first Web Design

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

Transcript

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
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]
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