Slide 1

Slide 1 text

Psychology of Design Jon Yablonski 2018

Slide 2

Slide 2 text

Jon Yablonski Interactive Design Lead / Vectorform JONYABLONSKI.COM @JONYABLONSKI

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Data

Slide 8

Slide 8 text

Data Intuition

Slide 9

Slide 9 text

Data Intuition

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

IMAGE FROM AN INTRODUCTION TO HUMAN CENTERED DESIGN

Slide 13

Slide 13 text

Where to start?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

LAWS OF UX

Slide 18

Slide 18 text

Jakob’s Law

Slide 19

Slide 19 text

Hick’s Law

Slide 20

Slide 20 text

The time it takes to make a decision increases with the number and complexity of choices available.

Slide 21

Slide 21 text

William Edmund Hick & Ray Hyman 1952

Slide 22

Slide 22 text

RT = a + b log2 (n)

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Cognitive Load

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

HTTPS://WWW.NNGROUP.COM/ARTICLES/WORKING-MEMORY-EXTERNAL-MEMORY/

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Key Takeaways Hick’s Law

Slide 37

Slide 37 text

Key Takeaways 1. Too many choices will increase the cognitive load for users. Hick’s Law

Slide 38

Slide 38 text

Key Takeaways 1. Too many choices will increase the cognitive load for users. 2. Break up long or complex processes into screens with fewer options. Hick’s Law

Slide 39

Slide 39 text

Key Takeaways 1. Too many choices will increase the cognitive load for users. 2. Break up long or complex processes into screens with fewer options. 3. Use progressive on-boarding to minimize cognitive load for new users. Hick’s Law

Slide 40

Slide 40 text

Miller’s Law

Slide 41

Slide 41 text

The average person can only keep 7 (± 2) items in their working memory.

Slide 42

Slide 42 text

George Miller 1956

Slide 43

Slide 43 text

Myth

Slide 44

Slide 44 text

Myth ITEMS SHOULD BE LIMITED TO SEVEN

Slide 45

Slide 45 text

“Miller’s magical number seven is often misunderstood to mean that humans can only process seven chunks at any given time. As a consequence, confused designers will sometimes misuse this finding to justify unnecessary design limitations.” — KATE MORAN, HOW CHUNKING HELPS CONTENT PROCESSING

Slide 46

Slide 46 text

Chunking

Slide 47

Slide 47 text

4 4 0 8 6 7 5 3 0 9

Slide 48

Slide 48 text

( 4 4 0 ) 8 6 7 - 5 3 0 9

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Key Takeaways Miller’s Law

Slide 57

Slide 57 text

Key Takeaways 1. Break text and content into smaller chunks to help users process, understand, and remember it better. Miller’s Law

Slide 58

Slide 58 text

Key Takeaways 1. Break text and content into smaller chunks to help users process, understand, and remember it better. 2. Don’t use the ‘magical number 7’ to justify unnecessary design limitations. Miller’s Law

Slide 59

Slide 59 text

Key Takeaways 1. Break text and content into smaller chunks to help users process, understand, and remember it better. 2. Don’t use the ‘magical number 7’ to justify unnecessary design limitations. 3. Remember that the short-term memory capacity will vary per individual. Miller’s Law

Slide 60

Slide 60 text

Jakob’s Law

Slide 61

Slide 61 text

Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know.

Slide 62

Slide 62 text

Jakob Nielsen 2000

Slide 63

Slide 63 text

Mental Models

Slide 64

Slide 64 text

“A mental model is based on belief, not facts: that is, it’s a model of what users know (or think they know) about a system such as your website.” — JAKOB NIELSEN, MENTAL MODELS

Slide 65

Slide 65 text

ELI SCHIFF, THE MENTAL MODEL

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

— A MAGAZINE IS AN IPAD THAT DOES NOT WORK

Slide 68

Slide 68 text

APOLLO S-IB ROCKET CONTROL PANEL PHOTO BY JONATHAN H. WARD GOOGLE MATERIAL UI

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

OLD GOOGLE CALENDAR NEW GOOGLE CALENDAR

Slide 74

Slide 74 text

Key Takeaways Jakob’s Law

Slide 75

Slide 75 text

Key Takeaways 1. Users will transfer expectations they have built around one familiar product to another that appears similar. Jakob’s Law

Slide 76

Slide 76 text

Key Takeaways 1. Users will transfer expectations they have built around one familiar product to another that appears similar. 2. By leveraging existing mental models, we can create superior user- experiences in which the user can focus on their task rather than learning new models. Jakob’s Law

Slide 77

Slide 77 text

Key Takeaways 1. Users will transfer expectations they have built around one familiar product to another that appears similar. 2. By leveraging existing mental models, we can create superior user- experiences in which the user can focus on their task rather than learning new models. 3. Minimize discordance by empowering users to continue using a familiar version for a limited time. Jakob’s Law

Slide 78

Slide 78 text

Recap

Slide 79

Slide 79 text

Data Intuition

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

Ethics

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

SOURCE: ABLE, ALLOWED, SHOULD; NAVIGATING MODERN TECH ETHICS

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

SOURCE: ABLE, ALLOWED, SHOULD; NAVIGATING MODERN TECH ETHICS

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

GOOGLE DIGITAL WELLBEING

Slide 92

Slide 92 text

SOURCE: BRINGING PEOPLE CLOSER TOGETHER / FACEBOOK

Slide 93

Slide 93 text

SOURCE: ABLE, ALLOWED, SHOULD; NAVIGATING MODERN TECH ETHICS

Slide 94

Slide 94 text

As designers, it’s our responsibility to use technology for augmenting the human experience, not replacing it with virtual interaction and rewards.

Slide 95

Slide 95 text

Resources

Slide 96

Slide 96 text

HUMANETECH.COM

Slide 97

Slide 97 text

COGNITIVE UXD NEWSLETTER

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

LAWS OF UX

Slide 100

Slide 100 text

Thank You