Overlap of emotion and usability

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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. GREA...

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 fac...

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Creating Winning Social Media Strat... by Jay Baer 595266 views

View on Slideshare

1 of 83 Ad

View on Slideshare

1 of 83 Ad