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
Angie Schottmuller @aschottmuller #ConvRoadTrip
What impression was set?
Angie Schottmuller @aschottmuller #ConvRoadTrip
PEOPLE FORM FIRST IMPRESSIONS ABOUT
WEB PAGES IN 17 MILLISECONDS.
That’s 1/59th of a second.
Angie Schottmuller @aschottmuller #ConvRoadTripReference: Google Research 2012. Image source: cheapwebdesign.co.uk
Angie Schottmuller @aschottmuller #ConvRoadTrip
98% of first-time
visitors will NEVER
RETURN to your site.
Angie Schottmuller @aschottmuller #ConvRoadTrip
- HubSpot 2014, How to Decrease Your Bounce Rate
THEY CAME.
THEY PUKED.
THEY LEFT.”
- @Avinash Kaushik, Analytics Expert
Angie Schottmuller @aschottmuller #ConvRoadTrip
“
WEB BOUNCE =
Angie Schottmuller @aschottmuller #ConvRoadTrip
Every web page is a PARTY.
Nobody shows up to PUKE.
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
“Let’s throw that up on the website.”
Angie Schottmuller @aschottmuller #ConvRoadTrip
“Let’s throw that up on the website.”
?#$!
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTripImage credit: House
WEB FIRST IMPRESSION REHAB
STAGE 1: CONFESSION
QUICK & EASY USABILITY TESTS
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
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
Angie Schottmuller @aschottmuller #ConvRoadTrip
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?
Angie Schottmuller @aschottmuller #ConvRoadTrip
5-SECOND TEST:
WHAT DO YOU REMEMBER?
 IDENTITY
 OFFER
 CREDIBILITY
 CALL TO ACTION (CTA)
Angie Schottmuller @aschottmuller #ConvRoadTrip
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?
Angie Schottmuller @aschottmuller #ConvRoadTrip
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
Angie Schottmuller @aschottmuller #ConvRoadTrip
'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’
Angie Schottmuller @aschottmuller #ConvRoadTrip
Image source: josreuser.wordpress.com Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
 CREDIBILITY
 CTA
IDENTITY
Angie Schottmuller @aschottmuller #ConvRoadTrip
Example site: Sephora.com Angie Schottmuller @aschottmuller #ConvRoadTrip
❌ IDENTITY
 OFFER
 CREDIBILITY
 CTA
Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
 CREDIBILITY
 CTA
OFFER
Angie Schottmuller @aschottmuller #ConvRoadTrip
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
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
❌ CREDIBILITY
 CTA
Angie Schottmuller @aschottmuller #ConvRoadTrip
 IDENTITY
 OFFER
 CREDIBILITY
 CTA
