First Impression Rehab: Design Physiology Tips to Boost Conversion

Image source: bigbackground.com
D E S I G N P H Y S I O L O G Y T RI C KS TO B O O S T U X & C O N V ERS I O N
FIRST IMPRESSION REHAB

ANGIE SCHOTTMULLER
Marketing Optimization Advisor
@aschottmuller
linkedin.com/in/angieschottmuller
angie@interactiveartisan.com
Top 10 of
2015

Seriously. It's loaded with juicy stats guaranteed to get a retweet!
#ConvRoadTrip #CRO
@aschottmuller
Tweet this session!
Angie Schottmuller @aschottmuller #ConvRoadTrip

PEOPLE FORM FIRST IMPRESSIONS ABOUT
PEOPLE IN 100 MILLISECONDS.
That's 0.1 or 1/10th of a second.
Angie Schottmuller @aschottmuller #ConvRoadTripSource: Princeton University Research Study 2006, Reference: ConversionXL.com, Image source: reddit.com
attractiveness, likeability, trustworthiness, competence, aggressiveness

What impression was set?

WEB PAGES IN 17 MILLISECONDS.
That’s 1/59th of a second.
Angie Schottmuller @aschottmuller #ConvRoadTripReference: Google Research 2012. Image source: cheapwebdesign.co.uk

98% of first-time
visitors will NEVER
RETURN to your site.
- HubSpot 2014, How to Decrease Your Bounce Rate

THEY CAME.
THEY PUKED.
THEY LEFT.”
- @Avinash Kaushik, Analytics Expert
“
WEB BOUNCE =

Every web page is a PARTY.
Nobody shows up to PUKE.

“Let’s throw that up on the website.”

“Let’s throw that up on the website.”
?#$!

Angie Schottmuller @aschottmuller #ConvRoadTripImage credit: House
WEB FIRST IMPRESSION REHAB

STAGE 1: CONFESSION
QUICK & EASY USABILITY TESTS

T E S T
Y O U R E Y E S &
D I S C E R N F I R S T
I M P R E S S I O N S W / S I M P L E
C O N T E N T U S A B I L I T Y T E S T S .
P H Y S I O L O G Y I S K E Y T O U N L O C K C O N V E R S I O N S .

5-SECOND TEST

Example: Byers’' LeafGuard Angie Schottmuller @aschottmuller #ConvRoadTrip
BYERS’ LEAFGUARD LANDING PAGE

5-SECOND TEST:
WHAT DO YOU REMEMBER?
 Who is the company?
 What are they offering?
 Do they appear credible? (-1, 0, +1)
 What's the call to action?

5-SECOND TEST:
WHAT DO YOU REMEMBER?
 IDENTITY
 OFFER
 CREDIBILITY
 CALL TO ACTION (CTA)

Angie Schottmuller @aschottmuller #ConvRoadTripExample: midwest-dental.com
5-SECOND TEST USABILITY ASSESSMENT:
WHAT’S BEING OFFERED?
WHO’S THE COMPANY?
WHAT’S THE CALL TO ACTION?
DO THEY SEEM CREDIBLE?

5-SECOND TEST
PLAN AUDIT:
FACTOR DESIRED ACTUAL
IDENTITY Byers’ LeafGuard
OFFER LeafGuard Gutters [50% off install]
CREDIBILITY +1
CTA Get Estimate

-------- 6 feet -------
6-FOOT TEST
Image credit: immediateentourage.com Angie Schottmuller @aschottmuller #ConvRoadTrip

Angie Schottmuller @aschottmuller #ConvRoadTripExample: championwindow.com
6-FOOT USABILITY TEST (MOCKUP)

WHAT’S THE MOST OBVIOUS PAGE ELEMENT?
Angie Schottmuller @aschottmuller #ConvRoadTripExample: championwindow.com
6-FOOT TEST USABILITY ASSESSMENT:
WHAT ARE THEY OFFERING?
WHO IS THE COMPANY?
GOAL:
1- Call-to-Action Button
2- Hero Shot Image/Video
3- Headline

Example: championwindow.com Angie Schottmuller @aschottmuller #ConvRoadTrip
Champion Window – 6’ Test

Video Source: https://youtube.com/watch?v=ZU7ylC7WeaQ
'USER IS DRUNK' TEST
Let’s see. I’ll pick…
Hey, she’s cute!
CLICK TO PLAY VIDEO

Angie Schottmuller @aschottmuller #ConvRoadTripExample: bigcommerce.com. Usability Test Credit to Squareweave: ▶ The User is Drunk
"USER IS DRUNK" USABILITY ASSESSMENT
ARE DISTRACTIONS REMOVED?
IS THE CTA OBVIOUS IF BLURRY?
ARE GUIDED DIRECTIONS PROVIDED?
VIRTUAL REALITY EXPERIENCE: Squint your eyes and move your head back and forth.
IS THE CTA REPEATED?

