Usability Conversion Optimization for the Eye

Image creditsiliconangle.com
PHYSIOLOGY TRICKS TO BOOST UX & CONVERSION
You'll never see color the same again...
OPTIMIZING FOR THE EYE
:: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

Angie Schottmuller
#HeroConf - Oct 14, 2014
Optimizing for the Eye:
Mad Science & Illusion Keys to Conversion

ANGIE SCHOTTMULLER
Growth Marketing Advisor
@aschottmuller
linkedin.com/in/angieschottmuller
angie@interactiveartisan.com

#HeroConf #CRO
@aschottmuller
Tweet this session!

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerImage source: josreuser.wordpress.com

PEOPLE FORM FIRST IMPRESSIONS
about other PEOPLE
in 100 milliseconds
That's 0.1 or 1/10th of a second.
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerSource: Princeton University Research Study 2006, Reference: ConversionXL.com, Image source: reddit.com
attractiveness, likeability, trustworthiness, competence, aggressiveness

PEOPLE FORM FIRST IMPRESSIONS
about WEB PAGES
in 17-50 milliseconds
That's 1/59th - 1/20th of a second.
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: ConversionXL.com, Google Research 2012. Image source: cheapwebdesign.co.uk
2-6X
FASTER

Image credit: michaelsamuels.com
What the eye SEES and the ear HEARS,
...the mind BELIEVES.
~ Harry Houdini, Magician

"OPTIMIZING FOR THE EYE"
TOP CHALLENGES:
 Time Consuming to Evaluate
 Suggestions Seen as Subjective
 Difficult to Measure Impact

"OPTIMIZING FOR THE EYE"
GAME PLAN:
 Quickie Usability Tests
 Color Physiology & Strategy
 Analytics Tracking Recon

QUICK & EASY
USABILITY TESTS

USABILITY
HOW EASY IS IT TO USE?

What's wrong with this picture?
A recycling bin at Austin-Bergstrom Airport.. Source: claydelk.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

Image credit: Bearhat Studios
"BAD usability equals
NO customers."
~Jakob Nielsen, 'Designing Web Usability' Author

Image source: HDW wallpapers
IF USERS CAN'T FIND OR SEE IT... NOTHING ELSE MATTERS.
(i.e. your persuasive content marketing plan is moot.)

5-SECOND TEST
A web page will be displayed for five seconds.
See what you can remember.
READY?
SLIDESHARE USERS:
Improvise by counting on your hand.

5-SECOND USABILITY TEST
Example: Byer's' LeafGuard :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

5-SECOND TEST RESULTS
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?

IN 5-SECONDS A USER SHOULD KNOW...
Example: midwest-dental.com
WHAT ARE THEY OFFERING?
WHO'S THE
COMPANY?
WHAT'S THE
CALL-TO-ACTION?
DO THEY APPEAR
CREDIBLE? (-1, 0, +1)

ROUND 2

5-SECOND USABILITY TEST
Example: midwest-dental.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

IN 5-SECONDS A USER SHOULD KNOW...
Example: midwest-dental.com
WHAT ARE THEY
OFFERING?
WHO IS THE
COMPANY?
WHAT IS THE
CALL-TO-ACTION?
DO THEY APPEAR
CREDIBLE?
(SKETCHY / NEUTRAL / LEGIT)

Optimize so the user's response quickly and
confidently yields the accurate desired info.

6-FOOT TEST
View the page on your screen standing 6-feet back.
(Hold your mobile at arms length for similar effect.)
READY?
Image credit: immediateentourage.com
------ 6 feet -----

Example: championwindow.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

WHAT IS THE MOST OBVIOUS
ELEMENT ON THE PAGE?
6-FOOT USABILITY TEST (MOCK-UP)
Example: championwindow.com
WHAT ARE THEY OFFERING?
WHAT IS THE PAGE ABOUT?
WHO IS THE COMPANY?
IS THE LOGO IDENTIFIABLE?
GOAL:
1- Call-to-Action Button
2- Hero Shot Image/Video
3- Headline

'USER IS DRUNK' TEST
Ask an intoxicated person to perform a webpage task.
Then watch and document results for deeper analysis
...and insightful entertainment!
Cheers to the UX geniuses at Squareweave for the idea!
Usability Test Credit to Squareweave: ▶ The User is Drunk - YouTube http://j.mp/1i2tpnV :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

