La première, mais également la plus simple est la loi de proximité. Il s’agit de la loi la plus logique dans le sens où notre cerveau assimile les éléments qui sont proches les uns des autres comme formant un tout. Il assimile, de même, les éléments séparés les uns des autres de façon identique.

Cette loi de proximité est accentuée en vision périphérique, car l’oeil y distingue les éléments de façon floue, entraînant le cerveau à créer inconsiemment un découpage de l’écran en fonction des différents types et largeurs d’espacements entre les éléments. Dès les premières fixations des éléments des zones qu’il aura assimilé, le cerveau sera donc capable de leur définir un but propre. Ainsi, l’utilisateur sera à même de définir à quel endroit de l’écran se situent les informations pour réaliser la tâche qu’il souhaite effectuer  par un simple scan de l’écran (et l’oeil fonctionne ainsi).

Pour illustrer le propos, voici un bon exemple tiré du site de Vert Baudet dans son menu de navigation de Homepage. Le rapprochement des éléments de celui-ci permet au cerveau d’assimiler instantanément qu’il s’agit d’un même tout. Toutefois, les séparations dans ce menu permettent également au cerveau de comprendre les différents univers du catalogue, l’utilisateur n’ayant alors pas besoin de parcourir le menu entièrement pour s’orienter. Ici, une autre loi de la Gestalt entre en jeu, la loi de similitude que j’aborderai la prochaine fois et qui est fortement liée à la loi de proximité.

En bref, la loi de proximité de Gestalt est un peu comme un plat de tapas, chaque assiette proposant un met différent et distinct de l’assiette d’à côté, bien que représentant le même plat. Mettre différents mets dans la même assiette aura pour conséquence qu’ils finiront par se mélanger dans leurs saveurs. Lorsque vous créez une interface web, pensez donc tapas plutôt que ratatouille !

La loi de Fitts

En ergonomie, la loi de Fitts est un incontournable dont on entend souvent parler. Cette loi s’applique aux tâches d’acquisitions de cibles, ou mouvements ciblés, qui sont typiquement ce dont il retourne lorsqu’un utilisateur a besoin de cliquer sur un lien ou un bouton pour naviguer, prendre contact, ajouter un produit dans son panier ou valider sa commande.

La loi de Fitts veut que « le temps requis pour atteindre une cible est proportionnel à la distance entre le point de départ et la cible, et inversement proportionnel à la taille de la zone de destination ». Mathématiquement, cela se traduit par la formule suivante : T = a+b.log₂(D/L) ou T correspond au temps moyen pour effectuer le mouvement, D la distance entre le point de départ et la cible, et L la largeur de la cible. Concrètement,  cela signifie que plus une cible est proche et grande, moins l’utilisateur met de temps à l’atteindre et donc à la cliquer, et inversement, plus une cible est éloignée et petite, plus l’utilisateur met de temps pour l’atteindre et la cliquer. Ceci est on ne peut plus logique, mais ne vous êtes-vous pourtant jamais repris à plusieurs fois pour cliquer sur un lien (qui devait donc être mal accessible car trop petit et/ou trop éloigné) ?!

La taille et la forme de la cible dans la loi de Fitts

Il est nécessaire d’aller plus loin que la simple logique de cette loi de Fitts qui ne s’applique que d’en une seule dimension, donc sur un axe horizontal ou vertical (L étant la largeur et non la surface). En effet, en fonction de l’endroit où se situe le pointeur de la souris à l’écran (ou le doigt en navigation mobile), la trajectoire entre le point de départ et la cible à cliquer n’est pas forcément, et même rarement, horizontale ! Je m’explique par le petit exemple ci-dessous (cliquez pour agrandir) :

Il est en effet nécessaire de prendre tous les facteurs de la navigation d’une interface en considération, comme par exemple le fait que celle-ci soit loin d’être uniquement horizontale. Ainsi, agrandir la largeur d’un bouton n’est pas nécessairement la meilleure solution pour qu’il soit cliquable plus facilement et rapidement. Par contre augmenter également sa hauteur permettra de meilleurs résultats.

Dans le cas des liens hypertextes, les mêmes remarques s’appliquent dans les exemples ci-dessous :
Vous souhaitez plus d’informations, cliquez ici.
Vous souhaitez plus d’informations, cliquez ici.
Vous souhaitez plus d’informations, contactez-nous ici.

