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. 

Les théories de la Gestalt font partie de la trousse à outils des experts en sciences comportementales afin de prédire comment le système visuel d’un utilisateur va répondre face à un écran.

Nous avons déjà abordé les deux premiers principes de la Gestalt : le principe de proximité et le principe de similarité.

Je me propose de t’emmener découvrir le troisième des sept principes : la bonne continuation.

Nous préférons percevoir des formes continues en termes de formes, tailles et espacement formant un pattern plutôt que des changements abrupts.

La bonne continuation permet au cerveau de ne pas devoir visiter toutes les zones à partir du moment où un pattern est découvert.

En effet, si le pattern est visible en vision périphérique, il sera facile pour le cerveau d’associer un seul sens au groupe d’objet ainsi que des coordonnées topographiques plus légères.

Cette loi de Gestalt est fortement liée aux deux premières lois permettant de construire un “Netway Neuro-Visual Landscape™“ fort.

Pour le site Ethias, les objets verts par exemple ont la même forme, la même taille et sont séparés par des espaces identiques. De plus cette forme, taille et espace n’est utilisé qu’à un seul endroit. 

Les données d’eye-tracking récoltées depuis 8 ans par nos experts objectivent le comportement lorsqu’un pattern est détecté par le cerveau. Prenons l’écran Ethias, les fixations oculaires seront plus longues et plus nombreuses dans le premier carré vert, un peu moins dans le second pour être presque inexistantes dans le troisième carré.

Les données comportementales récoltées nous ont également montré que, pour que l’effet de bonne continuation s’active, il faut au moins 3 éléments pour former un pattern. Pour Ethias, quand j’ai créé l’écran, j’ai utilisé ce principe afin de générer les chemins visuels que je souhaitais.

Ce comportement est généré lors de la première utilisation de l’écran, lors de la phase de construction du “Netway Neuro-Visual Landscape™” démontrant que le cerveau n’a plus besoin de donner un sens à un objet à partir du moment où ce dernier fait partie d’un pattern dont un des objets précédents a déjà été analysé par le cerveau.

Pour l’écran de AXA, ce principe est très peu présent. Cela se traduit par la nécessité d’analyser tous les objets graphiques pour en tirer l’essence. Or, comme nous l’avons vu dans l’article sur le “Netway Neuro-Visual Landscape™“, la plupart des composants graphiques qui respectent le principe de bonne continuité ne sont pas visibles en vision périphérique.

C’est ce principe de Gestlat qui est cher aux bons designers qui défendent le fait d’aérer un écran en laissant de l’espace entre les objets graphiques.

En calibrant cet espace, et en utilisant des formes et tailles identiques, le principe de bonne continuation se met en route.

Passe une excellente semaine.

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.

Les théories de la Gestalt font partie de la trousse à outils des experts en sciences comportementales afin de prédire comment le système visuel d’un utilisateur va répondre face à un écran.

Nous avons vu le premier principe de Gestalt dans un article précédent : la similarité

Je me propose de t’emmener découvrir le deuxième des sept principes : la proximité.

Le cerveau associe des éléments visuels lorsqu’ils sont proches les uns des autres ou si les espaces entre eux sont équivalents.

Cette loi de Gestalt est fortement liée à la vision périphérique. En effet, comme la vision périphérique est floue, deux composants proches ont tendance à ne plus se démarquer l’un de l’autre dans le “Netway Neuro-Visual Landscape™”.

Donc cette loi de Gestlat, comme toutes les autres, permet de construire un “Netway Neuro-Visual Landscape™” fort.

Pour le site Ethias, les espaces et le rapprochement des objets graphiques sont calculés afin que les groupes d’objets en plus de respecter le principe de similarité soient renforcés par le principe de proximité. 

Dans le cas de l’écran de AXA, les espaces sont très faibles et tous les objets s’entremêlent pour laisser se dégager 3 groupes. Avec moins d’éléments graphiques, l’écran de Ethias compte plus de groupes.

Passe une excellente semaine.