STAGE 2: TREATMENT
OPTIMIZE PHYSIOLOGY TO ‘PASS THE TEST’

Image source: josreuser.wordpress.com Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
 CREDIBILITY
 CTA

IDENTITY

Example site: Sephora.com Angie Schottmuller @aschottmuller #ConvRoadTrip
❌ IDENTITY
 OFFER
 CREDIBILITY
 CTA

 IDENTITY
 OFFER
 CREDIBILITY
 CTA

OFFER

Example site: WilliamSonoma.com 3/10/14 Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
❌ OFFER
 CREDIBILITY
 CTA

Example site: MidwestDental.com Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
 CREDIBILITY
 CTA

CREDIBILITY

 IDENTITY
 OFFER
❌ CREDIBILITY
 CTA

 IDENTITY
 OFFER
 CREDIBILITY
 CTA

CALL TO ACTION (CTA)

Example site: hellobar.com Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
 CREDIBILITY
❌ CTA

Example site: Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
 CREDIBILITY
 CTA

Example site: Byers’ LeafGuard and Red Wing Shoes Spring Promo 2015 Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
 CREDIBILITY
 CTA
Call (800) 977-5323
Quick Estimate & 20% OFF
Open ‘til 4pm TODAY
M-F, 8am – 4pm CT

The CALL TO ACTION should be the
FIRST THING TO STAND OUT
on any piece of marketing.
CLICK if you AGREE

STAGE 3: RECOVERY
Physiology & “Clockwork Conversion Color"

FORGET THIS STUFF FOR A
MINUTE

Image source: dot-color.com Angie Schottmuller @aschottmuller #ConvRoadTrip
PHYSICAL
Existence
PSYCHOLOGICAL
Meaning
PHYSIOLOGICAL
Detection
COLOR PERCEPTION

Reference: wikipedia.org/wiki/Optical_illusion Angie Schottmuller @aschottmuller #ConvRoadTrip

Image source: drtylndry.com Angie Schottmuller @aschottmuller #ConvRoadTrip
"I can see your halo,
halo, halo..."
~ Beyonce

Disappearing text/color is NOT an illusion.
IT’S PHYSIOLOGY.

COLOR
FAIL

Image: Rainbow Bonita Angie Schottmuller @aschottmuller #ConvRoadTrip

Image source: hetras.wordpress.com Angie Schottmuller @aschottmuller #ConvRoadTrip

HUMAN EYE
RECEPTORS

Choose Your Color Wheel Wisely

Two Common Color Wheels
RGB
(CMYK)
R
GB
RYB
R
YB

RGB
(CMYK)
OPTIMIZE FOR THE EYE
RYB

THE HUMAN EYE JUMPS
3X A SECOND
TO CAPTURE NEW
VISUAL INFO.
Angie Schottmuller @aschottmuller #ConvRoadTripResearch Study by New York University, Jan 2011, Source: sciencedaily.com. Image source: clker.com.

The eye WANTS to find
that complementary color.

The eye WANTS to find
that complementary color.
NEEDS
^

LEAD IT TO YOUR CTA.
Angie Schottmuller @aschottmuller #ConvRoadTripImage source: ingenexdigital.com/

Color Physiology
THE CL O CKWO RK CO N VERSIO N CO L O R MO DEL
Reference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012 Angie Schottmuller @aschottmuller #ConvRoadTrip

12
6
9 3
4
57
8
10
11 1
2
COMPLEMENTARY COLOR CTA BUTTON
CLOCKWORK CONVERSION COLOR MODEL - KEY #1
MAIN COLOR
CTA COLOR
Main and CTA color hues
should be about 180’ apart
on an HSB color palette.

Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: Eyequant.com 3/10/14.
Use Complementary Color CTA Button
COLOR
WIN

Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example : LaunchList Pro
Use Complementary Color CTA Button
COLOR
FAIL

RESERVE CTA COLOR ZONE
Reserve analogous hues
within 45’ (HSB) of the CTA
color to ensure the eye lands
on the CTA.
12
6
9 3
4
57
8
10
11 1
2
CTA COLOR ZONE

Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: HelloBar.com 5/1/13.
Reserve CTA Color Zone
COLOR
FAIL

PURE HUE
SHADE
(+ BLACK)
TONE
(+ GRAY)
TINT
(+ WHITE)
USE PURE COLOR FOR CTA BUTTON
PURE COLOR
SOLID BUTTON
PURE COLOR
GRADIENT BUTTON
Pure color HSB saturation and brightness values are >= 85%
CTA LINK TEXT
(Complementary Shade)

Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: ClubDivot.com
Use Pure Color for the CTA Button
COLOR
FAIL

Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: ExactTarget
COLOR
FAIL

Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: DevAuditions
COLOR
FAIL

