Human-first Web Design - Speaker Deck

Slide 1

Slide 1 text

Human-first Web Design by Daniel Ryan

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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”

Slide 6

Slide 6 text

Focusing on engaging real people living real lives

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Case study: BarackObama.com navigation

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Case Study: BarackObama.com nav November 2011

Slide 13

Slide 13 text

Case Study: BarackObama.com nav July 2012

Slide 14

Slide 14 text

Case Study: BarackObama.com nav November 6, 2012

Slide 15

Slide 15 text

Design by committee just doesn’t work.

Slide 16

Slide 16 text

Case Study: LeeUniversity.edu redesign

Slide 17

Slide 17 text

Case Study: LeeUniversity.edu redesign

Slide 18

Slide 18 text

Case Study: LeeUniversity.edu redesign 118 Links!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Engage your humans Pre-fill form fields wherever possible

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Create compelling content

Slide 25

Slide 25 text

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]

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Case Study: Planning to Vote

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Finally, prefer better over more

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

There is no fold.

Slide 36

Slide 36 text

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]

Slide 37

Slide 37 text

Seriously. There is no fold.

Slide 38

Slide 38 text

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…

Slide 39

Slide 39 text

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