It is possible to attract the attention of users towards the most important visual elements of an interface. There are different techniques to do so. 

In a previous post, we have seen that one of the main elements to obtain this result is the use of an efficient “Netway Neuro-Visual Landscape”™. 

In this post, I want to introduce three expert techniques that intervene in this type of work:

1. the number of graphical elements on a screen,
2. the geometrical structure of the screen,
3. the visual hierarchy within the screen.

Before explaining how to use these techniques, it is important to understand their relevance. 

Let’s have a look at two insurances sites: the Ethias site (ethias.be) and the new AXA site (axa.fr). 

I have taken similar sites: the tasks surfers will perform on these two sites, are largely similar. 

Let’s start by comparing the number of graphical elements in the two screens. 

The Ethias screen is composed of 14 graphical zones, whereas AXA counts 26. 

When we analyze the first ocular fixation, we get the information our eyes will send to the brain.

The more zones are used in the “Netway Neuro-Visual Landscape”™, the more difficult it will be for our brain to distinguish the zones and to isolate them in the peripheral vision. 

On the Ethias site, we see that 12 out of 14 zones are easily distinguishable one from the other. This is not the case for the two green buttons at the top right of the interface.

A conscious choice: the size of the action button zone gets more weight in our peripheral vision and is more important in the “Netway Neuro-Visual Landscape”™. 

On the AXA site, we see that there is not enough space between a number of zones. As a result, these zones are not easily distinguishable one from the other. This could have been avoided if the knowledge of the human visual system would have been put into practice. 

Moreover, 13 types of content are not visible at the first fixation. If these zones are not visible, then why would our brain direct our eyes to visit these zones? 

Let’s now compare the geometrical structure and the visual organisation of the screens.

The Ethias site has a geometrical structure. The different zones of the screen have also been organized. 

Welcome to the concrete application of the Gestalt principles. Similitude, proximity, good continuity, symmetry… All these principles have been used when I was creating this screen (I will get back to these principles in coming articles). 

The AXA site has little geometrical structure and a weak visual organisation. 

So, why would it be so important to have a good geometrical structure and visual organisation?

The answer can be found in our brain: it contains a zone that memorizes the topographical data of the screen in front of it, and gives these data a meaning. 

More geometrical structure means our brain needs to store less topographical information. The result: a strong “Netway Neuro-Visual Landscape”™. 

A strong “Netway Neuro-Visual Landscape”™ allows our brain to build a visual hierarchy between the different elements of a screen and to determine strong topographical anchor points. This will help the user to quickly find what he is looking for and to easily use the screen in front of him. 

I hope you now see why this technique is so important. I will get back to it in the next post and talk about focal points and visual pathways. 

The name “Netway Neuro-Visual Landscape”™ and the concept behind the name is protected by the iDEPOT004412.

Attirer l’attention des utilisateurs vers les éléments visuels les plus importants d’une interface est possible. Différentes expertises techniques permettent de réaliser cela.

Dans un post précédent nous avons vu qu’un des éléments primordiaux pour arriver à ce résultat est d’obtenir un “Netway Neuro-Visual Landscape”™ efficace.

Dans ce post, je vais introduire trois expertises techniques qui interviennent dans ce travail

1. le nombre de composants graphiques dans un écran,
2. la structure géométrique de l’écran
3. la hiérarchie visuelle au sein de l’écran

Avant d’expliquer comment les utiliser, il est important de comprendre pourquoi les utiliser.

En guise d’exemple, j’ai pris deux sites issus de l’industrie des assurances : le site de Ethias (ethias.be) et le nouveau site de AXA (axa.fr).

J’ai choisi des sites comparables, c’est-à-dire dont les tâches à réaliser par les internautes sont fortement similaires.

Commençons par comparer le nombre de composants graphiques dans les deux écrans.

L’écran de Ethias est composé de 14 zones graphiques contre 26 pour l’écran de AXA.

En analysant la première fixation oculaire, voici ce que le cerveau va recevoir de la part des yeux.

