TP 13 : Concevoir l'architecture de l'information et les parcours d'une application

1. Objectifs

   • Inventorier les contenus et les fonctions d'une application qui grandit
   • Définir les fonctionnalités requises : user stories, MoSCoW, critères d'acceptation
   • Construire une arborescence avec un tri de cartes et la vérifier par un test d'arborescence
   • Hiérarchiser l'écran d'accueil et la fiche d'un plat
   • Optimiser deux parcours et l'interaction d'un formulaire, et mesurer le gain

1. Prérequis

   • Avoir suivi les leçons du chapitre « Architecture de l'information et parcours utilisateur » : L'architecture de l'information, Hiérarchiser l'information et la visibilité des contenus, Optimiser la navigation et le parcours utilisateur, Définir les fonctionnalités requises, Optimiser l'interaction avec l'utilisateur final.
   • Avoir réalisé le TP 12 : Concevoir les interactions et la mise en page responsive d'une application ; disposer des personas (TP 3) et des résultats de test (TP 6).
   • Aucune programmation n'est demandée : on organise, on teste, on mesure.

1. Présentation du projet

   • CantineCampus fonctionne, et le restaurant veut aller plus loin. Le directeur ajoute une liste de nouveautés : menus de la semaine, allergènes et régimes, porte-monnaie (solde, recharge, historique), favoris, avis sur les plats, notifications, horaires et affluence, actualités du restaurant…
   • L'application passe de 4 écrans à une trentaine de contenus. Déjà, au TP 6, des usagers n'ont pas trouvé comment recharger leur compte (rangé dans Compte › Paramètres › Paiement).
   • Votre mission : décider quelles fonctionnalités réaliser, les organiser pour que les usagers les trouvent, hiérarchiser les écrans principaux et optimiser les parcours les plus fréquents.
   • Téléchargez l'archive du TP. Elle contient la demande du directeur et l'inventaire de départ (ressources/), les 30 cartes à imprimer pour le tri de cartes (outils/cartes-tri.html), un outil de test d'arborescence (outils/test-arborescence.html), le classeur modeles/grille-tp13.xlsx et le plan du dossier.

• L'arborescence et l'écran de l'image sont des exemples: la vôtre viendra de vos participants. Deux binômes ne doivent pas rendre la même.
• L'outil de test d'arborescence s'ouvre dans un navigateur, sans connexion : vous y saisissez votre arborescence et vos tâches, les participants naviguent dans l'arbre, l'outil enregistre leur chemin, la réussite, le caractère direct et le temps, puis vous copiez les résultats dans le classeur.

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'architecture. Le classeur modeles/grille-tp13.xlsx calcule l'accord du tri de cartes, les résultats du test d'arborescence, le gain des parcours et vérifie la priorisation.
   • Trois règles s'appliquent : chaque fonctionnalité remonte à un besoin; l'organisation vient des usagers; chaque amélioration est mesurée.
   • À la fin de chaque partie, enregistrez votre travail sur GitHub : un commit par partie permet de suivre votre progression.

1. Partie 0 : préparer le travail

⏱ 15 min

Notions mobilisées : L'architecture de l'information

• Dans votre dépôt ui-ux-design-bts, créez le dossier de ce TP :

cd ui-ux-design-bts
git pull
mkdir -p projet-cantinecampus/08-architecture/inventaire projet-cantinecampus/08-architecture/fonctionnalites projet-cantinecampus/08-architecture/tri-de-cartes projet-cantinecampus/08-architecture/arborescence projet-cantinecampus/08-architecture/parcours projet-cantinecampus/08-architecture/ecrans
git add projet-cantinecampus/08-architecture
git commit --allow-empty -m "Démarre le TP 13"
git push

• Copiez le classeur dans 08-architecture/. Lisez la demande du directeur et l'inventaire de départ (ressources/).
• Imprimez les 30 cartes (outils/cartes-tri.html, puis Ctrl+P) en deux exemplaires et découpez-les. Ouvrez l'outil de test d'arborescence pour le découvrir.
• Rassemblez vos personas (TP 3), les observations du TP 6 et le lexique validé.

📁 Dans le dossier : la demande annotée et la liste des documents de départ.

1. Partie 1 : inventorier les contenus

⏱ 30 min

Notions mobilisées : L'architecture de l'information · Hiérarchiser l'information et la visibilité des contenus

