80
EMPATHY YOUR SECRET WEAPON IN DESIGNING FOR THE WEB

Empathy: Your secret weapon in designing for the web

Embed Size (px)

DESCRIPTION

This is the presentation I gave at UX Brighton (2013). Behind every screen sits a user, waiting to be engaged. Whether you reach them or not will depend on how you make them feel, more than anything else. In this presentation, Nathalie will explore how the primal, emotional and rational systems in the brain can be used as a metaphorical model to build persuasive online experiences. And show why mirror neurons and empathy are the hidden driving force behind effective design.

Citation preview

Page 1: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 1  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

EMPATHY

YOUR SECRET WEAPON IN DESIGNING FOR THE WEB

Page 2: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 2  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1  INTRODUCTION

2  ‘THREE SYSTEMS’ BRAIN

3  EMPATHY

4  GETTING ON THE SAME WAVELENGTH

5  FIVE STEPS: USE EMPATHY ONLINE

Page 3: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 3  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1  INTRODUCTION

2  ‘THREE SYSTEMS’ BRAIN

3  EMPATHY

4  GETTING ON THE SAME WAVELENGTH

5  FIVE STEPS: USE EMPATHY ONLINE

Page 4: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 4  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1  INTRODUCTION

2  ‘THREE SYSTEMS’ BRAIN

3  EMPATHY

4  GETTING ON THE SAME WAVELENGTH

5  FIVE STEPS: USE EMPATHY ONLINE

Page 5: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 5  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1  INTRODUCTION

2  ‘THREE SYSTEMS’ BRAIN

3  EMPATHY

4  GETTING ON THE SAME WAVELENGTH

5  FIVE STEPS: USE EMPATHY ONLINE

Page 6: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 6  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1  INTRODUCTION

2  ‘THREE SYSTEMS’ BRAIN

3  EMPATHY

4  GETTING ON THE SAME WAVELENGTH

5  FIVE STEPS: USE EMPATHY ONLINE

Page 7: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 7  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1 INTRODUCTION

Page 8: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 8  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

WEBS OF INFLUENCE THE PSYCHOLOGY OF ONLINE PERSUASION Pearson, 2012 UK | EU | USA | KOREA | JAPAN | CHINA @THEWEBPSYCH

Page 9: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 9  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH @THEWEBPSYCH

Page 10: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 10  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

WEB PSYCHOLOGY

The empirical study of how online environments influence our attitudes and behaviours

“ ” @THEWEBPSYCH

Page 11: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 11  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

user experience

cognitive psychology

neuroscience

cross-cultural psychology

WEB PSYCHOLOGY

HCI

neuro- aesthetics

social psychology

behavioural economics

Page 12: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 12  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

IT’S ABOUT CONTEXT

PSYCHOLOGY INDIVIDUAL CULTURAL

Page 13: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 13  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

3 SECRETS TO ONLINE SUCCESS

Page 14: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 14  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1  KNOW WHO YOU’RE TARGETING

2  COMMUNICATE PERSUASIVELY

3  SELL WITH INTEGRITY

Page 15: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 15  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1  KNOW WHO YOU’RE TARGETING

2  COMMUNICATE PERSUASIVELY

3  SELL WITH INTEGRITY

Page 16: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 16  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1  KNOW WHO YOU’RE TARGETING

2  COMMUNICATE PERSUASIVELY

3  SELL WITH INTEGRITY

Page 17: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 17  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

2 ‘THREE SYSTEMS’ BRAIN

Page 18: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 18  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

PRIMAL

Page 19: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 19  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  COMMON TO ALL ANIMALS

•  BASIC VITAL FUNCTIONS

•  RISKY vs SAFE (FFF)

•  SEX

•  FOOD

PRIMAL

Page 20: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 20  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  COMMON TO ALL ANIMALS

•  BASIC VITAL FUNCTIONS

•  RISKY vs SAFE (FFF)

•  SEX

•  FOOD

PRIMAL

Page 21: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 21  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  COMMON TO ALL ANIMALS

•  BASIC VITAL FUNCTIONS

•  RISKY vs SAFE (FFF)

•  SEX

•  FOOD

