DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Low Conversions? Here’s How to Spot Web Design Bottlenecks Strangling Your Visitors

by Today's Eggspert

Conversions are a numbers game.

Sure, quality matters. You don’t want to fill your funnel for the sake of quantity alone.

But at the end of the day, driving more site conversions is all about maximizing the amount of people who visit > see > click > interact > opt-in > convert.

That’s it. Really that simple.

All the fancy metrics and flashy tactics plastering the interwebs are designed to do just that.

Your design has one of the biggest bearings on that equation. And yet, it’s commonly performed in a vacuum without any real context.

That’s a problem. Because it only takes a few milliseconds for people to form a first impression. And 94% of the time it comes down to design.

The result? Conversion roadblocks that trip up would-be customers right at the moment of truth.

Fortunately, there’s a tool for that.

Here’s how to iterate design based on user behavior to unlock bottlenecks that are strangling your conversions.

How Are Visitors Starting Their Journey?

There’s an age-old debate among marketers and copywriters.

Long or short pages? Long or short copy?

The answer, like most for complex questions, is it depends.

It depends on where that person is coming from.

Someone finding you the very first time through a Google Ad should see a much different page than someone from a customer database lifecycle email.

Which means it also depends on your prospects “state of awareness.” In other words, how well that person already knows who you are and the value behind what you’re offering.

A short, to-the-point page would be fine (and preferable) for that person – if they are a past customer. While a much longer, in-depth, and persuasive one would be required for a stranger from cold traffic.

Inbound traffic segmentation helps you bridge this treacherous gap; creating multiple versions of a page that’s tailored or unique for each individual.

funnel segmentation

Image Source

However, in real life, that doesn’t happen very often.

What happens instead, is that one page is haphazardly thrown together and meant to cater to EVERYONE.

The result? It works for no one.

The Scrollmap feature can help you understand content consumption. The depth of scrolling indicates whether or not people are reading everything a page has to offer (or if they’re just bouncing without going below the fold).

Here’s a perfect example:

real life scroll map scenario

In an ideal world, this entire page would be lit up like a rainbow, with beautiful yellow, red, and green hues.

Instead, it resembles the ocean; with a nice colorful coral reef at the top and the deep abyss (where no one ventures) below the fold.

I love coral reefs. They’re amazing. But not on websites or landing pages.

Wanna see a good example? Check this out:

ideal scrollmap example

Now that, my friends, is a thing of beauty.

Sure, there are a few weak (greenish) spots here or there. But overall it tells me people are actively engaging with this entire page.

And that’s impressive, because (1) this is a long-form landing page, and (2) the visitors are primarily cold traffic from ads (which means they’re strangers who’re typically less likely to stick around).

TL;DR?

Watch scrolling depth and page consumption to understand if you’re doing a good job presenting information to visitors the minute they hit your site.

Can People Easily Navigate Your Site?

User-flow optimization gets no love.

Peeps will upvote every single Inbound article that mentions an A/B test. Even though in reality (and in the long run), A/B tests don’t always make a significant dent in results.

The Cliff Notes explanation of ‘user flow optimization’ is that you want to (a) align and (b) reduce friction along each step of your site’s conversion funnel.

So if someone comes to your homepage first via a Direct source (like typing in your URL into the address bar), you want to present them with a clean and easy path through the navigation, services or products page, and eventually an opt-in or purchase.

They’re hitting your site with something specific in mind, and as we saw in the last section, your site’s pages should be organized appropriately to get someone to that critical next step.

What you don’t want, is to treat everyone the same and show them a million different options. Like this example:

crazy egg overlay example

The Overlay feature shows you different elements that receive clicks on a page.

So the first thing you probably notice on this page, is that clicks are all over the map. Literally. There’s like 20+ options for someone to take. And that’s just in the header!

In the now internet-famous ‘Jam’ study, Sheena Iyenger found that reducing the options people had to choose between actually raised conversions (six times more likely, in fact).

The risk with overwhelming visitors with too many options or ‘paths’ to take, is that you might dilute your efforts and distract visitors. Traffic is going to be spread too thin throughout your site, and you won’t get enough people into the key converting pages (that make you the green).

Instead, focus. Pick out the one or two (max) primary objectives on a page and base the entire design around calling visitor’s attention to that element.

Want people to add a product to their cart? Design around that. Want people to join your email marketing service? Design around that. Want people to opt-in for quotes? Design around that.

Like so:

heatmap example for medical insurance website

Literally the only thing we want on this page (and therefore, the only goal of the design for this page), is to get more people to click that damn button.

That’s it! And it’s working, as evidenced by that white-hot button that this Heatmap is showing.

The majority of page interactions just so happen to occur on the primary CTA that drives the most business.

That’s ain’t an accident. Or at least, it shouldn’t be. Page interactions shouldn’t be left to chance.

Another way to analyze this is to look at click distribution on a page. The List report will make it very obvious whether-or-not your page is doing its job.

webpage element click breakdown

The fact that the overwhelming majority of page visitors are clicking on the primary action here is a good sign. The fact that the top three results all revolved around the same primary CTA is a great sign.

