Not all methods to create a strong user experience are efficient. Worse still, some are quite the contrary !

Allow me to explain using an analysis of number representation by Denis Guedj (a professor in science history and epistemology at the university Paris VIII-http://en.wikipedia.org/wiki/Denis_Guedj).

Roman numerals use letters: I, V, L, C, D, M, …

The problem with this method is that for each number that is higher than the previous one, you need to add a new sign. That means that the number of basic signs increases in function of new needs.

The Indian numeration, which is the basis of our system, allows doing everything using very little.

With only ten numbers, from 0 to 9, you can represent any possible number you want.

This method, which was finalised in the 16th and 17th century by Indian astronomers and mathematicians, is still valid today and has never been challenged by any other method.

Let’s take an example and write the number 1999

In Roman numeration, these are the rules to be followed:

• Use addition to reach the number
• Proceed by power of ten by power of ten (multiples of the decimal)
• If you need to use four symbols, use the subtractive method
• Only use the symbol immediately preceding the symbol when using the subtractive method

By following these rules, we get this result for 1999: M CM XC IX (1000 -100 + 1000 – 10 + 100 – 1 + 10) and not MIM (1000 – 1 + 1000)

In Indian numeration, instead of having to follow rules, you have to answer the following questions:

• How many thousands? Answer: 1
• How many hundreds? Answer: 9
• How many tens? Answer: 9
• How many units? Answer: 9

To me, the world of user experience can be compared to numeral systems:

Usability is a set of techniques that evolve empirically, like Roman numeration. Usability mainly uses the rules of common sense applied to objects.

What is extraordinary is to see how many usability guidelines lists exist that contradict one another.

Usability, like Roman numeration, leaves us with an enormous field of possible subjective interpretations.

The interpretation of the rules concerning Roman numeration allows us to write 1999 in several ways:

• MCMXCIX (1000 – 100 + 1000 – 10 + 100 – 1 + 10) -  Respects the official rules as they were written down in the Middle Ages
• MCMXCVIIII (1000 – 100 + 1000 – 10 + 100 + 5 + 1 + 1 + 1 + 1) – Probably how the Romans wrote it, since the 9 was often written as VIIII
• MDCCCCLXXXXVIIII (1000 + 500 + 100 + 100 +100 + 100 + 50 + 10 + 10 + 10 + 10 + 5 + 1 + 1 + 1 + 1) – Possible because there are four following letters

Behavioural science however is based on the fundamentals of the perceptive and cognitive system of the human brain. If you know these fundamentals, you can answer all possible interaction cases without having to rewrite new rules every time you encounter a new problem. It’s like using the numbers from 0 to 9. What does evolve over time is not the set of rules, but the fundamentals themselves.

That’s why I am convinced usability has been on the decline since 2 years and why UX based on Behavioural Sciences is so rapidly gaining ground. The future will tell

Pour partager cela avec vous, je me suis basé sur l’analyse des numérations de Denis Guedj (professeur d’histoire des sciences et d’épistémologie à l’université Paris VIII – http://en.wikipedia.org/wiki/Denis_Guedj).

La numération romaine est composée de chiffres I, V, L, C, D, M, …

Le problème de cette méthode est qu’à chaque nombre supérieur à ceux déjà représentés il faut inventer un nouveau signe.

Cela implique que le nombre de signes de base ne cesse de croître en fonction des nouveaux besoins.

La numération indienne, dont nous avons hérité, permet de faire tout avec peu.

Avec dix chiffres 0,1, 2, 3, 4, 5, 6, 7, 8, 9, on peut représenter tous les nombres que l’on veut !

Cette méthode, finalisée au 16ème/17ème siècle par des astronomes-mathématiciens indiens n’a jamais été dépassée.

Prenons un exemple : écrire 1999

En numération romaine il faut des règles pour y arriver :

• Utilisez la règle additive pour atteindre le nombre
• Procédez puissance de dix par puissance de dix
• Si vous devez utiliser 4 symboles, repartez du symbole suivant en soustrayant
• Avec la règle soustractive, n’employez que le symbole immédiatement avant

En suivant ces règles, 1999 s’écrit M CM XC IX (1000 -100 + 1000 – 10 + 100 – 1 + 10) et non pas MIM (1000 – 1 + 1000)

En numération indienne, plutôt que d’avoir des règles à suivre, on se pose les questions suivantes sur base des fondamentaux :

• Combien de milliers ? Réponse : 1
• Combien de centaines ? Réponse : 9
• Combien de dizaines ? Réponse : 9
• Combien d’unités ? Réponse : 9

Pour moi, le monde de l’expérience utilisateur peut être comparé aux numérations

La Usability est un ensemble de techniques qui évoluent de manière empirique, comme la numération romaine.

Pratiquement aujourd’hui, la Usability s’exprime majoritairement au travers de règles axées sur les objets.

Ce qui est extraordinaire, c’est de voir le nombre important de listes de règles de Usability qui s’opposent les unes aux autres.

La Usability, tout comme la numération romaine, laisse un champ énorme d’interprétations subjectives possibles.

En effet, l’interprétation des règles de la numération romaine permet d’écrire 1999 de plusieurs manières différentes :

• MCMXCIX (1000 – 100 + 1000 – 10 + 100 – 1 + 10) -  Respecte les règles officielles telles que codifiées au Moyen-Âge ;
• MCMXCVIIII (1000 – 100 + 1000 – 10 + 100 + 5 + 1 + 1 + 1 + 1) – Sans doute la façon dont l’écrivaient les Romains, le 9 était souvent représenté par VIIII ;
• MDCCCCLXXXXVIIII (1000 + 500 + 100 + 100 +100 + 100 + 50 + 10 + 10 + 10 + 10 + 5 + 1 + 1 + 1 + 1) – Écriture possible du fait de la possibilité d’utiliser quatre lettres de suite.

Les Sciences Comportementales, elles, se basent sur les fondamentaux du système de perception et de cognition du cerveau humain. Avec la connaissance de ces fondamentaux, tout comme les chiffres 0 à 9, on peut répondre à tous les cas possibles d’interactions sans devoir réécrire à chaque fois de nouvelles règles. Les choses qui évoluent dans le temps sont les fondamentaux et non pas des règles.

In the digital world, where business results are ever more top of the list, user experience is one of the key factors of success.

Today is a day I’ve been looking forward to for 3 years. I am going to present you the latest innovation of Netway: the ability to travel in the mind of users in order to gain a better understanding of what’s going on.

I want to illustrate this by sharing part of the analysis we did on the Facebook site for one of our customers.

But, before getting into the subject, allow me to explain why it is necessary to understand what goes on in a user’s brain when you design a screen.

The answer is quite simple: users are more and more in contact with competing screens, it becomes ever more difficult to differentiate your screen from the competitors’ screens, …

Google’s CEO Eric Schmidt is right when he says human behaviour becomes a vital tool in the success of digital projects and in meeting objectives.

So, let’s go!

The brain works in sequences of activities that last milliseconds.

Thanks to eye-tracking, we can see where the brain decides to go to collect information because we can observe the eyes. However, it is impossible to know whether the person is already familiar with the content on the screen, whether the screen incites users to click or whether the user has memorised the screen, …

Now, all these problems belong to the past! Imagine looking through your customer’s eyes and now to travel within their brain.

The images of fMRI (functional magnetic resonance imaging) and of EEG (electro-encephalography) allow us to know which neurological mechanisms are involved when someone uses a site.

In plain English: we can see which zones of the brain are activated when a user is performing a task.

If we can identify the activated zones of the brain, we also know the answer to the following questions:

• Doesn’t the screen have too many elements?
• Which parts of the screen are analysed the most by the brain?
• Do users recognize the used visuals?
• Do the call-to-action elements incite action?
• Do users understand the content?
• …

And if we do that, we can objectively measure the user experience.

Let’s get back to our Facebook example…

I will deliberately make my explanation a bit more accessible so the greatest possible number of our community members can benefit from it.

Let’s go for it …

In the case of Facebook we see the right visual cortex has a higher level of activation. This indicates the visual elements at the left side of the interface generate more brain activity than the right-side elements.

But what does this mean? Let’s take a closer look at the activation flux in the visual cortex.

We see the visual cortex is not very activated between zone V1 and the Brodmann 7 zone (in blue). This means the visual attention (position in space, orientation and size of the graphical objects) requires little effort. This means the site has a visual organisation that requires little visual attention.

But if we look at the zone that goes from V1 to V4 (in orange), we see it has a higher level of activation. This means users non-consciously identify and recognize the visual elements on the screen.

The fusiform gyrus is the zone that will make us recognize faces and well-known things.

We can conclude Facebook has an easily understandable and efficient visual organisation. People recognize the visual elements of the screen, and in particular the faces.

We now have interesting data on the visual elements of the Facebook homepage. However, during a visit, many cerebral systems will be active in parallel. These activities constitute sequences of milliseconds and involve:

• the visual system
• the semantic system
• the motor system
• …

Let’s now analyse the content understanding of the site.

The Brodmann 44 zone is involved in recovering information in our semantic memory. This means a surfer watches the elements and this system will activate a network of knowledge about a certain word or an object.

The information that is recovered in the long-term memory during a Facebook site visit activates the semantic network. People will know what they see and that activates a set of linked information (I know this person, it is a friend of…, …).

We see the Brodmann 45 zone is not activated. If this had been the case, it would have meant the recovered information didn’t activate strong associations. That would mean the content is not very well known or not very often used by our brain.

In short, the content on Facebook is simple and does not require a considerable cognitive effort.

Let’s know check whether the call-to-action elements generate a lot of reaction.

There is a special zone in our brain, the Brodmann 6 zone, which is activated when a surfer thinks about clicking on something. This zone of the premotor cotex plans the movement of the hand and the fingers (before actually moving). By analysing this zone we know whether a call-to-action makes people want to click on something before they actually do so.

In the case of Facebook, the interface gives moderate results.

The conclusion…

Facebook has a simple visual organisation; users immediately recognize the graphical elements; the cognitive efforts are low and surfers understand the content.

We have analysed many more zones, such as the hypocampus that allows us to know whether a screen has been recognized, or the reward system that allows us to check whether people are happy, and so on.

So how do you put this information into practice?

In our case:

• We build screens based on the required behaviour.
• Once the screens have been designed, we check whether they activate the zones and activation levels that have been determined beforehand in the form of a hypothesis.
• We cross these data with the data of ocular analysis that have been gathered in order to have a view that is as objective and as certain as possible.
• If needed (read: in 99% of the cases), we correct the screen in order to generate the expected behaviour in more than 80% of the cases.

Dans un monde digital où les résultats business sont de plus en plus demandés par les organisations, l’expérience utilisateur est un des facteurs clés de succès.

Ceci est un jour que j’attends depuis 3 ans. Je vais vous présenter la dernière innovation Netway : la capacité de voyager au sein du cerveau des utilisateurs pour mieux comprendre ce qui s’y passe.

Afin de vous illustrer cela, nous allons partager avec vous une partie de l’analyse Facebook, réalisée sur le site de Facebook pour un de nos clients.

Mais avant d’entrer dans le vif du sujet, pourquoi est-ce nécessaire de comprendre ce qui se passe dans le cerveau des utilisateurs quand on conçoit un écran ?

La réponse est très simple : les utilisateurs sont de plus en plus confrontés à de nombreux écrans concurrents ; il devient donc de plus compliqué de se différencier de ses concurrents.

Comme le signale Eric Schmidt (CEO Google), le comportement humain devient un outil primordial pour réussir ses projets digitaux et atteindre ses propres objectifs.

Allons-y !

Le cerveau fonctionne par séquences d’activités en millisecondes.

Le eyetracking permet de voir où le cerveau a décidé de collecter des informations au travers des yeux. Par contre, il est impossible de savoir si la personne connait le contenu présenté ou si un écran donne l’envie de cliquer ou encore si un écran est mémorisé.

Tout cela est du passé ! Imaginez de voir au travers des yeux de vos clients et … et maintenant de voyager dans leur cerveau.

L’imagerie par résonance magnétique fonctionnelle (IRMf) et l’électro-encéphalographie (EEG) permettent de cerner les mécanismes neurologiques liés à l’utilisation d’un site.

Plus simplement cela permet de voir les zones activées au sein du cerveau lors de la réalisation d’une tâche.

Connaître les zones activées du cerveau permet de répondre aux questions suivantes :

• est-ce que l’écran n’est pas trop chargé ?
• quelles sont les parties de l’écran qui sont le plus analysées par le cerveau ?
• les visuels utilisés sont-ils reconnus par les utilisateurs ?
• les call-to-action donnent-ils envie de cliquer ?
• les contenus sont-ils compris par les internautes ?
• …

Tout cela pour mesurer de manière objective l’expérience utilisateur.

Prenons l’exemple de Facebook pour illustrer cela.

Je vais volontairement vulgariser mes propos pour que le plus grand nombre de membres de notre communauté puisse en tirer profit.

Dans le cas de Facebook, on voit qu’il y a une plus forte activation du cortex visuel droit, cela indique que les composants visuels dans la moitié gauche de l’interface génèrent plus d’activités cérébrales que les composants de droite.

Mais que peut-on déduire de ces activations ? Analysons plus avant les flux d’activation au sein du cortex visuel.

On remarque que le cortex visuel est peu activé entre la zone V1 et la zone Brodmann 7 (ici en bleu), cela indique que l’attention visuelle (position spatiale, orientation et taille des objets graphiques) demande peu d’effort. Le site a donc une organisation visuelle demandant peu d’attention visuelle.

Par contre on voit que la zone V1 vers V4 (ici en orange) est plus activée indiquant que les utilisateurs identifient et reconnaissent non-consciemment les éléments visuels présentés dans l’écran.

Le Gyrus Fusiforme est la zone impliquée dans la reconnaissance de visages et de choses connues.

En résumé, Facebook a une organisation visuelle simple d’appréhension et efficace puisque les gens reconnaissent les composants visuels présentés dans l’écran, principalement les visages.

Nous avons maintenant des données intéressantes sur les composants visuels de la homepage de Facebook mais lors d’une visite, de nombreux systèmes cérébraux sont activés en parallèle dans le cerveau formant des séquences en millisecondes :

• système visuel
• système sémantique
• système moteur
• …

Tournons-nous vers l’analyse de la compréhension des contenus du site.

La zone Brodmann 44 est impliquée dans la récupération d’informations en mémoire sémantique. Donc quand un internaute regarde des éléments, c’est ce système qui permet d’activer un réseau de connaissance autour d’un mot, d’un objet…

L’information récupérée en mémoire à long terme lors de la visite du site Facebook active le réseau sémantique, les personnes connaissent ce qui est proposé et cela active des informations liées (je connais cette personne, c’est un ami de… ).

Par contre Brodmann 45 n’est pas activée. Si cette zone avait été activée, cela aurait signifié que les informations récupérées n’activaient pas d’associations fortes, donc que le contenu n’est pas très connu ou pas souvent utilisé par le cerveau.

En résumé, les contenus proposés par Facebook sont simples et ne demandent pas d’effort cognitif important.

Attardons-nous maintenant à savoir si les call-to-action donnent l’envie de cliquer.

Une zone spéciale du cerveau, Brodmann 6, est activée lorsque l’internaute pense à cliquer. Cette zone du cortex pré-moteur planifie le mouvement de la main et des doigts (avant de les effectuer). Il est donc possible de savoir si un call-to-action donne l’envie de cliquer avant que le clic réel ne se produise.

Dans le cas de Facebook, l’interface donne moyennement envie de cliquer.

Donc en résumé :

Facebook a une organisation visuelle simple, les utilisateurs reconnaissent directement les objets graphiques, les efforts cognitifs sont très faibles et les internautes comprennent les contenus présentés.

Il y a encore beaucoup d’autres zones du cerveau qui ont été analysées, comme l’hypocampe qui permet de savoir si un écran est mémorisé, il y a aussi le système de récompense permettant de voir si les gens sont contents…

Comment utiliser concrètement ce genre de connaissances dans un projet ?

Dans notre cas :

• nous construisons les écrans sur base des comportements souhaités.
• une fois les écrans designés, nous vérifions si les écrans que nous avons réalisés activent bien les zones et les niveaux d’activation précédemment déterminés sous forme d’hypothèse.
• nous croisons ces données avec les données des analyses oculaires récoltées afin d’avoir une vue la plus objective et certaine possible.
• si nécessaire (et c’est à 99% le cas) nous corrigeons les écrans afin de générer les comportements attendus à plus de 80%.

Dans un post (http://www.useit.com/alertbox/anybody-usability.html) de décembre 2009, useit.com communique qu’avec peu de connaissance en Usability et avec 3 jours de testing  “you can typically at least double your conversion rate or other key business metrics”.

D’un autre côté, le même site  :

“Many people without a grounding in behavioral user-research principles use bogus methodology and thus get misleading findings. Poor methodology is especially common for eyetracking studies, and thus most published studies in this area are wrong”.

A vous de trouver l’erreur

En prenant cela avec humour, cela voudrait dire que nous aurions aujourd’hui des sites magnifiques offrant tous une expérience utilisateur optimale et des taux de conversion incroyables. La réalité est tout autre.

Dernièrement mon équipe a travaillé sur un projet pour une société “pure player internet”, composée de personnes senior dans plusieurs métiers du web – parmi lesquels la Usability – qui en changeant quelques éléments sur une landing pages ont fait chuter les taux de conversion de plus de 30 % en moins d’une semaine.

Gardons les pieds sur terre… Avec de plus en plus d’écrans digitaux et les changements rapides de comportements des internautes (dont nous en sommes), il faut des techniques de plus en plus sophistiquées pour construire des interfaces porteuses de résultats.

Si je trouve dommage de raconter des bêtises pareilles, j’aime beaucoup l’analogie de Jakob Nielsen :

“Usability is like cooking: everybody needs the results, anybody can do it reasonably well with a bit of training, and yet it takes a master to produce a gourmet outcome.”

A mon avis, un Chef n’a pas que quelques connaissances culinaires ; je pense aussi que tout le monde ne peut pas atteindre les résultats du Chef avec quelques règles. C’est un professionnel du goût qui connait les fondamentaux des produits qu’il assemble et c’est cette connaissance fondamentale qui lui permet de créer des plats incroyables de manière constante sans utiliser de recettes.

La Usability sera toujours la cuisine réalisée par tout un chacun sur base de règles qu’il faut adapter régulièrement, mais jamais elle ne sera la solution pour créer de manière constante des écrans efficaces.

Le Neuro-Marketing représente la cuisine basée sur les fondamentaux du goût (la connaissance des sens des clients, la connaissance approfondie des produits…) permettant, quel que soit le plat à créer, de pouvoir combiner ces fondamentaux entre eux (les chiffres indiens) pour obtenir un résultat de haute qualité.

Excellente semaine

In a December 2009 post (http://www.useit.com/alertbox/anybody-usability.html), useit.com claims that with little knowledge on the subject of usability and after only 3 days of testing, you can typically at least double your conversion rate or other key business metrics.

On the other hand, it also says:

“Many people without a grounding in behavioural user-research principles use bogus methodology and thus get misleading findings. Poor methodology is especially common for eye-tracking studies, and thus most published studies in this area are wrong”.

So, what’s it going to be?

Does this mean today’s sites are all magnificent, offering an optimal user experience and with incredible conversion rates? A quick reality check is all we need to know that’s far from the truth…

My team recently worked on a project for a pure Internet player. Their senior staff, which came from various web disciplines, including usability, changed some elements on a landing page and saw their conversion rates fall with more than 30% in less than a week.

So let’s keep our feet on the ground… Not only are their more and more digital screens, user behaviour – present company included – also changes at a staggering pace.

We need ever more sophisticated techniques to build result-driven interfaces.

There is something to be said for this analogy made by Mr Nielsen, even though I do find it cool. Here’s what he says:

“Usability is like cooking: everybody needs the results, anybody can do it reasonably well with a bit of training, and yet it takes a master to produce a gourmet outcome.”

I think a chef has more than just some basic knowledge about cooking. I also believe one needs more than just a set of guidelines to obtain the same result as a chef.

A chef is no less than a professional of taste who knows all there is to know about a product. It is this in-depth knowledge that enables him to time after time create incredible dishes without needing a recipe.

Usability will always be the type of cuisine anyone can use if he applies regularly updates rules. But it will never be the solution to constantly create efficient screens.

Neuromarketing can be compared to the cuisine based on the fundamentals of taste (what customers want and expect, an in-depth knowledge of products,…). It combines all these fundamentals to obtain a high-quality result, whatever the dish to be made.

Have a nice week

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.