PRIMAL

Page 22: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 22  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  COMMON TO ALL ANIMALS

•  BASIC VITAL FUNCTIONS

•  RISKY vs SAFE (FFF)

•  SEX

•  FOOD

PRIMAL

Page 23: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 23  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  COMMON TO ALL ANIMALS

•  BASIC VITAL FUNCTIONS

•  RISKY vs SAFE (FFF)

•  SEX

•  FOOD

PRIMAL

Page 24: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 24  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  CUES FOR SEX

•  IMAGES OF FOOD

•  MOTION

•  CONTRAST & CONCRETE

•  END EXPERIENCES

•  SCARCITY

KEY POINTS

Page 25: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 25  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Page 26: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 26  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  LIMBIC SYSTEM

•  ANCIENT & AUTOMATIC

•  AMYGDALA FEAR, RELEVANCE, TRUST

•  THALAMUS HAPPY, SAD, DISGUSTED

•  VTA DOPAMINE – RISK & REWARD

EMOTIONAL

Page 27: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 27  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  LIMBIC SYSTEM

•  ANCIENT & AUTOMATIC

•  AMYGDALA FEAR, RELEVANCE, TRUST

•  THALAMUS HAPPY, SAD, DISGUSTED

•  VTA DOPAMINE – RISK & REWARD

EMOTIONAL

Page 28: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 28  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  LIMBIC SYSTEM

•  ANCIENT & AUTOMATIC

•  AMYGDALA FEAR, RELEVANCE, TRUST

•  THALAMUS HAPPY, SAD, DISGUSTED

•  VTA DOPAMINE – RISK & REWARD

EMOTIONAL

Page 29: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 29  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  LIMBIC SYSTEM

•  ANCIENT & AUTOMATIC

•  AMYGDALA FEAR, RELEVANCE, TRUST

•  THALAMUS HAPPY, SAD, DISGUSTED

•  VTA DOPAMINE – RISK & REWARD

EMOTIONAL

Page 30: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 30  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  LIMBIC SYSTEM

•  ANCIENT & AUTOMATIC

•  AMYGDALA FEAR, RELEVANCE, TRUST

•  THALAMUS HAPPY, SAD, DISGUSTED

•  VTA DOPAMINE – RISK & REWARD

EMOTIONAL

Page 31: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 31  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  EMPATHY

•  MIRROR NEURONS

•  PLEASURE & PAIN

•  BODY LANGUAGE

•  STORY-TELLING

KEY POINTS

Page 32: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 32  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Page 33: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 33  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  UNIQUE TO HUMANS

•  HIGHER COGNITIVE FUNCTIONS

•  PLAN, ORGANISE, PROBLEM-SOLVE

•  SOCIAL LEARNING & INNOVATION

•  LANGUAGE, ABSTRACT THOUGHT

RATIONAL

Page 34: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 34  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  UNIQUE TO HUMANS

•  HIGHER COGNITIVE FUNCTIONS

•  PLAN, ORGANISE, PROBLEM-SOLVE

•  SOCIAL LEARNING & INNOVATION

•  LANGUAGE, ABSTRACT THOUGHT

RATIONAL

Page 35: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 35  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  UNIQUE TO HUMANS

•  HIGHER COGNITIVE FUNCTIONS

•  PLAN, ORGANISE, PROBLEM-SOLVE

•  SOCIAL LEARNING & INNOVATION

•  LANGUAGE, ABSTRACT THOUGHT

RATIONAL

Page 36: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 36  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  UNIQUE TO HUMANS

•  HIGHER COGNITIVE FUNCTIONS

•  PLAN, ORGANISE, PROBLEM-SOLVE

•  SOCIAL LEARNING & INNOVATION

•  LANGUAGE, ABSTRACT THOUGHT

RATIONAL

Page 37: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 37  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  UNIQUE TO HUMANS

•  HIGHER COGNITIVE FUNCTIONS

•  PLAN, ORGANISE, PROBLEM-SOLVE

•  SOCIAL LEARNING & INNOVATION

•  LANGUAGE, ABSTRACT THOUGHT

RATIONAL

Page 38: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 38  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

