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 a tool behavioural experts can use to predict how a user’s visual system will respond in front of a screen.

Today, let’s discover the fifth of a total of seven principles and talk about the law of symmetry.

A set of shapes will be better perceived when the individual elements are symmetrical.

Thanks to this principle, shapes can be grouped around an axis (vertical and/or horizontal). The axis in itself can also be a shape. This allows the brain to better guide the foveal fixations on the screen.

The geometry of a screen starts with the fixation of the priority vertical and horizontal axes. The intersections will allow for the placement of the priority graphical elements.

The principles of symmetry, closure, good continuation, proximity and similarity enable the natural focus on the appropriate graphical elements of the screen.

Sometimes, when secondary graphical elements compete with the priority elements, the expert will adapt the Gestalt principles in order to diminish the emphasis on these secondary elements.

I’ve used these techniques when I was working on the Ethias site. I have emphasized the attention onto the priority graphical elements (the green and orange zones), thanks to the combined application of the Gestalt principles, whilst diminishing the attention to the non-priority zones.

In the case of Ethias, the green objects are symmetrical to the central element. When you take a closer look, you will see that the central green object is located in the so-called Netway Interface Sweet Spot™.

In the AXA screen, this principle is present but the objects are placed too closely together. As a result the brain will not be able to identify a set of different graphical elements but will perceive just one shape.

That’s why it is important to take into account the effects of the peripheral vision when creating screens. Without doing so, the Gestalt principles will lose their effectiveness.

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.

Je me propose de t’emmener découvrir le cinquième des sept principes : la symétrie.

Un ensemble de formes sera mieux perçu si les formes composant l’ensemble sont symétriques entre elles.

Ce principe permet de rassembler des formes autour d’un axe (vertical et/ou horizontal). L’axe peut être constitué lui-même par une forme. Ceci permet au cerveau de pouvoir mieux orienter les fixations fovéales sur l’écran.

La géométrie d’un écran commence par la fixation des axes prioritaires verticaux et horizontaux. Les intersections de ces axes permettront de placer les composants graphiques prioritaires.

Les principes de symétrie, de clôture, de bonne continuation, de proximité et de similarité permettront donc d’attirer naturellement l’attention vers les composants graphiques adéquats de l’écran.

Il arrive que lorsque des composants graphiques secondaires risquent d’entrer en concurrence avec des composants graphiques prioritaires, l’expert détourne les principes de Gestalt pour diminuer l’emphase sur les éléments secondaires.

J’ai utilisé ces techniques lors de la construction du site Ethias. J’ai accentué l’attention sur les composants graphiques prioritaires (les blocs verts et orange) grâce à l’application combinée des principes de Gestalt tout en diminuant l’attention sur les zones non prioritaires.

Pour le site Ethias, les objets verts par exemple sont symétriques par rapport au composant central. Si tu observes bien tu verras en plus que l’objet vert central se trouve dans la « Netway Interface Sweet Spot ».

Pour l’écran de AXA, ce principe est présent mais les objets sont trop proches les uns des autres : le cerveau ne pourra pas les identifier comme un ensemble de composants graphiques différents mais bien comme une seule forme.

Il est donc important de bien penser aux effets de la vision périphérique lors de la création d’écrans car sans cela, les principes de Gestalt perdront de leur force.

Passe une excellente semaine.

A couple of months ago insurance company AXA was building its new website.

During the transition period, a screen was shown, explaining the different changes planned to be integrated in the new site.

One of the five key points was: “Innovating ergonomics and a simplified navigation”.

Since I am passionate about my work, I couldn’t wait for the new site to go online and discover these ‘innovating ergonomics’.

So, on February 17, when the new site was live, I visited it in detail.

Having worked previously for the insurance sector, I simply tried to realise 5 priority scenarios, as they had been defined for other missions: “A manager wants to contract an insurance against loss by fire for his new property. He wants to consult the tariffs online and decides to visit three different websites.”

