UX Designer Marissa Epstein *really* loves learning what makes people tick. Traditional psych studies can show us a lot about our users and the weird flaws that come with being human. It’s not our fault that we’re emotional, impulsive, forgetful, and hard-wired to take the easy way out. But it is our responsibility to adapt to these shortcomings as interaction designers. In this session, Marissa will use fundamental principles of cognitive and behavioral psychology to show you how humans think, behave, and experience the world. And she’ll probably rant a little.

1. DESIGNING
FOR BRAINS

2. Marissa
↓

3. DESIGNING
FOR BRAINS

4. PSYCH UX DESIGN

5. The principles of human psychology will remain
the same, which means that the design principles
based on psychology will remain unchanged.
DONALD NORMAN

6. SORRY I’M NOT SORRY

7. UXReactions

8. Elderly
Eleanor
“I don’t even know what that
is, but don’t worry about it.”
Age: 82
Location: Madison, ME
Education: High School
Occupation: Retired
PERSONA 1

11. PERSONA 2
Average
Joe
“I’m still figuring out how to
set it up.”
Age: 57
Location: Boca Raton, FL
Education: Bachelors
Occupation: Architect

12. Average
Joe
“I’m still figuring out how to
set it up.”
Age: 57
Location: Boca Raton, FL
Education: Bachelors
Occupation: Architect
Elderly
Eleanor
“I don’t even know what that
is, but don’t worry about it.”
Age: 82
Location: Madison, ME
Education: High School
Occupation: Retired

13. Rogers, Bohlen, Beal, 1957
TECHNOLOGY ADOPTION CYCLE
InnovatorsEarlyAdopters
EarlyM
ajorityLate
M
ajorityLaggards
>

14. ENHANCE
ACCESSIBILITY &
USABILITY

15. ADD CURB CUTS

17. ! ?
Discover
Experience
Think
Understand
Decide
Act
HOW HUMANS DO STUFF

18. 1. DISCOVER & EXPERIENCE
!

19. We’re thinking “great literature”... the user’s
reality is much closer to “billboard going by at 60
miles an hour”.
STEVE KRUG

20. PHOTORECEPTORS OF THE EYE
Rods
Rods
Cones

21. WE OFTEN DON’T NOTICE
UPDATES AND OTHER STUFF
ON A PAGE

22. VS

23. CART ABANDONMENT
67%

24. OUR ATTENTION
SPANS ARE .

25. 1/2 OF USERS WILL GIVE UP
IF SOMETHING TAKES 3+
SECONDS

26. GIVE IT A SECOND!! It’s going to space! Will you
give it a second, to get back from space?
LOUIS CK

27. OUR ATTENTION ONLINE
SPANS JUST A FEW MINUTES,
IN 8 SECOND CHUNKS

28. WE “FOCUS” TO A MINIMUM
AND RELY ON INCOMPLETE
INFORMATION

30. http://gizmodo.com/wow-people-really-suck-at-drawing-the-apple-logo-from-1690674361

31. WE KEEP THE SALIENT CUES
& GENERALIZE THE REST

32. http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/

33. http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/

34. JAKOB NIELSEN
How users read on the web: they don’t.

35. HUMANS AREN’T WIRED
FOR READING

36. WE’RE SKIMMERS

37. USERS HAVE TIME TO READ
20% OR LESS OF THE PAGE

38. Create visual hierarchy.!

39. Keep feedback close.!
1. Create visual hierarchy.

40. Use sound or motion for
bigger cues.
!
1. Create visual hierarchy.
2. Keep feedback close.

41. Use white space.!
1. Create visual hierarchy.
2. Keep feedback close.
3. Use sound or motion for bigger cues.

42. Reduce extraneous options.!
1. Create visual hierarchy.
2. Keep feedback close.
3. Use sound or motion for bigger cues.
4. Use white space.

43. Break things down.!
1. Create visual hierarchy.
2. Keep feedback close.
3. Use sound or motion for bigger cues.
4. Use white space.
5. Reduce extraneous options.