•  ENABLE POST-RATIONALISATION

•  PRODUCT DEMONSTRATION

•  LISTING SPECS / PRODUCT BENEFITS

•  GIVE EVIDENCE THAT IT WORKS

•  BE THE AUTHORITY

KEY POINTS

Page 39: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 39  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

3 EMPATHY

Page 40: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 40  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

WHAT IS EMPATHY?

Page 41: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 41  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH “ ” Oxford  Dic5onary  

EMPATHY

The ability to understand and share the feelings of another

Page 42: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 42  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

WHY IS IT IMPORTANT?

“ ”

Primitive emotional contagion is of critical importance in understanding human

cognition, emotion, and behavior

Ha:ield  et  al  (2009)  

Page 43: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 43  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

MIRROR NEURONS

RizzolaB  et  al  (1992)  

[ ]

Placed electrodes in ventral premotor cortex of macaques, to study neurons specialized in

control of hand and mouth actions… 10% mirror actions

Page 44: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 44  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

MIRRORING

Credit:  Evolu5on  of  Neonatal  Imita5on.  Gross  L,  PLoS  Biology  Vol.  4/9/2006,  e311  doi:10.1371/journal.pbio.0040311    

Page 45: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 45  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

MIND-READING

“ ” Ha:ield  et  al  (2009)  

Building block of human interaction -

assisting in “mind-reading” and allowing people to understand and to share

the feelings of others

Page 46: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 46  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

EXPER MENT

Page 47: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 47  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Credit:  iStockphoto  /  Thomas  Perkins  

Page 48: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 48  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Credit:  Ray  Tamarra  /  Ge\y  Images  

Page 49: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 49  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Credit:  Unknown  

Page 50: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 50  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

EXPER MENT

Laird  et  al  (1989)  

[ ]

What did you experience?

Page 51: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 51  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

PROVOKING EMOTIONS

Laird  et  al  (1989)  

[ ]

If you adopt certain facial expressions, you’re more likely to feel the

associated emotion

Page 52: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 52  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

PROVOKING EMOTIONS

1  ANGER

2  FEAR

3  HAPPINESS

4  DISGUST

5  SURPRISE

6  SADNESS

Laird  et  al  (1989)  

Page 53: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 53  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

PROVOKING EMOTIONS

1  ANGER

2  FEAR

3  HAPPINESS

4  DISGUST

5  SURPRISE

6  SADNESS

Laird  et  al  (1989)  

Page 54: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 54  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

PROVOKING EMOTIONS

1  ANGER

2  FEAR

3  HAPPINESS

4  DISGUST

5  SURPRISE

6  SADNESS

Laird  et  al  (1989)  

Page 55: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 55  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

PROVOKING EMOTIONS

1  ANGER

2  FEAR

3  HAPPINESS

4  DISGUST

5  SURPRISE

6  SADNESS

Laird  et  al  (1989)  

Page 56: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 56  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

PROVOKING EMOTIONS

1  ANGER

2  FEAR

3  HAPPINESS

4  DISGUST

5  SURPRISE

6  SADNESS

Laird  et  al  (1989)  

Page 57: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 57  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

PROVOKING EMOTIONS

1  ANGER

2  FEAR

3  HAPPINESS

4  DISGUST

5  SURPRISE

6  SADNESS

Laird  et  al  (1989)  

Page 58: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 58  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Credit:  Adrianne  Galla5n  (2012)  h\p://www.globalanimal.org/2013/08/08/secret-­‐to-­‐animal-­‐happiness-­‐gallery/71985/laughing-­‐seal-­‐on-­‐beach/    

Page 59: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 59  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

CHANGES IN STATE

“ ”

Viewing emotional facial expressions elicits changes in emotional state

Wild  et  al  (2001)  

Page 60: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 60  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

ADVERT

Page 61: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 61  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Lynx  TV:  Premature  Perspira5on  ad  (2010)  h\p://www.youtube.com/watch?v=kZQUljMZ7aE    

Page 62: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 62  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Fail  Blog  Nut  Shots  (2012)  h\p://ow.ly/q99xI    

Page 63: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 63  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

WEBSITE

