First of all, a word of thanks to everybody who has asked questions via comments, twitter or e-mail. I will take the time to answer all questions that could interest the user experience community in a special article.

Dushan (http://www.ressources-marketing-internet.com/), whom I want to thank, wants to have some more details on the relevance of analysing a screen using shades of grey.

When a user visits a website, his visual system plays an essential role: without it, the brain wouldn’t receive any of the information that is displayed on the screen.

The visual information penetrates the eye, where it is captured on the eye’s retina. There are two kinds of captors: the so-called cones and sticks.

The retina has about 125 million sticks and 5 million cones. There are three kinds of cones (red, green and blue) but there is only one kind of stick, and that one can only see shades of grey.

That’s the first reason why a screen analysis in shades of grey is important: less than 1% of receptors is capable of treating colours.

The sticks also capture the luminosity of the different zones of a web page, and as such, capture all contrasts. When we talk about contrasts, what we really talk about is variations of light intensity. The sticks are mainly in the zone of peripheral vision.

99% of the eye captors (sticks) treat the information of a web page in shades of grey. 1% of captors (cones) treat the colours. The latter are located in the Fovea zone.

Only a few are located in the peripheral vision.

On a 1024 screen, the foveal vision – we are simplifying things here -, the eye (foveal vision) only sees clearly about 7% of the width of a page. This is the net zone, which consists almost exclusively of colour captors.

The other 93% of the page is seen with a lot of sticks and very few cones. As a result, colours lose their vivacity and vision becomes more and more blurred, as we move further away of the point at which the eye is looking.

So, in short:

Most of the screen will be blurred and information on the colours is progressively lost in favour of information on the shades of grey. That’s why it is important to analyse screens in shades of grey.

An example on the design of our new site that will be released in a couple of weeks ☺

The button ‘View Case Study’ is an important one. But will it be seen?

Let’s start with an analysis of the sticks (shades of grey): by fixing each cross on the screen, the button is easily visible by its contrasts in shades of grey.

By simulating the peripheral vision on one of the crosses, the button rests very visible, even when blurred.

So, let’s now have a look at the analysis of the cones (colours): by fixing each of the crosses, the colorimetric information strengthens the contrast of the button’s shades of grey.

In peripheral vision, the button is very visible.

Conclusion:

- Sticks: OK
- Cones: OK

If I want to give visual priority to one button rather than another one, I use the same principles to decrease the visual importance of the elements ‘Interested’ and ‘Stay tuned!’ by decreasing the saliency in shades of grey and by putting no colour whatsoever!

Now, it’s your turn!

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).

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.

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.

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

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.

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.

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)

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.

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…

Jean-Claude Grosjean (expert en methodes AGIL que je vous conseille vivement de lire) a publié, il y a peu, un article “Ergonomie Web : 8 conseils pour mieux vendre sur Internet“.

Cet article traite entre autre du guidage du regard en exploitant le diagramme de Gutenberg (tendance de lecture de gauche à droite et de haut en bas).

Je tenais à partager avec vous quelques éléments de composition d’écrans afin de vous donner l’emplacement idéal d’un bouton d’action.

Pour être très concret, j’ai décidé de comparer les deux exemples d’écrans fournis dans l’article de Jean-Claude (dailyburn.com & goodbarry.com).

Avant de construire la solution la mieux adaptée pour ces deux écrans, prenons le temps d’analyser les deux écrans actuels par le filtre de l’ErgoSuite™ (boîte à outil software de prédiction du comportement humain créée par Netway).

Pour rappel, le système visuel étant ce qu’il est, lors de la première visualisation d’un écran nous posons nos yeux sur certaines zones de l’écran. La première de ces zones est ce que l’on appelle la Netway Interface Sweet Spot Zone™, zone dans laquelle 90% des premières fixations oculaires se posent.

A partir de cette zone, le cerveau va analyser et interpréter les composants  de l’interface avec ce que l’on appelle la vision périphérique.

dailyburn.com :

• le bouton se distingue très fort et est facilement visible et identifiable.
• le bouton est également assez prêt de la zone de vision fovéale (endroit où l’on voit net à 100%).
• on ne sait pas lire le texte mais par contre on distingue clairement qu’il y a 3 mots dans le bouton.

Si nous analysons l’écran en nuances de gris (comme si on simulait uniquement la vision avec les batonnets des yeux), nous obtenons les mêmes conclusions.

goodbarry.com :

• le bouton se dilue avec le bleu de la bande en bas de l’écran
• le bouton n’est pas directement identifiable
• il est impossible de distinguer le nombre de mots composants le bouton.