44. !
1. Create visual hierarchy.
2. Keep feedback close.
3. Use sound or motion for bigger cues.
4. Use white space.
5. Reduce extraneous options.
6. Break things down.
Visuals > copy.

45. Make copy legible.!
1. Create visual hierarchy.
2. Keep feedback close.
3. Use sound or motion for bigger cues.
4. Use white space.
5. Reduce extraneous options.
6. Break things down.
7. Visuals > copy.

46. Body
Size
Line height
Line Length
Size
Line height
Size
Line height
Size
Line height
16px(1em)
1.375em
60-75
48px(3em)
1.05em
36px(2.25em)
1.25em
28px(1.75em)
1.25em
16px(1em)
1.375em
60-75
40px(2.5em)
1.125em
32px(2em)
1.25em
24px(1.5em)
1.25em
16px(1em)
1.25em
35-40
32px(2em)
1.25em
26px(1.625em)
1.15384615em
22px(1.375em)
1.13636364em
Desktop Tablet Phone
H1
H2
H3
JASON PAMENTALS’
WEB TYPE SCALE
http://bit.ly/jprwt

47. Use simple, clear wording.!
1. Create visual hierarchy.
2. Keep feedback close.
3. Use sound or motion for bigger cues.
4. Use white space.
5. Reduce extraneous options.
6. Break things down.
7. Visuals > copy.
8. Make copy legible.

48. 2. THINK & UNDERSTAND
?

49. WE FUCKING
LOVE PATTERNS

50. MENTAL MODELS
Conceptual models people hold in their minds,
formed by how a person believes things work

54. DRAWING OUR OWN MAPS
CAN LEAD US TO
MISUNDERSTANDING

55. MENTALMODELS

58. RELATIONSHIPS ARE HARD

59. AFFORDANCES & SIGNIFIERS

60. AFFORDANCES
Actionable properties between the
world and a person

62. PERCEIVED AFFORDANCES
Qualities of an object that suggest how
it might be used

63. SIGNIFIERS
Some sort of indicator or signal in the physical
or social world, that can be meaningfully
interpreted

65. CLICK ME

66. ?Leverage existing patterns.

67. ?
1. Leverage existing patterns.
Put stuff where users expect.

68. ?Map expectations with
card-sorting.
1. Leverage existing patterns.
2. Put stuff where users expect.

69. ?Add obvious signifiers.
1. Leverage existing patterns.
2. Put stuff where users expect.
3. Map expectations with card-sorting.

70. ?Research your user base.
1. Leverage existing patterns.
2. Put stuff where users expect.
3. Map expectations with card-sorting.
4. Add obvious signifiers.

71. 3. DECIDE & ACT

72. WE’RE NEEDY &
UNAPPRECIATIVE

73. Self-actualization
Esteem
Love
Safety
Physiological food, water, shelter, sleep...
health, law, protection...
friends, family...
achievement...
peace,
growth...
HIERARCHY OF NEEDS
Maslow, 1943

74. DESIGN HIERARCHY
OF NEEDS
Creativity
Proficiency
Usability
Reliability
Functionality no value
low value
moderate value
high value
highest
http://www.smashingmagazine.com/2010/04/26/designing-for-a-hierarchy-of-needs/

75. KANO MODEL
Dissatisfaction
Satisfaction
Unfulfilled Fulfilled
Must-Haves
Delighters
Wants
Kano, 1984

76. HENRY FORD
If I had asked people what they wanted, they
would have said faster horses.

77. WE’RE IRRATIONAL

78. “DECISIONS”
CanStockPhoto
Amygdala

79. CRITICAL DECISIONS
TAKE 100 SECONDS
TO MAKE

80. TOO MANY JAMS
Iyengar, Lepper, 2000

81. WE’RE JUDGMENTAL

82. IT TAKES .2 SECONDS TO
FORM A FIRST IMPRESSION,
SO THAT BABY BETTER SING

83. WE FUCK UP

