57. Ergonomie Web

57.1. Introduction

La plupart des logiciels sont utilisés à des fins commerciales et professionelles. Il est important que ces derniers soient acceptés par les utilisateurs au risque d'être tout simplement boudés. De plus, la facilité d'utilisation joue sur les performances et la rentabilité à long terme pour les utilisateurs.

La facilité d'utilisation est donc un critère de choix dans la conception d'un produit, et ce, indépendamment du domaine d'origine.

57.1.1. Définition

Le mot ergonomie vient du grec ancien ἔργον, érgon (« travail ») et νόμος, nόmos (« loi »).

C'est une discipline qui vise l’adaptation d’un système à son utilisateur, afin que ce dernier puisse mener ses activités avec un maximum d’efficacité, de satisfaction et de bien-être, grâce à une phase d’adaptation réduite. Par conséquent, l’ergonomie informatique a pour objectif l’amélioration du dialogue entre l'homme et l'ordinateur. Autrement dit, l’objectif est donc de trouver la meilleur adéquation entre les besoins d'un utilisateur et les fonctionnalités d'un outil tout en restant concentré sur le bien être de l'utilisateurs.

57.1.2. Ergonomie cognitive

L’ergonomie touche énormément de domaines. On trouve trois domaines de spécialisation :

  • L’ergonomie physique s’intéresse notamment aux postures de travail, aux troubles musculo-squelettiques où encore à la sécurité et la santé.

  • L’ergonomie cognitive s’intéresse aux processus mentaux entrant dans l’interaction entre l’utilisateur et le système

  • L’ergonomie organisationnelle s’intéresse à l’organisation de règles et de processus comme la communication, le travail en équipe ou le travail coopératif.

Dans le cas du web, on s'intéresse principalement à l’ergonomie cognitive.

L’ergonomie cognitive prend en compte les comportements intelligents des utilisateurs afin d’adapter les interfaces. Des relations étoites existent avec les sciences cognitives telles que la psychologie cognitive, l’intelligence artificielle ou encore la sémiotique. La relation entre l’ergonomie et l’intelligence artificielle est par exemple très présente lorsque l’on parle de système experts artificiels qui jouent un rôle d’assistance à l’utilisateur. Le rapport avec la sémiotique (qui s’intéresse à la signification des signes) est également très présent avec la présence de système de signalisation.

57.1.3. Avantages

L’utilisabilité d’un logiciel est sa facilité d’utilisation, et cela peut s’avérer très rentable d’investir pour l’améliorer. En effet, un certain nombre de coûts peuvent être grandement réduits lorsque le logiciel est bien pensé.

  • On peut noter, tout d'abord, l'amélioration de la productivité. Par exemple, les traitements de textes, qui offrent la possibilité de rapidement mettre en forme le texte se sont largement développés. La possibilité de générer aisément un sommaire, sans avoir à retrouver le numéro de page pour chaque titre, augmente très nettement la productivité.

  • Ensuite, on peut parler de la réduction du support utilisateur. En effet, plus un produit est simple d’utilisation, moins l’effort de support sera important. Ce support comprend l’assistance téléphonique mais aussi la documentation ou la formation.

Dans le cas d’application e-business, l’ergonomie à un impact déterminant car elle permet :

  • la fidélisation des utilisateurs,

  • de s’assurer que l’utilisateur n’abandonne pas en cours de transaction,

  • de s’assurer que l’utilisateur trouve le produit qu’il souhaite acheter,

  • et mieux se positionner face à la concurrence.

Investir une partie de son budget de développement pour travailler sur l’ergonomie est donc très important et peut représenter des économies conséquentes sur le long terme.

57.2. Conception des pages

57.2.1. Organisation visuelle

Il est important que l’information utile dans la page soit mise en valeur. Pour cela il faut comprendre comment l’utilisateur consulte la page.

Tout d’abord le regard de l’utilisateur va naturellement se porter sur le coin en haut à gauche de la page et suivre une ligne vers le coin en haut à droite puisque c’est le sens naturel de lecture. Très rapidement, comme ce n’est pas un livre, son regard va se porter sur le centre de la page afin d’y trouver l’information importante. C’est seulement ensuite, que le regard de l’utilisateur se portera sur les côtés puis sur le bas de la page. Par conséquent, les endroits les plus visibles sont la zone du haut et le centre de la page.

Dans la même logique, les éléments les simples à utiliser sont ceux situés au centre de la page car le mouvement de l’utilisateur est libre. En revanche, les éléments aux extrémités de la page, comme aux quatre coins, nécessitent un mouvement plus important de la souris et sont donc plus astreignants à atteindre. La partie basse de la page est un endroit peu visité car l’oeil à souvent été accroché par une information avant d’y arriver. De plus, pour peu que l’utilisation d’un ascenseur soit nécessaire pour visualiser l’ensemble du contenu et donc arriver à la fin de la page, il y a de très fortes chances que la zone du bas ne soit que très rarement consultée.

