Ergonomie Web : Les bonnes pratiques

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.

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).

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

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.

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é.

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.

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.

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.

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).

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.

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.

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.

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).

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).

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).

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 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.