Au-delà de la sémantique de ces différents liens, le second sera plus facilement cliquable que le premier, mais moins que le troisième. Afin d’améliorer nettement l’efficience au clic de ces liens, il est possible d’y ajouter un petit padding (qui correspond à une marge visible ou non déclarée grâce aux CSS) au-dessus et en-dessous de ceux-ci, ainsi la zone cliquable est agrandie tant horizontalement que verticalement.

J’ai insisté sur le mot « nettement » bien qu’évoquant une solution intégrant l’ajout d’un petit padding. En effet, je vous invite à revenir sur la formule mathématique de la loi de Fitts pour vous rendre compte qu’elle spécifie l’utilisation d’un logarythme. L’implication de ce logarythme est des plus importante car celui-ci est représenté par une courbe exponentielle, ce qui signifie concrètement, dans le cas de la loi de Fitts, que la résultante sur le temps d’atteinte de la cible est beaucoup plus élevée pour les petites tailles que pour les grandes tailles. En bref, agrandir légèrement un petit bouton ou lien a beaucoup plus d’incidence que d’agrandir un bouton d’une taille déjà conséquente.

Le placement de la cible dans la loi de Fitts

La seconde composante importante de la loi de Fitts est la distance qui sépare le point de départ de la cible. « Euh… Il est gentil celui-là » devez-vous penser, « mais comment savoir où situe à l’écran pointeur de la souris lorsque le cerveau commande à la main de déplacer celle-ci ?!!? » Bien entendu il ne s’agit pas d’une science exacte, mais grâce aux suivis statistiques, il est facilement possible de retracer les parcours types des utilisateurs, ainsi que de savoir de où ceux-ci arrivent. Il devient alors possible de prévoir en bonne partie où se situe sur l’écran le pointeur de la souris puisque lorsque l’utilisateur arrive sur une page de destination, le pointeur est toujours à l’endroit d’où il a cliqué sur la page d’arrivée. Ainsi, en considérant la navigation de l’utilisateur, optimiser le placement des éléments « call to action » afin que ceux-ci deviennent plus rapidement accessibles est réalisable.

La couleur des boutons

La couleur d’un bouton peut-elle avoir une influence dans la façon dont l’œil humain le verra et donc cliquera dessus ? Oui.

J’ai précédemment évoqué les types de vision de l’œil humain, à savoir la vision fovéale et la vision périphérique. Il faut savoir que l’œil est composé de 120 millions de bâtonnets pour 5 millions de cônes. Par ailleurs, les cônes se situent dans la zone fovéale de l’œil alors que la grande majorité des bâtonnets eux se situent dans la zone périphérique. Or, les bâtonnets n’ont la capacité de percevoir les éléments qu’en niveaux de gris, pas en couleur. C’est la raison principale nécessitant d’analyser ses interfaces en niveaux de gris dès la conception, les couleurs pouvant nous amener à avoir une mauvaise idée de la façon dont est perçue notre site web, car 95% de l’écran se situe dans la zone de vision périphérique et car les couleurs peuvent avoir des contrastes très inattendues en niveaux de gris.

On se rend bien compte ici que deux boutons pouvant sembler aussi visibles en couleurs le deviennent bien différemment en niveaux de gris. L’effet est d’autant plus marqué lorsque les boutons se trouvent au milieu des éléments d’une interface.

Concernant les liens, bien évidemment, les rendre distinguables du reste des contenus et affordants est une pratique essentielle de l’ergonomie. Inutile je pense de m’étendre sur ce point.

Sens de lecture (diagramme de Gutenberg)

Je souhaiterais conclure ce billet en évoquant rapidement le fameux diagramme de Gutenberg que j’ai schématisé ci-dessous et qui exprime le sens de lecture d’une page (en occident) lorsque les différents éléments de celle-ci sont homogènes :

Ce sens de lecture s’effectue comme illustré de la zone située dans le coin supérieur gauche vers la zone située dans le coin inférieur droit. C’est une des raisons pour laquelle on positionne les éléments d’informations de la marque telles que le logo et la baseline en haut à gauche des sites Internet, afin que l’utilisateur sache de suite où il se trouve et de quoi retourne le site.
Les deux zones secondaires, dans le diagramme de Gutenberg sont parcourues rapidement, l’œil scannant simplement d’éventuelles informations utiles à la réalisation de son modèle mental. Finalement, l’œil « finit sa course » dans la zone de fixation terminale.

