Cours d'ergonomie

Introduction
Conception de pages
La navigation
Conception du contenu

Deux notions importantes :

Introduction

Les deux notions évoquées ci-dessus sont essentielles pour les utilisateurs. Elles vont participer à l'acceptation des outils et à la performance des utilisateurs.

L'utilisabilité est un critère de choix, quelque soit le domaine. Il y a des exemples à la pelle : iPod, Google, etc.

Définition de l'ergonomie

La définition de l'EIA (Association Internationale d'Ergonomie) est intéressante. Pour résumé, on peut dire que l'ergonomie consiste à trouver la meilleure adéquation entre les besoins des utilisateurs et les fonctionnalités des outils tout en restant concentré sur le bien être des utilisateurs (leur facilité d'utilisation).

Il faut toujours garder en tête le point de vue de l'utilisateur final.

Ergonomie cognitive

Il y a trois domaines de spécialisation dans l'ergonomie. Celui qui nous intéresse pour le Web est celui de l'ergonomie cognitive : les processus mentaux entrant dans l'interaction entre l'utilisateur et le système. On prend en compte les comportements intelligents des utilisateurs afin d'adapter les interfaces. Relations étroites avec les sciences cognitives.

Avantages

Investir de l'argent dans l'ergonomie d'un logiciel est très important. Les avantages sont évidents : amélioration de la productivité et réduction du support utilisateur.

Conception de pages

Organisation visuelle

L'information utile doit être mise en valeur. Les endroits les plus visibles sont : la zone du haut et le centre de la page. Le regard de l'utilisateur se porte en premier sur ces zones. Les côtés et le bas de la page sont consultés ensuite.

Les éléments les plus simples à utiliser sont ceux qui se trouvent au centre de la page. Les éléments aux extrémités de la page (quatre coins) nécessitent un mouvement plus important de la souris et sont donc plus difficiles à atteindre.

Le bas de la page est rarement consulté car l'œil est souvent accroché par une information avant d'y arriver.

Il faut donc choisir où disposer les informations en fonction de leur importance. C'est le premier travail. Ensuite, on définit la place (la taille) que l'on souhaite leur consacrer.

L'important pour l'utilisateur c'est l'information et le fait de pouvoir y accéder. On consacre souvent 80% d'espace pour l'information et 20% pour la navigation. Si une information n'importe rien à l'utilisateur, elle ne doit pas être présente. Cependant, si un élément est réellement nécessaire, il vaut mieux prendre de la place à la navigation.

Taille de la page

Pour connaître la résolution à utiliser, on peut se rapporter aux statistiques d'utilisation. Certains sites fournissent des statistiques sur les résolutions les plus utilisées.

Il faut penser en terme de taille de fenêtre et non en terme de résolution d'écran. L'étude de Laurent Goffin à ce sujet est intéressante. J'ai réussi à la lire sur un autre lien que celui indiqué dans le cours. Il a utilisé un script pour obtenir la taille de la fenêtre d'un navigateur sur 32.000 sessions utilisateurs. Les résultats sont intéressants. En effet, les navigateurs disposent de barre de menus qui limitent l'affichage de la page. De plus, les utilisateurs n'utilisent pas toujours le mode plein écran du navigateur.

Beaucoup de résolutions différentes sont utilisées, il faut donc utiliser une mise en page souple qui pourra s'afficher correctement avec différentes tailles de fenêtres.

En connaissant les configurations des machines utilisées par les utilisateurs, on a une information précieuse. Cependant, attention à leurs habitudes. Ils ne naviguent certainement pas tous en plein écran. Il faut étudier leurs habitudes.

Conception multiplate-forme

Les statistiques ont également leur importance. Voir du côté de http://www.atinternet.fr/ressources.

On veut un contenu utilisable par la majorité des utilisateurs mais il faut faire des choix. On ne peut pas assurer la compatibilité avec tous les navigateurs. Il faut donc connaître son public.

Se reporter au cours pour voir les navigateurs avec lesquels une compatibilité est souvent réalisée. Je pense qu'il faut aujourd'hui tenir compte des navigateurs utilisés par les tablettes et smartphones.

Il existe des services en ligne qui permettent de s'assurer de la compatibilité avec pleins de navigateurs dans des versions multiples. L'article suivant en présente quelques uns : http://net.tutsplus.com/tutorials/tools-and-tips/quick-tip-5-ways-to-browser-test-your-website/. L'un d'eux est intéressant : http://browsershots.org/. Il permet d'obtenir des screenshots du site sur différents navigateurs. Ça permet d'avoir une idée de l'utilisation de la CSS.

Vitesse de chargement du site

Critère très important. Je suis entièrement d'accord au vue de ma connexion Internet en milieu rural.

Proposer des alternatives :

  • vignettes à la place d'images en pleine page;

  • plusieurs formats de vidéos ou de fichiers sonores (ouverts bien sûrs :-));

  • transcription des contenus, exemple : un discours vidéo transcrit en texte.

La précision quant à la taille et au format utilisé par les fichiers en téléchargement est très importante. On peut également indiquer où télécharger le logiciel pour lire le fichier.

Dernier point qui concerne l'hébergeur, la facturation est souvent faite à la bande passante consommée.

Conclusion

Faire simple en restant fonctionnel pour le plus grand nombre.

La navigation

L'utilisateur doit pouvoir répondre à tout moment aux trois questions fondamentales :

  • Où suis-je ?

  • Où suis-je déjà allé ?

  • Où puis-je aller ?