Page 64: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 64  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

h\p://www.marieforleo.com/    

Page 65: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 65  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

h\p://next.co.uk    

Page 66: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 66  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

4 GETTING ON THE SAME WAVELENGTH

Page 67: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 67  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

The tendency to automatically mimic

and synchronize expressions, vocalizations, postures, and movements with those of

another person's and, consequently, to converge emotionally

EMOTIONAL CONTAGION

“ ” Ha:ield  et  al  (1994)  

Page 68: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 68  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

EXAMPLE

Friedman  et  al  (1980)  

Page 69: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 69  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Credit:  iStockPhoto  

Page 70: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 70  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

Communication is one act, in which the

brain of the communicator, and the brain of the listeners are trying to be coupled,

and merging as one

NEURAL COUPLING

“ ” Ha:ield  et  al  (1994)  

Page 71: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 71  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

STORYTELLING

Credit:  Nathalie  Nahai  /  Webs  Of  Influence  (2012)  

Page 72: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 72  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

John  Lewis  Christmas  Advert  (2012)  h\p://www.youtube.com/watch?v=0N8axp9nHNU    

EXAMPLE

Page 73: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 73  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

5 FIVE STEPS: USE EMPATHY ONLINE

Page 74: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 74  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

1

PROFILE YOUR AUDIENCE

•  AGE

•  GENDER

•  LANGUAGE

•  INTERESTS

•  CLOTHES

•  BODY LANGUAGE

Page 75: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 75  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

2

CHOOSE STATE TO ELICIT

•  ANGER

•  FEAR

•  HAPPINESS

•  DISGUST

•  SURPRISE

•  SADNESS

Page 76: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 76  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

2

DESIGN A NARRATIVE THEY

CAN RELATE TO

(THE HERO’S JOURNEY)

Page 77: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 77  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

4

CHOOSE YOUR MEDIUM

•  VIDEO

•  TEXT

•  IMAGE

Page 78: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 78  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

5

ANALYSE YOUR RESULTS

•  CONVERSIONS

•  VIEWS / LIKES

•  CLICK-THROUGHS

•  SHARES / EMBEDS

Page 79: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 79  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

REFERENCES 1  Hatfield, E., Cacioppo, J. T., & Rapson, R. L. (1994). Emotional contagion. Cambridge: Cambridge University Press.

2  Hatfield, E., Rapson, R. L., & Le, Y. L. (2009). Emotional contagion and empathy. In J. Decety & W. Ickes (Eds.), The Social neuroscience of Empathy. Cambridge, MA: MIT.

3  Di Pellegrino, G., Fadiga, L., Fogassi, L., Gallese, V., & Rizzolatti, G (1992). Understanding motor events: a neurophysiological study. Experimental Brain Research, 91, pp. 176-180.

4  Laird, J. D., Cuniff, M., Sheehan, K., Shulman, D., & Strum, G. (1989). Emotion specific effects of facial expressions on memory for life events. Journal of Social Behavior and Personality, 4, pp. 87-98.

5  Wild, B., Erb, M., & Bartels, M. (2001). Are emotions contagious? Evoked emotions while viewing emotionally expressive faces: Quality, quantity, time course and gender differences. Psychiatry Research, 102(2), pp. 109-124.

6  Fail Blog Nut Shots (2012). http://www.youtube.com/watch?v=apVZCG5zAxw&feature=c4-overview&list=UUONQ53-nTMwqiRhj3sRaiAQ

7  Friedman, H. S., Prince, L. M., Riggio, R. E., & Dimatteo, M. R. (1980). Understanding and assessing nonverbal expressiveness: The affective communication test. Journal of Personality and Social Psychology, 39, pp. 333-351.

Page 80: Empathy: Your secret weapon in designing for the web

All material © THE WEB PSYCHOLOGIST LTD. 2013. No unauthorised reproduction or distribution. 80  

@THEWEBPSYCH @THEWEBPSYCH @THEWEBPSYCH

THE WEB PSYCHOLOGIST @THEWEBPSYCH

THANK YOU!

FREE MINI-COURSE:

INSTITUTE OF WEB PSYCHOLOGY .COM