TP 2 bis : Évaluer et améliorer l'ergonomie d'une application

1. Objectifs

   • Vérifier l'utilité et le caractère pratique des fonctions d'une application
   • Mener une inspection ergonomique avec les huit critères de Bastien et Scapin et noter la gravité des problèmes
   • Mesurer la facilité avec un test des cinq secondes et un test de première utilisation
   • Vérifier l'accessibilité à l'aide d'outils et de tests manuels
   • Évaluer la hiérarchie visuelle et la navigation
   • Prioriser les corrections et les illustrer par des maquettes avant / après

1. Prérequis

   • Avoir suivi les leçons du chapitre « L'ergonomie de l'application » : L'ergonomie d'une application, L'utilité et le caractère pratique, La facilité d'utilisation et de compréhension, L'accessibilité numérique, Attirer le regard de l'utilisateur, Concevoir une navigation intuitive.
   • Connaître les notions de base de Git et de GitHub.
   • Aucune programmation n'est demandée : on observe, on mesure et on propose.

1. Présentation du projet

   • La bibliothèque du campus a mis en ligne BiblioCampus, une application web pour téléphone qui permet aux étudiants de :
     • consulter le catalogue;
     • réserver un livre ;
     • suivre et prolonger leurs prêts ;
     • annuler une réservation ;
     • trouver les informations pratiques.
   • Depuis sa mise en service, le guichet reçoit de nombreuses plaintes : réservations en double, livres réservés par erreur et étudiants qui renoncent à utiliser l'application. Avant de lancer une nouvelle version, la directrice vous confie, en tant que consultants, une évaluation de son ergonomie : que faut-il corriger, et dans quel ordre ?
   • Téléchargez l'archive du TP, puis ouvrez application/bibliocampus.html dans un navigateur, de préférence sur un téléphone ou avec l'affichage mobile des outils de développement (F12, puis l'icône téléphone). Compte de test : numéro 20261234, mot de passe Campus2026.

• BiblioCampus est une application fictive: ses défauts sont volontaires. Vous ne modifierez pas son code. Un rechargement de la page (F5) la remet dans son état initial.

1. Organisation du TP

   • Le TP est découpé en dix parties. Chacune indique sa durée, ses notions, ses consignes, une aide, un point de contrôle et des questions.
   • Chaque partie ajoute une pièce à votre dossier d'évaluation. Le classeur modeles/grille-ergonomie.xlsx de l'archive contient les tableaux à remplir ; il calcule les bilans à partir de vos réponses.
   • Trois règles s'appliquent : un constat est un fait observable ; chaque problème a une preuve; chaque correction est précise et vérifiable.
   • À la fin de chaque partie, enregistrez votre travail sur GitHub : un commit par partie permet de suivre votre progression.

1. Partie 0 : préparer l'évaluation

⏱ 15 min

Notions mobilisées : L'ergonomie d'une application · L'utilité et le caractère pratique

• Créez sur GitHub un dépôt tp2bis-ergonomie-bibliocampus, ajoutez votre binôme comme collaborateur, puis clonez-le et préparez ses dossiers (remplacez VOTRE-COMPTE par votre identifiant) :

git clone https://github.com/VOTRE-COMPTE/tp2bis-ergonomie-bibliocampus.git
cd tp2bis-ergonomie-bibliocampus
mkdir captures maquettes rapport
git add .
git commit --allow-empty -m "Démarre le TP 2 bis"
git push

• Copiez le classeur dans le dépôt et complétez l'onglet « Mode d'emploi ». Ouvrez ensuite BiblioCampus deux minutes, sans chercher à accomplir une tâche, puis remplissez la fiche d'identité:

📁 Dans le dossier : la fiche d'identité et les réponses aux questions.

1. Partie 1 : l'utilité et le caractère pratique

⏱ 25 min

Notions mobilisées : L'utilité et le caractère pratique

• Interrogez deux ou trois camarades sur leur usage d'une bibliothèque : que veulent-ils faire, à quel moment, et qu'est-ce qui les gêne ?
• Formulez trois besoins sous la forme Quand… je veux… afin de…, puis évaluez dans l'onglet « Fonctions » chacune des douze entrées de l'accueil : utile ? pratique ? à garder, améliorer, déplacer, tester ou retirer ?
• Testez ensuite la tâche retrouver ses prêts en cours dans trois situations : avec une seule main, en étant interrompu 30 secondes et en quittant la page en cours de saisie.

📁 Dans le dossier : les besoins, l'onglet « Fonctions » et les observations en situation.

1. Partie 2 : l'inspection ergonomique

⏱ 60 min

Notions mobilisées : L'ergonomie d'une application

• Pendant 25 minutes, chaque membre du binôme inspecte seul tous les écrans : accueil, tuiles, menu ☰, formulaires, erreurs et écrans vides. Mettez ensuite vos listes en commun, en supprimant les doublons.
• Pour chaque problème, remplissez une ligne de l'onglet « Problèmes » et ajoutez une capture dans le dossier captures/.

📁 Dans le dossier : l'onglet « Problèmes » trié par gravité, avec les captures annotées.

1. Partie 3 : le test de facilité

⏱ 35 min

Notions mobilisées : La facilité d'utilisation et de compréhension

• Testez l'application avec au moins trois participants qui ne la connaissent pas. Commencez par le test des cinq secondes sur l'accueil, puis faites réaliser ces tâches à voix haute. Le premier clic, le temps, les erreurs et le résultat vont dans l'onglet « Test ».

📁 Dans le dossier : les réponses au test des cinq secondes, les résultats et les phrases notées.

1. Partie 4 : l'accessibilité

⏱ 45 min

Notions mobilisées : L'accessibilité numérique

• Remplissez l'onglet « Accessibilité » : pour chaque vérification, indiquez le résultat, la preuve et la correction. Utilisez ces quatre méthodes :

📁 Dans le dossier : l'onglet « Accessibilité », les mesures et le rapport Lighthouse.

1. Partie 5 : le regard et la hiérarchie

⏱ 20 min

Notions mobilisées : Attirer le regard de l'utilisateur

• Choisissez trois écrans : l'accueil, la fiche d'un livre et le formulaire. Pour chacun, notez ce que l'utilisateur devrait voir en premier, puis faites une capture et floutez-la.

📁 Dans le dossier : les trois captures floutées et votre analyse.

1. Partie 6 : la navigation

⏱ 35 min

Notions mobilisées : Concevoir une navigation intuitive

• Dessinez le plan des écrans actuel. Faites l'inventaire de tous les écrans, puis signalez les impasses et le chemin de la réservation.
• Organisez ensuite un tri par cartes avec trois personnes, puis dessinez un plan amélioré. Vérifiez-le avec un test du premier clic sur papier.

📁 Dans le dossier : l'inventaire, les deux plans, les résultats du tri et du premier clic.

1. Partie 7 : prioriser

⏱ 20 min

Notions mobilisées : L'ergonomie d'une application · L'utilité et le caractère pratique

• Regroupez les problèmes en corrections: une correction peut en résoudre plusieurs. Dans l'onglet « Priorités », notez leur impact de 1 à 4 et leur effort de 1 à 3. Le classeur indique le quadrant :

📁 Dans le dossier : l'onglet « Priorités » et l'ordre des corrections.

1. Partie 8 : corrections et maquettes avant / après

⏱ 30 min

Notions mobilisées : L'ergonomie d'une application · Attirer le regard de l'utilisateur · Concevoir une navigation intuitive

• Rédigez vos corrections, puis illustrez les deux plus importantes par une maquette avant / après. Déposez-les dans maquettes/.

📁 Dans le dossier : les corrections et les deux maquettes.

1. Partie 9 : le rapport et la présentation

⏱ 15 min

Notions mobilisées : L'ergonomie d'une application

• Assemblez le rapport selon le plan ci-dessous, puis préparez une présentation de 5 minutes pour la directrice : le constat, les trois priorités et une maquette. Déposez-les dans rapport/.

git add .
git commit -m "Ajoute le rapport final du TP 2 bis"
git push

• Variantes pour les binômes en avance : évaluer une vraie application que vous utilisez ; refaire le test sur vos maquettes ; ou construire un prototype cliquable dans Figma.
• Relisez votre rapport : chaque problème a une preuve, chaque correction est précise, et aucun avis (« c'est moche ») ne remplace un constat.

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt GitHub, avec au moins un commit par partie.
   • Le rapport (PDF), avec vos noms, 8 à 12 pages.
   • Le classeur grille-ergonomie.xlsx complété.
   • Les deux maquettes avant / après et le support de présentation.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Refaire le test après correction et comparer les résultats des deux versions.
   • Mesurer la facilité perçue avec le questionnaire SUS, déjà vu dans le TP 1.
   • Créer les maquettes haute fidélité dans Figma, comme nous le ferons dans les prochains chapitres.

1. Bilan

   • Une application doit d'abord être utile, puis facile et accessible.
   • L'inspection et le test se complètent : l'une repère beaucoup de problèmes, l'autre montre ce qui gêne vraiment.
   • Un problème bien décrit comporte un constat, une preuve, une gravité et une correction.
   • On ne corrige pas tout d'un coup : on priorise selon l'impact et l'effort.

Quand un étudiant se trompe, ne lui demandez pas de faire plus attention : montrez ce que l'application aurait pu faire pour l'aider, puis corrigez-la.