Qu'est-ce qu'un principe d'utilisabilité ?
Un principe d'utilisabilité est une règle générale qui aide à juger si une interface est facile à utiliser. Les concepteurs s'en servent pour repérer des défauts avant même d'appeler des utilisateurs.
Vous allez en apprendre quatre, les reconnaître sur une vraie page de boutique en ligne et dire lequel elle ne respecte pas.
À la fin de cette leçon
Remarque
Je peux juger une interface à l'aide de principes d'utilisabilité.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Utilisabilité | la facilité et l'efficacité avec lesquelles on atteint son but | |
| Interface | ce que la personne voit et touche pour utiliser un système | |
| Visibilité | le fait que le système montre où l'on est et ce qu'il fait | |
| Retour d'information | la réponse immédiate du système à une action | Commande reçue |
| Cohérence | le même aspect et le même comportement pour la même chose | |
| Prévention des erreurs | une conception où l'erreur est difficile à commettre |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Le système doit montrer ce qui se passe
Deux principes vont ensemble. La visibilité dit où vous êtes et ce que le système fait. Le retour d'information répond à chaque action, tout de suite.
Quand vous appuyez sur « Payer » et que rien ne change, vous ne savez pas si votre clic a compté. Beaucoup de gens cliquent alors une deuxième fois, et paient deux fois.
La même chose garde le même aspect
La cohérence veut dire que ce qui se ressemble se comporte pareil. Si « Valider » est vert sur une page et gris sur la suivante, il faut chercher où appuyer à chaque fois.
Elle vaut aussi entre les services. Une croix en haut à droite ferme une fenêtre presque partout : ne lui donnez pas un autre sens.
Mieux vaut prévenir l'erreur que la signaler
La prévention des erreurs cherche à rendre l'erreur impossible, ou au moins difficile. Un champ « date » qui n'accepte que des dates ne peut pas recevoir un nom.
Quand l'erreur est grave, on demande une confirmation. Supprimer un compte sans confirmation est un piège. Si l'erreur arrive quand même, le message dit ce qui ne va pas et comment le corriger.
Les quatre principes en exemples
| Principe | Ce qui le respecte | Ce qui le brise |
|---|---|---|
| Visibilité | Une barre « étape 2 sur 3 » pendant la commande | Un formulaire qui ne dit pas combien de pages restent |
| Retour d'information | Le bouton devient « Envoi en cours » | Un clic sans aucun changement |
| Cohérence | Tous les boutons « Payer » ont la même couleur | Un bouton nommé Payer, puis Valider, puis OK |
| Prévention des erreurs | Une confirmation avant de supprimer | Un message « Erreur 7 » sans explication |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une erreur fréquente
Attention
Beaucoup pensent qu'une interface est bonne quand elle est belle. Un joli bouton qui ne réagit pas viole quand même le retour d'information. Jugez ce qui aide la personne à finir sa tâche, pas l'effet visuel.
Une boutique faite pour être difficile
Le laboratoire contient une petite boutique de théières, Teapot Corner. Elle est faite à la main pour avoir des défauts. Vous la regardez dans l'onglet Preview, comme un évaluateur.
Les pages et les scripts du laboratoire sont en anglais : c'est un exemple, pas une règle. Les commandes suivantes ne font que lire.
Lire les notes des observateurs
docker exec jupyter cat notes.mdAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Chaque note est un défaut à nommer
Les notes sont en anglais. Huit observations y décrivent ce que huit personnes ont vécu sur la boutique. Par exemple, une personne ne sait pas où mène un lien « click here », et une autre ne comprend pas « Error 7 ».
Chacune se range sous un principe. Cherchez aussi des problèmes qu'aucun des quatre ne couvre : ils viennent dans les leçons suivantes.
Trouver le message d'erreur du paiement
docker exec jupyter grep -n "Error" shop/checkout.htmlAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Un code seul n'aide pas à corriger
La commande affiche la ligne 17 de la page de paiement : un paragraphe qui contient seulement « Error 7 ». Une personne lit ce code et ne sait ni ce qui ne va pas, ni quoi faire.
Un bon message dit le champ en cause et la correction, par exemple : « Le code postal doit contenir cinq chiffres ».
À vous : classer des observations
# Ajoutez une phrase clé et son principe, puis relancez.
regles = {
"rien ne change": "retour d'information",
"sans confirmation": "prévention des erreurs",
"ne sait plus où": "visibilité",
}
observations = [
"Après le clic, rien ne change à l'écran.",
"La suppression part sans confirmation.",
"La personne ne sait plus où elle en est.",
]
for texte in observations:
principe = "inconnu"
for phrase in regles:
if phrase in texte.lower():
principe = regles[phrase]
print(texte, "->", principe)