ClickThrough’s head of web development Alan Rowe is always keeping up with the latest trends in conversion rate optimisation (CRO) and web design. Lately, he’s come across some great rules-driven user interface enhancements, and he’d like to share them with you.

Conversion optimisation and web development are inextricably linked. They share acres of space in the great digital marketing Venn diagram in the sky.

Best-practice conversion techniques dictate the way we make websites – and new developments in web design drive new, exciting and ever-more-subtle ways to turn visits into sales.

And being a web developer is a lot like being a magpie. We’re always looking for ideas and following trends, which we bend and shape to fit our own projects, and create brand new variations on tried-and-tested techniques.

On that note, I’ve seen a really exciting conversion optimisation trend develop recently. I call it ‘rules-driven user interface conversion enhancement’.

Rather than rely on static conversion points, this rules-driven approach only highlights conversion elements when certain ‘triggers’ are activated by the user.

If that comes across as slightly stuffy, it’s worth seeing it in action. It’s quite something.

Let’s get started with these three websites, which do it particularly well:

CRO Technique #1 – Page Element Focus

MoneySavingExpert.com

This is behaviour-driven CRO at its simplest – but it’s still extremely effective.

When you first visit the site, you see that most of it is greyed out, giving the newsletter sign-up box prime visibility.

CRO-MoneySavingBefore

If you choose to click close, the element sits naturally back onto the page.

CRO-MoneySavingAfter

On the surface, this isn’t much different to a standard pop-up window. It makes itself known to the user, and if the user isn’t interested, they can choose to close it and continue viewing the site.

However, because it remains an integral part of the page’s design, it just feels less intrusive.

And rather than disappearing once it’s closed – like a pop-up – this element stays rooted to the spot, so it’s easy for the user to find it and choose to sign up if the site meets their expectations. The decision to spotlight its position so explicitly makes the importance of the newsletter sign-up box very clear, whilst underplaying its use as a direct marketing tool.

MoneySavingExpert.com chooses to display this box for all first-time site visits. But it could just as easily be set to trigger following a referral (from Google, for example), and thus be tailored for different audiences and conversion routes.

CRO Technique #2 – Page Focus on Scroll

Shopify and Conversion Rate Experts

This is similar to the above, in that a certain page element is highlighted depending on certain conditions being met. This time, though, the element becomes more apparent as the user scrolls down the page.

Shopify’s blog is a good example of this. Look at the ‘free blog updates’ box sitting modestly on the right-hand side of the page:

CRO-ShopifyBefore

As the user scrolls down, it suddenly becomes a whole lot more noticeable – and follows them wherever they scroll.

CRO-ShopifyAfter

It’s a simple idea, done well. If you scroll down, you must be reading the content. If you’re reading the content, you must be interested. It’s a neat way of determining when a cold lead becomes a warm lead, and then encouraging buy-in, without ramming blog updates down users’ throats.

Here’s another example. Conversion Rate Experts has a sign up box that only appears when a user scrolls more than 50% of the way down a page:

CRO-ConversionRateOptimisationBefore

Up it pops (bottom left, next to the squirrel):

CRO-ConversionRateExpertsAfter

I’ve also seen this technique used to display social media elements on the left of a page when the user scrolls down.

CRO Technique #3 – Real-Time Chat Boxes on Timers

Cooksongold

Lots of websites choose to use real-time chat to add an easily-accessible human element to the conversion process.

But it’s important to use these sensitively. If you visit a site and instantly get a real-time chat window blocking your view, it’s easy to feel a bit of e-rage brewing.

Cooksongold and many others get round this problem by setting their real-time chat windows to activate only when a user has been viewing the site for a certain length of time, but still hasn’t made a purchase.

CRO-CooksongoldBefore

A little while later…

CRO-CooksongoldAfter

Using this simple set of rules, brands can effectively sort customers into two groups – ‘those who are likely to need help’, and ‘those who already know what they need’ – then adjust their user experience effectively.

Why These New Conversion Optimisation Techniques are Good, Clever and Important

These conversion enhancements are clever because, unlike traditional ‘hard-sell’ conversion elements, they’re not intrusive, and they try to second-guess users’ intensions.

Whether the guess is correct or not is unimportant.

The visual change only occurs according to user behaviour, or after a certain amount of time. Providing a user stays on the site long enough, they’ll see the visual change happen. Whether or not they like it, they WILL see it.

This is more effective than having all the flashy conversion elements focussed on the homepage, which can easily become bloated with slideshows, popups and other ‘look-at-me’ devices.

It will be interesting to play around with these techniques some more – I’m sure there are many possibilities for subtle-but-effective conversion points which have not yet been explored.

Did you find this page useful?

Comments

About the author:

Alan has 15 years of web development and database engineering experience for companies across a wide range of sectors including projects for Peugeot and Kia. Alan spent five years as Technical Director at a web development company and was also a trainer at Birmingham University teaching database driven web solutions.