Le choix de l’endroit ou disposer les informations en fonction de leur importance est donc la première étape. Il faut ensuite décider de la place que l’on souhaite leur consacrer. Pour l’utilisateur, l’important est l’information ( on peut donc lui consacrer environ 80% de l’espace ) ainsi que pouvoir y accéder (et 20% pour la navigation) : évidemment cela ne laisse que peu de place pour la publicité ou les animations. Il est important de toujours se mettre à la place de l’utilisateur, et si un élément ne lui apporte rien alors il n’est pas nécessaire. Cependant, si un élément est réellement nécessaire, il vaut mieux prendre de la place à la navigation.

57.2.2. Taille de la page

La résolution du site utilisée est importante. Le choix est souvent difficile mais il est utile de consulter, par exemple, des statistiques sur les résolutions les plus utilisées actuellement par les internautes.

Dans certains cas, il est tout de même plus facile de faire certain choix si l’on a une connaissance suffisante des utilisateurs potentiels. Par exemple, dans le cas d’un intranet, si l’ensemble des machines a une configuration de 1280x1024, on a alors une première information intéressante. Attention, même dans ce cas là, tous les utilisateurs ne naviguent pas en plein écran et il est important de faire un audit sur leur façon de travailler.

57.2.3. Conception multiplateforme

Un autre problème important est la version du navigateur utilisé par le client. L'utilisation d'outils d'audit tel que xiti est utile pour avoir une idée des clients utilisés par les visiteurs.

La conclusion est toujours la même, on veut un contenu utilisable par la majorité des utilisateurs, il faut donc prendre en compte plusieurs navigateurs et versions. On ne peut pas pour autant assurer la compatibilité avec tous les navigateurs et il y a des choix à faire. Il est donc là encore important de bien connaître le public du site.

57.2.4. Vitesse de chargement du site

L’un des critères importants pour l’utilisateur est la rapidité de chargement du site. Ce problème aurait presque tendance à faire rire aujourd’hui puisque l’on se sert d’internet pour transférer des fichiers de plus en plus gros. Il arrive cependant que certains utilisateurs aient toujours des connections plus faibles que la moyenne.

Les efforts dans ce domaine vont peut-être moins se porter sur les images, mais il est toujours intéressant de proposer plusieurs formats de vidéos ou de fichiers sonores afin de permettre à l’utilisateur de choisir en fonction de sa connection. De plus, il est très désagréable de télécharger un fichier sans savoir si l’on va pouvoir l’ouvrir, ou sans connaître la taille qu’il fait. Il est donc recommandé de préciser pour chaque fichier en téléchargement son format et son poids. De plus, il est également possible d’indiquer où télécharger le logiciel pour le consulter. Dans certains cas, on pourra également proposer le contenu dans différents formats, comme le contenu d’un discours au format txt en plus de la vidéo. Cette duplication est, dans ce cas là, motivée par des considérations d’accessibilité de l’information.

On notera tout de même que les considérations de poids des pages restent d’actualités pour l’hébergeur. En effet, il facture souvent en fonction de la bande passante utilisée et donc optimiser ses pages peut toujours être intéressant.

57.3. La navigation

Le web porte bien son nom, il est avant tout une somme d’informations liées entre elles. Pour passer d’une information à l’autre, l’utilisateur utilise des liens hypertextes. La somme d’information étant colossale, il est très important de soigner le système de navigation. Pour cela, l’utilisateur doit pouvoir à tout moment répondre aux questions fondamentales :

Ces notions sont fondamentales pour accompagner l’utilisateur. En effet, il n’a aucun connaissance de l’architecture du site, et elle est souvent très complexe. Il est donc important que l’utilisateur puisse répondre rapidement à ces interrogations.

57.3.1. Où suis-je ?

La première chose à faire pour répondre à cette question est d’identifier le site. On peut par conséquent intégrer sur chaque page le logo de l’entreprise. Afin de profiter de l’expérience utilisateur, il vaut mieux respecter ses habitudes. Pour cela, il est conseillé de mettre le logo dans le coin en haut à droite de l’écran. Cette position est intéressante car, comme on l’a vu précédemment, c’est le premier endroit que l’utilisateur consultera.

Par convention, le logo sert également de lien vers la page d’accueil du site. Tous les utilisateurs ne sont pas au courant de ce système, mais ceux qui le sont seront certainement désagréablement surpris si ce lien n’est pas présent.

Maintenant que l’utilisateur sait sur quel site il se trouve, il faut lui indiquer où il se trouve dans l’arborescence et à quoi il peut s’attendre. Pour cela, il faut clairement lui indiquer le contenu de la page avec un titre explicite présent dans la page et dans le <title> de la section <head>. Afin de faciliter le travail de l’utilisateur, il est important de garder ce fonctionnement tout au long du site. L’homogénéité du site diminuera grandement les efforts lors de la navigation.

