Les fondamentaux de l'Ergonomie Web

Qu'est-ce que l'Ergonomie Web ?

L'Ergonomie Web (IHM) se base sur des recherches qui ont permis de définir des critères, aujourd'hui devenus des fondamentaux. Parmi ces fondements, on peut citer :

• les critères d'évaluation ergonomiques heuristiques de Bastien et Scapin permettent d'évaluer une interface pour déterminer sa bonne utilisabilité grâce à l'identification des difficultés d'ergonomie
• les lois de la Gestalt sont une théorie allemande qui définit les principes de la perception et se décompose en 6 lois (loi de la bonne forme, de la continuité, de la proximité, de similitude, de destin commun et de clôture)
• la loi de Fitts évalue le temps de pointage nécessaire à un utilisateur pour atteindre un élément intégré au sein d'une interface
• la loi de Miller se base sur la psychologie cognitive et prend en compte la capacité d'un utilisateur à traiter et mémoriser l'information

Les critères fondamentaux de l'Ergonomie Web

Il est primordial de s'intéresser aux références évoquées en introduction et d'appliquer des principes de base pour permettre à vos utilisateurs de comprendre votre site internet. Voici une liste de standards et conventions à intégrer lors de la conception ou l'optimisation de l'interface.

Le guidage

Incitation

Un site internet doit être facilement utilisable, mais il doit surtout être utile. Il est donc nécessaire de proposer à l'utilisateur des moyens pertinents pour le conseiller ou encore l'orienter, dans le but qu'il interagisse avec l'interface jusqu'à la conversion.
Dans ce sens il faut intégrer des éléments, tel que du fonctionnel pertinent, pour l'inciter à poursuivre sa navigation, par exemple avec la présentation d'un moteur de recherche pour lui permettre de trouver un produit sur une place de marché (Amazon, eBay, Cdiscount etc.).

Pour aller plus loin, l'utilisateur a également besoin de savoir où il se situe dans un contexte. En complément d'une interface allégée (zone de quarantaine), un tunnel de paiement ou de réservation doit présenter des étapes clairement visibles et des outils d'aide accessible.

L'appartenance ou groupement

L'appartenance entre les éléments et leur distinction participe à l'organisation visuelle d'une page d'un site. C'est pourquoi des items ou blocs d'information de même nature doivent :

• avoir une appartenance claire (visuel, titre, descriptif, bouton)
• adopter un aspect similaire de page en page pour permettre à l'utilisateur de les repérer rapidement au fil de sa navigation

La typographie

Pour permettre une plus grande accessibilité, la lisibilité des informations textuelles doit être optimisée. Dans ce sens, sur une interface on privilégiera une typographie :

• sans empattements
• contrastée par rapport au fond
• de taille acceptable pour tout type de terminal (exemple : 14px sur ordinateur et 16px sur mobile)

La longueur des paragraphes et des lignes doit être limitée et la hauteur entre les lignes suffisante pour faciliter la lecture. Les utilisateurs dyslexiques pour ne citer qu'eux pourraient avoir du mal à lire le contenu proposé.

Enfin, une typographie hiérarchisée accompagnera plus facilement l'utilisateur vers des informations pertinentes qui l'aideront dans sa prise de décision, exemple avec le titre principal de la page (H1) qui est nécessairement l'élément textuel le plus important.

La charge de travail ou charge cognitive

La charge cognitive est une théorie qui tend à expliquer les réussites ou les échecs d'un utilisateur en phase d'apprentissage. Ainsi, plus une interface présente d'éléments, plus l'utilisateur mettra du temps à les comprendre, au risque de se sentir en difficulté et d'abandonner.
Un site internet doit présenter des pages avec une densité informationnelle contrôlée et limiter le bruit visuel lorsque l'internaute se trouve proche de la conversion.

Les éléments cliquables

Sur un site internet, les éléments qui doivent être particulièrement optimisés sont les éléments cliquables. L'affordance⁽¹⁾ des call-to-action (CTA) doit être hiérarchisée pour guider l'utilisateur jusqu'à la conversion (aspect, taille, couleur).

Sur un site, les seuls éléments qui doivent être soulignés sont les éléments cliquables.

En complément de cette hiérarchisation, le libellé du bouton mérite une attention propre. En 2016, Amazon#8599; a vu augmenter ses ventes de 45% grâce à l'évolution du libellé d'un bouton dans le tunnel de paiement, le bouton "register" par "continue" qui s'est révélé moins incitatif pour les utilisateurs qui ont plus facilement poursuivi leur parcours.

Même si cela peut paraître être une évidence, l'interaction avec l'élément cliquable permet de retenir l'attention de vos utilisateurs et doit être systématique. Ainsi un état de survol ou hover ou encore rollover doit être affiché à l'utilisateur lorsqu'il place le curseur sur le bouton.
Cette transformation incitera davantage vos utilisateurs à interagir, seulement elle n'est possible que sur ordinateur, les terminaux tactiles étant limitées au click seul. Néanmoins, un état "active" pourra être visible sur ordinateur et sur mobile, à l'image des boutons interrupteur ou "switch".

Enfin, il est important de prendre en compte la taille des différents types de curseurs, principalement entre le doigt et la souris pour adapter les zones cliquables. On considère les dimensions en pixel d'un doigt égales à 60px*60px et 14px*14px pour le curseur de la souris.

Structure des pages et emplacements des éléments

La définition d'écran⁽²⁾ la plus déployée en France est la 1366*768, suivie de prêt par la 1920*1080. Il ne s'agit là que des deux principales, car il existe plus de 2000 définitions (!).
Chaque utilisateur est susceptible d'emprunter un ou plusieurs terminaux pour consulter votre site internet. Dans ce sens, les pages doivent s’adapter correctement aux différentes définitions grâce à une intégration en responsive design optimisée.

Le terme responsive design a été employé pour la première fois en 2010.

En France, le sens de lecture est orienté de gauche à droite, l'intégration des éléments au sein de l'interface doit ainsi le respecter. Sur une fiche produit d'un site e-commerce, le visuel se situera à gauche, le descriptif et le bouton principal à sa droite.

Enfin une évidence qui mérite néanmoins d'être indiquée, mais le logo doit être intégré en haut à gauche et idéalement accompagné baseline qui précisera l'activité de votre marque.

Conclusion sur l'Ergonomie Web

Tous ces éléments permettent d'augmenter la confiance qu'un utilisateur confiera à votre site et à votre marque, ce qui favorisera sa conversion. En complément de ces fondamentaux, d'autres éléments pourront être déployés : temps de réponse, architecture de l'information, gestion de l'erreur, optimisation des formulaires pour ne citer que ces quatre exemples.

Cela permettra d'améliorer l'expérience utilisateur (UX) et de donner envie à vos internautes de revenir sur votre site, voire de vous recommander. Ils devront être intégrés en prenant en compte la typologie de votre activité, mais aussi les profils de vos utilisateurs. Enfin, le truc à retenir :

Un site web ergonomique est un site qui doit être facilement utilisable et surtout, utile.

⁽¹⁾ Affordance : l'affordance est la capacité d'un élément à suggérer sa propre utilisation.

⁽²⁾ Définition d'écran : ce terme est souvent confondu avec la résolution d'écran.

• la définition est la quantité de pixels qui compose un écran (exemple : 1920*1080)
• la résolution est le nombre de pixels par unité de mesure (exemple : 1920 (nombre de pixels sur la longueur de l'écran) * 35,7 (longueur de l'écran) = 53,76 pixels par centimètres)