Ergonomie et utilisabilité

Savez-vous qu’en moins de 10 secondes, votre site web doit faire ses preuves aux yeux de l'internaute ? S'il ne trouve pas ce qu'il cherche dans ce laps de temps, il quittera votre site.

Pour qu’un visiteur reste sur votre site, ce dernier doit être ergonomique et utilisable.

Un site est ergonomique lorsqu’il est convivial, intuitif, basé sur l’attente de l’internaute.

Il est utilisable lorsqu’il est efficace et performant. Ces deux notions vont de pair pour la réussite de votre projet, c’est pourquoi nous les traitons ensemble.

Conseil : N’oubliez-pas de toujours tenir compte de l’internaute. Sa logique, son langage, ses attentes ne sont peut-être pas celles de votre institution.

Suivez les 12 règles proposées ici pour que votre site respecte les attentes de vos internautes

  1. L'architecture
  2. L'organisation visuelle
  3. La cohérence
  4. Les conventions
  5. L'information
  6. La compréhension
  7. L'assistance
  8. La gestion des erreurs
  9. La rapidité
  10. La liberté d’action
  11. L'accessibilité
  12. La satisfaction de l’internaute

1. L'architecture

Le site est bien ordonné

  • Les regroupements sont logiques.
  • La structure met en avant les contenus clés.
  • Les menus aident l'internaute à naviguer aisément dans les contenus.

Conseil : Réalisez votre architecture en deux temps : 

  • Faites d’abord un tri avec des cartes (chaque carte représente un contenu) qui permettra de déterminer le contenu exact du site et de réaliser des regroupements par grands thèmes.
  • Ensuite, définissez la structure, l’arborescence.

Tri par cartes 

Rédiger une carte pour chaque catégorie d'information présente dans le site

  • Titre de la carte : 1 ou 2 mots-clés
  • Une phrase décrivant le contenu figuré par la carte
    Note : Veiller à ne pas induire de regroupement dans le titre ou la description utilisée

Protocole

  • Présenter l'ensemble des cartes (50 max.) à l'utilisateur
  • L'utilisateur regroupe les cartes qui lui semble similaires (de son point de vue)
  • Il donne un nom à chaque groupe de cartes
  • Il peut imbriquer les groupes et créer des "sur groupes"

Construire la structure du site sur la base des regroupements les plus fréquents
Mais aussi :

  • ​Identifier les thèmes manquants
  • Valider la compréhension des libellés
  • Comprendre la façon dont l'utilisateur interprète le contenu du site

​© Cegos, Paris, 2011.
Arborescence

© Cegos, Paris, 2011.

2. L'organisation visuelle

La page est bien ordonnée

  • Pas trop d’informations par page (pollution visuelle).
  • N'affichez que les principaux éléments de navigation et d'interaction.
  • Ne placez que l’essentiel sur la page.
  • Pour votre page d’accueil, vous pouvez mettre plusieurs éléments en avant plan, même s’ils sont assez bas dans la navigation. Pour cela, refaites un tri des cartes spécialement pour votre page d’accueil.
  • Respectez la hiérarchie visuelle de la page.

© Cegos, Paris, 2011.

3. La cohérence

Les pages sont organisées sur le même modèle 

La cohérence consiste à offrir un espace bien organisé et stable tout au long de la visite de l’utilisateur. Un fil d’Ariane (ou breadcrumb en anglais) est un guide de navigation qui va indiquer au visiteur sa position dans le site. Les éléments tels que les menus, les boutons de contacts ou autres éléments importants ne doivent pas changer d’emplacement. Il faut aider votre visiteur à trouver au plus vite ce qu’il recherche.

Le graphisme ne peut pas entrer en conflit avec l’ergonomie. Un bouton doit rester un bouton pour que votre visiteur comprenne rapidement qu’un clic sur cet élément déclenchera une action. La modification graphique de ce dernier doit donc absolument rester facilement identifiable et ne pas laisser de place au doute.

4. Les conventions 

Les internautes ont acquis au fil de leurs visites des sites web, des réflexes et des automatismes qu’il ne faut pas bouleverser.

Le respect de ces conventions rendra la navigation plus facile et plus agréable. 

Exemples de conventions :

  • Placez votre logo en haut à gauche et rendez le cliquable pour atteindre la page d’accueil.
  • Appelez la page d’accueil « accueil » ou « home » mais pas « première page ».
  • Gardez un curseur « main » pour les zones cliquables.