Plus le “Netway Neuro-Visual Landscape”™ comprend de zones, plus il est difficile pour le cerveau de les distinguer et moins il est facile de les isoler dans le champ de vision périphérique.

Sur le site de Ethias, on observe que 12 zones sur 14 peuvent être distinguées les unes des autres et les deux boutons verts en haut à droite de l’interface se confondent.

Cet effet est volontaire afin de d’accentuer la taille de la zone des boutons d’action en vision périphérique et de donner un poids plus important à ces deux éléments dans le “Netway Neuro-Visual Landscape”™.

Sur le site de AXA, on observe que plusieurs zones se confondent par manque d’espaces entre les zones. Ceci aurait pu être évité en connaissant le système visuel humain.

De plus 13 contenus ne sont pas visibles lors de la première fixation. Si ces zones ne sont pas visibles, pourquoi le cerveau enverrait-il les yeux dans ces zones ?

Comparons maintenant la structure géométrique et l’organisation visuelle des écrans.

Le site de Ethias présente une structure géométrique et une organisation visuelle importantes entre les différentes zones de l’écran.

Bienvenue dans l’application concrète des lois de Gestalt : les principes de similitude, de proximité, de bonne continuité, de symétrie… ont tous été appliqués lorsque j’ai créé cet écran (je détaillerai ces lois dans de prochains articles).

Le site de AXA ne présente que peu de structure géométrique et d’organisation visuelle.

Alors pourquoi est-il tellement important d’avoir une structure géométrique et une organisation visuelle ?

Et bien, notre cerveau comporte une zone qui mémorise les coordonnées topographique de l’écran qu’il a devant les yeux et associe à ces coordonnées un certains sens.

Plus il y a de structure géométrique, moins le cerveau doit stocker d’informations topographiques différentes et plus le “Netway Neuro-Visual Landscape”™ sera fort.

Un “Netway Neuro-Visual Landscape”™ fort permet au cerveau de construire une hiérarchie visuelle entre les différents composants d’un écran et permet de fixer des points d’ancrage topographiques forts afin d’aider l’utilisateur à trouver rapidement ce dont il a besoin et à utiliser avec aisance l’écran.

J’espère que tu vois mieux maintenant l’importance de cette technique que je continuerai à compléter dans le prochain post avec la notion de points focaux et de chemins visuels.

The name “Netway Neuro-Visual Landscape”™ and the concept behind the name is protected by the iDEPOT004412.

It is possible to invite the visual system of a user to follow a pre-determined visual path on the screen. This can be achieved by placing focal points in a strategic manner. 

To illustrate my point, I will use two insurances sites: the Ethias site and the AXA site. 

Focal points are the places our eyes will visit, as commanded by the brain, in order to find information. 

The visual pathway is the sum of the focal points our eyes have visited. It allows our eyes to go from one focal point to the other. 

An expert can draw a visual path within a screen that 80% of users will follow in order to perform an identical task. 

The placement of focal points is thus a strategic issue. As our brain will choose 3 to 5 focal points within an interface to build the “Netway Neuro-Visual Landscape™”, it is important to help the user’s brain when it is choosing its focal points. 

Many forces come into play when a designer is designing a screen. Two forces are the fact we read from the left to the right, and from the top to the bottom.

The other forces can be described using the Gestalt principles (I will come back to these in other posts). 

On the Ethias screen the focal points have been placed in order to generate a visual path that is for 80% predictable.

We have of course tested these visual paths with real users when we were building user scenarios. The results of the site? Sales have multiplied by 5. 

Let’s now have a look at the AXA screen. 7 focal points, only one more than on the Ethias screen. However, the visual paths are disparate, and have not been controlled by the designer. 

When I was creating the Ethias interfaces, I have used several techniques in order to let the focal points appear in a natural way: I have used spaces, geometrical zones, contrasts, colours, grouping, … 

For some techniques this means you put the Gestalt principles into practice. 

In the coming posts, I will talk about each Gestalt principle. 

Il est possible d’inviter le système visuel d’un utilisateur à suivre un chemin visuel prédéterminé dans un écran en plaçant des “points focaux” de manière stratégique.