12
6
9 3
4
57
8
10
11 1
2
NEUTRALIZE NON-CTA COLORS
NO PURE OR
CTA ZONE
COLORS
MAIN COLOR
PURE
SHADE
(+ BLACK)
TONE
(+ GRAY)
TINT
(+ WHITE)
Neutralized color HSB
saturation and brightness
values are < 85%

Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: Kiefer Swim Products
Neutralize Non-CTA Colors
COLOR
FAIL

LET THE CTA AND HERO SHOT STAND OUT.
ALL ELSE IS THE STAGE.

✔
CLOCKWORK CONVERSION COLOR TEST
Is the CTA color complementary
to the dominant color?
Are non-CTA colors neutralized
as shades, tones or tints?
<85% HSB saturation and brightness levels
Does the CTA button use
pure color?
>85% HSB saturation and brightness levels
Is the CTA color "zone"
reserved for CTA use only?
Clockwork Conversion Color Model by Angie Schottmuller © 2012
A four-point color optimization assessment for usability and primary call-to-action (CTA) clarity.
TINT
TONE
SHADE
PURE
✔
✔✔

QUIZ TIME

WHICH RULE IS BROKEN?
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012.
RESERVED: PURE COLOR: OTHER COLORS NOT PURE:

CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012.
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: C✖ ✖

COMPLEMENTARY:
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A-
Only $3.99 – Preview the Guide
Reference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012.

COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: UW-Eau Claire
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: D✖ ✖ ✖

COMPLEMENTARY:
Get Your Bachelor of
Nursing Program Guide

It works for all hues of the
color wheel...

COMPLEMENTARY:
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+✖

COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: SalesForce

COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: Falcon Social
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A+

COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: ClickTale
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+

COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: H.Bloom
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+

Example Unbounce Templates – Clockwork Conversion Color-Ready!

+
FOOLISH A/B TEST
21% LIFT

Reference: WhichTestWon Archives, May 2015, ExtraSpace Storage Angie Schottmuller @aschottmuller #ConvRoadTrip
FOOLISH A/B TEST

STAGE 4:
ACCOUNTABILITY
Analytics Tracking & Tools

ATTENTION HEATMAPS

EVENT TRACKING
MUST
HAVE
Here's the code: http://bit.ly/gaeventtrackingforcro

MEASURE
"BOUNCE"
CORRECTLY

BOUNCE RATE (ORIGINAL)
PRIOR TO JULY 2012
User enters and exits the same page.
JULY 2012
11

"ADJUSTED" BOUNCE RATE (ABR)
AS OF JULY 2012
User enters and exits the same page
WITH NO INTERACTION.
JULY 2012
12

A LOGGED EVENT QUALIFIES AS
AN "INTERACTION"
i.e. Logging an event at a 5-second view time (or whatever "first impression" time makes sense for
your audience) results in Google Analytics NOT counting the visit as a bounce.

WATCH YOUR BOUNCE RATE PLUMMET...
BEFORE ABR:
70%-90%
AFTER ABR:
5%-20%

Make a REMARKABLE first impression.

STAGE 5: GRADUATION
Actionable Insights & Game Plan

WEB PAGES IN 17 MILLISECONDS.
Angie Schottmuller @aschottmuller #ConvRoadTripReference: ConversionXL.com, Google Research 2012. Image source: cheapwebdesign.co.uk

FIRST IMPRESSION REHAB ACTION PLAN:
 Implement Analytics Tracking
Free GA code: http://bit.ly/gaeventtrackingforcro
 Audit Your Website Color Palette
“Clockwork Conversion Color Model”
 Leverage Quickie Usability Tests
5-Second, 6-Foot, "User is Drunk" Tests

KEY TAKEAWAY:
Your persuasive content and design psychology is
futile if the user's eye can't detect it.
USE PHYSIOLOGY
to stage an awesome party.
(and magical rainbow ponies when necessary.)

Google Event Tracking for CRO:
http://bit.ly/gaeventtrackingforcro
Hero Shot Scorecard:
http://bit.ly/heroshotintro
PARTY FAVORS!

Get Your Optimization Scorecard
...or contact me for FREE consultation
Angie Schottmuller | angie@interactiveartisan.com | @aschottmuller
STRUGGLING WITH
PHYSIOLOGY REHAB?
Image source: opt-imaging.com

First Impression Rehab: Design Physiology Tips to Boost Conversion

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to First Impression Rehab: Design Physiology Tips to Boost Conversion

Similar to First Impression Rehab: Design Physiology Tips to Boost Conversion (20)

Recently uploaded

Recently uploaded (20)

First Impression Rehab: Design Physiology Tips to Boost Conversion

Editor's Notes