Increasing clic rate (case study)

Jean-Claude Grosjean (an expert in AGIL methods, which I strongly suggest you read) has recently published the article “Web ergonomics: 8 tips to sell better on the Internet”.

This article talks among others about guiding the eyes by exploiting the Gutenberg diagram (tendency to read from the left to the right, and from the top to the bottom).

I wanted to share some screen composition elements with you: they will indicate the ideal placement of an action button.

To do so, I propose to work with two real examples, which are screens used in Jean-Claude’s article (dailyburn.com & goodbarry.com).

Increasing clic rate - examples

Before working on the best solution for these two screens, it is worthwhile to analyse the two screens using the ErgoSuite filter, a series of tools that predict human behaviour, created by Netway).

Remember that when we first look at a screen, our eyes automatically look at certain zones of the screen. The first zone is the so-called Netway Interface Sweet Spot Zone, the zone in which 90% of the first ocular fixations take place.

This zone is the basis used by our brain to analyse and interpret the composing elements of the interface. To do so, it will use the so-called peripheral vision.

Increasing clic rate - peripheral vision dailyburn.com

dailyburn.com

  • the button stands out very clearly
  • it is easy to see it and identify it
  • the button is also rather close to the foveal zone (the zone where we have 100% vision)
  • we can’t read the text but we can clearly distinguish there are three words in the button.

Increasing clic rate - B&W peripheral vision dailyburn.com

When analysing the screen using shades of grey (as if we only use the rods of our eyes), we reach the same conclusions.

Increasing clic rate - Peripheral vision goodbarry.com

goodbarry.com

  • the button gets lost in the blue at the bottom of the page
  • it is not clearly identifiable
  • we can’t distinguish the number of words in the button.

Increasing clic rate - B&W Peripheral Vision goodbarry.com

The problem is even clearer when we look at the interfaces in shades of grey.

The signal the button will send to our brain is much weaker than the one sent by the dailyburn.com site.

One of the variables defining the right position of a button is its capacity to distinguish itself from the other graphical elements of the screen in peripheral vision mode.

Let’s continue our analysis. Another important factor is whether the button can easily and quickly be clicked.

Increasing clic rate - Pointing Effort dailyburn.com

dailyburn.com

  • wherever the cursor, the button is accessible using normal effort (yellow circle).
  • even better: the button is easily accessible from all important visual elements (green circles)

Increasing clic rate - Pointing Effort goodbarry.com

goodbarry.com

  • if the cursor is in the top main navigation, the action button is accessible using a major effort (orange circle)
  • it is accessible using normal effort starting from the main components of the screen (yellow circle).

A second variable determining the position of a button is the ease with which it can be reached from the main screen zones.

To continue our analysis, I propose to analyse the geometrical structure underlying the visual behaviour on a screen.

Increasing clic rate - Geometry

We have already talked about the determining role on the screen played by the Netway Interface Sweet Spot and the Netway Interface Comfort Zone.

A geometrical analysis of the two sites reveals that 90% of the first ocular fixation will take place in the Netway Interface Sweet Spot, whereas the second fixation will happen in one of the two illustrated zones.

Increasing clic rate - Geometry dailyburn.com

In the case of dailyburn.com, the button has the correct vertical position. However, it could be placed more at the right. Moving the button by a few pixels will align its centre with the second natural zone of ocular fixation.

Increasing clic rate - Geometry goodbarry.com

In the case of goodbarry.com, the button is not only hard to see using our peripheral vision, we also see it is placed too high and too much to the right.

Let’s get back to dailyburn.com. How can we improve the position of the button?

Here’s the result. I leave the conclusion to you 😉

Increasing clic rate - New Position dailyburn.com

In this case, the button is perfectly placed to fulfil its role in the peripheral vision field.

If the brain of the user decides to take action, he will have identified the button in just a few milliseconds after opening the site. He will easily guide the eyes to the button.

Since it is easy to click the button, the brain will place the cursor close to the button and when the user has to click, it will be easy to do so.

All this of course in a non-conscious way… 😉

6 Comments

  • Very cool article.
    Thanks for make me discover the “Netway Interface Sweet Spot Zone”! I think I need to go back and read some of your previous posts.

    I was wondering… Do these principles apply when you’re not selling anything?
    Or, put differently, could the “action button” lead to say “do something else to keep on interacting with the site” (read another article, see another picture, etc…)?

  • great article – I’d love to learn more your about ErgoSuite filter.

  • Very nice article!! Thanks for posting. This is similar to what I learnt in my Cognitive Ergonomics class.

  • Fascinating! Thank you Marc. I also read Jean-Claude’s article. You’ve piqued my interest about the many ways ‘reading’ experiences differ on the screen.

  • I liked this article! I am already using this to a certain extent into my work, but this “Netway Interface Sweet Spot Zone” was really interesting. I would definitely like to read more about this. Thanks for posting this stuff.

  • Splendid article again, small 5$ suggestion Mark, put also an add this button after the articles so it can be shared easily… 😉 let us all spread the word!

Submit a Comment