THE OVERLAP OF
EMOTION AND
USABILITY
by Ross Johnson of 3.7 DESIGNS
@3pointRoss / @37Designs
I AM ROSS
“DANGER”
JOHNSON
@3pointRoss
@37Designs
My background is a bit diverse...

DESIGNER
SOCIAL SCIENTIST
DEVELOPER
EDUCATOR
I founded a company in 2005

3.7 DESIGNS
WEB DESIGN
BRANDING
USER EXPERIENCE
DIGITAL MARKETING
WORDPRESS (YEAH BABY)
I started teaching in 2008

WASHTENAW
COMMUNITY
COLLEGE
In 2012 I began teaching at

MICHIGAN STATE
UNIVERSITY
Wrote a book in 2011


 the
SIX LAYERS
    of DESIGN
My research is the foundation for
much of this discussion.
Whether designing commercial themes or
custom ones for clients (or yourself)
GREAT DESIGN
LEADS TO GREAT
EXPERIENCES. GREAT
EXPERIENCES LEAD
TO SUCCESSFUL
WEBSITES.
HOW DO WE
APPROACH
USABILITY / UX?
Now that we know what “UX” is...

WHAT ARE THE
DELIVERABLES?
INFORMATION
ORGANIZATION
LAYOUT &
WORKFLOW
PROCESS MAPS
USABILITY
 STUDIES
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
✓
ALL HELPFUL &
VALUABLE BUT...
IS THIS
YOUR USER?
IS THIS
YOUR USER?
SO I ASK...
IS THIS
YOUR USER?
WHAT’S MISSING?
LET ME INTRODUCE
YOU TO HUMANS...
FOR A SUBJECT
SO FOCUSED ON
HUMANS, THERE
IS LITTLE
EMPHASIS ON THE
MOST HUMAN
CHARACTERISTIC
EMOTION
EMOTION DRIVES
ALL OF OUR
BEHAVIOR. WE
JUSTIFY DECISIONS
WITH LOGIC AFTER
THEY ARE MADE.
THE PLANK
EXAMPLE...
BEHAVIOR IS
PREDOMINANTLY
DRIVEN BY THE
SUBCONSCIOUS.
X


1. Weinschenk, Ph.D. Neuro Web Design
AN EMOTIONAL
QUESTION?
WHAT CEREAL DO
YOU WANT?
2. Emotional Design, Norman
EMOTIONS

 MOTIVATION

  ACTIONS

JUSTIFICATION
EMOTIONS


SITE OBJECTIVES GOOD EXPERIENCES
UX != MAKE IT LOGICAL
UX == MANAGING EMOTIONS
PRIME EXAMPLE:
AESTHETIC
USABILITY
EFFECT.
3. Norman, Emotional Design
MANAGING EMOTIONS FOR UX...



HOW?
Three Types of Emotional Responses:


VISCERAL
BEHAVIORAL
REFLECTIVE
SUBCONSCIOUS



VISCERAL

BEHAVIORAL

REFLECTIVE
              CONSCIOUS
Old Brain


VISCERAL
FIGHT or
FLIGHT
DANGER or
OPPORTUNITY
FIGHT or
FLIGHT
DANGER or
OPPORTUNITY
VILAYANUR RAMACHANDRAN

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

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

THE LIMBIC
SYSTEM AND THE
AMYGDALGA
VILAYANUR RAMACHANDRAN

SEEING IMAGERY OF
IMPORTANCE
CAUSES PHYSICAL
REACTIONS.
“FEELS”
SAFE
“FEELS”
UNSAFE
VISUALS

  EMOTIONAL
  REACTIONS

MOOD & MINDSET
What does it “feel” like to use?


BEHAVIORAL
INLINE WITH
TRADITIONAL
UX FACETS
Learn and Love


COST BENEFIT
PRINCIPLE
Why we hate


LONG WEB
FORMS...
Why we


DON’T READ
INSTRUCTIONS
UNLESS WE
HAVE TO.
And love


CALORICALLY
DENSE FOOD
EFFORT       BENEFIT
TO OBTAIN   OF OBTAINING
Hick’s Law in Action


EXAMPLE
4. Weinschenk, Ph.D. Neuro Web Design
Selective Disregard


EXAMPLE #2
RECOGNITION
OVER RECALL
PROGRESSIVE
 DISCLOSURE
MINIMIZE ALL
  OPTIONS
ULTIMATELY

MINIMIZE EFFORT
   REQUIRED.
Influencing Ones Conscious Thought


REFLECTIVE
Basic influence:


HOW DO I
REMEMBER
EXPERIENCING
THIS WEBSITE?
Mid Level Influence:


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


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


IS THIS A
PRESTIGIOUS
WEBSITE?
Mid Level Influence:


IS THIS A
PRESTIGIOUS
WEBSITE?
Mid Level Influence:


IS THIS A
PRESTIGIOUS
WEBSITE?
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

Overlap of emotion and usability