Tap into These 8 Visual Cues to Increase Your Conversion Rate

ADRIENNE WOLTER | 10 OCTOBER 2016

 

Tap into These 8 Visual Cues to Increase Your Conversion Rate

Are you capturing all the leads from your website that you could be?

Chances are, the answer is no.

Conversion Rate Optimization (CRO) is the practice of making tweaks in order to increase the percentage of visitors that convert into customers.

Much of the changes you can make revolve around adding visual cues that draw your visitors’ eyes and guide their attention to the call-to-action button you’d like them to click or the lead form you’d like them to fill out.

But what exactly are those visual cues?

You’re in luck – keep reading to learn eight different visual cues you can use to kick your conversion rate into high gear.

1. Color Psychology

According to some scientists, you only have seven seconds to make a strong first impression.

Your visitors are making snap judgments about your website from the moment they click a link to your website or press enter after typing your URL.

Perhaps your site takes a few seconds to load, but the clock is already ticking. By the time your site fully loads, you may only have three or four seconds left to make a good impression. That’s barely enough time to read even the simplest of CTAs.

Colors set the stage for the content to come. The hues you wrap your website in have a huge amount of influence over your visitors’ perceptions of your products or services and the emotions they feel about them.

If your visitor’s eyeballs are flooded with color the moment your website loads, that color is going to play into the thoughts passing through their minds.

Blue is a favorite color around the world, but warm colors like red and orange have been shown to have the most measurable impact on attracting shoppers and encouraging snappy buying habits.

I’ve written about the universal associations we have with colors in the past, and those associations still hold true when they are forming the backdrop (or even a highlight color) on your website.

visual-cro-01-hike

You can clearly see the color that Hike, a POS software provider, is pushing on their homepage. The whole page feels unified, from the backdrop of the CTA, to the logo, to the model’s shirt, and even to small details like the “free trial” button on top and the button on the iPad.

This delicate shade of green-blue begs associations with trust, security, and wealth. Your eye is drawn to the block of color, and subsequently, the CTA contained within.

2. Contrast

As powerful as color is in guiding users to take a specific action, I would say that color is pretty useless if not also used in conjunction with contrast. In many ways, contrast is an even bigger factor in drawing a visitor’s attention.

This doesn’t mean you should necessarily rely on a flashy color like red or orange.

Red naturally grabs attention, but if your page is mostly red already, a red CTA will just blend in. In that case, a blue or green button would be what stands out best.

You can see an example of this in the example above; the dark grey “Start Your Free Trial” button within the color block is the only thing that color in that whole half of the page, so it commands a lot of attention.

visual-cro-02-careerzoo

You can see an example of contrast being used for a CTA on the website for Career Zoo, an annual Irish career fair.

They actually employ a very similar teal color, with a lot of black, but what really jumps out of this page is that bright red “Register” button, placed conveniently in the center of the page above the fold. That is a button designed to earn clicks.

3. Text Emphasis

The size of the text you use on your website naturally create a hierarchy of information. If you are familiar with HTML code, you probably know that header tags go from size 1, the largest, to size 6, the smallest.

This is kind of like a priority order and helps users more efficiently scan your page to find the information they are looking for.

It sounds obvious, but if you want to draw attention to a particular word or phrase on your website, just make it big. Huge text can have a huge impact on the visitor.

The actual fonts you choose have associations of their own, too – you can read my article exploring some of those connotations here.

visual-cro-03-heineken

Heineken uses a big, impactful font for their interactive interview tool, Go Places.

A huge and irresistible CTA seems painted right onto the wall, and the skew of the text even seems to be guiding the visitor to click the circle to start the interview.

4. Whitespace

Of course, the content of your website is the most important thing there, but don’t overlook the power of empty space. If part of your page is truly important, you need to give it room to breathe.

By clearing away distractions from your CTA, you are making it stand out even more.

visual-cro-04-rollpark

The landscape above the fold on Rollpark’s homepage is very sparse. There is an intriguing illustration floating in space, a small amount of text, and a bright yellow button with a lot of room around it.

The impact is so much greater – not to mention more likely to lead to a click – than if this space were crammed with information. Visitors can of course scroll (or click) to learn more, but their first impression is of a company unafraid of making an impact and letting their CTA breathe.

5. Containers

Another way to help a CTA stand out is to put it inside a container. In fact, that’s why you see so many calls to action inside buttons – the shape of the button gives the CTA a structure and presence on the page it wouldn’t otherwise have.

Even if some of your text isn’t clickable like a button is, it still lends it an air of importance if you put it inside of a shape.

