Every decision we make affects the way real people experience our products. We've all heard the rallying cry for user-centered design, but even those of us who ascribe to that ideal often fall back on our own biases and instincts when it comes to making decisions about how people experience our content and our services. Sadly, this often means we make decisions we think will be good for our "users" - that anonymous, faceless crowd - rather than actually trying to understand the perspectives, surroundings, capabilities, and disadvantages of the actual people who we are here to serve. In this session, Aaron will explore why empathy is a good thing, how empathy empowers creativity, and how we, as a community, can inject more empathy into our work.

1. Designing
Empathywith
Aaron Gustafson
@AaronGustafson
adaptivewebdesign.info

2. Photo Credit: Stuck in Customs

3. Designing
Empathywith

4. Design ≠ Art _
Photo Credit: faith gobleImage Credit: L.e.e

5. Art serves the Artist
Photo Credit: Abby Lanes

6. 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
“

7. de·sign
/dəˈzīn/
To devise for a specific function or end
Classical: To indicate
Medieval Latin: designare, to mark out

8. David Carson
has been called
“the most
influential
graphic designer
of our times”
Photo Credit: © Marc Eckardt for FontShop, Berlin.

11. It was Art

12. It was Ego

13. subjective,
personal, and
self-indulgent”
Photo Credit: © Marc Eckardt for FontShop, Berlin.
“

14. Your ego is a
bad designer.”
– Christopher Butler
“

15. http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html

16. http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html

17. http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html

21. Just because you can
doesn’t mean you should
Photo Credit: harald walker

22. Design
isn’t about
showing off
Photo Credit: Laurence & Annie

23. communicate
not alienate
Design to
Photo Credit: altemark

24. Design = Creativity
for Communication

25. Designing
Empathywith

26. em·pa·thy
/ˈem-pə-thē/
From the Greek empathia meaning
“state of emotion”

27. 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

28. Meet
Charlie

29. and
Jack

31. Photo Credit: [phil h]
Empathy requires
us to observe

32. Photo Credit: [phil h]
Empathy requires
us to ask questions

33. Empathy requires
us to listen
Photo Credit: [phil h]

34. Empathy requires
us to use our intuition
Photo Credit: [phil h]

35. Empathy requires
us to be patient
Photo Credit: [phil h]

36. Perspective
is everything
Photo Credit: ZeroOne

37. Empathy is about
showing solidarity
with others who
have a one and only
life on this planet.”
– Jeremy Rifkin
“

38. Solidarity requires
communication
Photo Credit: LeonArts.at

39. Tribes
Religious Groups
Nation States
Global Community

40. Photo Credit: United Nations Development Programme
Global response
within 3 hours

41. 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

42. 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

43. John Rawls
1921-2002

44. Selfishness is a survival instinct
Photo Credit: Malingering

45. Photo Credit: Stuck in Customs
We are able to empathize by
seeing ourselves
in others.

47. In UX, we use
personas to
help us empathize
Personas foster empathy
Credit: Kevin O’Connor

48. They also
frequently
devolve
into another
name for
“the user”
Photo Credit: Tinker*Tailor loves Lalka

49. Personas
need to
be real.
They need
to be
human.
Photo Credit: code poet

50. User Scenarios =
situational empathy
Photo Credit: Sergiu Bacioiu

51. User scenarios =
situational empathy
Kitty: Sergiu Bacioiu; Fire: Mr. Theklan
User Scenarios =
situational empathy

52. a
Design is
problem
solving
Photo Credit: Unhindered by Talent

53. F
R
O
N
T
A
L
L
O
B
E
P A R I E T A L L O B E
T E M P O R A L L O B E
OCCIPITAL
LOBE
CENTRALF.
OCCIPITAL F.
SYLVIAN F.
EXOOCCIPITAL FF.

54. F
R
O
N
T
A
L
L
O
B
E
P A R I E T A L L O B E
T E M P O R A L L O B E
OCCIPITAL
LOBE
CENTRALF.
OCCIPITAL F.
SYLVIAN F.
EXOOCCIPITAL FF.

55. F
R
O
N
T
A
L
L
O
B
E
P A R I E T A L L O B E
T E M P O R A L L O B E
OCCIPITAL
LOBE
CENTRALF.
OCCIPITAL F.
SYLVIAN F.
EXOOCCIPITAL FF.

56. 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

57. We only need enough detail
to be able to put ourselves in
his shoes.
Who cares
about his
macchiato
addiction?
Photo Credit: Frisno

58. We want info on his
•goals,
•needs,
•circumstances,
•outside influences,
•distractions, and
•limitations.
Photo Credit: Neil. Moralee

59. User scenarios help us
empathize in a productive way
Photo Credit: Chris Garrison

60. Photo Credit: Horia Varlan

61. Set a performance budget
Photo Credit: Gunnar Ries

62. Photo Credit: schoschie
Author appropriate content

63. Photo Credit: lastquest
Consider physical limitations

64. Photo Credit: CaptPiper
Facilitate satisfaction

65. Photo Credit: andrechinn
Don’t create
unnecessary
barriers

66. Credit: XKCD
Don’t force
your agenda
on your
customers

67. Consider
indirect
users

68. Consider
indirect
users

69. Support common
assistive
technology
Credit: windsordi

70. Help users learn to
accomplish complex
tasks and
reward
them for
doing so.
Credit: pasukaru76

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

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

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

74. 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

76. [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
“

77. Egalitarianism
Equality of opportunity,
not equality of outcome

78. Designing
Empathywith

79. Thank you
Further reading: http://is.gd/readlist_empathy
Slides: http://slideshare.net/AaronGustafson

80. Designing with Empathy
by Aaron Gustafson
@AaronGustafson
Further reading:
http://is.gd/readlist_empathy
http://adaptivewebdesign.info
http://blog.easy-designs.net
Slides available at
http://slideshare.net/AaronGustafson
This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0
except where otherwise noted
flickr Photo Credits
http://www.flickr.com/photos/aarongustafson/galleries/72157633153882514/
http://www.flickr.com/photos/aarongustafson/galleries/72157633161513316/