More and more marketing and e-business directors want to improve their short-term online results. This means they don’t invest in complete update works. Instead, they choose to do expert interventions of a chirurgical nature on very precise pages.

Even though we have numerous tools with which to analyze quantitative data (the ‘how much’) on a user track, the time spent on a page,… we also see that there is a lack of techniques when it comes to understanding the ‘why’ of the different types of behavior.

As a result it is difficult to know what needs to be changed in a user track or how we need to improve a page to:

1. Avoid weakening the current results
2. Obtain better bottom-line results.

This happens quite often: organizations modify a page and the bottom-line results go down, without them knowing the origin of the problem.

There is no magical formula to guarantee results – the person finding that formula would soon be a billionaire! – but there are techniques that drastically limit the risks and that allow us to modify pages posing a problem.

Before we go into this method, I want to draw your attention to a truth that is all too often forgotten: the only thing to make sure you can meet your objective, is to keep in mind that a well-built screen should generate identical behavior with the majority of users.

That’s why it is important to focus on the targeted behavior you want to see when users are visiting your page, and not on the design of the page.

Easy, right?

Here’s how I take on things:

1.    Clearly define the bottom-line objective you want to meet.

This step is fundamental in achieving results. Without a clear objective, it is impossible to adapt your page.

Why? Because it allows you to guide your reflections. It will ensure the buy-in of all people involved in the project and it will allow you to find the right resources.

An example of a clear objective: “To increase the sales of product A by X % over a period of six months, via the site.”

2.    Identify the scenarios that users will want to follow and that are in line with your objective.

This second step is just as important as the first one. You need to make a difference between the motivation and the needs of the user on the one hand and your objectives on the other hand (managed in step 1).

An example of a clear scenario: “A manager with children has water damage. She can’t get away from work during working hours and she will want to make an online claim”

3.    Define the behavior that should be observed on the page (targeted behavior).

It is in this step that neurosciences start to come into play: it comes down to establishing, millisecond after millisecond, the activation order of the different neural circuits (conscious and especially non-conscious) that will make up the targeted behavior of the user.

Here is a hypothesis of a behavioral sequence, just to give you an idea. The terms (between brackets) are the brain zones that are observed during tests in order to check whether the targeted behavior is indeed generated:

• My vision center receives visual stimuli and perceives the spatial configuration of the different zones of the screen with ease (BA 17, BA 18 & dorsal BA 19).
• In parallel to this basic visual treatment, and based on summary visual data, my emotional brain:
• Generates immediate and instinctive pleasure when seeing the screen (Putamen) and doesn’t feel any danger or fear upon seeing the screen (Amygdales).
• Detects the booking zone and emotionally codes it as being interesting (Thalamus).
• Also detects the news zone and the zone with tips and emotionally defines them as being pleasant and motivating (Thalamus).
• Excites my logical brain in order to draw its attention to these stimuli and to focus on the ‘good’ options (Globus Pallidus).
• Since the task is easy and the targeted stimuli have been identified, my logical brain will need but few attention and working memory resources to plan and coordinate the in-depth analysis of the targeted zones (BA 9).
• My logical brain receives the spatial data (BA 7) of the relevant zones and will direct the eyes towards the relevant zones in order to collect as much precise data as possible.
• Since the screen has a good structure, my logical brain will easily draw my visual attention to the stimuli that are perceived as relevant (temporoparietal junction BA 39 and right BA 40).
• My logical brain evaluates the content and finds the stimuli attractive (BA 31).
• Since the content of the different zones is easy to read and easy to understand (BA 39 and left BA 40), the high-level reflection is not complex (BA 9, BA 46).
• The user experience is gratifying (BA 10) and the different zones of the screen have a rewarding value to me (BA 11, BA 12).
• No aversive information (Insula) blocks my emotional brain from functioning. My emotional brain and my logical brain work well together.
• My decisions and judgments before performing a task on the screen get a positive evaluation (caudate nuclei) and I don’t perceive any risks (anterior cingulate Brodmann cortex 24 (ventral) and cortex 32 (dorsal)).
• I have a strong motivation to act and that is translated into my wish to click (BA 6).

The created sequence is the ideal targeted behavior.

It will be the foundation for the analysis of the gap between the current behavior and the targeted behavior.

It also allows me to form an opinion on the problems of the page that needs to be adapted.

4. Analyze the current behavior of users (current behavior).

There are different ways of proceeding in this step, depending on the requirements of the planning, the strategic importance of the question at hand, …

In order to check the current behavior, the techniques can go from the heuristic analysis of the page by an expert in neurosciences to the use of an fMRI or advanced eye-tracking.

Thanks to the techniques used in neurosciences, we can accurately measure each zone of the brain that is involved in the current behavior.

5. Adapt the page in order to transform the current behavior into the targeted behavior.