CALL TO ACTION (CTA)
Angie Schottmuller @aschottmuller #ConvRoadTrip
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.
Angie Schottmuller @aschottmuller #ConvRoadTrip
CLICK if you AGREE
STAGE 3: RECOVERY
Physiology & “Clockwork Conversion Color"
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
FORGET THIS STUFF FOR A
MINUTE
Image source: dot-color.com Angie Schottmuller @aschottmuller #ConvRoadTrip
PHYSICAL
Existence
PSYCHOLOGICAL
Meaning
PHYSIOLOGICAL
Detection
COLOR PERCEPTION
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
Angie Schottmuller @aschottmuller #ConvRoadTrip
Reference: wikipedia.org/wiki/Optical_illusion Angie Schottmuller @aschottmuller #ConvRoadTrip
Disappearing text/color is NOT an illusion.
IT’S PHYSIOLOGY.
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
COLOR
FAIL
Image: Rainbow Bonita Angie Schottmuller @aschottmuller #ConvRoadTrip
Image source: hetras.wordpress.com Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
HUMAN EYE
RECEPTORS
Angie Schottmuller @aschottmuller #ConvRoadTrip
Choose Your Color Wheel Wisely
Angie Schottmuller @aschottmuller #ConvRoadTrip
Two Common Color Wheels
RGB
(CMYK)
R
GB
RYB
R
YB
RGB
(CMYK)
Angie Schottmuller @aschottmuller #ConvRoadTrip
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.
Angie Schottmuller @aschottmuller #ConvRoadTrip
The eye WANTS to find
that complementary color.
Angie Schottmuller @aschottmuller #ConvRoadTrip
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
Angie Schottmuller @aschottmuller #ConvRoadTrip
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
CLOCKWORK CONVERSION COLOR MODEL - KEY #1
COLOR
WIN
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example : LaunchList Pro
Use Complementary Color CTA Button
CLOCKWORK CONVERSION COLOR MODEL - KEY #1
COLOR
FAIL
RESERVE CTA COLOR ZONE
CLOCKWORK CONVERSION COLOR MODEL - KEY #2
Angie Schottmuller @aschottmuller #ConvRoadTrip
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
CLOCKWORK CONVERSION COLOR MODEL - KEY #2
COLOR
FAIL
PURE HUE
SHADE
(+ BLACK)
TONE
(+ GRAY)
TINT
(+ WHITE)
USE PURE COLOR FOR CTA BUTTON
CLOCKWORK CONVERSION COLOR MODEL - KEY #3
Angie Schottmuller @aschottmuller #ConvRoadTrip
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
CLOCKWORK CONVERSION COLOR MODEL - KEY #3
COLOR
FAIL
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: ExactTarget
Use Pure Color for the CTA Button
CLOCKWORK CONVERSION COLOR MODEL - KEY #3
COLOR
FAIL
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: DevAuditions
Use Pure Color for the CTA Button
CLOCKWORK CONVERSION COLOR MODEL - KEY #3
COLOR
FAIL
12
6
9 3
4
57
8
10
11 1
2
NEUTRALIZE NON-CTA COLORS
CLOCKWORK CONVERSION COLOR MODEL - KEY #4
Angie Schottmuller @aschottmuller #ConvRoadTrip
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
CLOCKWORK CONVERSION COLOR MODEL - KEY #4
COLOR
FAIL
LET THE CTA AND HERO SHOT STAND OUT.
ALL ELSE IS THE STAGE.
Angie Schottmuller @aschottmuller #ConvRoadTrip
✔
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
Angie Schottmuller @aschottmuller #ConvRoadTrip
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✖ ✖
CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTrip
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A-
Only $3.99 – Preview the Guide
Reference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012.
CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
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✖ ✖ ✖
CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: UW-Eau Claire
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A-
Get Your Bachelor of
Nursing Program Guide
It works for all hues of the
color wheel...
Angie Schottmuller @aschottmuller #ConvRoadTrip
CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: UW-Eau Claire
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+✖
CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: SalesForce
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A-
CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: Falcon Social
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A+
CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: ClickTale
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+
CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: H.Bloom
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+
Angie Schottmuller @aschottmuller #ConvRoadTrip
Example Unbounce Templates – Clockwork Conversion Color-Ready!
✔
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
✔
✔✔
Reference: wikipedia.org/wiki/Optical_illusion Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
+
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
Angie Schottmuller @aschottmuller #ConvRoadTrip
ATTENTION HEATMAPS
Angie Schottmuller @aschottmuller #ConvRoadTrip
Example: Byers’' LeafGuard Angie Schottmuller @aschottmuller #ConvRoadTrip
BYERS’ LEAFGUARD LANDING PAGE
Example: Byers’' LeafGuard Angie Schottmuller @aschottmuller #ConvRoadTrip
BYERS’ LEAFGUARD LANDING PAGE
EVENT TRACKING
Angie Schottmuller @aschottmuller #ConvRoadTrip
MUST
HAVE
Here's the code: http://bit.ly/gaeventtrackingforcro
MEASURE
"BOUNCE"
CORRECTLY
Angie Schottmuller @aschottmuller #ConvRoadTrip
BOUNCE RATE (ORIGINAL)
PRIOR TO JULY 2012
User enters and exits the same page.
Angie Schottmuller @aschottmuller #ConvRoadTrip
JULY 2012
11
"ADJUSTED" BOUNCE RATE (ABR)
AS OF JULY 2012
User enters and exits the same page
WITH NO INTERACTION.
Angie Schottmuller @aschottmuller #ConvRoadTrip
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.
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
WATCH YOUR BOUNCE RATE PLUMMET...
BEFORE ABR:
70%-90%
AFTER ABR:
5%-20%
Make a REMARKABLE first impression.
Angie Schottmuller @aschottmuller #ConvRoadTrip
STAGE 5: GRADUATION
Actionable Insights & Game Plan
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
PEOPLE FORM FIRST IMPRESSIONS ABOUT
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
Angie Schottmuller @aschottmuller #ConvRoadTrip
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.)
Angie Schottmuller @aschottmuller #ConvRoadTrip
Angie Schottmuller @aschottmuller #ConvRoadTrip
Google Event Tracking for CRO:
http://bit.ly/gaeventtrackingforcro
Hero Shot Scorecard:
http://bit.ly/heroshotintro
PARTY FAVORS!
ANGIE SCHOTTMULLER
Marketing Optimization Advisor
@aschottmuller
linkedin.com/in/angieschottmuller
angie@interactiveartisan.com
Top 10 of
2015
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

More Related Content