Le diagramme de Gutenberg n’est toutefois valable, comme indiqué précédemment, que dans la mesure où les différentes zones sont homogènes. En effet, si les éléments d’une page ne le sont pas, alors ce sens de lecture ne tient plus, par exemple si sont présents une liste de recherche comme sur Google ou un menu imposant dans la colonne de gauche. La vision périphérique jouera alors son rôle de captation d’éléments semblant pouvoir mener à bien la tâche utilisateur. Dans les exemples énoncés ci-dessus, en fonction également de la tâche que l’utilisateur souhaite effectuer, la lecture se fera alors sous une forme de F, correspondant aux études menées par Jacob Nielsen.

Autant donc se servir de ce sens de lecture primaire pour accentuer l’efficacité des zones de première fixation et de fixation terminale, par exemple dans le cas d’une landing page ou d’une fiche produit. Pour ces cas de figure, il est donc préconisé de placer l’élément de « call to action » dans le coin inférieur droit plutôt que gauche. Dans le cas contraire, l’œil est « contraint » de faire marche arrière pour réaliser l’action une fois toutes les informations recueillies.

J’ai personnellement effectué des tests de placements du « call to action » à droite et à gauche en AB Testing, et j’ai effectivement analysé une différence de transformation notable.

Comment l’utilisateur assimile-t-il une interface web ?

Naturellement, la première fixation s’effectue dans la zone supérieur gauche de l’écran, principalement pour des raisons de modèle mental. En effet, nous savons d’expérience que les informations de base d’un site se situent dans cette zone (nom du site/logo, but du site/baseline, premiers éléments du menu). Bien entendu, il est possible que la première fixation ne se fasse pas dans cette zone si l’interface n’est pas créée dans ce sens, mais alors comment prévoir où se fera cette première fixation ? Et donc les suivantes ? Attention donc au «  respect des codes  ».

Comme je l’ai expliqué dans un billet précédent, à partir de cette première fixation, le cerveau, grâce à la vision périphérique, envoie l’œil vers le second point de fixation pour trouver les éléments dont il a besoin dans le but d’accomplir la tâche que l’utilisateur souhaite réaliser, et ainsi de suite pour le 3ème, 4ème points de fixation… Inconsciemment, le cerveau, au fur et à mesure des saccades de l’œil, mémorise les zones qu’il est capable d’assimiler. Il est donc important que ces zones soient clairement agencées d’une part, et surtout qu’elle le soient de façon logique, hiérarchique, etc. d’autre part. C’est là qu’interviennent les principes de la théorie de la Gestalt, afin de fournir au cerveau un paysage visuel optimisé.

Qu’est-ce que la Gestalt ?

La Gestalt, ou théorie de la forme, regroupe différentes lois facilitant l’assimilation et la mémorisation des éléments d’une interface par le cerveau, permettant à celui-ci de remplir plus aisément les tâches que les utilisateurs finaux souhaitent réaliser, et donc d’optimiser l’expérience utilisateur. Ces lois sont les suivantes :

• La loi de proximité, le cerveau regroupant en premier lieu les formes les plus proches les unes des autres
• La loi de similitude, le cerveau regroupant les formes identiques si la distance entre ceux-ci ne permet pas de les distinguer
• La loi de symétrie, le cerveau regroupant les formes symétriques dans un même ensemble
• La loi de bonne forme, le cerveau assimilant plus facilement les formes simples dans lesquelles un contenu est aisément identifiable
• La loi de continuité, le cerveau considérant des formes rapprochées comme faisant partie d’un même ensemble
• La loi de clôture, le cerveau assimilant plus facilement formes fermées que les formes ouvertes

Dans le cas d’interfaces web, les formes en question constituent les éléments visibles à l’écran.

Comment appliquer les principes de la Gestalt ?

Un exemple valant toujours mieux que de grands discours, voici l’importance de l’utilisation des lois de la Gestalt.
Au-delà des bugs d’affichage et publicités en mouvements prenant les 2/3 du « bloc central » (certes, la vision périphérique est très sensible aux mouvements, mais le cerveau est également capable d’assimiler qu’il s’agit d’une publicité, chose qu’il rejettera très probablement puisque l’utilisateur a une tâche à effectuer) qui donnent l’impression d’être sur un site de discounter, les principes de la Gestalt ne sont pas mis en pratique sur le site de la Banque Populaire.

On distingue sur l’interface un menu horizontal dans la barre du haut, une baseline qui prend tout de même 130px de hauteur, une colonne de gauche, un bloc central, une colonne de droite et un pied de page.