Pour illustrer mes propos, j’utiliserai deux sites dans le domaine des assurances : Ethias et AXA.

Les points focaux sont les endroits où le cerveau va envoyer les yeux afin de prendre des informations.

Le chemin visuel est la somme des points focaux empruntés par les yeux dans un écran. Le chemin visuel permet de guider le regard d’un point focal vers un autre.

Un expert est capable de dessiner un chemin visuel au sein d’un écran afin que le même chemin soit emprunté par 80 % des utilisateurs pour effectuer une tâche identique.

Le placement des points focaux dans un écran devient donc une question stratégique. En effet, comme de toutes manières le cerveau va choisir 3 à 5 points focaux au sein d’une interface pour construire son “Netway Neuro-Visual Landscape™”, aider le cerveau de l’utilisateur à choisir les points focaux est important.

Plusieurs forces peuvent travailler les unes avec les autres ou les unes contre les autres lorsqu’un designer crée un écran.

Parmi ces forces, la lecture de gauche à droite et de haut en bas ont sont deux. Les autres peuvent être résumées par les lois de Gestalt (je détaillerai chacune de ces lois dans d’autres posts).

Les points focaux sur l’écran Ethias sont placés de manière à générer un chemin visuel à 80 % prévisible.

Nous avons bien entendu testé ces chemins visuels auprès de vrais utilisateurs dans le cadre de la réalisation des scénarios utilisateurs. Résultats du site ? Les ventes en ligne ont été multipliées par 5.

Maintenant, analysons l’écran AXA. Sept points focaux, seulement un de plus que l’écran Ethias. Par contre, il y a des chemins visuels disparates, non contrôlés par le concepteur.

Pour Ethias, lorsque j’ai créé les interfaces, j’ai utilisé plusieurs techniques pour aboutir à ce que les points focaux ressortent naturellement : les espaces, la géométrie des zones, les contrastes, les couleurs, le regroupement des éléments, …

Une partie de ces techniques se trouvent dans l’utilisation des lois de la Gestalt.

Dans les prochains posts je traiterai de chacune des lois de Gestalt de manière appliquée.

Is it possible to generate visual behaviour on a screen? Yes, in part you can, thanks to an in-depth knowledge of the non-conscious visual system. 

Many works refer to the Gestalt principles, but in a very theoretical manner. Very few of them explain how to use them when creating screens. 

I will introduce this subject in a series of successive posts. 

Let’s start now with the first point: the first thing a user’s visual system will do when he arrives on a screen is to evaluate the content of the screen, by using what we call the visual landscape. 

To illustrate the concept of the “Netway Neuro-Visual Landscape”™, I will use a screen from the Ethias site. This screen has been made by our experts, using all the techniques of behavioural sciences. 

When a user gets to a screen, we have seen that he starts by looking at the “Netway Interface Sweet Spot“™. The brain will automatically direct our eyes to that zone. 

In but a few milliseconds our brain will receive visual information from our eyes. These data will come from the field around the first ocular fixation in the ”Netway Interface Sweet Spot“™.

The zone around this point is limited and as a result the majority of visual information will be blurry. It is however this information our brain will use to create a first version of the screen in our visual memory. 

Depending on the scenario to perform, the brain will choose the place in the visual landscape to which he will send the eyes. The task: to gather information a second time. 

This will result in new information that will feed the visual map of the screen our brain has memorized. 

This will be done 3 – 5 times in order to have a standard version of the visual landscape of the screen. This landscape does not contain all the visual elements of the screen. 

This final version is the “Netway Neuro-Visual Landscape”™, the map our brain will use when the user performs the tasks he wants to do on the site. 

So, what happens when an important element of the screen fails to appear in the “Netway Neuro-Visual Landscape”™? Something we have all witnessed will happen: we look for an element on an interface but we can’t see it, although it is there. 

If we take the time to consciously control our visual system and look at all the elements on the screen, the element we couldn’t see before, will appear. 

When we build a screen it is important to think about an efficient “Netway Neuro-Visual Landscape”™. 