visual-cro-05-mhdistillery

M&H Distillery’s branding revolves around stripes and boxes in mustard yellow and black.

This is even reflected in the design of the bottle. Here, the CTA “Discover Our Products” is subtly placed within a black box.

This offers the benefit of not having the difficulty of placing white text over two contrasting background colors, but it also neatly emphasizes the text and its importance.

6. Directional Cues

CTA still not getting noticed? You’re in luck – you can literally point an arrow at your CTA to make it more noticeable.

In fact, in eye-tracking studies, arrows were great for capturing visitor’s attention and herding it towards a particular spot on the page. Just look at this great example from ConversionXL:

visual-cro-arrows

Check out the third example from the top. In that eye-tracking study, more than any other one tested, the visitor’s eyes shot across the length of the arrow and spilled out over the form.

visual-cro-06-serioverify

Serio Verify has got directional cues down to a T.

Their landing page features an interactive scrolling feature that all begins with an arrow. This arrow leads to a path that fills in as you scroll, leading you down the page and through information about their services.

At the very end, the path leads you straight to a lead form for a free quote and evaluation.

7. Directional Gaze

If an arrow or line a little too obnoxious for your tastes, maybe the subtlety of a directional gaze will better suit your needs.

As people, we are drawn to photos of people, which can make them a focal point in eye-tracking studies, as you can see in the ConversionXL heat maps above.

However, not just any person will do the job – you will often see the best results if the person is looking at, or at least in the direction of, your CTA button or lead form.

It is natural for us to follow the eyes and look where someone else is looking, and when that gaze lands on the CTA, so will your visitors’.

visual-cro-07-edstafford

I like how Ed Stafford does this in this interactive survival challenge.

Not only is the man pointing his gaze towards the four large words spread across the scene – Fire, Water, Food, Shelter, the four essentials of survival – but he is looking straight at the “Start the Challenge” button at the bottom of the page.

8. Personalization

No one can say it better than Dale Carnegie, the public speaker and self-improvement guru from the first half of the 20th Century: “Remember that a person’s name is to that person the sweetest and most important sound in any language.” This quote drives home the power of personalization.

Many sites already have some minimal personalization; for example, often sites with user accounts personalize by putting the user’s name and sometimes their photo in the menu. Clicking these usually leads to one’s profile.

Newer tools are making it possible to personalize even further, using cookies to remarket products, or even IP intelligence to detect which companies are visiting your website and then serving up the goods and services that are most relevant to them.

This technology aims to lead to a “zero click” experience, where each visitor of your website is presented with exactly the information they arrived for, no more, no less.

Obviously, we are not there yet, but the potential is exciting and the technology to set this goal into motion already exists.

visual-cro-08-facebook

To see personalization in action, one need not go any further than their Facebook homepage.

Not only do I see my name and profile picture in various places around the page, but the algorithm tries to serve up content I am interested in, such as my aunt’s wedding photos, there are notes on the sidebar about my friends’ birthdays and some local news, and even the ads are personalized to me, remarketing two companies I have used in the past.

How to Test Your CRO

If you are making changes to features like your CTA or the placement of your lead form, there are certain tests that can be extremely helpful.

A/B testing and split testing allow you to serve up different versions of your page to an equal number of visitors, helping you determine which combination of elements performs the best. Google Content Experiments is a free tool built into Google Analytics that you can use to run these tests on your website.

Eye-tracking studies are another great way to see if the optimizations you are making are working.

Different tools can track visitor’s cursor movements and in some cases, their eye movements, on your website and turn this into a heatmap like those shown above. Hotjar is a tool you can try for free to track clicks, taps, and the way your visitors scroll.

Wrapping Up

So there you have it: eight visual cues that can dramatically increase the success of your CTA. Here’s the quick checklist:

  1. Use color psychology to shape your visitors’ first impression.
  2. Make the most important features of the page stand out using contrast
  3. Place emphasis on the most important text.
  4. Use whitespace to let your CTA breathe.
  5. Use containers to call attention to your CTA.
  6. Directional cues, like lines and arrows, can help guide the visitor’s eye.
  7. Consider the direction people in photographs are looking, and consider pointing their gaze towards the CTA.
  8. User personalization to create a more meaningful experience for the visitor.

What kinds of visual cues do you use on your site to guide your visitors towards your CTA? How could you tweak them to make them even better? Share your experiences in the comments below!

Want to learn how to grow your online business through awesome design, creative visual content and clever growth hacks?
We’re going to show you how.