1.
THE OVERLAP OF
EMOTION AND
USABILITY
by Ross Johnson of 3.7 DESIGNS
@3pointRoss / @37Designs

2.
I AM ROSS
“DANGER”
JOHNSON
@3pointRoss
@37Designs

3.
My background is a bit diverse...
DESIGNER
SOCIAL SCIENTIST
DEVELOPER
EDUCATOR

4.
I founded a company in 2005
3.7 DESIGNS
WEB DESIGN
BRANDING
USER EXPERIENCE
DIGITAL MARKETING
WORDPRESS (YEAH BABY)

5.
I started teaching in 2008
WASHTENAW
COMMUNITY
COLLEGE
In 2012 I began teaching at
MICHIGAN STATE
UNIVERSITY

6.
Wrote a book in 2011
the
SIX LAYERS
of DESIGN
My research is the foundation for
much of this discussion.

7.
Whether designing commercial themes or
custom ones for clients (or yourself)
GREAT DESIGN
LEADS TO GREAT
EXPERIENCES. GREAT
EXPERIENCES LEAD
TO SUCCESSFUL
WEBSITES.

8.
HOW DO WE
APPROACH
USABILITY / UX?

9.
Now that we know what “UX” is...
WHAT ARE THE
DELIVERABLES?

10.
INFORMATION
ORGANIZATION

11.
LAYOUT &
WORKFLOW

12.
PROCESS MAPS

13.
USABILITY
STUDIES

14.
Ease of use
Frequency of use
Difficulty to keep track of location in website
Learn ability
Information facilitation
Look & feel appeal
Site content
Site organization
✓

15.
ALL HELPFUL &
VALUABLE BUT...

16.
IS THIS
YOUR USER?

17.
IS THIS
YOUR USER?

18.
SO I ASK...
IS THIS
YOUR USER?

19.
WHAT’S MISSING?

20.
LET ME INTRODUCE
YOU TO HUMANS...

21.
FOR A SUBJECT
SO FOCUSED ON
HUMANS, THERE
IS LITTLE
EMPHASIS ON THE
MOST HUMAN
CHARACTERISTIC

22.
EMOTION

23.
EMOTION DRIVES
ALL OF OUR
BEHAVIOR. WE
JUSTIFY DECISIONS
WITH LOGIC AFTER
THEY ARE MADE.

24.
THE PLANK
EXAMPLE...

25.
BEHAVIOR IS
PREDOMINANTLY
DRIVEN BY THE
SUBCONSCIOUS.

26.
X
1. Weinschenk, Ph.D. Neuro Web Design

27.
AN EMOTIONAL
QUESTION?
WHAT CEREAL DO
YOU WANT?
2. Emotional Design, Norman

28.
EMOTIONS
MOTIVATION
ACTIONS
JUSTIFICATION

29.
EMOTIONS
SITE OBJECTIVES GOOD EXPERIENCES

30.
UX != MAKE IT LOGICAL

31.
UX == MANAGING EMOTIONS

32.
PRIME EXAMPLE:
AESTHETIC
USABILITY
EFFECT.
3. Norman, Emotional Design

33.
MANAGING EMOTIONS FOR UX...
HOW?

34.
Three Types of Emotional Responses:
VISCERAL
BEHAVIORAL
REFLECTIVE

35.
SUBCONSCIOUS
VISCERAL
BEHAVIORAL
REFLECTIVE
CONSCIOUS

36.
Old Brain
VISCERAL

37.
FIGHT or
FLIGHT
DANGER or
OPPORTUNITY

38.
FIGHT or
FLIGHT
DANGER or
OPPORTUNITY

39.
VILAYANUR RAMACHANDRAN
BRAIN IS MADE UP
OF 100 BILLION
NEURONS. MOTOR
NEURONS FIRE
WHEN PERFORMING
ACTIONS.

40.
VILAYANUR RAMACHANDRAN
THOSE SAME
NEURONS FIRE
WHEN YOU WATCH
SOMEONE PERFORM
THE SAME ACTION.

41.
VILAYANUR RAMACHANDRAN
THE LIMBIC
SYSTEM AND THE
AMYGDALGA

42.
VILAYANUR RAMACHANDRAN
SEEING IMAGERY OF
IMPORTANCE
CAUSES PHYSICAL
REACTIONS.

43.
“FEELS”
SAFE

44.
“FEELS”
UNSAFE

45.
VISUALS
EMOTIONAL
REACTIONS
MOOD & MINDSET

46.
What does it “feel” like to use?
BEHAVIORAL

47.
INLINE WITH
TRADITIONAL
UX FACETS

48.
Learn and Love
COST BENEFIT
PRINCIPLE

49.
Why we hate
LONG WEB
FORMS...

50.
Why we
DON’T READ
INSTRUCTIONS
UNLESS WE
HAVE TO.

51.
And love
CALORICALLY
DENSE FOOD

52.
EFFORT BENEFIT
TO OBTAIN OF OBTAINING

53.
Hick’s Law in Action
EXAMPLE
4. Weinschenk, Ph.D. Neuro Web Design

54.
Selective Disregard
EXAMPLE #2

55.
RECOGNITION
OVER RECALL

56.
PROGRESSIVE
DISCLOSURE

57.
MINIMIZE ALL
OPTIONS

58.
ULTIMATELY
MINIMIZE EFFORT
REQUIRED.

59.
Influencing Ones Conscious Thought
REFLECTIVE

60.
Basic influence:
HOW DO I
REMEMBER
EXPERIENCING
THIS WEBSITE?

61.
Mid Level Influence:
DOES THIS
REMIND ME OF A
GOOD OR BAD
EXPERIENCE?

62.
Mid Level Influence:
DOES THIS SEEM
LOOK LIKE IT
SHOULD BE
USABLE?
5. Blink, Gladwell

63.
Mid Level Influence:
IS THIS A
PRESTIGIOUS
WEBSITE?

64.
Mid Level Influence:
IS THIS A
PRESTIGIOUS
WEBSITE?

65.
Mid Level Influence:
IS THIS A
PRESTIGIOUS
WEBSITE?

66.
THANK YOU
Ross Johnson of 3.7 DESIGNS
@3pointRoss / @37Designs
Recommended Reading
Neuro Web Design by Weinschenk, Ph.D.
100 Things Every Designer Needs to Know About People
by Weinschenk, Ph.D.
The Design of Everyday Things by Don Norman
Emotional by Don Norman
Designing with the Mind in Mind by Jeff Johnson
Blink by Malcolm Gladwell
Designing for Emotion by Aarron Walter