Si nous passons l’interface en nuances de gris, le problème s’accentue.

Le signal du bouton au niveau du cerveau sera donc beaucoup moins fort que pour le site dailyburn.com.

Une des variables de la bonne position d’un bouton sera donc sa capacité à être dissocier en vision périphérique des autres composants graphiques de l’écran.

Continuons notre analyse. Un autre facteur important est la capacité qu’à le bouton à être cliqué rapidement.

dailyburn.com :

• peu importe où se trouve le pointeur de l’utilisateur, le bouton sera accessible avec un effort normal (rond jaune)
• mieux, à partir des éléments visuels importants, le bouton est facilement accessible (ronds verts).

goodbarry.com :

• si l’utilisateur a son pointeur situé sur la navigation principale supérieure, le bouton d’action sera accessible avec un effort important (rond orange)
• à partir des composants principaux de l’écrans, le bouton est accessible avec un effort normal (rond jaune).

Une seconde variable de la bonne position d’un bouton sera donc sa capacité à être cliqué avec facilité à partir des zones de l’écran considérées comme importantes.

Pour continuer l’analyse je propose d’analyser la structure géométrique qui sous-tend le comportement visuel sur un écran.

Nous avons déjà vu que le Netway Interface Sweet Spot™ ainsi que la Netway Interface Comfort Zone™ sont deux éléments fondateurs d’un écran.

En fonction de la géométrie des deux sites évalués, si la première fixation oculaire se pose à 90% dans le Netway Interface Sweet Spot™, la seconde fixation va se poser dans l’une des deux zones illustrées.

Nous voyons que dans le cas de dailyburn.com, le bouton est bien placé verticalement mais pourrait être déplacé vers la droite de quelques pixels pour avoir son centre aligné avec la seconde zone naturelle de fixation oculaire.

Dans le cas de goodbarry.com, en plus d’être peu visible en vision périphérique, le bouton est placé trop bas et trop à droite.

Revenons à dailyburn.com. Comment pouvons-nous améliorer le positionnement du bouton?

Voici ce que cela donnerait. A vous d’évaluer le résultat

Dans ce cas, le bouton est parfaitement placé pour jouer son rôle d’attracteur visuel dans le champ de vision périphérique.

Si le cerveau de l’utilisateur décide de passer à l’action, il aura pu identifier le bouton dans les quelques premières milisecondes après son arrivée sur le site.  Il sera donc aisé d’envoyer l’oeil sur le bouton.

L’effort de pointage étant facile, le cerveau placera le pointeur à proximité du bouton et lorsqu’il devra cliquer, l’acte sera aisé.

Tout cela de manière non consciente

Gestalt theories are part of the tools behavioural experts use to predict the response of a user’s visual system to a computer screen. 

We saw,in previous posts, the principle of proximity and the principle of similarity.

Let’s now have a look at the third of seven principles in all: good continuity.

We prefer to perceive continuous forms as to their shape, their size and their placement. We prefer patterns to abrupt changes. 

A good continuity allows the brain not to visit all the zones of a screen, once it has discovered a pattern.

If the pattern is visible in the peripheral vision, our brain will easily attribute one meaning to a group of objects and determine topographical data. 

This Gestalt principle is closely linked to the first two principles and allows us to create a strong Netway Neuro-Visual Landscape™. 

On the Ethias site, we see that the green objects all have the same shape, the same size and that they are separated by identical spaces. This shape, size and space is only used in one place.

The eye-tracking data our experts have been gathering for 8 years makes the behaviour that is determined by a pattern the brain has detected, an objective source of data. Let’s take the example of Ethias. The first green square will lead to longer and more ocular fixations; the second will have fewer fixations; and the third will have virtually none. 

Behavioural data has also revealed that one needs at least 3 elements for a pattern to emerge. Only then, there will be good continuity. I have applied this principle when I have created the Ethias site, in order to generate the visual pathways I wanted. 

This behaviour is generated when the screen is visited the first time, when the Netway Neuro-Visual Landscape™ is under construction. Once the brain has determined a pattern, it will no longer attribute a meaning to each and every object that is part of the same pattern.  

In the AXA screen, this principle has not really been used. We need to analyse all the graphical elements in order to determine their meaning. This is contrary to our findings in the article on the Netway Neuro-Visual Landscape™, stating most graphical elements that respect the principle of good continuity are not visible in peripheral vision. 

This Gestalt principle is dear to good designers who defend light screens that leave enough space between the different graphical elements.

By calibrating this space, and by using identical shapes and sizes, the principle of good continuity will have its effect. 

Have an excellent week. 

