by Ross Johnson of 3.7 DESIGNS@3pointRoss / @37Designs

THE OVERLAP OF EMOTION AND USABILITY

@3pointRoss@37Designs

I AM ROSS “DANGER” JOHNSON

My background is a bit diverse...

DESIGNERSOCIAL SCIENTISTDEVELOPEREDUCATOR

I founded a company in 2005

3.7 DESIGNSWEB DESIGNBRANDINGUSER EXPERIENCEDIGITAL MARKETINGWORDPRESS (YEAH BABY)

I started teaching in 2008

WASHTENAWCOMMUNITYCOLLEGEIn 2012 I began teaching at

MICHIGAN STATEUNIVERSITY

Wrote a book in 2011

theSIX LAYERS of DESIGNMy 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 WEAPPROACHUSABILITY / UX?

Now that we know what “UX” is...

WHAT ARE THE DELIVERABLES?

INFORMATIONORGANIZATION

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

HOW?MANAGING EMOTIONS FOR UX...

Three Types of Emotional Responses:

VISCERALBEHAVIORALREFLECTIVE

VISCERAL

BEHAVIORAL

REFLECTIVE

SUBCONSCIOUS

CONSCIOUS

Old Brain

VISCERAL

FIGHT orFLIGHT

DANGER or OPPORTUNITY

FIGHT orFLIGHT

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 TO OBTAIN

BENEFIT OF OBTAINING

Hick’s Law in Action

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

Ross Johnson of 3.7 DESIGNS@3pointRoss / @37Designs

THANK YOU

Recommended ReadingNeuro 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 NormanEmotional by Don NormanDesigning with the Mind in Mind by Jeff JohnsonBlink by Malcolm GladwellDesigning for Emotion by Aarron Walter