Designing Websites for Human Beings - Embracing the Importance of User Testing

DESIGNING WEBSITES for HUMAN BEINGS with Morten Rand-Hendriksen !@MOR10

https://goo.gl/fCSJRw

http://goo.gl/uTM5m7

"In almost every case, (…) respondents who saw “Bicycle May Use Full Lane” signage were signiﬁcantly more likely (p<0.1) than those who saw no signage to agree that bicyclists are permitted in the center of the lane, do not have to move right to allow motorists to pass within the same lane, that motorists should wait for a break in traffic before passing in the adjacent lane, and that bicyclists are safe in the travel lane.

"There was no statistically signiﬁcant difference in responses between those who saw “Share the Road” signage and those who saw no signage in any scenario we tested.

http://goo.gl/uTM5m7 # $

Web design has long been treated as a form of art.

The purpose of web publishing is to communicate ideas and concepts between people. The purpose of web design is to facilitate this communication by adding context through style, emotion, and space.

Good design improves communication. Great design improves understanding.

CONVENTIONS “This is how we have always done it. Everyone does it this way.” ÆSTHETICS “This looks great. It makes me feel something.”

CONVENTIONS “This is how we have always done it. Everyone does it this way.” ÆSTHETICS “This looks great. It makes me feel something.” ASSUMPTIONS “People will understand this. It makes sense to me.”

People are complicated.

ASSUMPTION: We should place as much of our important content as possible   above the fold for immediate access. http://goo.gl/U88jgi

ASSUMPTION: We should place as much of our important content as possible   above the fold for immediate access. http://goo.gl/LlXqVb

ASSUMPTION: The Hamburger is a great way of saving space while providing clearly visible navigation. http://goo.gl/z3N19t

ASSUMPTION: The Hamburger is a great way of saving space while providing clearly visible navigation. http://goo.gl/z3N19t MENU 7.2% increase

ASSUMPTION: The Hamburger is a great way of saving space while providing clearly visible navigation. http://goo.gl/z3N19t 22.4% increase

ASSUMPTION: The Hamburger is a great way of saving space while providing clearly visible navigation. http://goo.gl/z3N19t 20% increase MENU

ASSUMPTION: We can use sidebars to place more content within view of the visitor. http://goo.gl/TZ09Tf “As an adaptation to information overload, web users have trained themselves to divert their attention away from areas that seem unimportant or look like advertising.”

ASSUMPTION: Carousels and content sliders are a great way to present the visitor with lots of content in a small space. “1% clicked a feature. Of those, 89% were the ﬁrst position.” http://goo.gl/2ncWVo

ASSUMPTION: Carousels and content sliders are a great way to present the visitor with lots of content in a small space.

ASSUMPTION: Interactive elements like navigation buttons should go at the top of the screen, even on mobile devices. http://goo.gl/Ih5Prn

ASSUMPTION: Interactive elements like navigation buttons should go at the top of the screen, even on mobile devices. http://mor10.com/web-design-for-thumbs/

ASSUMPTION: Visitors don’t mind being exposed to advertising to get access to content for free. http://goo.gl/8KqNAO

The web has become anti-user.

NOPE NOPE NOPE NOPE MAYBE YES

MAYBE YES NOPE NOPE

NOPE NOPE MAYBE MAYBE NOPE

NOPE NOPE NOPE NOPE NOPE NOPE PROBABLY

This is our opportunity

The “user” is a lie

The User Mythical perfect human being with ample time and patience plus a comprehensive understanding of the web.

There are no users. There are only people.

The design process starts and ends with people.

Good design improves communication. Great design improves understanding.

To design great user experiences we ﬁrst have to understand the people who use them.

The only thing we know is that the people who use our creations are not us.

Data will save us all

The 4-Step Solution to the Malaise of Web Design • Collect real data • Avoid theory dependence • Be aware of your selection bias • Act like a scientist

Web Design with Humans in Mind: • Identify the target audience • Get to know the people • Understand their motivations • Consider context

Who are they? • Identify existing visitors, if any • Describe ideal target audience • Consider secondary audience • Gather demographic information

Get to know the people • Conduct staff interviews • Conduct audience interviews • Issue questionnaires • Create fact-based personas

Understand their motivations • What are they here for? • What are their goals? • What inspires them to visit? • What deters them from visiting? • What are their expectations?

Consider Context • Where are they when they visit? • What device(s) are they using? • What are their distractions / obstacles? • What is their emotional state?

Personas

Anny Age: 30 Home: Brooklyn, NY Currently: Brooklyn, NY Job: Data Analyst Why are you here? To ﬁnd information on pricing, hours, and take-out options. What is your goal? Get details without having to contact staﬀ directly. What inspires you to visit? Heard good things, saw a review, close to my house. What deters you? Too much advertising and heavy load time. What is your expectation? Info without the hard sell. Where are you? At work, at home, or on the subway. What device(s)? iPhone 6s on a limited pay- as-you-go data plan. Distractions / obstacles? Limited data plan, can only do research in lunch break and while in transit. Emotional state? Relaxed, hungry, eager to make a decision.

Angela Age: 37 Home: Vancouver, BC Currently: Vancouver Job: Producer Why are you here? To ﬁnd information on menu, reservations, and pricing. What is your goal? To ﬁnd a hidden gem to take my sister to dinner. What inspires you to visit? Yelp and Urban Spoon recommendations. What deters you? Visuals that indicate dim lighting and bar atmosphere. What is your expectation? Accurate info and images. Where are you? At home, hours before leaving for New York. What device(s)? Desktop computer + Sony Android phone. Distractions / obstacles? Tight time crunch, travel preparation, multitasking. Emotional state? Stressed out, strong desire to please, worry of potential let-down.

Angela Age: 37 Home: Vancouver, BC Currently: Brooklyn, NY Job: Producer Why are you here? Conﬁrm information on menu, reservations, and pricing. What is your goal? Book a reservation for later tonight. What inspires you to visit? Bookmarked website while in Vancouver. What deters you? Advertising of happy hour and “hot dog chugging contest”. What is your expectation? Book reservation online or by phone Where are you? At the hotel, moments before heading out. What device(s)? Sony Android phone. Distractions / obstacles? Terrible hotel wi-ﬁ + expensive per-megabyte roaming plan. Excitement to see sister. Emotional state? Rushed, hungry, excited, impatient.

Empathy Maps

Think + Feel Hear See Say + Do Pains Gains %

Empathy Maps Think + Feel:  What is important to the person? What are their hopes, dreams, fears? Say + Do:  What does the person say in public? How do they appear? How do they behave toward others?

Empathy Maps See:  Where is the person, and what is in front of them? Who are they with? What distractions or alternatives are available? Hear:  Who inﬂuences the person? What do family, friends, co- workers say? What do inﬂuencers say?

Empathy Maps Pains:  What are the fears, frustrations, and obstacles for the person? What worries and deters them? Gains:  What does the person want and need? How do they measure success? What obstacles are they aiming to overcome?

Empathy is not a silver bullet

You are not the target audience. Neither is your client.

http://goo.gl/hXa32C

Initial user interviews Personas + Empathy Maps Wireframes Card sorting Post-launch testing Iteration Prototype testing Live beta testing %

User research can uncover unknown potential, reveal new opportunities, and prevent disasters.

User research ensures your designs are made for human beings.

People are complicated. That’s what makes them awesome.

! @MOR10