• Dans l'onglet « Inventaire », complétez les 30 contenus de départ : besoin et source (persona, entretien, observation du TP 6, demande du directeur, obligation), fréquence d'usage, importance pour l'usager.
• Ajoutez les contenus qui manquent d'après vos personas ; signalez les doublons et les contenus sans source.
• Le classeur déduit un niveau de visibilité conseillé à partir de la fréquence et de l'importance. Notez où vous n'êtes pas d'accord, et pourquoi.

📁 Dans le dossier : l'onglet « Inventaire ».

1. Partie 2 : définir les fonctionnalités requises

⏱ 40 min

Notions mobilisées : Définir les fonctionnalités requises

• Dans l'onglet « Fonctionnalités », rédigez les user stories des nouvelles fonctions (« En tant que… je veux… afin de… »), avec leur besoin d'origine.
• Classez chaque story en MoSCoW et estimez sa valeur et son effort (1 à 3). Le classeur vérifie que les « Must » ne dépassent pas 60 %.
• Écrivez les critères d'acceptation (Étant donné / Quand / Alors) de trois stories « Must », cas limites compris.
• Ajoutez au moins trois exigences non fonctionnelles mesurables (rapidité, accessibilité, réseau lent, données personnelles).
• Dessinez la story map (FigJam ou papier) et tracez la ligne du MVP : elle doit traverser tout le parcours.

📁 Dans le dossier : l'onglet « Fonctionnalités », les critères d'acceptation et la story map.

1. Partie 3 : mener un tri de cartes

⏱ 35 min

Notions mobilisées : L'architecture de l'information

• Recrutez cinq participants représentatifs de vos personas, qui ne connaissent pas le projet.
• Chacun fait un tri ouvert avec les 30 cartes : « Rangez ces cartes en groupes qui ont du sens pour vous, puis donnez un nom à chaque groupe. » Demandez-lui de penser à voix haute.
• Photographiez chaque tri et notez dans l'onglet « Tri de cartes » le nom du groupe choisi pour chaque carte, mot pour mot.
• Le classeur calcule l'accord de chaque carte (part des participants qui ont donné le même nom de groupe). Repérez les groupes stables et les cartes « instables ».

📁 Dans le dossier : les photos des tris et l'onglet « Tri de cartes ».

1. Partie 4 : construire l'arborescence et l'étiquetage

⏱ 30 min

Notions mobilisées : L'architecture de l'information · Optimiser la navigation et le parcours utilisateur

• À partir du tri de cartes, construisez l'arborescence : 4 ou 5 rubriques principales (la barre d'onglets), 3 niveaux au plus.
• Nommez chaque rubrique avec les mots des participants. Pour chaque carte instable, choisissez une place et prévoyez un raccourci si besoin.
• Saisissez l'arborescence dans l'outil test-arborescence.html (onglet 1), un élément par ligne, indenté de deux espaces par niveau. Enregistrez-la aussi sous forme d'image dans Figma ou ioDraw.
• Comparez avec l'arborescence actuelle : profondeur de « Recharger », nombre de rubriques, étiquettes changées.

📁 Dans le dossier : l'arborescence dessinée et le fichier texte exporté par l'outil.

1. Partie 5 : vérifier par un test d'arborescence

⏱ 30 min

Notions mobilisées : L'architecture de l'information