Is Your Problem Conversions, or Reach?

When people aren’t seeing the conversions they want, they immediately start messing with the landing page.

Maybe the headline is off. Maybe the button needs to be green. Or maybe the hero image needs to be more… hero-y.

But here’s the thing:

Conversions are a numbers game.

Sure, it’s possible that those landing page elements need to improve.

However…

How many visits is that landing page receiving?

If average conversion rates hover around 1-9% (depending on if you’re a product or service company), maybe your rate isn’t so bad after all.

In other words, your problem isn’t page conversions necessarily. It’s reach.

You need to get more people to see that page in the first place.

Optimizing your user flow is step one then, because it helps people navigate and eventually end up at those conversion pages.

But you should also pay attention to the internal CTA’s you’re using on the pages just preceding those to see if people are actually using them as intended.

Many times these directional CTA’s on your site ‘fly under the radar’ because there’s no macro-conversion, Goal, or event to track. So you don’t have visibility and aren’t alerted when things aren’t happening as predicted.

For example, what’s missing on this page?

This is supposed to be a heatmap example. This is supposed to have a bunch of little dots all over those two images, indicating how many clicks each page element is getting.

suitcase screenshot

This is supposed to show that people are clicking on these portfolio images which will bring them deeper into a client-work page that will showcase the awesome results and inspire them to contact this company for services.

But there’s nothing. Nada. Zip.

No surprise then, that there ain’t no inbound leads coming in, either!

It’s not the form’s fault. Or the landing pages. But these CTA’s that are supposed to be directing people to those things.

Here’s another bad example, where the page that’s supposed to be ‘selling’ the next action isn’t doing it’s job properly.

heatmap on services webpage

Clicks and page interactions are all over the map. So much so, most people are clicking another top-level nav or menu elements instead of diving further, deeper into the site.

That’s like hitting the Back button. A visitor feels like they made a mistake and are leaving the Services page to go somewhere else.

You know that whole Jay Leno, Conan O’Brien fiasco?

Conan took over, and Jay was bumped to the earlier time slot initially. But Jay’s show wasn’t working. It wasn’t building a captivated audience, so the ‘lead-in’ to Conan’s show was weak.

Most rational people reading this can immediately tell you who’s funnier. Who more deserved the limelight. Who shoulda stuck around and got the chance to show their worth.

And yet Conan got axed.

That, in a nutshell, is what’s happening here.

Now for the good stuff.

Let’s look at a few sections on a long-form landing page that indicate interactions are working properly.

heatmap on landing page example

For people to eventually convert on this page, they need to understand the value of what the service is.

Under those glowing lights in the image above are numbers that switch the page content to the right of it. So when someone clicks (like they are, according to those hot-spots), the page content updates to highlight a few different value-building points.

A little further down that page, is another similar section designed to show (not tell) the value behind a service. Here, people are clicking and interacting with the options on the far right that again switch out the picture to show different angles of the service.

heatmap on landing page

There’s almost so many clicks you can’t even see each option’s icon. I’m about to weep with joy.

Even though this is technically the same page as the conversion event you want, it’s a long and in-depth one.

The fact that people are interacting with each section as intended (rather than just scrolling all the way down ASAP to look at the price) shows that they’re interested, developing trust, and beginning to understand what the eventual conversion is all about.

So by the time they reach the bottom of the page (or the next one where they’re supposed to take action), things work as intended. For example:

quote request heatmap

A relatively minimal and simple page, no doubt. Because you want people to focus only on filling it out that form.

Pricing table pages are similar. And using a combination of behavior reports we’ve looked at so far – like the Heatmap, Scrollmap, Overlay, and List – you should be able to quickly spot how to make page changes that should improve results.

People not clicking on what they’re supposed to be? Or they’re not scrolling down and consuming enough? Too many options or too long of a page?

It should become pretty clear, pretty fast. Reduce a few of the irrelevant, redundant, or unused options and test again.

non-clicks

Conclusion

Websites are living, breathing things.

They’re not static. And they’re never finished.

As your company comes out with a new strategy for the next year or rolls out new campaigns for the new products that were unveiled, site’s are updated.

But too often, they’re updated based on trends. Or aesthetics alone. (Or even worse, HiPPOs.)

That’s art. Not design.

Design should channel intention. It should funnel and persuade and move people from A to B.

You don’t always get it right the first time. No one does.

But if you watch user behavior closely with a few different techniques, you can quickly spot the bottlenecks and iterate fast enough before it’s too late.

About the Author: Brad Smith is a marketing writer, agency partner, and creator of Copy Weekly, a free weekly copywriting newsletter for marketers & founders.

One Comment

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Today’s Eggspert

This article was written by today's Daily Eggspert. If you would like to contribute as an Eggspert, please reach out to us here.

ONE COMMENT

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Praveen says:
    December 21, 2016 at 5:04 am

    Hi Mr patel i am following all your websites quicksprout, crazyegg, Kissmetrics you are really superb, i bookmarked all your websites its helped me a lot.

Show Me My Heatmap

Set up some new tests today with - awesome tool, recommend for folk

Alex Peters

@alexpeterss