PPTX
Clase_Tecno-Informat_5-02-28-23_Intro_1er_periodo.pptx
PDF
Mobile Conversion Optimization for Context
PDF
Hero Shot Images: 7 Secrets to Visuals That Drive Sales
PDF
SEO Conversion Strategies - 12 Power Plays
PDF
Social Proof Persuasive Content Framework
PPTX
Social Proof Conversion Optimization Secrets
PPTX
SEO Conversion Optimization Star Wars Insights
PDF
Visual Marketing with Hero Shot Images
Clase_Tecno-Informat_5-02-28-23_Intro_1er_periodo.pptx
Mobile Conversion Optimization for Context
Hero Shot Images: 7 Secrets to Visuals That Drive Sales
SEO Conversion Strategies - 12 Power Plays
Social Proof Persuasive Content Framework
Social Proof Conversion Optimization Secrets
SEO Conversion Optimization Star Wars Insights
Visual Marketing with Hero Shot Images

Viewers also liked (17)

PDF
Holy Grail of On-Page Content Conversion Optimization
PPTX
Usability Conversion Optimization for the Eye
PDF
대규모 서비스를 지탱하는 기술 ch6
PPTX
Mobile Marketing Strategy - SES London 2012
PDF
빈스톡 첫인상 with Git
PDF
Teach meet apponomy
PPTX
Web Optimisation
PDF
[Webinar] The 10 Ways You're Screwing Up Your Landing Page (And What To Do Ab...
DOTX
Landing Page Content Worksheet
PDF
First Impressions & Landing Pages | Maximize Demosphere XXXIX
PPTX
Integration of cad-cam systems & shared data base
PPTX
Anatomy of a web page
PPTX
Measurable content marketing
PPT
Color and Consumer Behavior
PDF
You never get a second chance to make a first impression.
PDF
UX스튜디오_ 1 인터랙션디자인
PDF
The Ultimate Guide To Landing Page Optimization
Holy Grail of On-Page Content Conversion Optimization
Usability Conversion Optimization for the Eye
대규모 서비스를 지탱하는 기술 ch6
Mobile Marketing Strategy - SES London 2012
빈스톡 첫인상 with Git
Teach meet apponomy
Web Optimisation
[Webinar] The 10 Ways You're Screwing Up Your Landing Page (And What To Do Ab...
Landing Page Content Worksheet
First Impressions & Landing Pages | Maximize Demosphere XXXIX
Integration of cad-cam systems & shared data base
Anatomy of a web page
Measurable content marketing
Color and Consumer Behavior
You never get a second chance to make a first impression.
UX스튜디오_ 1 인터랙션디자인
The Ultimate Guide To Landing Page Optimization
Ad

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

PDF
Conversion Optimization - 6 Power Tricks of the Trade
PPTX
Mobile Landing Page Optimization - SES New York 2012
PDF
Online SEO Meetup
PPTX
Mark Thomas - 10 Step Technical SEO Game Plan (annotated edition)
PDF
Brooks Bell Interactive Tama Presentation
PDF
Opticon 2015-Website Redesign Strategies
ODP
Web Marketing Week4
PPTX
Search Sessions - Preparing Your Website for Google's Page Experience Update
PPTX
Website workout
PDF
Web content that works
PDF
21 CRO Best Practices for Ecommerce
 
PDF
Iab 07 03 13
PDF
5 Content-First Marketing Steps to Jurassic Conversion
KEY
U of H Entrepreneurship Presentaion 2012
PDF
Jane_clark_pres2016_FUP_web
PPTX
VIP session Content Marketing Lab
PPTX
Driving Online Sales - Craig Sullivan, The future of the online marketplace 2...
PPTX
Lead Website Visitors To Water AND Make Them Drink
PDF
What is UX, in 10 Slides
PDF
Cresterea vanzarilor in magazinele online
Conversion Optimization - 6 Power Tricks of the Trade
Mobile Landing Page Optimization - SES New York 2012
Online SEO Meetup
Mark Thomas - 10 Step Technical SEO Game Plan (annotated edition)
Brooks Bell Interactive Tama Presentation
Opticon 2015-Website Redesign Strategies
Web Marketing Week4
Search Sessions - Preparing Your Website for Google's Page Experience Update
Website workout
Web content that works
21 CRO Best Practices for Ecommerce
 
Iab 07 03 13
5 Content-First Marketing Steps to Jurassic Conversion
U of H Entrepreneurship Presentaion 2012
Jane_clark_pres2016_FUP_web
VIP session Content Marketing Lab
Driving Online Sales - Craig Sullivan, The future of the online marketplace 2...
Lead Website Visitors To Water AND Make Them Drink
What is UX, in 10 Slides
Cresterea vanzarilor in magazinele online
Ad

More from Angie Schottmuller (6)

