DESIGNING FOR BRAINS: THE PSYCHOLOGY OF UX DESIGN M A R I S S A E - - PowerPoint PPT Presentation

▶
designing for brains the psychology of ux design
SMART_READER_LITE
LIVE PREVIEW

DESIGNING FOR BRAINS: THE PSYCHOLOGY OF UX DESIGN M A R I S S A E - - PowerPoint PPT Presentation

Dec 09, 2022 682 likes •2.16k views

DESIGNING FOR BRAINS: THE PSYCHOLOGY OF UX DESIGN M A R I S S A E P S T E I N Marissa DESIGNING FOR BRAINS UX DESIGN UXReactions PSYCH UX DESIGN UX DESIGN DONALD NORMAN The principles of human psychology will remain the same,

slide-1
SLIDE 1

DESIGNING FOR BRAINS: THE PSYCHOLOGY OF UX DESIGN

M A R I S S A E P S T E I N

slide-2
SLIDE 2

Marissa

↓

slide-3
SLIDE 3

DESIGNING FOR BRAINS

slide-4
SLIDE 4

UX DESIGN

slide-5
SLIDE 5

UXReactions

slide-6
SLIDE 6

PSYCH UX DESIGN

slide-7
SLIDE 7

UX DESIGN

slide-8
SLIDE 8

DONALD NORMAN

slide-9
SLIDE 9

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

slide-10
SLIDE 10

PSYCH

slide-11
SLIDE 11

“PSYCHOLOGIST HAT”

slide-12
SLIDE 12

KNOW YOUR USERS’ ERRORS, BIASES, & LIMITS

slide-13
SLIDE 13

SORRY I’M NOT SORRY

slide-14
SLIDE 14

UXReactions

slide-15
SLIDE 15

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

slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18

PERSONA 2

Average Joe

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

slide-19
SLIDE 19

A B ↓

slide-20
SLIDE 20

TECHNOLOGY ADOPTION CYCLE

I n n

  • v

a t

  • r

s E a r l y A d

  • p

t e r s E a r l y M a j

  • r

i t y L a t e M a j

  • r

i t y L a g g a r d s

Rogers, Bohlen, Beal, 1957

slide-21
SLIDE 21

ENHANCE ACCESSIBILITY & USABILITY

slide-22
SLIDE 22

CURB CUTS

slide-23
SLIDE 23

SHALL WE?

slide-24
SLIDE 24

Self-actualization Esteem Love Safety Physiological

food, water, shelter, sleep... health, law, protection... friends, family... achievement... peace, growth...

HIERARCHY OF NEEDS

Maslow, 1943

slide-25
SLIDE 25

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/

slide-26
SLIDE 26

KANO MODEL

Dissatisfaction Satisfaction Unfulfilled Fulfilled

Must-Haves Delighters Wants

Kano, 1984

slide-27
SLIDE 27

PSYCH

slide-28
SLIDE 28

Warning: Obscure Pee-wee’s Big Adventure Reference

slide-29
SLIDE 29

! ?

Discover & experience Think & understand Decide & act

HOW WE WORK

slide-30
SLIDE 30
  • 1. DISCOVER & EXPERIENCE

!

slide-31
SLIDE 31

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

slide-32
SLIDE 32

LOTS OF THINGS CAN GO WRONG

slide-33
SLIDE 33

PHOTORECEPTORS OF THE EYE

Rods Rods Cones

slide-34
SLIDE 34

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

slide-35
SLIDE 35

CREATE SCANNABLE HIERARCHIES

slide-36
SLIDE 36

DRAW ATTENTION THOUGHTFULLY

slide-37
SLIDE 37

KEEP FEEDBACK WITHIN THE FOVEAL AREA

slide-38
SLIDE 38

ADD ANIMATION OR SOUND CUES

slide-39
SLIDE 39

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

slide-40
SLIDE 40

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

slide-41
SLIDE 41

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

slide-42
SLIDE 42

VS

slide-43
SLIDE 43

CART ABANDONMENT

67%

slide-44
SLIDE 44

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

slide-45
SLIDE 45
slide-46
SLIDE 46

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

slide-47
SLIDE 47

SALIENT CUES HELP US GENERALIZE

slide-48
SLIDE 48

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

slide-49
SLIDE 49

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

slide-50
SLIDE 50

EMBRACE & ACCOMMODATE LIMITED ATTENTIONS

slide-51
SLIDE 51

SIMPLIFY DESIGNS TO REDUCE THINKING

slide-52
SLIDE 52

USE WHITE SPACE

slide-53
SLIDE 53

