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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Have a good week!

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

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

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

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

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

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

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

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

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

Passe une excellente semaine.