The homepage profusely worked on the ‘wow effect’ so it took me some time to understand the content and to simply find what I was looking for.

Coming onto another page, I used the navigation menu on the left to go the products ‘Living, family and hobbies’. There, I stumbled upon a navigation menu that was really difficult to use.

All the choices that have been made go against the basic scientific principles used in behavioural sciences:

1. The menu is composed of 38 items, presented in 14 different labels. It therefore requires a great cognitive and perceptive effort.
2. The formats used for the title products (Habitation, Famille, Loisirs) are the same as those used for the “Dossiers / Guides” and the “Devis / Simulations”. This gives the brain the impression these elements are comparable, which in reality is not the case.
3. The words used to denominate the different topics are interchangeable which makes it hard to choose the right link.
4. The matrix structure creates vertical and horizontal reading behaviour which prevents focused reading and leads to a chaotic ocular behaviour.

User behaviour is one of the essential weapons to differentiate oneself from the competition. However, more and more, companies and / or agencies use the terms used by our profession in an attempt to legitimise work that is far from the quality work one may expect from an expert in behavioural sciences.

The future has always belonged to those who passionately and fastidiously assimilated and/or developed state-of-the-art technology, which goes far beyond mere words. This allows companies to recognize their talents as experts.

Il y a quelques mois la société d’assurance AXA était occupée à refondre son site.

Durant la période de transition, un écran avait été développé expliquant les changements réalisés pour la sortie du nouveau site.

Parmi les 5 points mis en avant se trouvait celui-ci : “Ergonomie innovante et navigation simplifiée”.

Etant passionné par mon métier, j’attendais avec impatience la sortie du nouveau site pour découvrir cette “ergonomie innovante”.

Le 17 février, j’ai donc été visité avec attention le nouveau site.

Ayant travaillé pour le secteur des assurances, j’ai simplement essayé de réaliser un des 5 scénarios prioritaires définis lors d’autres missions : “Un cadre supérieur  souhaite contracter une assurance incendie pour sa nouvelle propriété. Il souhaite obtenir un tarif en ligne et décide de consulter 3 sites web différents.”

La page d’accueil utilisant largement le “whoaaww effect”, j’ai mis un certains temps à en comprendre les contenus et surtout à trouver simplement ce que j’étais venu chercher.

En arrivant dans une autre page, j’ai utilisé le menu de navigation de gauche pour atteindre les produits “Habitation, Famille & Loisirs”.

C’est là que j’ai découvert un menu de navigation vraiment difficile d’emploi.

Tous les choix effectués vont à l’encontre des principes scientifiques de base utilisés en sciences-comportementales :

1. le menu, composé de 38 items présentés dans 14 cases différentes, demande un effort cognitif et perceptif très important.
2. les formats utilisés pour les titres de produits (Habitation, Famille, Loisirs) sont les mêmes que ceux pour les “Dossiers / Guides” et que les “Devis / Simulations” donnant l’impression au cerveau qu’il s’agit d’éléments comparables, ce qui n’est pas le cas.
3. les lexiques utilisés ne s’excluent pas les uns les autres rendant difficile le choix d’un lien au sein des différentes cases.
4. le format en matrice crée des comportements de lecture verticaux et horizontaux, ce qui empêche une lecture focalisée et génère un comportement oculaire chaotique.

L’expérience utilisateur devenant une arme primordiale pour se différencier dans un même secteur, il arrive de plus en plus souvent de voir des sociétés et/ou agences récupérer des termes de notre métier pour essayer de légitimer un travail qui est très loin d’être un travail qualitatif d’expert en sciences comportementales.

L’avenir a toujours appartenu à ceux et celles qui, au delà des mots, ont par passion et avec beaucoup de travail, assimilé et/ou développé des techniques de pointe permettant aux entreprises de reconnaître leurs talents d’expert.

Gestalt theories are a tool behavioural experts can use to predict how a user’s visual system will respond in front of a screen.

Today, let’s discover the fourth of a total of seven principles and talk about the law of closure.