BREAK STUFF (INTO CHUNKS)

slide-54
SLIDE 54

FORCE FOCUS WITH LESS OPTIONS

slide-55
SLIDE 55

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

slide-56
SLIDE 56

WE’RE SKIMMERS

slide-57
SLIDE 57

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

slide-58
SLIDE 58

HUMANS AREN’T WIRED FOR READING

slide-59
SLIDE 59

43% OF THE U.S. HAS LOW LITERACY

slide-60
SLIDE 60

USE VISUALS OVER COPY

slide-61
SLIDE 61

KEEP COPY LEGIBLE

slide-62
SLIDE 62

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’S WEB TYPE SCALE

http://bit.ly/jprwt

slide-63
SLIDE 63

NO CURLZ MT, PLEASE

slide-64
SLIDE 64

SIMPLIFY MESSAGING

slide-65
SLIDE 65

TARGET YOUR AUDIENCE

slide-66
SLIDE 66
  • 2. THINK & UNDERSTAND

?

slide-67
SLIDE 67

MENTAL MODELS

slide-68
SLIDE 68

MENTAL MODELS

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

slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71

USE EXISTING MODELS TO TEACH SOMETHING NEW

slide-72
SLIDE 72
slide-73
SLIDE 73

EXISTING SITE PATTERNS ENHANCE COMMUNICATION

slide-74
SLIDE 74

INVERTED PYRAMID

slide-75
SLIDE 75

PUT IMPORTANT STUFF AT THE TOP

slide-76
SLIDE 76

USE EXPECTED NAVIGATION

slide-77
SLIDE 77

USE EXPECTED NAVIGATION

(Or card-sorting)

slide-78
SLIDE 78

AFFORDANCES

slide-79
SLIDE 79

AFFORDANCES

Actionable properties between the world and a person

slide-80
SLIDE 80
slide-81
SLIDE 81
slide-82
SLIDE 82

PERCEIVED AFFORDANCES

Qualities of an object that suggest how it might be used

slide-83
SLIDE 83

SIGNIFIERS

slide-84
SLIDE 84

SIGNIFIERS

Some sort of indicator or signal in the physical

  • r social world, that can be meaningfully

interpreted

slide-85
SLIDE 85
slide-86
SLIDE 86

MAKE AFFORDANCES PERCEIVABLE, OR ADD SIGNIFIERS

slide-87
SLIDE 87

CLICK ME

slide-88
SLIDE 88

DRAWING OUR OWN MAPS CAN LEAD US TO MISUNDERSTANDING

slide-89
SLIDE 89
slide-90
SLIDE 90

DO YOUR HOMEWORK

slide-91
SLIDE 91

MAKE SURE YOUR AUDIENCE HAS THE RIGHT CONTEXT

slide-92
SLIDE 92

MENTAL MODELS

slide-93
SLIDE 93
slide-94
SLIDE 94
slide-95
SLIDE 95

RELATIONSHIPS ARE HARD

slide-96
SLIDE 96

.15- SECONDS CAUSE & EFFECT ↓

slide-97
SLIDE 97

CLARIFY WITH INFORMATIVE FEEDBACK

slide-98
SLIDE 98
  • 3. DECIDE & ACT
slide-99
SLIDE 99

WE’RE IRRATIONAL

slide-100
SLIDE 100

SECTIONS OF THE BRAIN

CanStockPhoto

slide-101
SLIDE 101

SECTIONS OF THE BRAIN

CanStockPhoto

slide-102
SLIDE 102

SECTIONS OF THE BRAIN

CanStockPhoto

slide-103
SLIDE 103

WE PROCESS MOST INFORMATION OUTSIDE OF OUR AWARENESS

slide-104
SLIDE 104

CRITICAL DECISIONS TAKE 100 SECONDS TO MAKE

slide-105
SLIDE 105

WE USE LOGIC AFTER THE FACT TO JUSTIFY DECISIONS

slide-106
SLIDE 106

WE’RE JUDGMENTAL

slide-107
SLIDE 107

IT TAKES .2 SECONDS TO FORM A FIRST IMPRESSION

slide-108
SLIDE 108

APPEALING VISUAL DESIGN A CREDIBLE WEBSITE ↓

slide-109
SLIDE 109

WE LOVE SHORTCUTS

slide-110
SLIDE 110

SATISFICING

Choosing the first reasonable option, not the best one

slide-111
SLIDE 111

MISTAKES

Made when we misunderstand rules

  • r knowledge
slide-112
SLIDE 112

SLIPS

Made with memory or motor malfunctions

