Design for Real Life

A presentation at Web Design Day 2016 in June 2016 in Pittsburgh, PA, USA by Eric A. Meyer

Design for Real Life
We b D e s i g n D ay • 2 4 Ju n e 2 0 1 6

Who was this for?

Imagine a user.

What gender are they? What race? What age? What do they want? How do they feel?

What gender are they? What race? What age? What do they want? How do they feel?
What if you’re wrong?

“We’re designing for the majority.”

That’s a n edge case.

That’s a n edge case.
stress case .

Stress cases find the fractures .

Who is this for?

Delight Joy Sorrow Happiness Excitement Love Grief Shame Loss Fear Mirth

Life Delight Joy Sorrow Happiness Excitement Love Grief Shame Loss Fear Anger

Plan for Wo r s t Ca s e s

Janice Christina Thomas
Upper market et irish hill liber silver terrace mazim. Eu outer mission iusto duboce triangle in anteposuerit, humanitatis autem suscipit me richmond district seacula. Huey lewis consuetudium corona heights lorem blandit buena vista presidio heights japanese tea garden commodo vel notare lobortis. Twin peaks carlos santana sit duis euismod hendrerit id vel giants, dynamicus facer anteposuerit. Eum lake street qui per nisl lakeside insitam quinta. Consectetuer castro et, velit tenderloin placerat. Cathedral hill butchertown (old and new) india basin volutpat fort mason, little hollywood erat haight-ashbury esse est erat placerat. Quod westwood park non qui eros ingleside tation forest knolls little saigon sea cliff. Civic center claritas diam, velit. Nostrud quod gothica accumsan. Te minim nisl legunt habent, in minim nunc. Vel alcatraz in mission bay hunters point lone mountain. Amet bayview japantown vulputate, tation nunc seacula sofia coppola. Qui lorem facit, ut. Laurel heights cable cars larry gonick enim. Legunt demonstraverunt potrero hill processus.
Quarta sed facit lorem legentis, haight- ashbury ad university mound. Illum consequat hayes valley qui lorem, parkmerced larry gonick belden place eu decima. Augue clint eastwood south of market esse. Veniam presidio vel lectorum imperdiet cum. Etiam iusto in lectores japanese tea garden, oceanview mutationem claritas, facilisis union square. Polk gulch eros quinta the filmore facilisi glen park fort mason dolore. Facit clarendon heights marina district et investigationes chinatown saepius gavin newsom, vince guaraldi financial district south. Eureka valley tation lius minim nulla congue gothica bernal heights nostrud, wisi noe valley jordan park. 49ers iriure commodo amet tempor eleifend, notare candlestick point huey lewis dolore south end et. Iis hendrerit yerba buena notare quis ad tempor decima. Claritatem lake street assum little saigon. Duis mission bay enim cayuga terrace tincidunt amet luptatum esse. Tation molestie littera dolore fillmore claram, merced heights dynamicus. Embarcadero sunnyside mirum
Sit ingleside terraces vero ansel adams, upper market richmond district dolor legere. Exerci lower nob hill crocker-amazon eum blandit humanitatis. Nulla investigationes claritatem formas usus fisherman's wharf, aliquip qui ashbury heights lincoln manor. Nobis willie brown ullamcorper qui. Parum quarta volutpat, eu. Minim me consequat cow hollow pacific heights lakeside. Littera augue facer non insitam in ut accumsan quam possim ea in. Dynamicus autem francis coppola placerat consectetuer quod. Bayview visitacion valley nob hill putamus sea cliff dolore lakeshore south park, nonummy mission district.

Midweek lunch After Bedtime Waiting Room Mobile

Mid-morning Lunchtime Midnight

We will be the go-to resource that DIYers of every skill level and budget rely on to complete their projects and purchases. We’ll do this by publishing clear, dependable content that takes the
guesswork and stress out of home improvements and upgrades, and makes users feel prepared for their projects , con ! dent in their choices, and proud of their results.” “

We will be the go-to resource that DIYers of every skill level and budget rely on to complete their projects and purchases. We’ll do this by publishing clear, dependable content that takes the
guesswork and stress out of home improvements and upgrades, and makes users feel prepared for their projects , con ! dent in their choices, and proud of their results.” “

• Prioritize helpful, realistic estimates • Provide at-a-glance help • Use plain language • Write for the urgent case

Communicate Intent

We should have asked you before turning on the feature, and it should have included a con ! rmation before sending.

We should have asked you before turning on the feature, and it should have included a con ! rmation before sending.
We didn't anticipate accidental clicks: "Send + Mic Drop" was too close to other send buttons ("Send" as well as "Send & Archive"), which caused confusion.

Consider the Context

Before you write for MailChimp , it’s important to think about our readers. Though our voice doesn’t change much, our tone adapts to our users’ feelings.” “

We focus on clarity over cleverness and personality. We are not in an industry that is associated with crisis, but we don’t know what our readers and customers are going through. And our readers and customers are people . They could be in an emergency and they still have to use the internet.” “
— Kate Kiefer-Lee

Va l u e U s e r s

Va l u e P e o p l e

People get incredibly frustrated if they feel like they have to lie. If you have a required set of questions, they have to give an answer, and it makes people feel uncomfortable when they don’t know and have to make something up. We don’t want people to have to tell us information they don’t have, and people will have di " erent limits about what they are comfortable sharing.” “
— Kate Brigham

We’re going to screw up. We’re going to learn from it. It’s only unforgivable if we don’t share what we learned. — ThinkUp mission statement

Sure, we might lose a bit of plucky copy and
upbeat imagery along the way. But what we gain is so much richer: a compass that will guide us in a humane, sensible direction as we continue to sort out the role digital products play in our lives. — Eric Meyer & Sara Wachter-Boettcher Design for Real Life

Digital products touch every aspect of our
lives: friendships, relationships, work, ! nances, health, grief, you name it. They’re how we share, how we express our thoughts and feelings. They’re us —in all our messy complexity. — Eric Meyer & Sara Wachter-Boettcher Design for Real Life

Thank you. @meyerweb meyerweb.com rebeccasgift.org

Eric A. Meyer
@meyerweb

1 / 65

As more and more of our lives become represented online, and more and more of our lives are touched by digital creations, the need to design thoughtfully and compassionately is growing--and often woefully overlooked. You can’t always predict who will use your designs, or what emotional state they’ll be in when they do, but by refocusing to identify stress cases and design with compassion, you can create experiences that will support more of your users, more of the time, and avoid doing unintended harm.