A closed form will more easily be identified as a shape (or a form), in comparison with an open form.

The law of closure allows the brain to dispose of a visual frame (like the frame of a painting) that will allow the user to concentrate on the content at the centre of the frame.

This Gestalt law is closely linked to the first two laws that enable the construction of a strong ‘Netway Neuro-Visual Landscape’.

On the Ethias site, the green objects constitute a frame to the content and allow us to focus on the content in between the two green zones.

In general, an expert can use the law of closure freely: the superior block is in most cases located outside the comfort zone of the screen.

In order to activate the closure effect, our brains needs to rapidly perceive the contours of the frame. That means we need to work on the zones using the Gestalt laws and strengthen the visualization of the frame.

In the case of AXA, the law of closure has not been applied. This leads to an ocular behaviour that doesn’t lead the eye to the centre of the interface.

Have a good 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.

Je me propose de t’emmener découvrir le quatrième des sept principes : la loi de clôture.

Une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu’une forme ouverte.

La loi de clôture permet au cerveau d’avoir un cadre visuel (comme l’encadrement d’une peinture) permettant de concentrer l’attention sur le contenu au centre du cadre.

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

Pour le site Ethias, les objets verts permettent de donner un cadrage au contenu et de focaliser l’attention sur le contenu entre ces deux zones vertes.

En règle générale, l’expert peut utiliser la loi de clôture sans crainte car le pavé supérieur se trouvera très généralement dans la zone d’inconfort de l’écran.

Pour que l’effet de clôture s’active, il faut que le cerveau puisse rapidement percevoir les contours du cadre. Il faut donc travailler les zones avec les autres lois de Gestlat pour renforcer la visualisation du « cadre ».

Pour l’écran de AXA, la loi de clôture n’est pas utilisée. Cela se traduit par un comportement oculaire non guidé vers le centre de l’interface.

Passe une excellente semaine.

I’m back after a hard month of personal difficulties.

I would like to thank all those who have read my articles and gone through my blog …

I now have more than 837 regular readers. This is such a great feeling… So thank you all again.

Thank you so much !

This will enable me to start on a mission that has always been close to my heart: “making the digital life simple for millions of people™”. ©Netway

We will soon be among the thousands worldwide who are keen to have the User Experience which has its own know-how, methods, tools and enhanced expertise.

My latest posts :

• Mislead visual behaviour with Gestalt – the principle of good continuity
• My masters of thought and action
• Mislead visual behaviour with Gestalt – the principle of proximity
• Simplicity: my very own state of mind
• Mislead visual behaviour with Gestalt – the principle of similarity
• Build the “Netway Neuro-Visual Landscape”™ of an interface
• Stop to Jakob Nielsen’s ROI
• Guide the user’s look
• Build an interface using Gestalt

Je suis de retour après un mois de difficultés personnelles.

Je voudrais recommencer la rédaction de mes articles en vous remerciant tous.

Vous êtes aujourd’hui plus de 837 lecteurs réguliers. Cela me fait tellement plaisir… Merci, merci, merci !.

Cela me permet de vous embarquer dans la mission qui m’a toujours tenu à cœur : “making the digital life simple (for millions of people)™”. ©Netway.

Nous serons bientôt des milliers dans le monde à vouloir faire de la User Experience un métier avec ses savoirs, ses méthodes, ses outils et une expertise à valeur ajoutée.

Mes derniers posts :

• Induire un comportement visuel avec la Gestalt – principe de bonne continuation
• Mes maîtres à penser… et à agir
• Induire un comportement visuel avec la Gestalt – principe de proximité
• Créer la simplicité : mon état d’esprit en quelques lignes
• Induire un comportement visuel avec la Gestalt – principe de similarité
• Construire le “Netway Neuro-Visual Landscape”™ d’une interface
• Stop aux ROI de Jakob Nielsen
• Conduire le regard des utilisateurs
• Construire une interface en comprenant la Gestalt