After having constructed the targeted behavior and after having analyzed the way users behave on the problem page, all we need to do now, is to adapt the page in order to generate the expected behavior. This may include the geometry of the page, the type of elements, the content and etcetera.

6. Check whether the expected behavior does indeed occur on the new page.

By doing objective tests, we can measure the gaps between the ideal behavioral sequence and the sequence generated by the new page. And of course, all this is based on the user scenarios that have been defined in step 2.

And now it’s up to you!

De plus en plus de directeurs marketing / eBusiness souhaite améliorer les résultats online à court terme. Donc pas question de gros chantiers de refonte complète mais bien des interventions expertes de natures chirurgicales sur des pages précises.

Si nous avons beaucoup d’outils permettant d’analyser les données quantitative (le “combien”) sur un parcours utilisateur, le temps passé dans une page, … force est de constater que quand il s’agit de comprendre le “pourquoi” des ces comportements, les techniques se font plus rare.

Il est donc difficile de savoir quoi modifier au sein d’un parcours utilisateur ou comment améliorer une page pour :

1. ne pas déteriorer les résultats actuels
2. obtenir de meilleurs résultats bottom-line

En effet il est courant de voir des organisations adapter une page et voir chuter les résultats bottom-line sans pouvoir décrire d’où vient le problème.

Si il n’existe pas de formule magique pour garantir les résultats – la personne qui l’aurait serait milliardaire – il existe des méthodes et des techniques pour limiter les risques de manière drastique et pouvoir adapter les pages posant problèmes.

Avant de discuter de méthode, j’insiste sur une vérité souvent oubliée : la seule chose qui peux assurer que votre objectif soit atteint, c’est de vous rappeler qu’un écran bien construit doit générer des comportements identiques chez la grande majorité des utilisateurs.

Pour cela il est important de placer l’épicentre de vos réflexions sur le comportement cible que vous souhaitez observé auprès des utilisateurs qui visitent votre site et pas sur le design de la page.

Simple, non?

Je partage avec vous une manière de procéder :

1. définir clairement l’objectif bottom-line que vous souhaitez atteindre

Cette étape est fondatrice de l’atteinte des résultats. Sans un objectif clair, impossible d’adapter votre page.

Pourquoi? Parce que cela permet de fournir une direction à vos réflexions, cela va engager tous les acteurs du projet et vous permettre de mobiliser les bonnes ressources.

Exemple d’un objectif clair : “Augmenter les ventes du produit A de x% dans les six mois via le site”

2. identifier les scénarios que les utilisateurs souhaitent réaliser et qui sont en ligne avec votre objectif

Cette seconde étape est tout aussi fondatrice que la première. En effet, il est important de distinguer la motivation et les besoins de l’utilisateur de ce que vous souhaitez atteindre (qui est géré dans l’étape 1).

Exemple de scénario clair : “Une cadre avec enfants vient de subir un dégat des eaux. Comme elle ne peut pas se déplacer pendant les heures ouvrables, elle voudrait déclarer en ligne son sinistre”

3. définir le comportement qui devrait être observé sur la page (comportement cible)

C’est à partir de cette étape qu’interviennent les neurosciences : il s’agit de réaliser, milliseconde après milliseconde, l’ordre d’activation des différents circuits neuronaux (conscient et surtout non-conscient) qui composeront le comportement cible de l’utilisateur.

Pour vous donner une idée, voici une hypothèse de séquence comportementale – les termes (entre paranthèses) sont les zones du cerveau qui seront observées lors des tests afin de vérifier si le comportement est effectivement généré :

• Mon centre de vision reçoit des stimuli visuels et perçoit la configuration spatiale des différentes zones de l’écran avec facilité (BA 17, BA 18 & BA 19 dorsal).
• En // à ce traitement visuel de base, et à partir des données visuelles sommaires, mon cerveau émotionnel =
• génère un plaisir immédiat et instinctif à la vue de l’écran (Putamen) et ne ressent aucun danger ou peur en regardant l’écran (Amygdales)
• détecte la zone de booking et la teinte émotionnellement comme intéressante (Thalamus)
  détecte également la zone d’annonce ainsi que les bons plans et les teinte émotionnellement comme plaisante, motivante (Thalamus).
