A. Définitions

Utilisabilité (ou usabilité)

L'utilisabilité est définie par la norme ISO 9241 comme « le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d'utilisation spécifié ». C'est une notion proche de celle d'ergonomie, qui est cependant plus large. Les critères d'utilisabilité sont :

  • l'efficacité : le produit permet à ses utilisateurs d'atteindre le résultat prévu ;
  • l'efficience : atteint le résultat avec un effort moindre ou requiert un temps minimal ;
  • la satisfaction : confort et évaluation subjective de l'interaction pour l'utilisateur.

Utilité

L'utilité d'une application désigne sa capacité à aider à la réalisation de l'objectif de son utilisateur. Par exemple, un cédérom contenant les données d'une encyclopédie peut être utile, mais n'est pas forcément utilisable (facile d'utilisation).

Ergonomie

Pour faire très simple, on peut dire que l'ergonomie est l'union de l'utilisabilité et de l'utilité.

Persona

Une persona est une représentation fictive mais concrète des utilisateurs pour lesquels le produit est conçu. Elle fournit aux développeurs une référence pour définir les fonctionnalités et les scénarios d'utilisation.

Affordance

L'affordance est la capacité d'un objet à suggérer sa propre utilisation. Un bouton est identifié par son entourage, son label, son changement au survol (curseur main). C'est son apparence et son comportement qui nous indique son utilité.

B. Les 12 règles de l'ergonomie Web

L'architecture

Le site est bien organisé

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

L'organisation visuelle

La page est bien organisée

  • Éviter le trop plein d'information (bruit visuel),
  • N'afficher que les principaux éléments de navigation et d'interaction,
  • Afficher les éléments optionnels seulement si nécessaire,
  • Supprimer les éléments d'interaction inutiles,
  • Optimiser l'organisation et la hiérarchie visuelle.

La cohérence

Le site capitalise sur l'apprentissage interne (les pages sont construites sur le même modèle)

  • Les localisations sont cohérentes,
  • Les appellations sont cohérentes,
  • Les formats sont cohérents,
  • Les interactions sont cohérentes.

Les conventions

Le site capitalise sur l'apprentissage externe (les pages s'inspirent des autres sites web de référence)

  • Respecter les conventions de localisation (logo en haut à gauche…),
  • Respecter les conventions de vocabulaire (accueil pour la première page…),
  • Respecter les conventions d'interactions et de présentation (un curseur « main » pour les zones cliquables).

L'information

Le site informe l'internaute et lui répond

  • Le site dispose d'un minimum d'information générale (but du site),
  • Le site donne de l'information ponctuelle (icône, couleurs, libellé…),
  • Explique l'interface,
  • Informe au bon moment,
  • Donne un feedback aux actions de l'internaute.

La compréhension

Les mots et les symboles sont choisis minutieusement

  • Le vocabulaire est compréhensible, précis et concis,
  • Le vocabulaire oriente l'utilisateur,
  • Le vocabulaire est conventionnel (Imprimer pour imprimer…),
  • Les symboles sont compréhensibles dans le contexte.

L'assistance

Le site aide et dirige l'internaute

  • Dirigez grâce à l'organisation et à la visibilité (ce qu'il cherche est visible),
  • Dirigez grâce à des clics logiques (nouveau contact permet de créer un contact),
  • Dirigez grâce aux affordances (l'internaute doit repérer ce qui est cliquable, actionnable …),
  • Assistez l'internaute en tenant compte de ses besoins (cas précis d'utilisation),
  • Fournissez de l'aide explicite en cas de besoin.

La gestion des erreurs