En faisant un zoning simple de cette interface, voici ce que l’on obtient :

Au premier coup d’œil, on se rend compte que les 18 zones qui composent cette interface peuvent être qualifiées de chaotiques dans leur organisation. Les zones de la colonnes de gauche se distinguent par leur largeur identique et leur verticalité, mais ne sont pas clairement séparées du bloc central et ne sont pas de taille identique (principe de similitude). On distingue également une symétrie des 2 zones en bas du bloc central, mais il s’agit de publicités en mouvement. La colonne de droite pourrait sembler organisée, pourtant tous les espacements étant identiques et de vraies zones n’étant pas clairement identifiables, il est impossible de distinguer les titres des « contenus ».
Par contre, l’interface est clairement ouverte par la zone de menu, et fermée (si l’on ne prend pas en compte le bug d’affichage) par le pied de page, et l’on distingue tout de même les 3 ensembles « colonne de gauche », « bloc central » et « colonne de droite », bien que l’espacement ne soit pas travaillé.

Voyons maintenant un zoning plus précis des zones qui seront assimilées :

En rouge sont représentées les zones qui n’apportent rien à l’utilisateur ou sont des publicités qui seront ignorées (car même si une d’entre elles intéresse un utilisateur, celles-ci tournent tellement rapidement qu’elles sont quasiment impossibles à lire).

En gris sont représentées les zones difficilement distinguables. En bas de la colonne de droite, le fait que les liens ne soient pas séparés entre eux et qu’ils ne soient pas clairement distinguables dans une zone leur étant propre les rend quasiment invisibles en vision périphérique.

En vert sont représentées les zones distinguables. Pourtant, la zone du centre, qui est le menu principal semble difficilement compréhensible comme tel, puisque qu’il ne se situe pas dans une zone où l’on pourrait le trouver habituellement et qu’il est dans une zone d’inconfort à cause des publicités en mouvement. Dans la colonne de droite, la zone de recherche est distinguable grâce au cadre du champ input, par contre, les zones dessous se confondent, ne permettant pas au cerveau d’assimiler la fonction des contenus.

On se rend vite compte que peu des principes de la Gestalt sont respectés ici, ce qui explique l’inconfort de l’interface dès le premier coup d’œil.

En résumé :

• Pas de travail sur les espaces selon la loi de proximité
• Pas de zones identiques selon la loi de similitude
• Pas de zones symétriques selon la loi de symétrie
• Peu de bonnes formes clairement identifiables
• Seules les zones de la colonne de gauche se rapprochent, mais sont des contenus peu importants
• L’interface est relativement bien fermée (si l’on ne prend pas en compte le bug d’affichage du pied), mais peu de zones sont clairement délimitées, selon la loi de clôture

Sans effectuer d’étude ergonomique poussée, le simple fait de mettre en pratique les principes de la Gestalt pourrait donner ce genre de résultat :

Je reviendrai plus détail sur l’application des différentes lois de la Gestalt dans de prochains billets.

Le psycho-physiologiste Richard Gregory a écrit « Lorsqu’on décrit l’œil, on le compare souvent à un appareil photo, mais les aspects les plus intéressants de la perception sont justement ceux qui différent radicalement de ceux de la caméra. » Cette citation est on ne peut plus vraie en ergonomie et design web et en voici les raisons…

Avant toute chose, il est important de savoir que l’œil est est constamment en mouvement, et que ceux-ci ne sont pas linéaires mais composés de saccades et fixations (chaque saccade dure en moyenne 1/40 s et est suivie d’une fixation de 1/4 s – ces temps diffèrent en fonction de la complexité de l’image). L’œil se déplace ainsi de zone en zone (ou d’élément, texte ou graphique, en élément), d’où l’importance d’attirer le regard vers des zones ou éléments proches et facilement identifiables et différentiables. Cette attirance s’effectue grâce aux informations que l’œil, de par sa constitution, envoie au cerveau.

Il est donc primordial de savoir que l’œil se compose de deux types de visions :

• La vision fovéale qui est, pour simplifier, ce que nous voyons de façon nette par le centre de la rétine (dans un champ de 3° représentant une zone de 2 à 3 cm de diamètre sur l’écran). Cette vision est consciente.
• La vision périphérique est tout ce que nous voyons « flou » autour de la vision fovéale. Cette vision couvre plus de 95% de la surface de l’écran et est non consciente.

