La facilite dutilisation et de comprehension

1. Objectifs

   • Distinguer la facilité d'utilisation et la facilité de compréhension
   • Expliquer la notion de modèle mental
   • Appliquer huit principes pour rendre un écran plus simple
   • Utiliser les lois de Hick et de Fitts pour justifier un choix
   • Rédiger des textes clairs et des états vides utiles
   • Vérifier la facilité avec le test des cinq secondes et un test de première utilisation

1. Présentation

   • Vous ouvrez une application pour la première fois : comprenez-vous tout de suite à quoi elle sert et que faire ensuite ? Si vous devez lire une notice ou demander de l'aide pour une tâche simple, l'application n'est pas encore assez facile.
   • Dans la leçon précédente, nous avons vérifié qu'une application répond à un besoin réel. Il reste maintenant à rendre ce service accessible avec le moins d'efforts possible. Un écran facile à utiliser n'a rien de magique : il repose sur des principes que vous pouvez appliquer et vérifier.

• Nous continuons avec BiblioCampus, notre application fictive. Pour les activités, créez le dossier 07-facilite/ dans votre dépôt GitHub ui-ux-design-bts.

1. Deux qualités complémentaires

   • Une action peut être facile à réaliser une fois comprise, mais difficile à découvrir. L'inverse existe aussi : on comprend ce qu'il faut faire, mais l'opération demande trop de gestes.

1. Le modèle mental

   • Le modèle mental est l'idée qu'une personne se fait du fonctionnement d'un produit. Elle se construit à partir de son expérience, notamment des autres applications qu'elle utilise.
   • Plus le modèle mental de l'utilisateur se rapproche de ce que montre l'application, plus celle-ci paraît simple :

• Cela explique l'intérêt de respecter les conventions : une loupe pour la recherche, un panier pour les achats, un logo qui mène à l'accueil. Jakob Nielsen rappelle que les utilisateurs passent la plupart de leur temps sur d'autres sites : ils s'attendent donc à retrouver les mêmes habitudes sur le vôtre.

1. Huit principes

   • Voici huit principes concrets, que nous allons illustrer un par un :

1. Principe 1 : montrer ce qui peut être utilisé

   • Donald Norman parle de signifiants: des indices qui montrent comment utiliser un objet. Sur un écran, la forme, la couleur et le soulignement peuvent jouer ce rôle.

1. Principe 2 : limiter les choix visibles

   • Selon la loi de Hick, le temps de décision augmente avec le nombre et la complexité des options. Il ne s'agit pas de tout supprimer, mais de mettre en avant ce qui compte le plus.

1. Principe 3 : rapprocher et agrandir

   • La loi de Fitts relie le temps nécessaire pour atteindre une cible à sa distance et à sa taille. Une action fréquente doit donc être facile à atteindre.

1. Principe 4 : reconnaître plutôt que se souvenir

   • Notre mémoire est limitée. Montrez les options, l'historique et les éléments récents au lieu de demander à l'utilisateur de les retenir.

1. Principe 5 : révéler progressivement

   • La divulgation progressive consiste à montrer d'abord l'essentiel, puis les options avancées lorsque l'utilisateur en a besoin.

1. Principe 6 : préremplir intelligemment

   • Une bonne valeur par défaut évite une décision. Elle doit rester modifiable et ne jamais engager l'utilisateur à son insu sur un choix important.

1. Principe 7 : répondre à chaque action

   • Après un clic, l'interface doit réagir rapidement. L'utilisateur a besoin de savoir ce qui se passe, ce qui a réussi et ce qu'il doit faire ensuite.

1. Principe 8 : employer les mots de l'utilisateur

   • Un texte clair utilise des mots courants et indique le résultat d'une action. Il évite le vocabulaire technique ou administratif :

1. Exemple : un écran vide

   • La première visite est souvent décisive. Un écran sans contenu peut expliquer la situation et proposer la prochaine action :

1. Exemple : l'aide au bon moment

   • Quand une application doit tout expliquer, c'est souvent le signe qu'elle est trop compliquée. Corrigez d'abord l'écran, puis ajoutez une aide courte si nécessaire :

1. Simple ne veut pas dire vide

   • Un écran n'est pas plus simple parce qu'il contient moins d'éléments. Masquer un bouton essentiel ou supprimer un libellé peut le rendre plus difficile à comprendre.
   • Ce qui compte, c'est que l'utilisateur trouve rapidement ce dont il a besoin. Certains outils professionnels affichent beaucoup d'informations, tout en restant efficaces pour leurs utilisateurs formés.

1. Vérifier la compréhension

   • Vous connaissez trop bien votre écran pour le juger seul. Demandez à d'autres personnes ce qu'elles en comprennent :

1. Vérifier la facilité

   • Le test de première utilisation consiste à donner une tâche à une personne qui ne connaît pas l'application, puis à l'observer sans l'aider.
   • Demandez-lui de penser à voix haute: vous découvrirez pourquoi elle hésite, et pas seulement où.

• Le SUS (System Usability Scale) est un questionnaire de dix affirmations souvent utilisé pour mesurer la facilité perçue. Vous approfondirez les tests utilisateurs au chapitre 09.

