How to Move Users Around Your Web Pages With Visual Aids

It’s common knowledge that attractive people work well in advertising images. Most marketers also know that the placement of images is influential to where a customer clicks. An aspect that’s not as well documented however, is the huge impact of where the subject in an image is looking or gesturing towards.

Recent developments in click through feedback and eye-tracking software has allowed testing on the effects of techniques like this, and we’ve seen a large impact in our own experiments which I’ll outline below.

The Theory of Visual Aids

While a user reads down a page his eyes will often follow the line-of-sight of people in the images on his screen. Images can convey a directionality in multiple ways, such as a child running toward something or the face of a woman directed towards something on-page. Since the user will often not be aware of this “psychological tug”, you can use it to direct their attention to a given point on a page.

This technique is powerful on its own, but can have a massive effect if combined with additional methods such as colour conditioning. Colour conditioning is a method for encouraging the user to look at items of the same style and colour as one he’s previously viewed. For example, after drawing a customers attention to some information contained in a specific blue box, next time there is a similar blue box on screen the users attention should be drawn to it without the need for any other encouragement.

Setting Up a Visual Path Test

The process itself is relatively simple, consisting of the following steps :

Step 1

Decide where you want your user to travel and why. It’s pointless running a test if you don’t have a clear end goal in sight. Decide on the objective behind sending the customer there so you have an additional metric to measure, for example, “I want more clicks to go to my sign-up box on the right – with a higher final number of people completing my sign up form?”.

 

This stage is crucial, testing serves little purpose without an aim and clear result from “improving” that area.

Step 2

Identify a target audience and select a visual aid that is suitable for them. Most companies will have a clear idea of who they need to target and what will appeal to them, so test around variations of that image set to start with.

Annoyingly, the market my company operates in is open to nearly every demographic, so we have to conduct initial tests to determine the base image types (male/female, mature/young, Casual/Official) before we can start testing variations of them.

Step 3

Put together the elements of your page. If you have a single link, item or offer you want to draw attention to; place your images directing gestures and visual cues towards it.

 

If you’re trying to draw attention to a selection of offers or points have an individual looking down or around the area near the offers.

Our Tests

To test these techniques out my company Stinkyink conducted a split test with our monthly newsletter. A split test is one where half the target audience is sent one version of an e-mail or directed to one web page while a separate version is viewed by the rest of the group. This split allows the differences between the pages to be assessed and it’s impact on user browsing can be analysed.

In one of our early tests we sent a pair of e-mails. Both had a marquee style banner with several smaller offers, with a visual aid looking/gesturing towards either the marquee offer or down on all of the offers.

Crucial – Everything else about the e-mails was identical.

Version 1

 

Version 2

The Results

We collected some really interesting results. Please note total click figures for these emails were fairly similar, so results are quoted as a percentage.

Version 1 managed to draw 51% of click traffic directly to the marquee banner, a pretty rare occurrence for a non-targeted e-mail with multiple offers. 26% of readers clicked through to the 4 specific offers below.

That leaves 23% of clicks in the lower content – additional descriptions and information about each offer, for individuals whom don’t load images by default etc.

The click dispersion from Version 2 was dramatically different. Only 8% of users clicked the main marquee (down from 51%), while an almost unbelievable 61% of clicks were received by the four specific offers below, (up from 26%).

The remaining 31% read down the e-mail to the additional content.

By simply changing the top image we significantly altered the click distribution and performance of our email. What’s important about this is the varying conversion rate of sections of our email. Targeted offers and the lower content in the emails typically convert far more than headline banners, so this test provided some golden pointers on future image design for us.

Just in case of chance and bias we have run additional tests, showing similar results, and we shall be continuing to run tests in this region to further understand how visual aids impact customers behaviour.

Now it’s your turn. I’d be interested in hearing from anyone else who’s tried using visual aids and wants to share their experiences, or anyone who just wants to ask a question, in the comments below.