"USER IS DRUNK" USABILITY TEST
Example: bigcommerce.com. Usability Test Credit to Squareweave: ▶ The User is Drunk
ARE ALL
DISTRACTIONS
REMOVED?
DOES PAGE
FUNCTION
MAKE SENSE
IF BLURRY?
IS THE CTA
REPEATED?
ARE THERE SIMPLE,
VERY SPECIFIC
GUIDED DIRECTIONS?
VIRTUAL REALITY EXPERIENCE: Squint your eyes and move your head back and forth.

COLOR PHYSIOLOGY
"The Clockwork Conversion Color Model"

What's the Call to Action?

Example site: Sephora.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

Example site: hellobar.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

WHAT'S THE CALL-TO-ACTION?
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerExample site: WilliamSonoma.com 3/10/14

Example site: Velti :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

The CALL TO ACTION should be the
FIRST THING TO STAND OUT
on any piece of marketing.
CLICK if you AGREE
ALTERNATIVE: "I like wasting time scanning a page to find my logical next step."

FORGET THIS STUFF FOR A
FEW MINUTES

COLOR PERCEPTION
Image source: dot-color.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller
PHYSICAL
Existence
PSYCHOLOGICAL
Meaning
PHYSIOLOGICAL
Detection

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerImage credit: iStockphoto/Erik Reis

Reference: wikipedia.org/wiki/Optical_illusion :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller
DIRECTIONS: Stare steadfast at the black "x" for 10 seconds. (Avoid blinking or side to side motion.) What colors do you see?
FUCHSIA DOT COLOR ILLUSION

ANYONE SEEING SPOTS?
Image credit: hdwallpapers.cat/ :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

If performed as described, a subtle halo of
LIME dots should echo the MAGENTA dots
on the page.

DOMINANT COLOR EYE EXHAUSTION
= COMPLEMENTARY COLOR HALO
Magenta and Lime
are complementary
(opposite) colors.