• Dans l'outil (onglet 2), écrivez six tâches sous forme de situations, sans les mots de l'arborescence (« Il vous reste 2 € : où ajoutez-vous de l'argent ? »), et désignez la bonne réponse.
• Faites passer le test (onglet 3) à cinq nouveaux participants, qui n'ont pas fait le tri de cartes. Ne les aidez pas.
• Copiez les résultats (onglet 4) et collez-les dans l'onglet « Test d'arborescence » du classeur : réussite, caractère direct et temps par tâche.
• Pour chaque tâche réussie par moins de 4 participants sur 5, regardez les chemins suivis, corrigez l'arborescence (place ou étiquette), puis refaites la tâche avec deux personnes.

📁 Dans le dossier : l'onglet « Test d'arborescence » et l'arborescence corrigée.

1. Partie 6 : hiérarchiser l'accueil et la fiche plat

⏱ 30 min

Notions mobilisées : Hiérarchiser l'information et la visibilité des contenus

• Placez les contenus de l'écran d'accueil dans la matrice importance × fréquence et déduisez leur niveau de visibilité.
• Redessinez l'accueil: niveau 1 au-dessus de la ligne de flottaison, raccourcis vers les contenus fréquents, le reste à un appui.
• Redessinez la fiche d'un plat en pyramide inversée et en divulgation progressive : nom, prix et régime visibles ; ingrédients et allergènes ensuite ; apports nutritionnels à la demande.
• Vérifiez avec le test du flou, puis un test des cinq secondes avec deux personnes.

📁 Dans le dossier : la matrice, les écrans avant / après et les résultats des tests.

1. Partie 7 : optimiser deux parcours

⏱ 35 min

Notions mobilisées : Optimiser la navigation et le parcours utilisateur

• Dessinez le parcours actuel de « Commander le plat du jour » et de « Recharger son compte »: écrans, actions, décisions, chemins alternatifs (solde insuffisant, plat épuisé, heure complète).
• Repérez les frictions et appliquez supprimer, fusionner, raccourcir, anticiper. Gardez les frictions utiles. Dessinez les parcours optimisés.
• Dans l'onglet « Parcours », saisissez le nombre d'étapes avant / après. Faites réaliser chaque parcours optimisé (prototype Figma) à trois personnes et notez le temps et la réussite.
• Vérifiez que chaque écran des parcours répond aux trois questions: où suis-je, où puis-je aller, comment revenir.

📁 Dans le dossier : les parcours avant / après et l'onglet « Parcours ».

1. Partie 8 : optimiser l'interaction

⏱ 30 min

Notions mobilisées : Optimiser l'interaction avec l'utilisateur final · Les boutons (Call To Action) et leur disposition

• Reprenez le formulaire de recharge: pour chaque champ, est-il nécessaire ? Le système le connaît-il ? Peut-on le proposer ? Notez vos décisions dans l'onglet « Interaction ».
• Redessinez-le : montants proposés, valeur par défaut, moyen de paiement mémorisé, résultat annoncé, bouton précis.
• Rédigez les messages d'erreur du parcours de commande (solde insuffisant, heure complète, plat épuisé, réseau perdu) : ce qui s'est passé, pourquoi, que faire, avec l'action proposée.
• Passez les écrans des deux parcours à la grille des six principes (signifiants, retour, contraintes, cohérence, correspondance, contrôle).

📁 Dans le dossier : l'onglet « Interaction », le formulaire avant / après et les messages d'erreur.

1. Partie 9 : documenter et présenter

⏱ 25 min

Notions mobilisées : L'architecture de l'information · Définir les fonctionnalités requises

• Assemblez le dossier d'architecture selon modeles/dossier-architecture-modele.md (8 à 12 pages) : inventaire, fonctionnalités et MVP, tri de cartes, arborescence testée, écrans hiérarchisés, parcours, interaction, résultats.
• Préparez une présentation de 5 minutes pour le directeur : ce que les usagers ont révélé, l'arborescence retenue, un parcours avant / après et ses chiffres, les fonctionnalités reportées et pourquoi.

git add projet-cantinecampus/08-architecture
git commit -m "Ajoute le dossier d'architecture de l'information du TP 13"
git tag -a architecture-v1 -m "Architecture de l'information et parcours, version 1"
git push
git push origin architecture-v1

• Variantes pour les binômes en avance : faire un tri de cartes fermé pour vérifier les rubriques ; concevoir la recherche (suggestions, filtres par régime) ; tester l'arborescence avec un usager qui utilise un lecteur d'écran.
• Relisez le dossier : chaque fonctionnalité a un besoin, chaque rubrique vient des participants, chaque amélioration a une mesure, et aucun participant n'est reconnaissable.

📁 Dans le dossier : le dossier en PDF et le support de présentation.

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt GitHub, avec au moins un commit par partie et l'étiquette architecture-v1.
   • Le dossier d'architecture (PDF), avec vos noms, 8 à 12 pages.
   • Le classeur grille-tp13.xlsx complété et le fichier texte de l'arborescence.
   • Les photos des tris de cartes, la story map, les parcours et le lien Figma des écrans, et le support de présentation.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Mener un tri de cartes en ligne avec plus de participants et comparer les résultats.
   • Concevoir le système de recherche: synonymes (« végé », « végétarien »), suggestions, filtres.
   • Rédiger le plan de mesure de l'application en production : entonnoir de commande, taux d'abandon par étape.

1. Bilan

   • Une application qui grandit se réorganise: inventaire, puis fonctionnalités prioritaires.
   • L'organisation vient du modèle mental des usagers : le tri de cartes la construit, le test d'arborescence la vérifie.
   • Les écrans principaux se hiérarchisent selon l'importance et la fréquence.
   • Les parcours fréquents s'optimisent et se mesurent.
   • Chaque interaction est évidente, rapide et sûre, erreurs comprises.

Les usagers ne lisent pas votre arborescence : ils cherchent leur repas. Rangez l'application comme ils pensent.