June 18, 2015 | Sarah Danks

Physiology is the Key to Unlocking Conversions

CRO Tips from Angie Schottmuller

On June 5, 2015 Angie Schottmuller the marketing optimization advisor spoke to a wide-eyed audience at the Unbounce Conversion Road Trip in Chicago. I’ll admit I’d already had a sneak preview of her slides, but I was still wowed by the data she presented to us that day.

Angie’s made quite the name for herself within the conversion rate optimization (CRO) world: one of Forbes’ Top 10 Online Marketing Experts to Follow in 2015, Visual Website Optimizer and Optimizely labeled her a Top Conversion Optimization Expert from 2012 to 2014, she continually presents at conferences and writes for big-name company blogs (and sometimes offers her thoughts to smaller ones, like ours — check out her knowledge of tapping into your audience’s emotions to increase conversions)…

…suffice it to say Schottmuller isn’t just walking the walk; she’s talking the talk. Literally. Here’s the information she showed us in Chicago.

Design Physiology Tricks to Boost Conversion

Everyone knows you only have one chance to make a first impression on your landing page visitors. Well, according to Google research,

“People form first impressions about web pages in 17 milliseconds.”

A millisecond, by the way, is one thousandth of a second. So, you’ve got a relatively (teeny) tiny window in which to favorably impress your web visitors. Angie’s presentation at the Conversion Road Trip opened our eyes to a whole new world of landing page design…

…using the science of human physiology to unlock the mysteries of a good user experience (UX) that will ultimately land you more conversions.

Color Perception + Conversion Colors

Here’s how color perception works: a color exists physically. We humans detect it physiologically.

What does that have to do with landing pages? Well, the rods and cones in our eyes can determine for us what we see on the web. Check out this optical illusion. This is a circle of pink dots, right? Initially, yes. Let your eye follow the clockwise motion around the wheel and you’ll  see a bunch of pink circles.

But focus on the + in the middle of the circle for about 6 seconds:

…first the “moving dot” turns green. Aaaaand then all the pink dots disappear and you’re left with one lone green dot, traveling about the circle alone.

Cool, huh?

Why does that happen? Because of this fun bit of biology: if our eyes are inundated with a specific color, they’re built to seek out the complementary color. In regards to landing page design, this means your color palette needs to work the way our eyes do.

So you see, it doesn’t matter which color you decide to use for your CTA…

…what matters is that you use a complementary color for your call to action.

Every website has a color theme. Blues, greens, reds, it doesn’t matter — just be sure to pick the complementary color on the wheel for your site’s CTA.

Here’s an example of a landing page CTA button color fail:

Why is this a fail? Because the color palette is blacks and blues, but they used green for the call-to-action button. Not a complementary color, so it doesn’t stand out.

Instead, check out this example:

See the difference? They chose the complementary color of their theme and it makes the CTA really pop (I know designers HATE that term, but it’s true!).

Now, for those designers thinking anything they want to stand out must be in the complementary color: beware! The CTA is the most important aspect of your landing page, so reserve the true (pure) complementary color for that and that alone.

Call-to-Action Clarity

There isn’t just one complementary color that can work for the call-to-action, Angie says. You can use anything within the color “zone” of your complementary color:

While your CTA needs to be a pure color, it’s best to use neutralized colors — tones, shades or tints — of your non-CTA colors on your landing page. This will ensure your visitors’ eyes are drawn right to the call-to-action.

So, when planning out your landing page’s color scheme, remember to pick whatever main color scheme you want, but keep these four things in mind:

• CTA must be complementary to landing page color scheme
• Reserve the complementary color zone for CTA use
• Use only pure color for the CTA
• Neutralize non-CTA colors

Here are a couple of examples, graded on their use of color (and whether or not they used complementary colors, reserved them only for the CTA, etc.).

The first is a slightly-better-than-failing grade:

See how they’re not using a pure, complementary color for the CTA? Nor did they reserve the CTA color for JUST the CTA.

Instead, check out this A+ example:

Notice in this example how the CTA is not only a complementary color, it’s a PURE color. They’ve also reserved that color for just the call-to-action. Nicely done.

Want to know quickly and easily if your landing pages stand up to visitors’ visual expectations? Angie offered up 3 UX tests to assess web page clarity. Check ’em out!

Analytics Tracking & Tools

So once you’ve tested your landing pages’ visuals and applied human physiology to obtain more conversions, now what?

Heatmaps

Well, you can run them through any number of heat mapping tools to simulate human eye tracking behavior. Angie recommends Attention Wizard, ClickTale, MouseStats and EyeQuant:

While these simulated tests might not be human, they’re a great way to get a good idea of where people’s eyes will land — and linger — before you launch your landing pages.

Some things to keep in mind when it comes to eye tracking:

1. People love to look at faces. If you’ve got face imagery on your landing page, be sure it’s in a position where you want visitors’ eyes to linger, because invariably they will focus on this area.
2. If you have a lot of empty white space, be careful it doesn’t detract from the goal. Visitors’ eyes can wander over to where there isn’t even anything to look at.
3. We love to be led — so if you’ve got arrows or other directional cues, be sure they’re pointing right where you want our eyes to land.
4. Beware of competition between hero shots/imagery/messaging. People’s eyes will start bouncing all over the page, trying to figure out where to land.

Simulated attention heatmaps can be helpful, but the most important tool at your disposal will track actual visitors, their activity and of course, their conversions.

Analytics Event Tracking

But, that being said, one must be very aware what you’re tracking…or NOT tracking. Namely, bounce rate. Are you measuring it correctly?

Most likely you’re using Google Analytics, and if you are, you’ve probably got a skewed idea of what bounce rate actually is. See, they’ve changed the definition within the past few years.

Up until mid-2012, Google defined bounce rate as “the percentage of visitors to a particular website who navigate away from the site after viewing only one page.” That’s all well and good, but since July 2012 the definition has changed:

“Bounce rate is the percentage of single-page sessions in which the person left your site from the entrance page without interacting with the page.”

But what’s that even mean? It means Google has to log an event to qualify any visitor as having had an interaction (and thus not bouncing). So, if you want to be able to track an actual bounce — which Angie defines as a visitor landing, then leaving within 5 seconds — you’ve got to add event tracking code to your analytics code.

Angie’s even so kind as to give this Google event tracking code for CRO away for free. Of course, if you do add this tracking code, be ready for your bounce rate to plummet!

Key Takeaways

You can have great, persuasive content. You can have the neatest design ever…

…but if users’ eyes aren’t liking it, you won’t get the conversions.

Remember:

• The human eye seeks out complementary colors.
• Which color you design in doesn’t matter; as long as you reserve the complementary color zone for CTA.
• Design your landing page as if every visitor is drunk.
• Test your landing pages to see what works to make a good first impression.
• Be sure you’re tracking events correctly, especially bounce rate.

Use smart physiology to set your website up for success. And if you still struggle with getting your physiology, UX and design to align, contact Angie for a free CRO consultation.