5. L'information 

Le site informe l'internaute et lui répond

Le site doit pouvoir interagir avec les visiteurs et les informer.

Exemples :

  • Le site propose un minimum d'informations générales (but du site).
  • Le site offre des informations de première main.
  • Il donne un feed-back aux actions de l'internaute (dans les formulaires, les interactions

6. La compréhension

Les mots et les symboles sont choisis minutieusement

  • Le vocabulaire est compréhensible, précis et les textes sont concis.
  • Le vocabulaire est adapté à l’internaute : en règle générale, évitez le jargon, sauf si votre public l’utilise (ex. : un site destiné à des médecins utilisera leur vocabulaire).
  • Le vocabulaire est conventionnel (écrivez ‘imprimer’ pour imprimer, …).
  • Les symboles doivent être compréhensibles dans le contexte. 

Pour en savoir plus : écriture web.

7. L'assistance

Le site aide et dirige l'internaute

L’assistance consiste à guider vos utilisateurs selon leurs besoins et leurs attentes. 

Cette assistance peut être présentée sous différentes formes :

  • Un  texte, une illustration.
  • L’organisation de la page ou du site en général.
  • Les affordances (ex : dans un formulaire, votre adresse mail est présélectionnée).
  • Le repérage facile des éléments cliquables.

8. La gestion des erreurs

Le site prévoit les erreurs éventuelles de l'internaute.

Prévoyez dès la conception de votre site web une gestion des erreurs que votre visiteur risque de rencontrer. Beaucoup d’erreurs se font lors du remplissage des formulaires. Pour cela, une assistance et une réponse explicite et précise du site doivent informer l’utilisateur de son erreur et le guider dans l’action à accomplir pour la corriger.

Pour en savoir plus : Formulaires (lien)

En ce qui concerne la page « 404 », les institutions fédérales peuvent utiliser (c’est recommandé) la page de Child Alert. 

9. La rapidité

Le site doit aider les internautes à trouver leurs informations le plus vite possible.

Vos visiteurs n’ont pas tous la même expérience. Proposer plusieurs manières d’accéder au même contenu peut s'avérer un bon moyen de répondre au critère de rapidité.

Exemples :

  • Multipliez les clés d'entrée vers une même page (liens internes).
  • Rendez directement visibles les éléments cliquables (taille, position).
  • Ne demandez rien d’inutile.
  • Ne demandez pas deux fois la même chose.
  • Proposez des modes d'interaction différents (mode expert : recherche avancée, mode novice : recherche simple).

10. La liberté d’action

L’utilisateur doit toujours avoir l’impression de maîtriser son environnement

Laissez-lui la liberté d’accomplir certaines actions. Ne changez pas ses habitudes. Ainsi, il pourra naviguer facilement dans votre site. 

Gardez notamment les options suivantes :

  • Copier-coller, le retour arrière du navigateur ...
  • Arrêter une animation, baisser le volume …
  • Prévenir si le site doit lancer une application externe (ex : un lien vers un fichier MP3 lance le lecteur défini par défaut).

11. L'accessibilité

Le site doit être conçu pour offrir une accessibilité maximale.

Dans l’idéal, il doit respecter les conventions établies par le W3C (World Wide Web Consortium). 

L'accessibilité d’un site web peut être :

  • Physique : respectez les standards de navigation pour les utilisateurs ayant une déficience visuelle (W3C ou Anysurfer).
  • Technologique : l'absence ou la désactivation de certains plug-ins ne doit pas empêcher le site de fonctionner.
  • Visuelle: ciblez une résolution d'écran offrant une utilisation optimale. Il faut cependant pouvoir accéder au site sans problème si l’on recourt aux autres résolutions.

12. La satisfaction de l’internaute

La satisfaction de votre visiteur passe par son expérience globale sur votre site web. 

Un certain nombre de paramètres sont nécessaires pour remplir ce critère : utilité, esthétique, performance technique, qualité du service, etc. Ne misez pas sur un seul pôle : ne sous-évaluez pas l’importance de l’ergonomie par rapport à celle de la technique ou du design. Ceci vaut également pour les autres pôles. Pour arriver à un bon résultat, faites preuve d’équilibre.

Contact

Sylvie Baeyens

sylvie.baeyens@premier.fed.be

Source  principale : formation Ergonomie des sites web, Cegos, Paris, 2011.