84. WE SATISFICE
Choosing the first reasonable option,
not the best one

85. WE SLIP
Memory or motor malfunctions

86. WE MAKE MISTAKES
Misunderstanding rules
or knowledge

87. WE BLAME OURSELVES
FOR BAD UX & DON’T SEND
USER FEEDBACK
Learned helplessness: a condition of
powerlessness arising from persistent failure

88. Aim for delight.

89. Reduce choices.
1. Aim for delight.

90. Confirm progress and succes.
1. Aim for delight.
2. Reduce choices.

91. Test to reduce mistakes.
1. Aim for delight.
2. Reduce choices.
3. Confirm progress and succes.

92. Plan for them anyway.
1. Aim for delight.
2. Reduce choices.
3. Confirm progress and succes.
4. Test to reduce mistakes.

93. ! ?
Not great.
HOW HUMANS DO STUFF

94. WE NEED TO ADAPT
AS DESIGNERS

95. PERSONA 3
Millenial
Marissa
“Clicking the logo takes you
home, it’s common sense!”
Age: 26
Location: Providence, RI
Education: Bachelors
Occupation: UX Designer
28

96. DON’T DESIGN
FOR US

97. UNDERSTAND &
PRIORITIZE YOUR
USERS’ NEEDS

98. HAD ENOUGH?

99. COMBINE PSYCH & UX
FOR HOLISTIC
PROBLEM-SOLVING

100. PUT ON THAT
PSYCHOLOGISTS HAT

101. THANKS!
marissaepstein.com
@marstoyship

102. APPENDIX
1. Definition of UX design: http://uxdesign.com/ux-defined
2. Bounce rate: https://blog.kissmetrics.com/speed-is-a-killer/
3. Attention spans
1. Total task: http://www.telegraph.co.uk/education/
universityeducation/6972191/Students-have-10-minute-attention-
span.html
2. Micro-task: http://www.statisticbrain.com/attention-span-
statistics/
4. Online cart abandonment: http://baymard.com/lists/cart-
abandonment-rate
5. Relying on incomplete descriptions: http://www.amazon.com/
Exploring-Psychology-9th-David-Myers/dp/1464111723/
ref=la_B000AP7O54_1_3?
s=books&ie=UTF8&qid=1431470120&sr=1-3
6. White space & comprehension: http://www.smashingmagazine.com/
2009/09/24/10-useful-usability-findings-and-guidelines/

103. APPENDIX, CONT.
7. Skipping web content: http://www.nngroup.com/articles/how-little-
do-users-read/
8. Wired for language: http://www.amazon.com/Designing-Mind-Simple-
Understanding-Interface/dp/012375030X
9. Low literacy: http://www.nngroup.com/articles/writing-for-lower-
literacy-users/
10. Errors & loss: http://www.amazon.com/The-Design-Everyday-Things-
Expanded/dp/0465050654
11. Sections & functions of the brain: http://www.amazon.com/Exploring-
Psychology-9th-David-Myers/dp/1464111723/
ref=la_B000AP7O54_1_3?
s=books&ie=UTF8&qid=1431470120&sr=1-3
12. Unconscious processing: http://www.amazon.com/Exploring-
Psychology-9th-David-Myers/dp/1464111723/
ref=la_B000AP7O54_1_3?
s=books&ie=UTF8&qid=1431470120&sr=1-3

104. APPENDIX, CONT.
13. Critical decisions: http://www.amazon.com/Designing-Mind-Simple-
Understanding-Interface/dp/012375030X
14. First impressions
1. Speed: http://www.dryfive.com/first-impressions-in-2-seconds
2. Credible sites: https://credibility.stanford.edu/guidelines/
15. Blaming ourselves: http://www.amazon.com/The-Design-Everyday-
Things-Expanded/dp/0465050654
16. Loss & mistakes: http://www.amazon.com/The-Design-Everyday-
Things-Expanded/dp/0465050654
17. Enjoyable experiences: http://abookapart.com/products/designing-
for-emotion