Il faut bien se rappeler que l'utilisateur n'a aucune connaissance de l'architecture du site.

Où suis-je ?

  • Identifier le site : indiquer à l'utilisateur sur quel site il se trouve.

    L'intégration du logo sur chaque page en haut à gauche de l'écran est une bonne chose. C'est le premier endroit vu par l'utilisateur. Faire un lien vers la page d'accueil sur le logo est également une bonne chose, beaucoup de gens l'utilisent.

  • Situer l'utilisateur dans l'arborescence et à quoi il peut s'attendre : indiquer le contenu de la page avec un titre explicite et dans le <title> de la section <head>.

  • Présenter la structure du site.

    On peut utiliser les "breadcrumbs". Autrement, on peut mettre en avant la section principale dans laquelle se situe l'utilisateur directement dans le menu de navigation. Voir le site de l'ÉOF pour un exemple.

Il est important de respecter ces règles de fonctionnement sur tout le site pour avoir une homogénéité et diminuer les efforts de navigation. De plus, il est impossible de savoir depuis quel endroit va arriver l'utilisateur : article intéressant à ce sujet.

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

On fait ressortir les liens visités. Plusieurs techniques :

  • utiliser la couleur par défaut des liens visités (les utilisateurs ont l'habitude de cette couleur).

    Solution recommandée par beaucoup d'ergonomes. Idéale mais peut casser le graphisme du site.

  • utiliser une autre couleur

    Nécessite un temps d'adaptation de l'utilisateur, moins intéressant d'un point de vue ergonomique.

  • souligner en pointillés les liens

    Nécessite un temps d'adaptation de l'utilisateur, moins intéressant d'un point de vue ergonomique.

Bouton "back" très utilisé dans les navigateurs. Il faut faire attention que cette fonctionnalité soit toujours utilisable. Tout comme la possibilité de mettre les pages en favoris (bookmarks).

Où puis-je aller ?

C'est LA question à laquelle doit répondre la navigation.

Les destinations sont représentées par des liens.

Règles permettant de faciliter la navigation :

  • Tout texte souligné est un lien et tout lien est souligné.

    On souligne donc les liens et uniquement les liens.

  • Graphisme identique sur tout le site pour les liens ayant le même sens (navigation, documents, sous-section)

  • Préciser la portée des liens (interne ou externe, et la langue de la page).

    Ces mécanismes sont utilisés sur Wikipédia. Pour indiquer qu'un lien est externe, il y a une icône juste à côté.

  • Utiliser des titres précis sur le contenu de la destination des liens. Il faut éviter d'utiliser le titre "En savoir plus" qui ne véhicule pas de sens sémantique.

    Parfois, il est difficile de trouver un titre court. Dans ce cas, on peut utiliser l'attribut title pour l'indiquer.

    On peut utiliser title tout le temps. Plus il y a d'infos, mieux c'est !

  • Système de recherche simple (pas de critères de recherche booléens) et accessible partout dans le site.

    Système de navigation par défaut pour près de 50% des utilisateurs.

    Si on met en place un système de recherche avancée, il faut l'indiquer à l'utilisateur.

  • Les réponses du système de recherche doivent :

    • être classées par pertinence

    • indiquer des informations sur la page destination (extrait ou place dans l'arborescence). Voir le site de l'école à ce sujet.

    • remonter la date de mise à jour des pages

  • remonter des informations correspondant au centre d'intérêt de l'utilisateur (cas de la boutique en ligne avec les achats des autres consommateurs)

    C'est un système de navigation intéressant.

Conception du contenu

Rédiger pour le web

Sur le web, les visiteurs cherchent une information spécifique. Ils ont besoin de la trouver rapidement, il faut donc les aider. Comment ? Écrire des textes brefs en mettant en avant les informations importantes.

Les textes doivent être beaucoup moins longs qu'au format papier (50% moins). Il est préférable d'utiliser des paragraphes courts avec des sous-titres et des listes à puces. L'usage de tableaux ou de graphiques doit être privilégiée, le Web s'y prête bien.

Faire défiler le contenu des pages ne plaît pas aux utilisateurs. Il est préférable de les découper en sections et d'utiliser des liens pour naviguer d'une page à une autre. Si les pages sont découpées en sections, il est possible de faire un index pour accélérer la navigation.

Lecture diagonale des pages Web par beaucoup d'utilisateurs. Il faut donc le prendre compte pendant la rédaction : utiliser des titres et des sous-titres explicites, des liens, des emphases, etc. Ce travail est payant au niveau de l'indexation dans les moteurs de recherche (à condition que le contenu soit bien organisé et le code XHTML/CSS conforme).

Police de caractères

Choisir une police pour l'ensemble du site. Proposer des alternatives pour les systèmes qui ne l'ont pas. Il est intéressant de tester en conditions réelles.

On joue sur la taille des caractères pour mettre en avant les informations étant donné que la police est fixe. Les tailles des polices doivent être indiquées de manière relative pour que l'agrandissement puisse se faire correctement.

[Note]

Le Web n'est pas du "print", l'utilisateur cherche avant tout une information.

Les formulaires

Formulaires boudés par les utilisateurs car ils demandent de devenir acteur. Il faut donc mettre à l'aise l'utilisateur et l'assister autant que possible.

Voir la liste des recommandations dans le cours. Elles sont très intéressantes.

Conclusion

Un site réussi :

  • rapide à afficher

  • mis à jour régulièrement

  • utilisation simple

  • contenu de qualité en adéquation avec les besoins des utilisateurs

Articles à lire :