Ergonomie Web
Définition ergonomie :
Au départ l’ergonomie n’a pas grand chose à voir avec le web. Formé des mots grecs ἔργον (érgon) le travail et νόμος (nόmos) la loi, l’ergonomie désigne l’étude quantitative et qualitative du travail, visant à en améliorer ses conditions.
Adapté au web, elle combine l’ergonomie informatique visant à améliorer le dialogue homme – ordinateur et ergonomie produit visant à améliorer la qualité, l’utilisabilité d’un produit, afin de conduire à une utilisation fluide d’un site ou d’une appli.
Les concepts de base :
Commençons par expliquer quelques concepts simples qui peuvent être utile en ergonomie sur le web.
Théorie de la Gestalt (forme) :
La théorie de la Gestalt ou psychologie de la forme est une théorie psychologique, philosophique et biologique selon laquelle le cerveau humain va chercher à organiser ce qu’il voit de manière à reconnaître des structures connues. C’est la loi de base dont découlent toutes les autres dite loi de la bonne forme.
Les principales lois :
- La loi de continuité : on perçoit des points rapprochés comme une forme continue.
- La loi de la proximité : nous regroupons les éléments d’abord les plus proches les uns des autres.
- La loi de similitude : si la distance ne permet pas de regrouper les points, nous nous attacherons ensuite à repérer les plus similaires entre eux pour percevoir une forme.
- La loi de destin commun : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme.
- La loi de familiarité : les formes les plus familières vont être perçues plus facilement.
- 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.
Exemple :
- Les zones ne sont pas très bien délimité, on a donc du mal à les identifier.
- Les titres ne se ressemblent pas, on ne les perçoit donc pas comme étant de même type.
- Le deuxième titre étant plus proche du premier paragraphe on a tendance à l’associer à celui-ci alors qu’il s’agit en réalité du titre du deuxième paragraphe.
- En rajoutant quelques éléments graphiques et en gérant mieux les espaces entre les différentes parties, on délimite mieux les différentes zones, qui ne deviennent plus claires pour l’utilisateur.
Sur la gestion des espaces, il existe une règle de mise en page issu de l’édition papier, qui dit que les blancs tournants, autrement dit blanc qui encerclent une page doivent être plus grand que les blancs internes, c’est à dire les blancs qui séparent les différents éléments d’une page.
Les structures de pages :
Diagramme de Gutenberg :
Il s’agit d’une grille de lecture défini par Gutenberg au 15ème siècle, permettant de cibler les zones chaudes et froides d’une page.
- Zone optique primaire
- Zone secondaire
- Zone aveugle
- Zone terminale
Z pattern :
Cette structure découle directement du diagramme de Gutenberg.
F pattern :
L’utilisation d’outils comme le “eye-traking” a permis de mettre en évidence un motif en F dans le parcours visuel d’un utilisateur sur une page.
La ligne de flottaison :
Il s’agit d’une ligne de référence désignant la limite maximum en dessous de laquelle les éléments de la page ne sont plus visibles sans avoir à scroller. On sait aussi qu’un grand nombre d’utilisateur ne descendent pas en dessous de cette ligne (environ 80%), il faut positionner les éléments importants de la page au dessus de cette limite.
Bien évidemment cette ligne dépend de la taille de l’écran utilisé, ainsi que du navigateur. On choisit donc une valeur moyenne de 600 - 650 px pour un affichage sur ordinateur.
Affordance :
C’est la capacité d’un objet à suggérer son utilisation.
Prenons un exemple piqué à Karim Debbache dans son épisode de Crossed sur le film “Mario Bros” : les jeux Mario (en 2D).
Le premier ennemi que l’on croise, un goomba, a la forme d’un bumper qui donne naturellement l’envie de sauter dessus.
Ensuite le deuxième élément sur la route ce sont les blocs. On repère immédiatement le bloc avec le point d’interrogation, qui donne envie d’interagir avec. Et la seule action possible avec Mario à ce stade étant le saut, on donne automatiquement un coup de tête dedans.
Le troisième élément, ce sont les tuyaux et immédiatement on a envie de rentrer dedans et c’est presque sans y penser que l’on va appuyer sur bas en passant dessus.
Loi de Fitts :
La loi de Fitts nous dit : « 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. »
On peut donc en déduire qu’une cible sera plus rapidement atteinte par l’utilisateur si elle est grosse et proche que si elle est petite est loin.
Loi de Hick ou Hick-Hyman :
La loi de Hick ou Hick-Hyman définit le temps qu’il faut à un utilisateur pour prendre une décision en fonction du nombre de choix à sa disposition.
Plus il a de possibilité de choix, plus un utilisateur va mettre de temps à se décider. Cette loi nous dit aussi que l’ajout d’une possibilité impactera d’autant plus le temps de décision de l’utilisateur que le nombre de choix de départ est faible.
Quelques bonnes pratiques :
Facilité la compréhension :
Cohérence externe :
- Le vocabulaire doit être adapté à la cible.
- Quand on choisit des pictos, le rapport signifiant / signifié doit être logique.
- Cohérence avec les codes de la vie en général.
- Cohérence extérieur lié à la culture.
- Un signe doit avoir la même signification que partout ailleurs.
Cohérence interne :
- Le vocabulaire, le niveau de langue, le ton doit être le même sur tout le site.
- Un même élément visuel doit toujours avoir la même fonction.
- Inversement des fonctionnalités similaires doivent avoir des apparences similaires.
- On garde les mêmes intitulés titres / menu.
- Les éléments doivent rester à la même place.
On parle aussi parfois d’apprentissage externe, ce que j’ai appris avant me permet de comprendre et d’utiliser le site ou l’application. C’est pour cela qu’il faut bien faire attention de respecter les standard et les conventions existantes.
Jakob Nielsen les définit selon le pourcentage de sites qui applique un principe. On parlera donc :
- D’un standard lorsque 80% des sites utilisent le même principe
- D’une convention lorsqu’un principe est utilisé par 50 à 79% des sites.
Pour ce qui est de l’apprentissage interne, je vais reprendre mon exemple sur Mario de tout à l’heure. Une fois que vous avez compris que vous pouviez tuer les ennemis en leur sautant dessus, vous allez reprendre le principe sur les ennemis suivant et ainsi progresser dans le jeu. Si subitement les règles changent, le joueur va probablement mourir et devrait réapprendre à tuer les ennemis. Ce qui risque d’engendrer de la frustration.
Bien architecturer son site :
- Structure linéaire : linéaire, chaque élément découle du précédent, peu d’intervention de l’utilisateur (idéal pour les sites one-pages, tunnel de vente)
- Structure centralisé : toutes les pages sont accessibles depuis l’accueil, linéaire, faible inter-activité.
- Structure pyramidale : plusieurs options de navigation, structure logique et hiérarchique. (amplitude et profondeur)
- Structure en réseau : pas de hiérarchie claire, système secondaire.
- Structure en toile d’araignée : aucune hiérarchie, toutes les pages sont connectés entre elle.
Le site doit être lisible :
L’utilisateur ne doit pas avoir besoin de déchiffrer les contenus.
- Attention au contraste : La couleur du texte doit être très différentes de celle du fond, notamment en terme de luminosité. Attention aussi à la vibrance, éviter les couleurs complémentaire.
- Attention aux typo : Les typos « fantaisies » doivent être limité au titre, voir au logo. Bannir les typos illisible.
- Attention aussi à la taille des éléments et des textes.
Ça passe aussi par une bonne organisation visuelle :
- Bien hiérarchiser son information : Les informations les plus importantes sont les plus visibles (plus grosses dans une couleur qui se détache)
- Regrouper visuellement les éléments qui forment un même ensemble.
- Les éléments de même nature se ressemble visuellement afin de pouvoir être identifier rapidement.
Le site est réactif/interactif :
- Si l’utilisateur effectue une action, le site lui renvoie un feedback visuel.
- Si l’utilisateur se trompe, une erreur claire et intelligible.
- Les réponses sont immédiates et si ça n’est pas possible, le site doit indiqué qu’il effectue une tâche. Mais la réponse doit être rapide.
L’utilisateur a le contrôle :
- Il faut éviter d’imposer des choses aux utilisateurs (interstitiel, case précoché).
- L’utilisateur doit pouvoir faire marche arrière à tout moment.
Ressources
Livres
- Ergonomie Web - Amélie Boucher
- Ergonomie Web Illustrée - Amélie Boucher
- Don’t make me think - Steve Krug