PPTX
Social Proof Tips to Boost Landing Page Conversions
PPTX
Organic Conversion Optimization - 15 Wins to Convert SEO Traffic
PDF
SEO Conversion Strategies (MacGyver Problem Solving Edition)
PDF
Social Media ROI: Formulas & Conversion Optimization Tips
PDF
Social Media: ROI Possible
PPTX
Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)
Social Proof Tips to Boost Landing Page Conversions
Organic Conversion Optimization - 15 Wins to Convert SEO Traffic
SEO Conversion Strategies (MacGyver Problem Solving Edition)
Social Media ROI: Formulas & Conversion Optimization Tips
Social Media: ROI Possible
Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)

Recently uploaded (20)

PDF
Biography of Brady Beitlich
PDF
Social Media Marketing in 2025 blog 1 2.pdf
PDF
CAP 9.- Building the Price Foundation.pdf
PDF
Expert Social Media Marketing Services for Maximum Engagement
PPTX
Unit 2 - Architects Act, COA n competitions.pptx
PPTX
1 percent Clicks, percent Traffic Loss-Your SEO Stack Isn’t Built for AI
PPTX
Transform Your Business with Top Digital Marketing Services_EGlogics.pptx
PPTX
Best Social Media Marketing Company in Lucknow
PDF
EX Kathmandu _Kailash Mansarovar Yatra 2025 by Nagarjuna Travels.pdf
PPTX
Fixing AI Hallucinations: The NeuroRank™ Approach
PDF
DigiBrandX: Crafting Identities That Resonate
PPTX
Events Management Overview of Events Management
PDF
Top-Rated Marketplaces to Buy Verified Cash App Accounts Safely.pdf
PPTX
Best Mobile App Development Company in Lucknow
PDF
Retaining SEO Rankings During Website Redesign.pdf
PPTX
Mastering in Website Competitor Analysis
PPTX
FINAL PPT strategic management lessons.pptx
PPTX
AI usage and the Social Media Marketing World
PDF
Freelance digital marketing in 2025:Your path to freedom and growth
PPTX
B2B Marketplace India – Connect & Grow..
Biography of Brady Beitlich
Social Media Marketing in 2025 blog 1 2.pdf
CAP 9.- Building the Price Foundation.pdf
Expert Social Media Marketing Services for Maximum Engagement
Unit 2 - Architects Act, COA n competitions.pptx
1 percent Clicks, percent Traffic Loss-Your SEO Stack Isn’t Built for AI
Transform Your Business with Top Digital Marketing Services_EGlogics.pptx
Best Social Media Marketing Company in Lucknow
EX Kathmandu _Kailash Mansarovar Yatra 2025 by Nagarjuna Travels.pdf
Fixing AI Hallucinations: The NeuroRank™ Approach
DigiBrandX: Crafting Identities That Resonate
Events Management Overview of Events Management
Top-Rated Marketplaces to Buy Verified Cash App Accounts Safely.pdf
Best Mobile App Development Company in Lucknow
Retaining SEO Rankings During Website Redesign.pdf
Mastering in Website Competitor Analysis
FINAL PPT strategic management lessons.pptx
AI usage and the Social Media Marketing World
Freelance digital marketing in 2025:Your path to freedom and growth
B2B Marketplace India – Connect & Grow..