Gestalt theories are part of the tools behavioural experts use to predict the response of a user’s visual system to a computer screen.

We saw the first principle in a previous post : similarity

Let’s now discover the second of seven principles in all, and talk about proximity. 

The brain associates visual elements with each other when they are close to each other or when the space between them is equal. 

This Gestalt law is closely linked to peripheral vision. As the latter is fuzzy, two elements that are close to each other will not distinguish themselves in the Netway Neuro-Visual Landscape™. 

This Gestalt law, as all the others, allows us to build a strong Netway Neuro-Visual Landscape™. 

On the Ethias site, the spaces and the connection between the graphical objects have been studied in order to respect the principle of proximity, on top of the principle of similarity.

The AXA screenshot, however, shows the space between the objects is very small and that all objects intermingle as to create 3 groups. With less graphical elements, the Ethias screen has more groups. 

Have an excellent week.

Eyetracking material allows you to see what users have looked at, but not necessarily what they have seen.
This week, we will answer the following question: “How does the brain choose to guide the eye from one place to the other?”

Yes, you read it correctly. Because it is the brain that guides the eye so it can find the information the brain needs to solve a task.

The mental model

When a user arrives on an interface, he has built what’s called a mental model. This is some kind of map containing the task to be done, the information he has on the subjects, the experiences and interfaces he has already visited and so on.

The central administrator, the reflection centre of our brain, is the head of this metal model. In order to find a solution to the task at hand, our brain will have to find information outside the brain. And to do that, it needs the eyes.

The brain will guide our eyes to find data on the web interface.

The foveal vision

The eye consists of cones and sticks. These cones and sticks are placed on the retina. As a result, our eye is capable of gathering information in an angle of 3 degrees.

At 50 cm away from the screen, which is the average distance measured in physiological ergonomics, the net zone we can see is a circle of circa 2,5 cm.

This net zone is called the foveal vision.

The peripheral vision

The further we go away from this circle, the less sharp our vision will become. This is called the peripheral vision.

Furthermore, vision has a particular shape.

Our brain doesn’t need to see its environment with a 100 % acuity in order to analyze its components.

An example: you are now reading this article. Without taking your eye away from the screen you can easily evaluate the elements in the room you’re working in. They will be blurred but you can name them.

What you just used, is your peripheral vision. If you want to get precise details on the object, you will move your eye towards it. And that’s your foveal vision.

The same thing happens on an interface. The brain will get a general idea of the graphical elements using the peripheral vision. And as soon as it wants precise information on something, it will direct the eye towards the zone where it can find the info using the foveal vision.

The brain wants to perform a task. It has an idea on how to do this, using its mental model. So, when it arrives on an interface, it will guide the eyes to where it thinks it will find the information it needs.

This is what the eye will do:

1. it will stop to gather information: fixations
    
2. it will move from point x,y towards another point: saccadic movements

The path our eyes will follow consists of a combination of fixations and saccadic movements. It will never cover the entire interface. This means our brain will make certain efforts in order to find the information it needs on the interface.

And that’s where problems start. Because, before sending the eye to a certain spot, it will first, non-consciously, try and get as much information as possible using its peripheral vision.

But, as the peripheral vision is blurred, the brain will make deductions rather than analyze each different zone of the interface.

So, what will happen when you put an element of navigation that looks like an advertising banner? Our brain won’t direct our eyes towards it in order to find more information on the navigation of the interface.

So, what will happen when an important element of your interface can’t be seen using peripheral vision? Our brain won’t use the foveal vision to know more.

Here’s an example of the Publicis site.

Fix your eye (foveal vision) on the letter “O” of the work “Work” at the left side of the interface. Now, without moving your eyes, try and see whether you recognize the logos at the right side of the interface.

Now fix your eye on the IKEA logo at the right side of the interface. Don’t move your eyes and try to read the title at the left side.

Here’s the information your brain has received when fixing your eye on the letter “O” of the word “Work”:

And here’s what your brain has received by fixing on the logo IKEA.

This interface forces users to make long saccadic movements to find information and link it in the brain.

By changing the placement of the title, unnecessary eye movements can be avoided.

So, here’s what your brain will receive by focusing on the letter “O” of the word “Work”.

And here’s what your brain will receive by focusing on the IKEA logo.

When an expert builds interfaces, he will take into account these data. All Netway techniques are aimed at generating types of precise ocular behaviour in order to guarantee an optimal user experience.

I propose you try and apply these finding on one of your own screens.

Have a good week!

Don’t hesitate to share this content with your friends or your colleagues and ask them to check out this blog! Many thanks.