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.
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.
- 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.
When analysing the screen using shades of grey (as if we only use the rods of our eyes), we reach the same conclusions.
- 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.
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.
- 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)
- 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.
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.
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.
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 😉
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… 😉