First Impression Rehab: Design Physiology Tips to Boost Conversion

  • 1. 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
  • 2. ANGIE SCHOTTMULLER Marketing Optimization Advisor @aschottmuller linkedin.com/in/angieschottmuller [email protected] Top 10 of 2015
  • 3. Seriously. It's loaded with juicy stats guaranteed to get a retweet! #ConvRoadTrip #CRO @aschottmuller Tweet this session! Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 4. 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
  • 6. What impression was set? Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 7. PEOPLE FORM FIRST IMPRESSIONS ABOUT WEB PAGES IN 17 MILLISECONDS. That’s 1/59th of a second. Angie Schottmuller @aschottmuller #ConvRoadTripReference: Google Research 2012. Image source: cheapwebdesign.co.uk
  • 9. 98% of first-time visitors will NEVER RETURN to your site. Angie Schottmuller @aschottmuller #ConvRoadTrip - HubSpot 2014, How to Decrease Your Bounce Rate
  • 10. THEY CAME. THEY PUKED. THEY LEFT.” - @Avinash Kaushik, Analytics Expert Angie Schottmuller @aschottmuller #ConvRoadTrip “ WEB BOUNCE =
  • 12. Every web page is a PARTY. Nobody shows up to PUKE. Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 14. “Let’s throw that up on the website.” Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 15. “Let’s throw that up on the website.” ?#$! Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 16. Angie Schottmuller @aschottmuller #ConvRoadTripImage credit: House WEB FIRST IMPRESSION REHAB
  • 17. STAGE 1: CONFESSION QUICK & EASY USABILITY TESTS Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 18. Angie Schottmuller @aschottmuller #ConvRoadTrip 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 .
  • 19. 5-SECOND TEST Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 20. Example: Byers’' LeafGuard Angie Schottmuller @aschottmuller #ConvRoadTrip BYERS’ LEAFGUARD LANDING PAGE
  • 21. 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? Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 22. 5-SECOND TEST: WHAT DO YOU REMEMBER?  IDENTITY  OFFER  CREDIBILITY  CALL TO ACTION (CTA) Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 23. 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?
  • 24. Angie Schottmuller @aschottmuller #ConvRoadTrip 5-SECOND TEST PLAN AUDIT: FACTOR DESIRED ACTUAL IDENTITY Byers’ LeafGuard OFFER LeafGuard Gutters [50% off install] CREDIBILITY +1 CTA Get Estimate
  • 25. -------- 6 feet ------- 6-FOOT TEST Image credit: immediateentourage.com Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 26. Angie Schottmuller @aschottmuller #ConvRoadTripExample: championwindow.com 6-FOOT USABILITY TEST (MOCKUP)
  • 27. 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
  • 28. Example: championwindow.com Angie Schottmuller @aschottmuller #ConvRoadTrip Champion Window – 6’ Test
  • 29. Video Source: https://youtube.com/watch?v=ZU7ylC7WeaQ Angie Schottmuller @aschottmuller #ConvRoadTrip 'USER IS DRUNK' TEST Let’s see. I’ll pick… Hey, she’s cute! CLICK TO PLAY VIDEO
  • 30. 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?
  • 31. STAGE 2: TREATMENT OPTIMIZE PHYSIOLOGY TO ‘PASS THE TEST’ Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 32. Image source: josreuser.wordpress.com Angie Schottmuller @aschottmuller #ConvRoadTrip  IDENTITY  OFFER  CREDIBILITY  CTA
  • 34. Example site: Sephora.com Angie Schottmuller @aschottmuller #ConvRoadTrip ❌ IDENTITY  OFFER  CREDIBILITY  CTA
  • 35. Angie Schottmuller @aschottmuller #ConvRoadTrip  IDENTITY  OFFER  CREDIBILITY  CTA
  • 37. Example site: WilliamSonoma.com 3/10/14 Angie Schottmuller @aschottmuller #ConvRoadTrip  IDENTITY ❌ OFFER  CREDIBILITY  CTA
  • 38. Example site: MidwestDental.com Angie Schottmuller @aschottmuller #ConvRoadTrip  IDENTITY  OFFER  CREDIBILITY  CTA
  • 40. Angie Schottmuller @aschottmuller #ConvRoadTrip  IDENTITY  OFFER ❌ CREDIBILITY  CTA
  • 41. Angie Schottmuller @aschottmuller #ConvRoadTrip  IDENTITY  OFFER  CREDIBILITY  CTA
  • 42. CALL TO ACTION (CTA) Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 43. Example site: hellobar.com Angie Schottmuller @aschottmuller #ConvRoadTrip  IDENTITY  OFFER  CREDIBILITY ❌ CTA
  • 44. Example site: Angie Schottmuller @aschottmuller #ConvRoadTrip  IDENTITY  OFFER  CREDIBILITY  CTA
  • 45. 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
  • 46. The CALL TO ACTION should be the FIRST THING TO STAND OUT on any piece of marketing. Angie Schottmuller @aschottmuller #ConvRoadTrip CLICK if you AGREE
  • 47. STAGE 3: RECOVERY Physiology & “Clockwork Conversion Color" Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 48. Angie Schottmuller @aschottmuller #ConvRoadTrip FORGET THIS STUFF FOR A MINUTE
  • 49. Image source: dot-color.com Angie Schottmuller @aschottmuller #ConvRoadTrip PHYSICAL Existence PSYCHOLOGICAL Meaning PHYSIOLOGICAL Detection COLOR PERCEPTION
  • 50. Image source: dot-color.com Angie Schottmuller @aschottmuller #ConvRoadTrip PHYSICAL Existence PSYCHOLOGICAL Meaning PHYSIOLOGICAL Detection COLOR PERCEPTION
  • 51. Reference: wikipedia.org/wiki/Optical_illusion Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 52. Image source: drtylndry.com Angie Schottmuller @aschottmuller #ConvRoadTrip "I can see your halo, halo, halo..." ~ Beyonce
  • 54. Reference: wikipedia.org/wiki/Optical_illusion Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 55. Disappearing text/color is NOT an illusion. IT’S PHYSIOLOGY. Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 56. Angie Schottmuller @aschottmuller #ConvRoadTrip COLOR FAIL
  • 57. Image: Rainbow Bonita Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 58. Image source: hetras.wordpress.com Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 59. Angie Schottmuller @aschottmuller #ConvRoadTrip HUMAN EYE RECEPTORS
  • 60. Angie Schottmuller @aschottmuller #ConvRoadTrip Choose Your Color Wheel Wisely
  • 61. Angie Schottmuller @aschottmuller #ConvRoadTrip Two Common Color Wheels RGB (CMYK) R GB RYB R YB
  • 62. RGB (CMYK) Angie Schottmuller @aschottmuller #ConvRoadTrip OPTIMIZE FOR THE EYE RYB
  • 63. 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.
  • 64. The eye WANTS to find that complementary color. Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 65. The eye WANTS to find that complementary color. Angie Schottmuller @aschottmuller #ConvRoadTrip NEEDS ^
  • 66. LEAD IT TO YOUR CTA. Angie Schottmuller @aschottmuller #ConvRoadTripImage source: ingenexdigital.com/
  • 67. 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
  • 68. 12 6 9 3 4 57 8 10 11 1 2 COMPLEMENTARY COLOR CTA BUTTON CLOCKWORK CONVERSION COLOR MODEL - KEY #1 Angie Schottmuller @aschottmuller #ConvRoadTrip MAIN COLOR CTA COLOR Main and CTA color hues should be about 180’ apart on an HSB color palette.
  • 69. Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: Eyequant.com 3/10/14. Use Complementary Color CTA Button CLOCKWORK CONVERSION COLOR MODEL - KEY #1 COLOR WIN
  • 70. Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example : LaunchList Pro Use Complementary Color CTA Button CLOCKWORK CONVERSION COLOR MODEL - KEY #1 COLOR FAIL
  • 71. RESERVE CTA COLOR ZONE CLOCKWORK CONVERSION COLOR MODEL - KEY #2 Angie Schottmuller @aschottmuller #ConvRoadTrip 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
  • 72. Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: HelloBar.com 5/1/13. Reserve CTA Color Zone CLOCKWORK CONVERSION COLOR MODEL - KEY #2 COLOR FAIL
  • 73. PURE HUE SHADE (+ BLACK) TONE (+ GRAY) TINT (+ WHITE) USE PURE COLOR FOR CTA BUTTON CLOCKWORK CONVERSION COLOR MODEL - KEY #3 Angie Schottmuller @aschottmuller #ConvRoadTrip PURE COLOR SOLID BUTTON PURE COLOR GRADIENT BUTTON Pure color HSB saturation and brightness values are >= 85% CTA LINK TEXT (Complementary Shade)
  • 74. Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: ClubDivot.com Use Pure Color for the CTA Button CLOCKWORK CONVERSION COLOR MODEL - KEY #3 COLOR FAIL
  • 75. Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: ExactTarget Use Pure Color for the CTA Button CLOCKWORK CONVERSION COLOR MODEL - KEY #3 COLOR FAIL
  • 76. Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: DevAuditions Use Pure Color for the CTA Button CLOCKWORK CONVERSION COLOR MODEL - KEY #3 COLOR FAIL
  • 77. 12 6 9 3 4 57 8 10 11 1 2 NEUTRALIZE NON-CTA COLORS CLOCKWORK CONVERSION COLOR MODEL - KEY #4 Angie Schottmuller @aschottmuller #ConvRoadTrip NO PURE OR CTA ZONE COLORS MAIN COLOR PURE SHADE (+ BLACK) TONE (+ GRAY) TINT (+ WHITE) Neutralized color HSB saturation and brightness values are < 85%
  • 78. Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: Kiefer Swim Products Neutralize Non-CTA Colors CLOCKWORK CONVERSION COLOR MODEL - KEY #4 COLOR FAIL
  • 79. LET THE CTA AND HERO SHOT STAND OUT. ALL ELSE IS THE STAGE. Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 80. ✔ 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 ✔ ✔✔
  • 81. QUIZ TIME Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 82. WHICH RULE IS BROKEN? COMPLEMENTARY: Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. RESERVED: PURE COLOR: OTHER COLORS NOT PURE:
  • 83. 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✖ ✖
  • 84. CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD COMPLEMENTARY: Angie Schottmuller @aschottmuller #ConvRoadTrip RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A- Only $3.99 – Preview the Guide Reference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012.
  • 85. CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD 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✖ ✖ ✖
  • 86. CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD COMPLEMENTARY: Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: UW-Eau Claire RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A- Get Your Bachelor of Nursing Program Guide
  • 87. It works for all hues of the color wheel... Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 88. CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD COMPLEMENTARY: Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: UW-Eau Claire RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+✖
  • 89. CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD COMPLEMENTARY: Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: SalesForce RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A-
  • 90. CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD COMPLEMENTARY: Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: Falcon Social RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A+
  • 91. CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD COMPLEMENTARY: Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: ClickTale RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+
  • 92. CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD COMPLEMENTARY: Angie Schottmuller @aschottmuller #ConvRoadTripReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: H.Bloom RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+
  • 93. Angie Schottmuller @aschottmuller #ConvRoadTrip Example Unbounce Templates – Clockwork Conversion Color-Ready!
  • 94. ✔ 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 ✔ ✔✔
  • 95. Reference: wikipedia.org/wiki/Optical_illusion Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 96. Angie Schottmuller @aschottmuller #ConvRoadTrip + FOOLISH A/B TEST 21% LIFT
  • 97. Reference: WhichTestWon Archives, May 2015, ExtraSpace Storage Angie Schottmuller @aschottmuller #ConvRoadTrip FOOLISH A/B TEST
  • 98. STAGE 4: ACCOUNTABILITY Analytics Tracking & Tools Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 99. ATTENTION HEATMAPS Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 100. Example: Byers’' LeafGuard Angie Schottmuller @aschottmuller #ConvRoadTrip BYERS’ LEAFGUARD LANDING PAGE
  • 101. Example: Byers’' LeafGuard Angie Schottmuller @aschottmuller #ConvRoadTrip BYERS’ LEAFGUARD LANDING PAGE
  • 102. EVENT TRACKING Angie Schottmuller @aschottmuller #ConvRoadTrip MUST HAVE Here's the code: http://bit.ly/gaeventtrackingforcro
  • 104. BOUNCE RATE (ORIGINAL) PRIOR TO JULY 2012 User enters and exits the same page. Angie Schottmuller @aschottmuller #ConvRoadTrip JULY 2012 11
  • 105. "ADJUSTED" BOUNCE RATE (ABR) AS OF JULY 2012 User enters and exits the same page WITH NO INTERACTION. Angie Schottmuller @aschottmuller #ConvRoadTrip JULY 2012 12
  • 106. 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. Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 107. Angie Schottmuller @aschottmuller #ConvRoadTrip WATCH YOUR BOUNCE RATE PLUMMET... BEFORE ABR: 70%-90% AFTER ABR: 5%-20%
  • 108. Make a REMARKABLE first impression. Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 109. STAGE 5: GRADUATION Actionable Insights & Game Plan Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 111. PEOPLE FORM FIRST IMPRESSIONS ABOUT WEB PAGES IN 17 MILLISECONDS. Angie Schottmuller @aschottmuller #ConvRoadTripReference: ConversionXL.com, Google Research 2012. Image source: cheapwebdesign.co.uk
  • 112. 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 Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 113. 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.) Angie Schottmuller @aschottmuller #ConvRoadTrip
  • 114. Angie Schottmuller @aschottmuller #ConvRoadTrip Google Event Tracking for CRO: http://bit.ly/gaeventtrackingforcro Hero Shot Scorecard: http://bit.ly/heroshotintro PARTY FAVORS!
  • 115. ANGIE SCHOTTMULLER Marketing Optimization Advisor @aschottmuller linkedin.com/in/angieschottmuller [email protected] Top 10 of 2015
  • 116. Get Your Optimization Scorecard ...or contact me for FREE consultation Angie Schottmuller | [email protected] | @aschottmuller STRUGGLING WITH PHYSIOLOGY REHAB? Image source: opt-imaging.com

