81
Designing Empathy with Aaron Gustafson @aarongustafson adaptivewebdesign.info

Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

Page 3: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Designing Empathywith

Page 6: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration—likely because so much bad design simply is decoration. Good design isn’t. Good design is problem solving.” – Jeffrey Veen

Page 7: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

de·sign  /dəˈzīn/

To devise for a specific function or end

Classical: To indicate

Medieval Latin: designare, to mark out

Page 8: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

David Carsonhas been called“the most influential graphic designer of our times”

Photo Credit: © Marc Eckardt for FontShop, Berlin.

Page 9: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed
Page 10: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed
Page 11: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

It was Art

Page 12: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

It was Ego

Page 13: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

subjective, personal, and self-indulgent”

Photo Credit: © Marc Eckardt for FontShop, Berlin.

Page 18: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed
Page 19: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed
Page 20: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed
Page 21: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Just because you can doesn’t mean you should

Photo Credit: harald walker

Page 23: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Designisn’t about showing off

Photo Credit: Laurence & Annie

Page 24: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Design = Creativity for Communication

Page 25: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Designing Empathywith

Page 26: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

em·pa·thy/ˈem-pə-thē/

From the Greek empathia meaning “state of emotion”

Page 27: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

em·pa·thy/ˈem-pə-thē/

The action of understanding, being aware of, being sensitive to, and vicariously experiencing the feelings, thoughts, and experience of another … without having the feelings, thoughts, and experience fully communicated in an objectively explicit manner

Page 28: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Meet Charlie

Page 29: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

andJack

Page 30: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed
Page 32: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Empathy requiresus to use our intuition

Photo Credit: [phil h]

Page 33: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Photo Credit: [phil h]

Empathy requiresus to ask questions

Page 37: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Empathy is about showing solidarity with others who have a one and only life on this planet.”

– Jeremy Rifkin

Page 39: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Tribes

Religious Groups

Nation States

Global Community

Page 40: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Photo Credit: United Nations Development Programme

Global response within 3 hours

Page 41: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

em·pa·thy/ˈem-pə-thē/

The action of understanding, being aware of, being sensitive to, and vicariously experiencing the feelings, thoughts, and experience of another … without having the feelings, thoughts, and experience fully communicated in an objectively explicit manner

Also: the capacity for this

Page 42: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

John Rawls1921-2002

Page 44: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Photo Credit: Stuck in Customs

We are able to empathize by seeing ourselvesin others.

Page 45: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed
Page 46: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

In UX, we use personas to

help us empathize

Personas foster empathy

Credit: Kevin O’Connor

Page 47: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

They also frequently devolveinto another name for“the user”

Photo Credit: Tinker*Tailor loves Lalka

Page 48: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Personas need tobe real.

They need to be

human.

Photo Credit: code poet

Page 49: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

User Scenarios =situational empathy

Photo Credit: Sergiu Bacioiu

Page 51: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

a

Design isproblem

solving

Photo Credit: Unhindered by Talent

Page 52: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

F R O N T A L

L O

B EP A R I E T A L L O B E

T E M P O R A L L O B E

OCCIPITALLOBE

CENT

RAL

F.

OCCIPITAL F.

SYLVIAN F. EXOOCCIPITAL FF.

Page 53: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

F R O N T A L

L O

B EP A R I E T A L L O B E

T E M P O R A L L O B E

OCCIPITALLOBE

CENT

RAL

F.

OCCIPITAL F.

SYLVIAN F. EXOOCCIPITAL FF.

Page 54: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

F R O N T A L

L O

B EP A R I E T A L L O B E

T E M P O R A L L O B E

OCCIPITALLOBE

CENT

RAL

F.

OCCIPITAL F.

SYLVIAN F. EXOOCCIPITAL FF.

Page 55: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Call out the relevant facts:

Bob is a mechanic

He is left- handed

He wants to look up parts info (and possibly order a replacement part) while under a car

Photo Credit: Neil. Moralee

Page 56: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Photo Credit: Frisno

We only need enough detail to be able to put ourselves in his shoes.

Page 57: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

We only need enough detail to be able to put ourselves in his shoes.

Who caresabout hismacchiatoaddiction?

Photo Credit: Frisno

Page 58: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

We want info on his• goals,

• needs,

• circumstances,

• outside influences,

• distractions, and

• limitations.

Photo Credit: Neil. Moralee

Page 59: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

User scenarios help us empathize in a productive way

Photo Credit: Chris Garrison

Page 63: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Photo Credit: lastquest

Consider physical limitations

Page 65: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Photo Credit: andrechinn

Don’t create unnecessary barriers

Page 66: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Credit: XKCD

Don’t force your agenda on your customers

Page 67: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Considerindirectusers

Page 68: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Considerindirectusers

Page 69: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Considerindirectusers

Page 71: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Help users learn to accomplish complex tasks and rewardthem fordoing so.

Credit: pasukaru76

Page 72: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Progressive Reduction

http://layervault.tumblr.com/post/42361566927/progressive-reduction

Page 73: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Progressive Reduction

http://layervault.tumblr.com/post/42361566927/progressive-reduction

Page 74: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Progressive Reduction

http://layervault.tumblr.com/post/42361566927/progressive-reduction

Page 75: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

What is hateful to you, do not to your fellow man. That is the entire law; all the rest is commentary.

–Judaism

Do unto others as you would have them do unto you.

–Christianity

No one of you is a believer until he desires for his brother that which he desires for himself.

–Islam

The Golden Rule

Hurt not others in ways that you yourself would find harmful.

–Buddhism

Page 76: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed
Page 77: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

[Progressive enhancement] keeps the design open to the possibilities of sexiness in opportune contexts, rather than starting with the ‘whole’ experience that must be compromised.”

– Ben Hoh

Page 78: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

EgalitarianismEquality of opportunity,not equality of outcome

Page 79: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Designing Empathywith

Page 80: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Thank you

Page 81: Designing with Empathy · Designing with Empathy. Design ≠ Art _ Image Credit: L.e.e Photo Credit: faith goble. Art serves the Artist Photo Credit: Abby Lanes. I’ve been amazed

Designing with Empathyby Aaron Gustafson@AaronGustafson

Further reading:http://readlists.com/820c6ff1http://adaptivewebdesign.infohttp://blog.easy-designs.net

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 3.0except where otherwise noted

flickr Photo Creditshttp://www.flickr.com/photos/aarongustafson/galleries/72157633153882514/http://www.flickr.com/photos/aarongustafson/galleries/72157633161513316/