How 'bout another color?
(Better see that again. Maybe it's a fluke.)

DIRECTIONS: Stare steadfast at the black "x" for 10 seconds. (Avoid blinking or side to side motion.) What colors do you see?
BLUE DOT COLOR ILLUSION

If performed as described, a subtle halo of
ORANGE-YELLOW dots should echo the
BLUE dots on the page.

Blue and Orange are
complementary
(opposite) colors.
DOMINANT COLOR EYE EXHAUSTION
= COMPLEMENTARY COLOR HALO

Image source: drtylndry.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller
"I can see your halo,
halo, halo..."
~ Beyonce

DIRECTIONS: Stare steadfast at the black "x" for 10 seconds. (Avoid blinking or side to side motion.) What happens?
AQUA DOT COLOR ILLUSION

If performed as described, some of the
BLUE dots should faintly DISAPPEAR.

Disappearing Text Isn't Magic!
Low contrast,
pure color
exhausts the
eye causing
colors to
disappear.
COLOR
FAIL

Image: Rainbow Bonita :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller
Mmmm hmmm. Those crazy ponies are dangerous!

Image source: hetras.wordpress.com
HERE'S YOUR COMPLEMENTARY COLOR
KEY TO CONVERSION...

That's COMPLEMENTARY with an "e"
...as in opposite.
Although technically this is complimentary (free) as well.

HUMAN EYE
RECEPTORS

Choose Your Color Wheel Wisely

Two Common Color Wheels
Image source: brandigirlblog.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller
RGB
(CMYK)
R
GB
RYB
R
YB

OPTIMIZE FOR THE EYE
Image source: brandigirlblog.com :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller
RGB
(CMYK)
RYB

THE HUMAN EYE JUMPS
3X A SECOND
TO CAPTURE NEW
VISUAL INFO.
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerResearch 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.
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerImage 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 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: Eyequant.com 3/10/14.
Use Complementary Color CTA Button
Opposite color
for CTA
COLOR
WIN

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example : LaunchList Pro
Analogous
CTA color
COLOR
FAIL

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: FreshDesk.com
Same color for
CTA
COLOR
FAIL

RESERVE COMPLEMENTARY
COLOR ZONE FOR CTA ONLY
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

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: HelloBar.com 5/1/13.
Reserve Complementary Color Zone for CTA ONLY
Salmon (orange
TONE) CTA color
repeated on page
COLOR
FAIL

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

Reference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: Kuno Creative
Use Pure Color for the CTA Button
Tan (Tint) CTA
color
COLOR
FAIL

Brown (orange
SHADE) CTA
color
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: ClubDivot.com
Use Pure Color for the CTA Button
COLOR
FAIL

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

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: Champion Window
Use Shades, Tones & Tints For Non-CTA Colors
Triad of
primary PURE
colors...
(major neutralization
needed)
COLOR
FAIL

Let the CTA and Hero Shot stand out.
All else is the stage.

CLOCKWORK CONVERSION COLOR TEST
✔
Is CTA color complementary
to the main 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 CTA color "zone” only
used for the CTA?
A four-point color optimization assessment for usability and call-to-action (CTA) clarity.
TINT
TONE
SHADE
PURE
✔
✔✔

Let's see if you were paying
attention...

WHICH RULE IS BROKEN?
COMPLEMENTARY: ___RESERVED: PURE COLOR: OTHER COLORS NOT PURE:___ ___ ___
Reference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: H.Bloom

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

CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD
COMPLEMENTARY:
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: H.Bloom
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A

COMPLEMENTARY:
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: ClickTale
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+

COMPLEMENTARY:
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: SalesForce
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A

COMPLEMENTARY:
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: Falcon Social
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: A+

COMPLEMENTARY:
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012. Example: UW-Eau Claire
RESERVED: PURE COLOR: OTHER COLORS NOT PURE: B+

ANALYTICS TRACKING
RECON FOR UX & CRO

Google Analytics Event Tracking:
• Viewed 5+ Seconds
• Viewed 15+ Seconds
• Scroll Beyond Fold
• Scroll to Page Bottom
• Jump-To CTA Links
GOT DATA?
MUST
HAVE
Here's the code: http://bit.ly/gaeventtrackingforcro

MEASURE "BOUNCE"
CORRECTLY

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

"ADJUSTED BOUNCE RATE" (ABR)
AS OF JULY 2012
GOOGLE ANALYTICS:
User enters and exits
the same page
WITH NO INTERACTION.
:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: Justin Cutroni - http://cutroni.com/blog/2012/07/27/rethinking-blog-metrics/
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.

"Why didn't
somebody tell me??"

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

Now... BOUNCE RATE matters

Now... BOUNCE RATE matters
BIG TIME
Message Match
Relevance
Page Load Time
Intent Clarity
Usability
ROAS
Note: Like conversion rate, bounce rate is page-specific. A roll-up aggregate metric means nothing.

GA EVENT TRACKING FOR CRO:
Here's the code. Just add it to your page!
INCLUDES:
• Adjusted Bounce Rate
• Scrolling (beyond fold, page bottom)
• Dynamic Click Tracking
tabs, jump-to buttons/links, file downloads,
click-to-call ph# [tel:], email [mailto:] , and
external domain links
http://bit.ly/gaeventtrackingforcro

MAD SCIENCE
WRAP-UP

"OPTIMIZING FOR THE EYE" RECAP:
Quickie Usability Tests
5-Second, 6-Foot, "User is Drunk" Tests
"Clockwork Conversion Color Model"
Physiology & Strategy
Quick wins and mega testing ideas (and insights)
Analytics Tracking Recon
Free GA code: http://bit.ly/gaeventtrackingforux

KEY TAKEAWAY:
Your persuasive content and design psychology
is futile if the user's eye can't detect it.
Use the Force
...of color physiology (and magical rainbow ponies when necessary.)

QUESTIONS?

Get Your Optimization Scorecard
...or contact me for FREE consultation
Angie Schottmuller | angie@interactiveartisan.com | @aschottmuller
STUNNED BY COLOR
PHYSIOLOGY?
Put the clockwork conversion color model to work!
Image source: opt-imaging.com

Usability Conversion Optimization for the Eye

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Usability Conversion Optimization for the Eye

Similar a Usability Conversion Optimization for the Eye (20)

Más de Angie Schottmuller

Más de Angie Schottmuller (14)

Último

Último (20)

Usability Conversion Optimization for the Eye

Notas del editor