Editor's Notes

  • #2: Image: http://bigbackground.com/wp-content/uploads/ktzbulkwallpaper-1433160217/Eye-Vitamins-Blue.jpg
  • #5: Image src: https://www.reddit.com/r/Cutouts Reference: First Impressions Matter: The Importance of Great Visual Design http://j.mp/1s7oy7S - ConversionXL, Nov 2012 Original Source: http://www.theguardian.com/science/2006/aug/23/usnews.internationalnews It takes only one tenth of a second for us to make up our minds about people. Princeton University, in the US, said. They found that people made judgements about the attractiveness, likeability, trustworthiness, competence and aggressiveness of other people after looking at their faces for 100 milliseconds.
  • #8: Image src: https://www.reddit.com/r/Cutouts Reference: First Impressions Matter: The Importance of Great Visual Design http://j.mp/1s7oy7S - ConversionXL, Nov 2012 Original Source: http://www.theguardian.com/science/2006/aug/23/usnews.internationalnews It takes only one tenth of a second for us to make up our minds about people. Princeton University, in the US, said. They found that people made judgements about the attractiveness, likeability, trustworthiness, competence and aggressiveness of other people after looking at their faces for 100 milliseconds.
  • #9: http://e.fastcompany.net/multisite_files/fastcompany/poster/2014/12/3040131-poster-p-1-the-fastest-animal-on-earth-is-not-a-cheetah.jpg
  • #10: http://blog.hubspot.com/marketing/decrease-website-bounce-rate-infographic
  • #11: http://white.net/blog/avinash-kaushik-they-came-they-puked-they-left/
  • #12: http://pixbim.com/wp-content/uploads/2014/07/funny-farewell-pics.jpg
  • #14: http://www.coloribus.com/adsarchive/tv-commercials/the-partnership-at-drugfreeorg-rehab-16280505/
  • #17: https://fatejacketx.wordpress.com/category/media/page/2/
  • #26: http://www.immediateentourage.com/ie/wp-content/uploads/2010/12/
  • #30: <iframe width="1280" height="720" src="https://www.youtube.com/embed/ZU7ylC7WeaQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
  • #33: http://josreuser.wordpress.com/
  • #35: http://sephora.com
  • #38: http://williamsonoma.com
  • #39: Example site: MidwestDental.com
  • #44: http://hellobar.com
  • #45: http://ce.campaigns.uwec.edu/foot-care-nurse-training/
  • #49: http://www.ufunk.net/en/design/psychology-of-color/ http://bluewave-pet-sitter-login.weebly.com/blog/color-psychology-marketing
  • #50: http://dot-color.com/2013/07/16/how-much-color-gamut-do-displays-really-need-part-2-how-we-perceive-color/
  • #51: http://dot-color.com/2013/07/16/how-much-color-gamut-do-displays-really-need-part-2-how-we-perceive-color/
  • #52: http://en.wikipedia.org/wiki/Optical_illusion
  • #53: http://www.drtylndry.com/beyonce-mrs-carter/
  • #55: http://en.wikipedia.org/wiki/Optical_illusion
  • #59: Image: http://hetras.wordpress.com/2013/02/15/is-your-future-hotel-key-already-in-your-pocket/
  • #64: Img: http://www.clker.com/clipart-eye-4.html Article: http://www.sciencedaily.com/releases/2011/01/110110103737.htm The study was conducted by researchers at University Paris Descartes, New York University's Department of Psychology, and Ludwig-Maximilian University in Munich
  • #67: http://ingenexdigital.com/create-tracking-url/
  • #70: http://pinterest.com/pin/114349278011328159/ Lemon landing page example with a reserved, complementary color for the call-to-action button.
  • #71: http://pinterest.com/pin/114349278011328159/ Lemon landing page example with a reserved, complementary color for the call-to-action button.
  • #72: Only one complementary CTA color instance s/b visible on-screen at a time. (Remove or downplay others as needed.) Note: CTA color is NOT equal to site link color.
  • #74: *only one primary cTA per page. Only one complementary CTA color instance visible on-screen at a time.
  • #79: http://signup.hootsuite.com/na-eng-social-media-management/?mkwid=snqU3WA4Q_dc&pcrid=42293042374&pkw=social%20media%20software&pmt=e&gclid=CjwKEAjws5CrBRD8ze702_2dyjYSJAAAJK9ysn0Eq5FnVYwRfr9lOMJaEKsauCaTnEO3se6iAGaVWxoCyQvw_wcB
  • #96: http://en.wikipedia.org/wiki/Optical_illusion
  • #97: http://seopressor.com/blog/how-to-quickly-fix-these-11-major-blogging-mistakes/
  • #98: https://whichtestwon.com/test/does-button-color-matter-on-mobile/
  • #103: http://www.immediateentourage.com/ie/wp-content/uploads/2010/12/
  • #104: http://pixgood.com/bouncer-doorman.html
  • #105: https://www.google.com/search?q=define:bounce+rate
  • #106: https://www.google.com/search?q=define:bounce+rate
  • #111: https://insidethelifeofmoi.wordpress.com/2014/08/07/a-day-trip-to-the-botox-clinic-the-new-normality/
  • #112: Image src: https://www.reddit.com/r/Cutouts Reference: First Impressions Matter: The Importance of Great Visual Design http://j.mp/1s7oy7S - ConversionXL, Nov 2012 Original Source: http://www.theguardian.com/science/2006/aug/23/usnews.internationalnews It takes only one tenth of a second for us to make up our minds about people. Princeton University, in the US, said. They found that people made judgements about the attractiveness, likeability, trustworthiness, competence and aggressiveness of other people after looking at their faces for 100 milliseconds.
  • #117: http://www.linkedin.com/profile/view?id=36979992&trk=tab_pro Image credit: http://www.opt-imaging.com/