Tester la navigation de page en page

1. Objectifs

   • Analyser un écran avec les trois questions de la navigation
   • Réaliser et interpréter un test du premier clic
   • Comparer le chemin réel d'un participant au chemin minimal
   • Calculer et interpréter un taux d'égarement
   • Tester l'organisation d'un menu avec un test d'arborescence
   • Repérer les impasses, les boucles et les retours en arrière, et proposer des corrections

1. Présentation

   • Un usager peut comprendre le service et tous ses mots, et pourtant se perdre : la fonction qu'il cherche n'est pas là où il l'attend, le retour a disparu, un écran ne mène nulle part.
   • Tester la navigation, c'est observer comment l'usager passe d'un écran à l'autre pour atteindre son objectif, et mesurer l'écart avec le chemin le plus court. Cette leçon donne les méthodes et les mesures pour le faire.

• Nous continuons avec BiblioCampus et la tâche « prolonger un prêt ». Pour les activités, créez le dossier 09-4-navigation/ dans votre dépôt GitHub ui-ux-design-bts.

1. Les trois questions de la navigation

   • Sur chaque écran où un participant hésite, posez les trois questions vues au chapitre sur la navigation : où suis-je, où puis-je aller, comment revenir ? Le test montre à quelle question l'écran ne répond pas :

1. Le test du premier clic

   • Le premier clic est l'endroit où le participant touche l'écran en premier pour commencer une tâche. Il révèle où l'usager pense trouver la fonction. Un premier clic juste mène très souvent à la réussite ; un premier clic faux annonce une tâche difficile :

• Le test du premier clic peut se faire seul, très vite, sur une capture d'écran ou un wireframe : « Où toucheriez-vous pour… ? ». C'est un bon test avant même d'avoir un prototype cliquable.

1. Chemin réel et chemin minimal

   • Pendant les tâches, l'observateur note la suite des écrans visités. On compte les écrans vus (S, avec les répétitions), les écrans différents (N) et on les compare au chemin minimal (R), mesuré par l'équipe :

• Le taux d'égarement va de 0 (chemin parfait) à plus de 0,5 (usager perdu). On le calcule pour chaque essai, puis on fait la moyenne par tâche : la tâche la plus « égarante » montre où la navigation doit être revue.
• Repérez aussi les impasses (écrans sans issue), les boucles (revenir sur le même écran) et les retours à l'accueil: chacun signale une hésitation.

1. Le test d'arborescence

   • Pour savoir si l'organisation du menu est la bonne, on peut la tester sans interface: seulement la liste des rubriques, en texte. Le participant ouvre les rubriques pour trouver où réaliser une tâche :

• Le test d'arborescence isole l'organisation et les mots du menu : la couleur, la mise en page et les images ne peuvent ni aider ni gêner. Il complète le tri par cartes vu au chapitre sur la navigation.

1. Exemple 1 : prolonger un prêt sur BiblioCampus

   • Dans le prototype, la prolongation se trouvait sous « Transactions ». Au test, deux participants sur cinq ont réussi ; quatre premiers clics sur dix allaient vers « Compte ».
   • Le chemin de P3 montre sept écrans vus pour un chemin minimal de trois, avec deux retours à l'accueil : taux d'égarement de 0,49.
   • L'équipe a placé « Mes prêts » dans les onglets du bas et dans « Compte ». Au test suivant : cinq réussites sur cinq, premier clic juste pour quatre participants, égarement moyen de 0,08.

1. Exemple 2 : deux menus comparés

   • L'équipe hésitait entre deux organisations : « Catalogue · Transactions · Infos » et « Chercher · Mes prêts · Infos ».
   • Un test d'arborescence avec dix étudiants, sur quatre tâches, a donné 55 % de réussite pour la première et 90 % pour la seconde.
   • Le test a pris vingt minutes, sans aucun écran dessiné : la seconde organisation a été retenue avant même de modifier les wireframes.

1. Activité 1 : les trois questions

   • Ouvrez le prototype de CantineCampus du TP 6. Pour l'écran du plat et l'écran de confirmation, répondez aux trois questions de la navigation.
   • Vérifier : sur l'écran du plat, on ne peut ni revenir ni aller au panier directement ; sur la confirmation, aucun lien ne mène au suivi de la commande.

1. Activité 2 : le chemin minimal

   • Réalisez vous-même les cinq tâches du TP 6 et notez, pour chacune, la suite d'écrans la plus courte et le nombre d'écrans différents (R).
   • Vérifier : vos chemins minimaux sont notés dans projet-cantinecampus/05-tester/navigation.md; la tâche « commander » passe obligatoirement deux fois par l'accueil.

1. Activité 3 : le test du premier clic

   • Imprimez l'écran d'accueil de votre prototype. Demandez à cinq personnes : « Où toucheriez-vous pour annuler votre commande ? », puis « pour ajouter de l'argent sur votre carte ? ». Marquez chaque premier clic.
   • Vérifier : la part de premiers clics justes est calculée pour chaque question, et les endroits faux sont commentés.

1. Activité 4 : calculer un taux d'égarement

   • Calculez le taux d'égarement de ces trois essais de la tâche « annuler » (R = 3) : A : S = 3, N = 3 ; B : S = 6, N = 4 ; C : S = 9, N = 5.
   • Vérifier : A = 0 ; B = √[(4 ÷ 6 − 1)² + (3 ÷ 4 − 1)²] = 0,42 ; C = √[(5 ÷ 9 − 1)² + (3 ÷ 5 − 1)²] = 0,60. C est perdu, B est à la limite.

1. Activité 5 : observer les chemins

   • Pendant vos sessions de test (TP 6), notez le chemin complet de chaque participant sur deux tâches. Avec le prototype de référence, utilisez le journal de l'observateur (touche J).
   • Vérifier : chaque chemin est dessiné à côté du chemin minimal ; les retours, boucles et impasses sont entourés.

1. Activité 6 : le test d'arborescence

   • Rédigez l'arborescence du menu de CantineCampus en texte et testez-la avec trois personnes sur trois tâches.
   • Vérifier : la réussite de chaque tâche est notée, et au moins une rubrique est renommée ou déplacée après le test.

1. Activité 7 : proposer des corrections

   • Pour la tâche la plus égarante, proposez deux corrections de navigation : un lien ajouté, une rubrique déplacée, un retour rétabli. Dessinez le nouveau chemin minimal.
   • Vérifier : chaque correction répond à un endroit précis où les participants ont quitté le bon chemin.

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

   • Regroupez vos réponses dans 09-4-navigation/README.md, avec les chemins dessinés, puis envoyez le tout :

git add 09-4-navigation projet-cantinecampus/05-tester
git commit -m "Ajoute l'analyse de la navigation de CantineCampus"
git push

• Vérifier : navigation.md contient les chemins minimaux, les premiers clics et les taux d'égarement.

1. Erreurs fréquentes

1. À retenir

   • Trois questions : où suis-je, où puis-je aller, comment revenir.
   • Le premier clic montre où l'usager attend la fonction.
   • On compare le chemin réel au chemin minimal: écrans vus, écrans différents, retours.
   • Le taux d'égarement: moins de 0,4, l'usager s'en sort ; plus de 0,5, il est perdu.
   • Le test d'arborescence évalue le menu sans interface.
   • On corrige en plaçant la fonction là où l'usager la cherche.

Un usager perdu ne vous dira pas que la navigation est mauvaise : il fermera simplement l'application.