1. Activité 1 : reconnaître les principes

   • Associez chaque amélioration à un principe :
     • a) Ajouter une liste des derniers trajets au lieu de les faire ressaisir.
     • b) Remplacer « Purger » par « Effacer ».
     • c) Afficher un message après un paiement.
     • d) Masquer les filtres rares derrière « Plus de filtres ».
     • e) Agrandir le bouton principal et le placer près du pouce.
     • f) Sélectionner par défaut le campus habituel.
     • g) Réduire un menu de vingt entrées à cinq entrées principales.
     • h) Donner à un lien l'apparence d'un lien.
   • Vérifier : a) reconnaître, b) clarifier, c) répondre, d) révéler, e) rapprocher, f) préremplir, g) limiter, h) montrer.
   • Quelles améliorations touchent surtout la compréhension, et lesquelles l'utilisation ?

1. Activité 2 : réécrire des textes

   • Réécrivez ces textes avec des mots simples :
     • « Votre session a été invalidée. »
     • « Veuillez procéder au renseignement des champs obligatoires. »
     • « Échec de la synchronisation. »
     • « Exécuter la suppression du compte. »
     • « Document non conforme aux spécifications. »
   • Vérifier : chaque texte reste exact, se comprend sans vocabulaire technique et indique si possible quoi faire ensuite.
   • Faites lire vos textes à un camarade : que ferait-il après les avoir lus ?

1. Activité 3 : le test des cinq secondes

   • Montrez cet écran à un camarade pendant cinq secondes, puis posez les trois questions de la leçon :

• Vérifier : relevez les réponses mot pour mot. Le sigle, les menus vagues, la phrase administrative, les codes et le lien « soumettre » presque invisible rendent l'écran difficile à comprendre.
• Quelles sont les trois corrections les plus importantes ?

1. Activité 4 : refaire l'écran

   • Dessinez une nouvelle version de l'écran précédent. L'objectif de l'étudiant est de déposer sa convention de stage.
   • Vous devez appliquer au moins cinq des huit principes et les indiquer sur votre dessin.
   • Vérifier : refaites le test des cinq secondes. La personne dit-elle maintenant à quoi sert l'écran et quelle est la première action ?

1. Activité 5 : tester des icônes

   • Sans donner d'explication, demandez à trois personnes ce que signifie chaque icône :

• Notez leurs réponses dans un tableau.
• Vérifier : les icônes bien connues obtiennent des réponses proches, alors que d'autres sont interprétées très différemment. Pour lesquelles ajouteriez-vous un libellé ?

1. Activité 6 : simplifier une recherche

   • Un site de stages propose ces critères de recherche : ville, région, secteur, entreprise, durée, date de début, rémunération, télétravail, langue, taille de l'entreprise, niveau d'études et mot-clé.
   • Choisissez les critères visibles au départ, ceux à révéler et les valeurs à préremplir. Justifiez vos choix.
   • Vérifier : deux ou trois champs suffisent à commencer, et aucune option utile ne devient inaccessible.

1. Activité 7 : concevoir des états vides

   • Rédigez un écran vide utile pour :
     • une liste de favoris encore vide ;
     • une recherche qui ne donne aucun résultat ;
     • une messagerie sans message.
   • Vérifier : chaque écran dit ce qui se passe, pourquoi et propose une action. Une recherche sans résultat peut, par exemple, suggérer d'autres mots ou de retirer un filtre.

1. Activité 8 : préparer une aide discrète

   • Choisissez une fonction un peu difficile d'une application. Écrivez une astuce de vingt mots maximum et précisez quand elle doit apparaître.
   • Vérifier : le conseil arrive au moment de l'action, se ferme facilement et ne remplace pas la correction d'un écran confus.

1. Activité 9 : un test de première utilisation

   • Par deux, testez une application que l'un de vous ne connaît pas. Donnez une tâche, demandez à la personne de penser à voix haute, puis notez vos observations :

• Vérifier : vous avez noté la réussite, le temps, les hésitations et les phrases prononcées. Pourquoi ne faut-il pas expliquer l'interface pendant le test ?

1. Activité 10 : déposer votre travail sur GitHub

   • Regroupez vos réponses et vos tableaux dans 07-facilite/README.md, ajoutez la photo de votre écran refait, puis envoyez le tout :

git add 07-facilite
git commit -m "Ajoute la leçon sur la facilité d'utilisation et de compréhension"
git push

• Vérifier : le fichier README.md et vos images apparaissent bien sur la page GitHub du dépôt.

1. Erreurs fréquentes

1. À retenir

   • Une application doit être facile à comprendre et facile à utiliser.
   • Elle paraît simple lorsque ce qu'elle montre correspond au modèle mental de l'utilisateur.
   • Huit principes aident à la concevoir : montrer, limiter, rapprocher, reconnaître, révéler, préremplir, répondre et clarifier.
   • Les lois de Hick et de Fitts aident à réfléchir au nombre de choix et à la position des boutons.
   • Simple ne veut pas dire vide : l'important est de trouver rapidement ce qui est utile.
   • La facilité se vérifie auprès de personnes qui découvrent l'écran.

Si vous devez expliquer un écran, ne cherchez pas d'abord une meilleure explication : cherchez un meilleur écran.