Pour faciliter la navigation de l’utilisateur, il est intéressant de lui présenter la structure du site, et notamment les sections supérieures de l’arborescence. Une solution couramment utilisée est le "breadcrumbs" (fil d'Ariane en français). Il se présente sous la forme suivante "home > section 1 > section 1.1 > page courante ". Chaque section possède un lien permettant à l’utilisateur de remonter facilement dans l’arborescence. Afin de mettre en avant la section principale dans laquelle se situe l’utilisateur, on peut également la distinguer dans le menu de navigation avec une puce, une couleur différente ou en changeant sa taille (exemple : http://eof.eu.org ).

Il est important de mettre en place ces informations sur l’ensemble des pages du site. En effet, il est impossible de savoir sur quelle page l’utilisateur va arriver puisqu’il peut arriver d’un moteur de recherche, d’un autre site ou de beaucoup d’autres endroits. Un article en anglais très intéressant à d’ailleurs été écrit sur ce que l’auteur appelle les "landing pages" qui sont les pages par lesquelles les utilisateurs arrivent sur le site. Il propose notamment 11 solutions pour les améliorer. Pour les plus curieux, vous pourrez voir pourquoi, dans certains cas, on doit écarter certaines règles précédemment citées, et ce dans l’intérêt de l’utilisateur.

57.3.2. Où suis-je déjà allé ?

Cette fonctionnalité est très peu implémentée dans les sites web. En effet, il est difficile de garder la trace de toutes les pages visitées et de proposer une navigation pertinente avec les informations recueillies. C’est pourquoi il est utile de faire ressortir les liens visités. Différentes solutions existent pour cela. La première, conseillée par de nombreux ergonomes, est de conserver les couleurs par défauts des liens afin de capitaliser sur l’expérience utilisateur. Cette solution centrée utilisateur est idéale même si elle casse parfois un peu le graphisme du site. D’autres solutions existent telles qu’utiliser une autre couleur ou souligner en pointillés les liens. Ces solutions nécessitent en revanche un temps d’adaptation de la part de l’utilisateur et sont donc "moins bonnes" d’un point vue purement ergonomique.

Des études montrent que les utilisateurs utilisent souvent le bouton "back" de leur navigateur pour revenir à des pages précédemment visitées plutôt que d’utiliser la navigation du site. Cette fonctionnalité est essentielle et c’est pourquoi les solutions permettant de naviguer avec du javascript ou du flash sont parfois à proscrire si elles empêchent l’utilisateur d’utiliser des fonctionnalités essentielles telles que le bouton "back" ou les bookmarks.

57.3.3. Où puis-je aller ?

C’est à cette question qu’une grande partie de la navigation cherche à répondre. Pour cela, les différentes destinations seront représentées par des liens. Un certain nombre de règles peuvent être appliquées pour faciliter la navigation. La première est que tout texte souligné est un lien et que tout lien est souligné. Ceci est directement tiré de l’expérience utilisateur. Il est donc fortement conseillé de souligner les liens et seulement les liens. De même, toujours afin de garder une homogénéité tout au long du site, il est intéressant que les liens ayant le même sens (navigation, documents, sous section) aient le même graphisme. D’autres informations peuvent être ajoutées aux liens pour préciser sa portée. On peut par exemple préciser s’il est externe ou interne au site (exemple : http://fr.wikipedia.org/wiki/Hyperlien voire la section "document externes" ). On peut également préciser dans quelle langue sera la page (exemple : http://standblog.org/).

Pour finir sur les liens, il est important que leur titre soit précis sur le contenu de la destination. En effet, un lien "en savoir plus" est inefficace s’il est sortit du contexte comme dans le cas de synthétiseur vocaux. Dans le cas où le fait de reprendre l’information devient vraiment lourd, on peut utiliser le titre des liens pour préciser la destination (exemple : "consulter l’article ...").

Un autre système de navigation à ne pas oublier doit être la possibilité de faire une recherche. En effet, le système de recherche est le système de navigation par défaut pour prés de 50% des utilisateurs alors que seulement 20% ne l’utilisent pas du tout. La recherche doit être simple (éviter les systèmes booléens complexes) et accessible en tout point du site. Si une recherche multi-critères doit être mise en place pour répondre à des besoins, il est important de prévenir l’utilisateur en lui précisant que c’est un moteur de recherche avancée.

La page de réponse doit tenir compte de la pertinence des réponses pour présenter comme premier lien celui avec le plus gros score. Il est également intéressant de préciser quelques informations sur la page de destination telles qu’un extrait (comme google), ou un breadcrumb (eof.eu.org), permettant ainsi de savoir si la section de la page semble correspondre aux attentes. De même, il est intéressant de remonter la date de mise à jour des résultats afin de pouvoir juger de leur pertinence.

Pour finir, un autre système de navigation intéressant consiste à remonter d’autre informations correspondant au centre d’intérêt de l’utilisateur. Par exemple, dans le cas d’une boutique en ligne, on peut remonter les produits achetés par d’autres utilisateurs ayant acheté le même produit que nous. On peut aussi lister les articles abordant le même thème que celui que l’on consulte.

57.3.4. Conclusion

La navigation est donc un point critique du site puisqu’elle va permettre à l’utilisateur de trouver l’information qui l’intéresse.

Pour finir, il y a toujours un ergonome pour "troller" et lorsque cet ergonome est Jakob Nielsen, on ne peut s’empêcher de lire l’article. Cela date de janvier 2000 et il est en anglais mais avec un titre aussi prometteur que "Is Navigation Useful?" je ne peux que vous suggérez de le lire. En 2005, Erik Olsen a également publié unarticle intéressant sur ce sujet.

57.4. Conception du site

57.4.1. Rédiger pour le web

La lecture sur le web est très différentes de la lecture sur papier. Les visiteurs sont souvent pressés et cherchent une information spécifique. Ils ont donc besoins de textes brefs, où les informations importantes sont mises en avant. Pour cela, il vaut mieux réduire les textes (de 50% par rapport au format papier), utiliser des paragraphes courts avec des sous-titres et des listes à puces. De plus, le web se prête bien aux données sous forme de tableaux ou de graphiques.

Les utilisateurs n’apprécient pas d’avoir à faire défiler le contenu des pages pour pouvoir les lire, il est donc intéressant de les découper en plusieurs sections et d’utiliser des liens pour naviguer d’une page à l’autre. Ce système permet également de découper l’information et dans certain cas de sortir un index sur les sous-titres, favorisant ainsi la navigation rapide.

Environ 80% des utilisateurs lisent en diagonale les pages web, il faut donc le prendre en compte lors de la rédaction du contenu. Pour faciliter la lecture, il est important de mettre en place des titres, et sous titres, explicites pour découper le contenu de la page. Pour le contenu, en plus des listes à puces déjà énoncées, vous pouvez utilisez le sur-lignage ou le gras, pour mettre en avant certains mots clés. Les liens sont aussi un moyen de mettre en avant l’information puisque les utilisateurs les identifieront du premier coup d’oeil afin de voir où ils peuvent aller.

N’oubliez pas que tout ce travail sera doublement rentable. Les premiers lecteurs de votre site seront probablement les moteurs de recherches. Si le contenu est bien organisé, et soutenu par un code sémantiquement juste (voire XHTML/CSS), il n’en sera que mieux indexé et les résultats des moteurs de recherche seront plus pertinents.

57.4.2. Police de caractères

Comme pour tout document, le nombre de police utilisées doit être limité afin de ne pas fatiguer l’utilisateur. Il est intéressant d’en choisir une pour l’ensemble du site. Par contre, la police ne sera peut-être pas disponible sur tous les systèmes, il faut donc penser à préciser les polices en fonction du système et les tester en conditions réelles.

Si la police est fixe pour l’ensemble du site, il est conseillé d’utiliser différentes tailles de caractères pour mettre en avant les informations. Par contre, certains utilisateurs auront besoins de pouvoir agrandir les textes pour mieux lire, il vaut donc mieux utiliser des tailles de polices relatives, même si l’on ne peut plus garantir l’affichage exact en fonction de la plate-forme. N’oubliez pas que le web n’est pas du "print", l’utilisateur cherche avant tout une information.

57.4.3. Les formulaires

Les formulaires sont souvent critiqués par les utilisateurs qui les voient comme une épreuve. En effet, l’utilisateur doit maintenant être acteur en saisissant l’information, et le formulaire est souvent la dernière étape décisive. De plus, le formulaire le sort de ses habitudes de navigation, l’utilisateur passe de la souris au clavier et il ne peut pas revenir en arrière sans conséquence.

Un gros effort doit donc être réalisé pour mettre à l’aise l’utilisateur et l’assister autant que possible. Pour cela, plusieurs solutions existent :

  • Proposer par défaut les valeurs les plus courantes ;

  • Limiter les saisies au strict minimum ;

  • Indiquer les entrées obligatoires et les limiter au strict minimum ;

  • Utiliser des boutons de sélection si le nombre de choix est restreint ;

  • Utiliser des listes de sélection pour les longues listes (5 à 12 choix où espace restreint) ;

  • Pour les listes, il faut présenter les données dans un ordre logique pour l’utilisateur (souvent ordre alphabétique) ;

  • Autoriser la possibilité de cliquer sur le texte associé à un bouton pour cocher le bouton (utilisation de label).