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.

Dans son émission “Matière grise”, traitant de nombreux sujets scientifiques, la RTBf (télévision nationale belge) a tourné un reportage complet sur l’ergonomie appliquée à Internet.

J’ai été ravi d’apporter ma pierre à l’édifice pour ce tournage. J’espère que cette émission vous plaira autant qu’aux centaines de milliers de personnes qui l’ont déjà regardée.

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

Bonne semaine à tous. Marc

Eye tracking is one of a number of user test tools with which to analyze numerous indicators on the functioning of the visual system of users. 

There are many controversies around this technique. I would like to clarify a few points. 

Let’s first of all have a look at how it works. 

1. The data provided by eye tracking do no more than simply indicate position x, y and so on and the diameter of the pupil. These data are gathered at a regular frequency. At the end of the test, one has a series of data x and y that correspond to a diameter of the pupil. These raw data provide information on the real movement of the eyes. They never allow you to infer behaviour. 
    
2. Based on these raw data, algorithms analyze the points x and y to extract so-called ocular fixations. An ocular fixation consists of a number of raw points that eye tracking has recorded. To put things simply, the duration of the fixation is obtained by the number of x and y points that are close to one another. 
    
3. After the treatment of the data, software analyzes the data from different points of view. 

And that’s where the problem starts. People who lack a knowledge of the basics of the visual system and its use in our global behaviour, will only analyze the moving points on a screen or clouds of points that represent the average visualisation of users. 

I’ve read the following on a usability post. And unfortunately, this represents the common practice: 

“I have to admit I have discovered as much by analyzing the testers as by analyzing the eye tracking results (if not more, to be quite frank. But that may have something to do with my relative lack of experience?). Heat maps, however, that represent the zones of heat, which are the zones on the screen users have looked at for a longer period of time, are an undeniable plus. When talking with someone who only has a limited knowledge of the subject, they will help me to defend the point of view of usability in an irrefutable way.” (source : http://www.expressions.be/2007/10/07/tobii-eye-tracking-test/)

This kind of remark shows a lack of knowledge of the basics of the visual system. A pity because this means people will discard a precious tool without even realizing it, and worse, they will use material to impose their own vision of things, by merely stating their opinion is based on scientific fact. 

When you are familiar with the fundamentals of human behaviour, eye tracking and a number of other techniques, it allows you to do a number of things. Some examples. 

• Visualise hesitation patterns between different words in a navigation
• Detect whether a word or a text is read or not
• Detect the cognitive implication generated by each element of the interface
• Time-measure the discovery of different zones of the interface
• Measure the gaps in the eye movements as forecasted by the expert and those actually performed by the users
• Know in which lobe of the brain the information, captured by the eye, is analyzed. 

All these data, consolidated with other behavioural indicators, allow you to modify interfaces precisely and objectively. 

In the ten years time that eye tracking exists, we have developed over 50 key indicators and our own software to analyze ocular data in order to make up for the gaps in the market. 

 

Le “eyetracking” fait partie d’un panel d’outils de tests utilisateurs permettant d’analyser de nombreux indicateurs sur le fonctionnement du système visuel des utilisateurs.

Il existe beaucoup de controverses autour de cette technique et je souhaite éclaircir certains points. 

Commençons par préciser le fonctionnement d’un tel matériel :

1. les données enregistrées par un matériel de eyetracking sont simplement la position x,y et le diamètre de la pupille récoltés à une fréquence régulière. A la fin d’un enregistrement, vous avez simplement une série de coordonnées x,y auxquels correspondent un diamètre pupillaire. Ces données brutes renseignent sur le chemin réel emprunté par les yeux d’un utilisateur mais ne permettent pas d’inférer un comportement.
    
2. sur base de ces données brutes, des algorithmes analysent les différents points x,y pour en extraire ce que l’on nomme les “fixations oculaires”. Une fixation est composée d’un certains nombre de points bruts enregistrés par le matériel de eyetracking. La durée de la fixation est obtenue, en simplifiant, par le nombre de points x,y étant proches les uns des autres.
    
3. Après le traitement des données, des logiciels permettent d’analyser ces dernières selon plusieurs angles de vue. 

Et c’est là que le bât blesse. Les gens qui ne maîtrise pas les fondamentaux sur le système visuel et son utilité dans un comportement global, se contentent d’analyser des points qui bougent sur un écran ou des nuages de points représentant la moyenne des visualisations des utilisateurs.

J’ai lu sur un post traitant de Usability la parole suivante, qui malheureusement est monnaie courante :

“… je dois bien avouer que j’en ai découvert autant en observant les testeurs qu’en analysant les résultats de eye-tracking (si pas plus, en fait. Mais c’est peut-être lié à mon inexpérience relative?). Par contre, les “heatmaps” (représentation par zones de chaleur des zones sur lesquelles les utilisateurs se sont attardées) apportent un plus indéniable dans l’argumentation. Face à un interlocuteur borné, elles m’aideront à défendre le point de vue de la usability de manière irréfutable.” (source : http://www.expressions.be/2007/10/07/tobii-eye-tracking-test/)

Ce genre de remarque reflète un manque de connaissance sur les fondamentaux du système visuel. Ce qu’il y a de dommage, c’est qu’en faisant cela les gens passent à côté d’un outil précieux sans s’en rendre compte et pire, utilisent du matériel pour imposer leur manière de penser sous une couche “crois-moi, c’est scientifique”.

En connaissant les fondamentaux sur le comportement humain, l’eyetracking, couplé avec d’autres techniques, permet entre autre :

• de visualiser les patterns d’hésitations entre différents mots d’une navigation
• de détecter s’il y a lecture ou non d’un mot ou d’un texte
• de dégager la charge cognitive engendrée par chaque composant de l’interface
• de mesurer dans le temps la découverte des différentes zones de l’interface
• de mesurer les écarts entre le chemin oculaire prévu par l’expert et ceux empruntés par les utlisateurs
• de savoir jusque dans quel lobe du cerveau l’information captée par les yeux a été analysée
• …

Toutes ces données, consolidées avec d’autres indicateurs comportementaux, permettent de modifier les interfaces de manière très précises et avoir beaucoup d’objectivité.

En 10 ans d’utilisation de matériel de eyetracking, nous avons développé plus de 50 indicateurs clés et notre propre logiciel d’analyse des données oculaires afin de combler les manques du marché.