L’erreur à ne pas commettre lorsque l’on réalise une interface web, c’est de se focaliser sur la vision fovéale (ce qui pourrait pourtant sembler logique puisqu’il s’agit de ce que l’utilisateur voit distinctement). En effet, si l’on se tient à cette vision, il n’est pas possible d’amener l’utilisateur (de façon inconsciente comme 95% de nos actions) vers les éléments de l’interface où il doit se rendre pour accomplir les tâches qu’il souhaite réaliser sur le site. Ces éléments n’étant pas, en majorité, ceux sur lesquels le regard est fixé puisque l’on ne peut fixer qu’une seule chose à la fois, ceux-ci se situent par définition dans la zone de vision périphérique. Or, la vision périphérique sollicitant beaucoup plus l’hémisphère droit du cerveau, associé à l’intuition et à tout un ensemble de fonctions cérébrales qui éloignent des fonctions logiques et de la pensée analytique, ce qui est bien ce que nous recherchons lorsque nous souhaitons rendre une interface plus intuitive à l’utilisation, l’importance de cette vision est d’autant plus importante !

La vision périphérique est de moins en moins nette plus on s’éloigne de la zone de vision fovéale, mais le cerveau n’a pas besoin de distinguer un élément nettement pour être capable de l’analyser. Pour les sceptiques (c’est très mal !!), tout en lisant votre écran, n’êtes-vous pas capable de distinguer, nommer, et saisir de la main les objets se trouvant sur votre bureau sans avoir à détourner le regard pour les regarder fixement ?! Héhé !!
Pour illustrer un peu ces belles paroles,  voici un exemple représentant ce que distingue l’œil sur une interface web avec sa vision fovéale et sa vision périphérique.

… Juste pour information, le seul cas de figure ou l’œil suit une trajectoire linéaire sans effectuer de saccades et fixations, c’est lorsqu’il suit un objet en mouvement (comme une proie). Suivez votre doigt en mouvement, vous verrez !

Je reviens donc ici plus précisément sur les questions cibles, car se baser sur un avis empirique et/ou logique reste subjectif et ne peut donc pas faire valeur d’expertise. Par contre, se baser sur les conclusions d’études scientifiques et sur une bonne connaissance du système perceptivo-cognitif permet d’obtenir les résultats escomptés et de lever toute subjectivité.

Dès 1967, le psychologue russe Alfred Yarbus a démontré, par le biais du Eye Tracking, que les mouvements oculaires sur des images étaient fortement influencés par les tâches demandées aux sujets. Ses travaux ont beaucoup été cités, mais ils se basaient sur des temps de visualisation des images de 2 à 3 minutes, or nous savons toutes et tous que les utilisateurs d’un site web restent en moyenne moins de 1 minute sur l’accueil et que près de la moitié de ceux-ci quittent le site dans les 10 premières secondes.
Je préfère donc me baser sur d’autres études comme celle menée par 4 scientifiques américains (J. Nelson, G. Cottrell, J. Movellan et M. Sereno), du département des sciences cognitives de San Diego, qui ont repris les travaux du professeur Yarbus.

Dans cette expérimentation de 2004, chaque sujet voyait chaque image une seule fois, avec une seule tâche demandée. D’autres sujets avaient différentes tâches demandées, incluant une visualisation libre (sans tâche). De la même façon, il en résulte que les mouvements oculaires sont différents selon les tâches demandées. Mais le plus important est que cette divergence a été observée dès les premières fixations, et non sur un labs de temps assez long, puisque les sujets n’ont pu voir les images que quelques secondes. Ils ont également démontré que certaines images étaient plus soumises aux divergences (les images les plus complexes) que d’autres. Par ailleurs, les visualisations libres sont fréquemment plus longues dans le temps que celles liées à une tâche demandée.

Pour faire le parallèle avec l’ergonomie et l’expérience utilisateur, le comportement du couple œil/cerveau devant une interface web est identique à celui devant une image. Or, lorsqu’un utilisateur est confronté à une interface web, les tâches qu’il souhaitera réaliser sur celle-ci influeront sur ses mouvements oculaires et donc sur sa perception et son utilisation de l’interface, d’où l’importance de définir les bonnes questions cibles. De plus, un utilisateur arrivant sur un site web ayant toujours une tâche en tête, les premières secondes sont déterminantes dans sa perception de l’interface.

Au-delà des questions cibles, la simplification des interfaces est également un point important puisque comme le montre l’expérimentation, les images simples sont moins soumises aux divergences d’une tâche à une autre. Je reviendrai sur l’explication prochainement.