CLOCKWORK CONVERSION COLOR TEST :: 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

:: 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 @aschottmuller

:: 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 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

"OPTIMIZING FOR THE EYE" TOP CHALLENGES:  Time Consuming to Evaluate  Suggestions Seen as Subjective  Difficult to Measure Impact :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

"OPTIMIZING FOR THE EYE" GAME PLAN:  Quickie Usability Tests  Color Physiology & Strategy  Analytics Tracking Recon :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

QUICK & EASY USABILITY TESTS :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

USABILITY HOW EASY IS IT TO USE? :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

Image source: HDW wallpapers IF USERS CAN'T FIND OR SEE IT... NOTHING ELSE MATTERS. (i.e. your persuasive content marketing plan is moot.) :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

5-SECOND TEST A web page will be displayed for five seconds. See what you can remember. READY? :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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? :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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) :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

ROUND 2 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

5-SECOND USABILITY TEST Example: midwest-dental.com :: 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? :: 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) :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

Optimize so the user's response quickly and confidently yields the accurate desired info. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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 ----- :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

'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? :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller VIRTUAL REALITY EXPERIENCE: Squint your eyes and move your head back and forth.

COLOR PHYSIOLOGY "The Clockwork Conversion Color Model" :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

What's the Call to Action? :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller CLICK if you AGREE ALTERNATIVE: "I like wasting time scanning a page to find my logical next step."

:: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

DOMINANT COLOR EYE EXHAUSTION = COMPLEMENTARY COLOR HALO Magenta and Lime are complementary (opposite) colors. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

How 'bout another color? (Better see that again. Maybe it's a fluke.) :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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? BLUE DOT COLOR ILLUSION

If performed as described, a subtle halo of ORANGE-YELLOW dots should echo the BLUE dots on the page. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

Blue and Orange are complementary (opposite) colors. DOMINANT COLOR EYE EXHAUSTION = COMPLEMENTARY COLOR HALO :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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

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 happens? AQUA DOT COLOR ILLUSION

If performed as described, some of the BLUE dots should faintly DISAPPEAR. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

Disappearing Text Isn't Magic! :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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... :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

That's COMPLEMENTARY with an "e" ...as in opposite. Although technically this is complimentary (free) as well. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

:: Usability Conversion Optimization | Angie Schottmuller @aschottmuller HUMAN EYE RECEPTORS

Choose Your Color Wheel Wisely :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

The eye WANTS to find that complementary color. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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 CLOCKWORK CONVERSION COLOR MODEL - KEY #1 Opposite color for CTA COLOR WIN

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example : LaunchList Pro Use Complementary Color CTA Button CLOCKWORK CONVERSION COLOR MODEL - KEY #1 Analogous CTA color COLOR FAIL

:: Usability Conversion Optimization | Angie Schottmuller @aschottmullerReference: "Clockwork Conversion Color Model" by Angie Schottmuller © 2012, Example: FreshDesk.com Use Complementary Color CTA Button CLOCKWORK CONVERSION COLOR MODEL - KEY #1 Same color for CTA COLOR FAIL

RESERVE COMPLEMENTARY COLOR ZONE FOR CTA ONLY CLOCKWORK CONVERSION COLOR MODEL - KEY #2 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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 CLOCKWORK CONVERSION COLOR MODEL - KEY #2 Salmon (orange TONE) CTA color repeated on page COLOR FAIL

USE PURE COLOR FOR THE CTA BUTTON CLOCKWORK CONVERSION COLOR MODEL - KEY #3 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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 CLOCKWORK CONVERSION COLOR MODEL - KEY #3 Tan (Tint) CTA color :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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 CLOCKWORK CONVERSION COLOR MODEL - KEY #3 COLOR FAIL

USE SHADES, TONES & TINTS FOR NON-CTA COLORS CLOCKWORK CONVERSION COLOR MODEL - KEY #4 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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 CLOCKWORK CONVERSION COLOR MODEL - KEY #4 Triad of primary PURE colors... (major neutralization needed) COLOR FAIL

Let the CTA and Hero Shot stand out. All else is the stage. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

CLOCKWORK CONVERSION COLOR TEST :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller ✔ 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... :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

WHICH RULE IS BROKEN? :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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... :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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

CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD 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+

CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD 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

CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD 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+

CLOCKWORK CONVERSION COLOR MODEL - CTA AUDIT SCORECARD 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+

CLOCKWORK CONVERSION COLOR TEST :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller ✔ 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 ✔ ✔✔

ANALYTICS TRACKING RECON FOR UX & CRO :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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

MEASURE "BOUNCE" CORRECTLY :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

"BOUNCE RATE" (ORIGINAL) PRIOR TO JULY 2012 GOOGLE ANALYTICS: User enters and exits the same page. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

"Why didn't somebody tell me??" :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

:: Usability Conversion Optimization | Angie Schottmuller @aschottmuller WATCH YOUR BOUNCE RATE PLUMMET... BEFORE ABR: 70%-90% AFTER ABR: 5%-20%

Now... BOUNCE RATE matters :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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. :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

GA EVENT TRACKING FOR CRO: :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller 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 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

"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 :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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.) :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

QUESTIONS? :: Usability Conversion Optimization | Angie Schottmuller @aschottmuller

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

CLOCKWORK CONVERSION COLOR TEST :: Usability Conversion Optimization for the Eye

You are reading a preview.

Check these out next

CLOCKWORK CONVERSION COLOR TEST :: Usability Conversion Optimization for the Eye

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Similar to Usability Conversion Optimization for the Eye (20)

More from Angie Schottmuller (13)

Recently uploaded (20)