• excite mon cerveau logique afin qu’il s’intéresse à ces stimuli et se concentre sur ce qui est essentiel, sur les “bonnes” options (Globus Pallidus).
• Comme la tâche est simple et les stimuli cibles bien identifiés, mon cerveau logique utilise peu de ressources attentionnelles et de mémoire de travail pour planifier et coordonner l’analyse approfondie des zones cibles (BA 9).
• Mon cerveau logique reçoit les coordonnées spatiales (BA 7) des zones pertinentes et va envoyer les yeux sur toutes les zones pertinentes afin de récolter des données plus précises.
• Comme l’écran est bien structuré, mon cerveau logique oriente avec facilité mon attention visuelle vers les stimuli jugés pertinents (Jonction temporopariétale BA 39 & BA 40 droite).
• Mon cerveau logique évalue les contenus et juge les stimuli attractifs (BA 31)
• Comme les contenus des zones sont simples à lire et à comprendre (BA 39 & BA 40 gauche), la réflexion de haut niveau n’est pas complexe (BA 9, BA 46).
• L’expérience d’utilisation est gratifiante pour moi (BA 10) et je perçois la valeur récompensante des différentes zones de l’écran (BA 11, BA 12).
• Aucune information aversive (Insula) ne viens inhiber le fonctionnement de mon cerveau émotionnel. Mon cerveau émotionnel et mon cerveau logique coopére ensemble.
• Mes décisions/jugements avant de réaliser une action dans l’écran sont colorés positivement (Noyaux Caudés) et je ne perçois pas de risque (Cortex Cingulaire antérieur Brodmann 24 (Ventral)  & 32 (Dorsal))
• Ma motivation à agir est importante et cela se traduira par mon envie de cliquer (BA 6)

La séquence créée constitue le comportement cible idéal.

Il va servir de base pour analyser l’écart entre le comportement actuel et le comportement cible.

Il permet également d’avoir un avis sur les problèmes observés dans la page à adapter.

4. analyser le comportement actuel des utilisateurs (comportement actuel)

Dans cette étape, il existe différente manière différente de procéder en fonction des impératifs de planning, de l’importance stratégique de la demande, …

Afin de vérifier que les comportements actuels, les techniques utilisées peuvent aller depuis l’analyse heuristique de la page par un expert en neurosciences jusqu’à l’utilisation du fMRI en passant par l’utilisation des techniques d’advanced eyetracking.

Les techniques de neurosciences permettent de pouvoir mesurer avec précisions chacune des zones du cerveau impliquée dans le comportement actuel.

5. adapter la page pour passer du comportement actuel au comportement cible

En ayant construit le comportement cible et après avoir analyser la manière dont fonctionne les utilisateurs sur la page posant problème, il ne reste plus qu’à adapter la page (géométrie de la page, type d’éléments, contenus, …) pour générer le comportement attendus.

6. vérifier si le comportement attendus est bien généré par la nouvelle page

En effectuant des tests objectifs, vous pouvez mesurer les écrats entre la séquence comportementale idéale et celle générée par la nouvelle page. Et tout cela bien entendu sur base des scénarios utilisateurs établis en étape 2.

A vous de jouer maintenant

Voici la vidéo de l’intervention à ParisWeb 2011.

J’en profite pour remercier les organisateurs et les participants pour l’accueil chaleureux et professionnel.

De nombreux participants m’ont demandé si je pouvais intervenir en 2012 pour aller plus en détails opérationnel de l’utilisation des neurosciences appliquées. Ce sera avec plaisir si les organisateurs trouvent le sujet intéressant

Les neurosciences au service du design numérique par parisweb

Several times a year, we meet people working in large organizations who have never been informed of the new possibilities of using neurosciences when conducting user tests.

Over time, studies have evolved around two main principles:

• Quantitative tests, whose representativeness allows for an exact and precise research, based on a large number of testers.
• Qualitative tests, whose in-depth explanation allows for a detailed understanding of the behavior of a smaller sample of testers.

The origins of the current studies and techniques can be found in the marketing world and we see that their use in the digital world doesn’t provide the whole picture.

A simple Google search gives a clearer view of the used techniques:

• The so-called rational qualitative techniques: the use of silence, the stimulus of certain subjects, the reformulation of what users say, …
• The so-called projective qualitative techniques: open analogies, Chinese portraits, role-playing, imaginary constructions, … with the aim of putting the imagination and the creativity of the participants to work.
• Quantitative techniques: surveys, panels, questionnaires, …

All these techniques interrogate the 5% of cerebral activities of a participant that are conscious. In other words, with these techniques, participants are asked to use the zone of their brain that is responsible for high-level thinking.

But what about the 95% of non-conscious activities that go on in their brain: their emotional level, their level of commitment, their genuine understanding of what they are reading, their desire to click, …? All these activities constitute the majority of the cerebral activity of a user in front of a screen…

Neurosciences can offer an answer to these questions.

The fundamental principle of neuro-scientific tests is to measure what a facilitator or a human observer is unable to pick up: the real behavior of participants.

This can be compared to the Pareto principle: 80% of the traditional techniques used to evaluate screens can only collect 20% of the real use. The 20% of tests based on neuro-scientific techniques can measure 80% of the behavior.

User statistics are excellent indicators to measure the behavior quantitatively but of course, this requires the site to be online.

With neurosciences, we can:

• Understand the reason-why of behavior that has emerged from user statistics, or
• Predict the behavior on a screen.

Thanks to neurosciences, we can provide an answer to the questions all web managers have:

• Which track do users follow?
• Which zones draw the attention of users?
• Which zones are looked at by users?
• How do they analyze/understand the zones they look at?
• What is the level of complexity of the analyzed zones?
• Which emotions do the zones generate?
• What is the level of commitment in relation to the different zones?
• Which zones make the users act?
• Which zones are memorized/remembered by users?
• What do users verbally say about the zones?

My team has put together a list of 63 different indicators to answer these questions.

• With advanced eye-tracking, we can measure 16 indicators (most eye-tracking analyses in the market only use 2 or 3 basic indicators).
• The 47 other indicators use neuro-scientific techniques, including functional MRI.

Plusieurs fois par an nous sommes confrontés à des personnes au sein des grandes organisations qui n’ont jamais été informées des nouvelles possibilités que proposent les neurosciences lors de la réalisation de tests utilisateurs.

Au fil du temps, les études ont beaucoup évoluées autour de deux grands principes :

• les tests quantitatifs où la représentativité permet de quantifier une recherche de manière exacte et précise sur base d’un grand nombre de testeurs.
• les tests qualitatifs où l’explication en profondeur permet de comprendre en détail certains comportements sur un échantillon plus restreint de testeurs.

Si les origines des études et des techniques actuelles proviennent du monde marketing, leur utilisation dans le monde digital n’est pas suffisante.

Une simple recherche dans Google permet de se rendre compte des techniques proposées :

• techniques qualitatives dites “rationnelles” : utilisation de silence, relances sur un sujet, reformulation des propos des participants, …
• techniques qualitatives dites “projectives” : analogies ouvertes, portraits chinois, jeux de rôles, constructions imaginaires, … visant à faire travailler l’imagination et la créativité des participants.
• techniques quantitatives : questionnaires, panels, sondages, …

Toutes ces techniques interrogent les 5% d’activités cérébrales conscientes d’un participant. En d’autres termes, ces techniques demandent aux participants d’utiliser une zone de leur cerveau responsable de la réflexion de haut niveau.

Mais qu’en est-il des 95% d’activités non-conscientes qui se passent dans leur cerveau : leur niveau émotionnel, leur niveau d’engagement, leur compréhension réelle de ce qu’ils lisent, leur envie de cliquer, … qui représentent la majorité de l’activité cérébrale réelle d’un utilisateur face à un écran?

Les neurosciences servent à répondre à ces questions. En fait le principe fondamental des tests de neurosciences est de mesurer ce qu’un animateur ou observateur humain est incapable de récolter : le comportement réel des participants.

En se calquant sur la loi de Paretto, 80% des techniques classiques utilisées pour évaluer les écrans ne permettent de récolter que 20% de la réalité d’utilisation. Les 20% de tests utilisant des techniques de neurosciences permettent de mesurer 80% des comportements.

Aujourd’hui pour mesurer les comportements de manière quantitative, les statistiques d’utilisation sont d’excellents indicateurs mais demandent bien entendus que le site soit en ligne.

Les neurosciences permettent de mesurer :

• soit le pourquoi d’un comportement observé par les statistiques d’usage
• soit de prédire le comportement sur un écran.

En fait, les neurosciences permettent d’avoir une vue complète sur les questions que tous les responsables web se posent :

• Comment les utilisateurs réalisent les parcours ?
• Quelles zones attirent l’attention des utilisateurs ?
• Quelles sont les zones regardées par les utilisateurs ?
• Comment sont analysées/comprises les zones regardées ?
• Quelle est la complexité/facilité des zones analysées ?
• Quelles émotions génèrent les zones ?
• Quel est le niveau d’engagement des utilisateurs face aux différentes zones ?
• Quelles sont les zones sur lesquelles les utilisateurs agissent ?
• Quelles sont les zones mémorisées/récupérées par les utilisateurs ?
• Que disent verbalement les utilisateurs à propos des zones ?

Mon équipe récolte 63 indicateurs différents pour répondre à ces questions :

• l’advanced l’eyetracking permet d’en mesurer 16 (la majorité des analyses eyetracking que je vois sur le marché utilisent les 2 ou 3 indicateurs basiques).
• les 47 autres indicateurs sont récoltés par des techniques de neurosciences dont l’IRM fonctionnel.

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

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

The Belgian programme “Matière grise” is a show about many scientific topics and is broadcasted on the RTBf (French-speaking national broadcasting network in Belgium). It included a complete report on ergonomics on the Internet. 

I was delighted to make a contribution to the making. I hope the programme will please you as much as the hundreds of thousands of people who have already watched it. 

Matière Grise sur l’ergonomie from theafter on Vimeo.

Have a nice week.