slide-113
SLIDE 113

WE BLAME OURSELVES FOR POOR USER EXPERIENCES

slide-114
SLIDE 114

LEARNED HELPLESSNESS

A condition in which a person suffers from a sense of powerlessness, arising from a persistent failure to succeed

slide-115
SLIDE 115

REDUCE MISTAKES & KEEP THEM CHEAP

slide-116
SLIDE 116

LET THEM GO BACK

slide-117
SLIDE 117

SWISS CHEESE MODEL

Hazards Losses

Reason, 2000

slide-118
SLIDE 118

DESIGN REDUNDANT LAYERS OF DEFENSE

slide-119
SLIDE 119

! ?

Discover & experience Think & understand Decide & act

HOW WE WORK

slide-120
SLIDE 120

WE NEED TO ADAPT AS DESIGNERS

slide-121
SLIDE 121

iFunny

slide-122
SLIDE 122

PERSONA 3

Millenial Marissa

“Clicking the logo takes you home, it’s common sense!” Age: 26 Location: Providence, RI Education: Bachelors Occupation: UX Designer

slide-123
SLIDE 123

DON’T DESIGN FOR US

slide-124
SLIDE 124

DESIGN FOR THEM

slide-125
SLIDE 125

SIMPLIFY

slide-126
SLIDE 126

Krug, 2005

slide-127
SLIDE 127

REDUCE FRICTION

slide-128
SLIDE 128

REDUCE FRICTION

Clarity Consistency Common Sense

slide-129
SLIDE 129

REDUCE CHOICES

slide-130
SLIDE 130

THE JAM STUDY

Iyengar, Lepper, 2000

slide-131
SLIDE 131

MORE CHOICES HARDER DECISIONS ↓

slide-132
SLIDE 132

UNDERSTAND & PRIORITIZE NEEDS

slide-133
SLIDE 133

“WHY?”

slide-134
SLIDE 134

People don't want to buy a quarter-inch drill. They want a quarter-inch hole! THEODORE LEVITT

slide-135
SLIDE 135

DESIGN INVISIBLE EXPERIENCES

slide-136
SLIDE 136

CREATE DELIGHT

slide-137
SLIDE 137

CREATE DELIGHT

Aesthetics Humor Flow Novelty

slide-138
SLIDE 138

ENJOYMENT EASE & EFFICIENCY ↓

slide-139
SLIDE 139

HAD ENOUGH?

slide-140
SLIDE 140

UNDERSTAND GOALS HOLISTICALLY WITH PSYCHOLOGY & UX DESIGN

slide-141
SLIDE 141

We have to accept human behavior the way it is, not the way we would wish it to be. DONALD NORMAN

slide-142
SLIDE 142

THANKS!

marissaepstein.com @marstoyship

slide-143
SLIDE 143

WHAT DID YOU THINK?

EVAULATE THIS SESSION - LOSANGELES2015.DRUPAL.ORG/SCHEDULE

THANK YOU!

slide-144
SLIDE 144

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/

  • 7. Skipping web content: http://www.nngroup.com/articles/how-little-

do-users-read/

slide-145
SLIDE 145

APPENDIX, CONT.

  • 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. Meaning of red: http://www.colormatters.com/the-meanings-of-

colors/red 11. Cause & effect timing: http://www.amazon.com/Designing-Mind- Simple-Understanding-Interface/dp/012375030X

  • 12. Errors & loss: http://www.amazon.com/The-Design-Everyday-Things-

Expanded/dp/0465050654

  • 13. 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

  • 14. 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

slide-146
SLIDE 146

APPENDIX, CONT.

  • 15. Critical decisions: http://www.amazon.com/Designing-Mind-Simple-

Understanding-Interface/dp/012375030X

  • 16. Justifying decisions: http://westsidetoastmasters.com/resources/

laws_persuasion/chap14.html

  • 17. First impressions
  • 1. Speed: http://www.dryfive.com/first-impressions-in-2-seconds
  • 2. Credible sites: https://credibility.stanford.edu/guidelines/
  • 18. Blaming ourselves: http://www.amazon.com/The-Design-Everyday-

Things-Expanded/dp/0465050654

  • 19. Back button: http://dubroy.com/research/chi2010-a-study-of-

tabbed-browsing.pdf

  • 20. Loss & mistakes: http://www.amazon.com/The-Design-Everyday-

Things-Expanded/dp/0465050654

  • 21. Enjoyable experiences: http://abookapart.com/products/designing-

for-emotion

Core Hubs:
All Converters PDF Hub Video Hub Audio Hub Image Hub File Compressor