Le site prévoit que l'internaute se trompe

  • L'internaute ne doit pas faire d'erreur (tout faire pour que l'internaute sache ce qu'il doit faire),
  • Évitez les erreurs grâce aux libellés et aux légendes des champs,
  • Évitez les erreurs grâce à la taille des champs et au type d'éléments de formulaire,
  • Demandez une confirmation pour les actions à risques,
  • Empêchez la saisie de données erronées,
  • Indiquez une erreur lors de la saisie,
  • Facilitez le repérage des erreurs,
  • Fournissez une explication précise de l'erreur (évitez les messages du type « Une erreur est survenue »),
  • Faîtes preuve de courtoisie dans les messages d'erreur (évitez les messages de type « erreurs fatales » en rouge),
  • L'internaute doit facilement pouvoir corriger ses erreurs (pouvoir corriger plusieurs erreurs en une seule fois).

La rapidité

L'internaute ne perd pas son temps

  • Facilitez l'accès aux éléments cliquables (taille, position),
  • Prenez en compte les besoins fonctionnels,
  • Multipliez les clés d'entrée vers une même page (lien interne),
  • Facilitez les interactions,
  • Évitez les actions inutiles et systématiques,
  • Ne pas demander deux fois la même chose à un internaute,
  • Des modes d'interaction orientés efficients (mode expert : recherche avancée, mode novice : recherche simple).

La liberté

C'est l'internaute qui commande

  • Proposez le retour arrière du navigateur, le clic-droit, le copier-coller…
  • Proposez des actions d'annulation,
  • Proposez de contourner le système (stopper une animation, fermer une publicité…),
  • L'internaute peut personnaliser son interface suivant ses habitudes (page d'accueil personnalisable, enregistrer son mode de recherche préféré),
  • Le système ne contraint pas l'utilisateur à des actions futiles,
  • Prévenez si le site doit lancer une application externe (Ex: Un lien vers un fichier MP3 lance le lecteur défini par défaut).

L'accessibilité

Un site facile d'accès pour le public ciblé

  • Accessibilité physique (Le site doit respecter les standards permettant la navigation à partir de logiciels spécifiques aux déficients visuels.),
  • Accessibilité technologique (L'absence de plugin comme Flash ou la désactivation du JavaScript ne doivent pas empêcher l'utilisation du site),
  • Adaptez le contenu à la résolution (Il faut cibler une résolution pour une utilisation optimale. Les autres résolutions peuvent tout de même accéder sans problème au site).

La satisfaction de l'internaute

La navigation est plaisante et répond aux attentes de l'internaute

  • Satisfaire grâce au critère d'utilité (le contenu a répondu aux attentes de l'internaute),
  • Satisfaire grâce à l'esthétisme (un site agréable est plus plaisant à utiliser),
  • Satisfaire grâce à l'expérience utilisateur globale (le fond et la forme de votre site a répondu aux attentes de l'internaute),
  • Satisfaire grâce à la qualité du service,
  • Satisfaire grâce à la puissance et à la fiabilité technique.

C. Conclusion

Tout développeur web est confronté à la création d'interface. Si vous voulez que vos sites respectent les attentes de vos internautes, suivez ces règles.
Ce cours n'est qu'une introduction à l'ergonomie. Pour ceux qui voudraient aller plus loin, je vous recommande le livre "Ergonomie Web" d'Amélie Boucher chez Eyrolles.

D. Outils

L'ergonomie web peut être simplifiée grâce à des outils. Ces outils vont permettre de générer des maquettes (wireframe) faisant abstraction du design et du contenu.
Ainsi, il sera beaucoup plus facile de respecter les bonnes pratiques d'ergonomie. Le meilleur dans ce domaine est certainement Axure RP Pro.
Introduction à l'ergonomie avec Axure RP Pro

E. Remerciements

Je remercie tout particulièrement Alexandra, pour comprendre mon travail et pour me soutenir dans tout ce que je fais. Je t'aime.
Je remercie tout spécialement Amélie Boucher, auteur du livre "Ergonomie Web"
Je remercie developpez.com pour donner aux développeurs, la chance de s'exprimer, de s'entraider, et de s'épanouir.
Je remercie les relecteurs, Rodrigue Hunel (alias Kerod) et Grégory Dumas (alias freegreg) qui ont travaillé sur cette page.