Thanks to the “Netway Neuro-Visual Landscape”™, we can also explain a well-known phenomenon: the designer syndrome. 

This syndrome is simple: since the designer works at the conception of the screen, using both his eyes and his brain, his “Netway Neuro-Visual Landscape”™ will be much richer than that of a regular user. 

I ask all designers and team members to remember this difference when they are working.

Next week, I will talk about the 3 to 5 points our brain uses to build the “Netway Neuro-Visual Landscape”™. 

Have a good week. 

Est-il possible de générer un comportement visuel sur un écran ? Oui, partiellement grâce à la connaissance approfondie du système visuel non-conscient.

De nombreux ouvrages font référence aux lois de la Gestalt de manière théorique. Très peu d’entre eux expliquent comment les appliquer lors de la création d’écrans. 

Je me propose d’introduire le sujet avec série de posts successifs.

Commençons par le premier point : la première chose que le système visuel d’un utilisateur réalise lorsque ce dernier arrive sur un écran est d’évaluer le contenu de l’écran au travers de ce que nous appelons le “paysage visuel”.

Pour illustrer le concept de “Netway Neuro-Visual Landscape”™, je vais utiliser l’écran du site de Ethias que nos experts ont réalisé en utilisant l’ensemble des techniques de sciences comportementales.

Lorsqu’un utilisateur arrive sur un écran, nous avons déjà vu ensemble que la zone de démarrage de son œil dans l’écran est la “Netway Interface Sweet Spot“™.

. Le cerveau va donc orienter naturellement les yeux vers cette zone.

En quelques millisecondes, le cerveau va être alimenté par des données visuelles provenant des yeux. Ces données vont être celles du champ de vision autour du premier point de fixation oculaire dans le ”Netway Interface Sweet Spot“™.

La zone nette de la vision autour de ce point étant limitée, la grande majorité des informations visuelles vont être floues. Et pourtant, c’est avec ces données que le cerveau va composer dans la mémoire visuelle une première version de cet écran.

En fonction du scénario à réaliser, le cerveau va choisir dans le “paysage visuel” l’endroit où il va envoyer les yeux pour effectuer la seconde capture d’informations. 

Une fois la saccade effectuée vers le second point, de nouvelles informations vont pouvoir alimenter la carte visuelle de l’écran que le cerveau a en mémoire.

Il va reproduire la même opération 3 à 5 fois afin de se faire une version étalon du “paysage visuel” de l’écran, ce “paysage visuel” ne comprenant pas l’entièreté des composants visuels de l’écran. 

Cette version définitive est le “Netway Neuro-Visual Landscape”™, carte qui va servir de base au cerveau pour effectuer les tâches que l’utilisateur est venu réaliser sur le site.

Que se passe-t-il maintenant si un élément important de l’écran ne fait pas partie du “Netway Neuro-Visual Landscape”™? Et bien, cela se traduit par ce que nous avons tous vécu : on cherche un élément sur une interface et nous ne le “voyons” pas alors qu’il est bien présent. 

Si nous prenons le temps de prendre le contrôle conscient de notre système visuel et que nous regardons tous les éléments de l’écran, l’élément que nous n’avions pas vu apparaîtra.

Donc, quand on réalise un écran, il est important de bien réfléchir à avoir un “Netway Neuro-Visual Landscape”™ efficace.

Grâce au “Netway Neuro-Visual Landscape”™, on peut également expliquer un phénomène que nous connaissons tous : le syndrôme du concepteur. 

Ce syndrôme est simple : comme le concepteur travaille à la conception d’un écran avec ses yeux et son cerveau, son “Netway Neuro-Visual Landscape”™ est beaucoup plus riche que celui d’un utilisateur qui est confronté à l’écran fini.

J’engage tous les concepteurs et les membres de mon équipe à réfléchir à cela avec attention.

La semaine prochaine je vais aborder la manière dont le cerveau choisit les 3 à 5 points avec lequel il construit le “Netway Neuro-Visual Landscape”™.

Bonne semaine à toi.