TP 8 : Concevoir les wireframes d'une application

1. Objectifs

   • Distinguer croquis, wireframe, maquette et prototype, et choisir le bon niveau de fidélité
   • Passer des solutions retenues à un inventaire des écrans et à des diagrammes de flux
   • Explorer plusieurs pistes par des croquis sur papier
   • Réaliser des wireframes annotés avec Balsamiq et ioDraw, avec du contenu réel et tous les états d'un écran
   • Vérifier les wireframes avec les critères ergonomiques et d'accessibilité
   • Construire un prototype cliquable dans Figma, le partager, le faire commenter et le tester rapidement

1. Prérequis

   • Avoir suivi les leçons du chapitre « Phase de conception : wireframes et prototypes » : Wireframe, maquette et prototype : quelles différences ?, Créer un wireframe avec Balsamiq, Créer un wireframe avec ioDraw, Créer un prototype avec Figma, Créer un prototype avec InVision.
   • Avoir réalisé le TP 7 : Du persona aux solutions, ou utiliser le dossier de définition fourni dans l'archive.
   • Avoir créé un compte gratuit sur Figma. Aucune programmation n'est demandée : on structure, on relie, on vérifie.

1. Présentation du projet

   • Au TP 4, vous avez retenu trois solutions pour CantineCampus, l'application du restaurant universitaire :
     • S1: commander son repas à l'avance avec un créneau de retrait;
     • S2: voir le menu et ses allergènes dès l'ouverture, sans connexion ;
     • S3: connaître l'affluence et être prévenu quand la commande est prête.
   • Le directeur valide ces solutions et demande à voir, avant tout développement, à quoi ressemblera l'application et comment on s'en servira. Vous concevez les wireframes de l'application, puis un prototype cliquable que des usagers pourront essayer sur leur téléphone.
   • Téléchargez l'archive du TP. Elle contient un dossier de définition de référence (definition/dossier-definition-cantinecampus.pdf), six exemples d'écrans à classer (exemples/), un gabarit mobile à imprimer, des modèles de fiche d'écran et de compte rendu de test (modeles/) et le classeur modeles/grille-wireframes.xlsx.

• Vous pouvez partir de vos solutions du TP 4 ou du dossier de définition fourni. Dans tous les cas, chaque écran doit servir une tâche d'un persona.
• Les services d'InVision ont fermé le 31 décembre 2024 : ce TP réalise le prototype dans Figma, en appliquant les principes vus dans la leçon sur InVision (zones cliquables, partage, commentaires). Si Balsamiq n'est pas disponible, réalisez toutes les maquettes fil de fer dans ioDraw.

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 de conception. Le classeur modeles/grille-wireframes.xlsx contient les tableaux à remplir ; il vérifie les liens du prototype et calcule les bilans.
   • Trois règles s'appliquent : la structure avant le style (pas de couleur avant la maquette) ; du vrai contenu, jamais de lorem ipsum ; chaque écran sert une tâche.
   • À 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 : Wireframe, maquette et prototype : quelles différences ?

• Dans votre dépôt ui-ux-design-bts, créez le dossier de la phase de conception et ses sous-dossiers :

cd ui-ux-design-bts
git pull
mkdir -p projet-cantinecampus/04-prototyper/croquis projet-cantinecampus/04-prototyper/wireframes projet-cantinecampus/04-prototyper/prototype projet-cantinecampus/04-prototyper/test
git add projet-cantinecampus/04-prototyper
git commit --allow-empty -m "Démarre le TP 5"
git push

• Copiez le classeur dans 04-prototyper/ et complétez l'onglet « Mode d'emploi ». Relisez vos personas, votre fiche de cadrage et vos trois fiches solution (ou le dossier fourni), puis recopiez dans l'onglet les objectifs mesurables qui guideront la conception (par exemple : commander en 5 écrans au plus).
• Imprimez le gabarit mobile en au moins quatre exemplaires et créez un fichier vide dans Figma.

📁 Dans le dossier : les données de départ et les objectifs de conception.

1. Partie 1 : distinguer les niveaux de fidélité

⏱ 20 min

Notions mobilisées : Wireframe, maquette et prototype : quelles différences ?

• Ouvrez les six images du dossier exemples/ (A à F). Pour chacune, indiquez dans l'onglet « Fidélité » s'il s'agit d'un croquis, d'un wireframe basse fidélité, d'un wireframe moyenne fidélité, d'une maquette, d'un prototype ou d'autre chose, et justifiez par ce que vous voyez.
• Décidez ensuite du niveau de fidélité de chaque livrable de votre projet : ce que vous montrerez au directeur, ce que vous testerez avec les usagers.

📁 Dans le dossier : l'onglet « Fidélité » et le choix argumenté des niveaux.

1. Partie 2 : inventorier les écrans et dessiner les flux

⏱ 30 min

Notions mobilisées : Wireframe, maquette et prototype : quelles différences ? · Créer un wireframe avec ioDraw

• À partir des trois solutions, listez dans l'onglet « Inventaire » tous les écrans nécessaires : code (E01, E02…), nom, objectif, persona, solution liée, priorité et états à prévoir.
• Dessinez dans ioDraw le diagramme de flux des trois tâches à tester : T1 « commander le plat du jour pour 12 h 15 », T2 « trouver un plat sans gluten », T3 « annuler sa commande ». Reportez la suite des écrans de chaque tâche dans l'onglet « Flux ».

📁 Dans le dossier : l'onglet « Inventaire », l'onglet « Flux », les diagrammes et les fiches d'écran.

1. Partie 3 : esquisser sur papier

⏱ 30 min

Notions mobilisées : Wireframe, maquette et prototype : quelles différences ?

• Pour les trois écrans les plus importants, dessinez au moins trois pistes différentes sur le gabarit mobile, en 5 minutes chacune. Dessinez ensuite les autres écrans du flux T1 sur une seule piste.
• Choisissez en binôme la meilleure piste de chaque écran, en vous demandant ce que ferait votre persona principal. Photographiez tous les croquis et déposez-les dans croquis/.

📁 Dans le dossier : les photos des croquis et les choix argumentés.

1. Partie 4 : réaliser les wireframes dans Balsamiq

⏱ 45 min

Notions mobilisées : Créer un wireframe avec Balsamiq · Wireframe, maquette et prototype : quelles différences ?

• Réalisez dans Balsamiq les wireframes moyenne fidélité de tous les écrans du flux T1, à partir des croquis retenus : même gabarit de téléphone, mêmes composants aux mêmes endroits, contenu réel tiré du dossier.
• Exportez chaque écran en PNG dans wireframes/, nommé avec son code (E01-menu-du-jour.png). Mettez à jour le statut des écrans dans l'onglet « Inventaire ».

📁 Dans le dossier : les exports des wireframes du flux T1 et l'inventaire mis à jour.

1. Partie 5 : dessiner les états et les écrans secondaires dans ioDraw

⏱ 30 min

Notions mobilisées : Créer un wireframe avec ioDraw · Wireframe, maquette et prototype : quelles différences ?

• Dans ioDraw, réalisez les écrans des tâches T2 et T3, puis les états des écrans clés : vide (aucune commande), chargement, erreur (paiement refusé, créneau complet) et succès (commande confirmée, annulation confirmée).
• Vérifiez que le persona secondaire est bien servi : allergènes écrits en toutes lettres pour Yanis, textes lisibles et annulation facile pour Hélène.

📁 Dans le dossier : les écrans de T2 et T3, les états et la comparaison des deux outils.

1. Partie 6 : annoter et vérifier les wireframes

⏱ 25 min

Notions mobilisées : Wireframe, maquette et prototype : quelles différences ?

• Annotez les trois écrans clés : numérotez chaque choix important et expliquez-le à côté de l'écran, avec le critère qui le justifie.
• Vérifiez chaque écran avec les douze questions de l'onglet « Vérification » : huit critères ergonomiques et quatre points d'accessibilité. Corrigez les wireframes avant de passer au prototype.

📁 Dans le dossier : les écrans annotés et l'onglet « Vérification ».

1. Partie 7 : construire le prototype dans Figma

⏱ 45 min

Notions mobilisées : Créer un prototype avec Figma

• Dans Figma, créez les pages du fichier, importez vos exports ou redessinez les écrans dans des cadres au format téléphone, nommés avec leur code.
• En mode prototype, reliez les écrans : une zone cliquable par action, un retour sur chaque écran, une superposition pour les messages. Créez un point de départ par tâche (T1, T2, T3).
• Reportez chaque lien dans l'onglet « Prototype » : le classeur repère les impasses (écran sans sortie) et les écrans orphelins (jamais atteints).

📁 Dans le dossier : le lien du prototype dans liens-figma.md, l'onglet « Prototype » et des captures dans prototype/.

1. Partie 8 : partager, faire commenter et tester

⏱ 20 min

Notions mobilisées : Créer un prototype avec InVision · Créer un prototype avec Figma

• Partagez le prototype en lecture seule à un autre binôme, qui laisse au moins cinq commentaires épinglés sur les écrans. Répondez à chaque commentaire.
• Réalisez un test de couloir avec trois personnes qui ne connaissent pas le projet : faites-leur réaliser T1, T2 et T3 sur téléphone, à voix haute. Notez les résultats dans l'onglet « Test » et dans test/compte-rendu-test-couloir.md.

📁 Dans le dossier : les commentaires et leurs réponses, l'onglet « Test » et le compte rendu.

1. Partie 9 : le dossier de conception et la présentation

⏱ 40 min

Notions mobilisées : Wireframe, maquette et prototype : quelles différences ? · Créer un prototype avec Figma

• Assemblez le dossier selon le plan ci-dessous, puis préparez une présentation de 5 minutes pour le directeur : la tâche principale, le flux, trois wireframes annotés, une démonstration du prototype et ce que le test a changé. Déposez-les dans 04-prototyper/.

git add projet-cantinecampus/04-prototyper
git commit -m "Ajoute les wireframes et le prototype du TP 5"
git tag -a wireframes-v1 -m "Wireframes et prototype testés le jour du TP 5"
git push
git push origin wireframes-v1

• Variantes pour les binômes en avance : réaliser la maquette en couleurs d'un écran ; ajouter au prototype le parcours du persona secondaire ; ou refaire le test de couloir après corrections et comparer.
• Relisez votre dossier : chaque écran sert une tâche, chaque choix annoté a un critère, et chaque correction vient d'un constat du test ou de la vérification.

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 wireframes-v1.
   • Le dossier de conception (PDF), avec vos noms, 10 à 14 pages.
   • Les exports des wireframes (PNG) et le lien du prototype Figma dans liens-figma.md.
   • Le classeur grille-wireframes.xlsx complété, le compte rendu du test et le support de présentation.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Transformer les écrans testés en maquettes en couleurs dans Figma, avec une palette et une typographie.
   • Créer dans Figma une bibliothèque de composants réutilisables (bouton, carte de plat, barre d'onglets).
   • Préparer un test utilisateur complet du prototype, comme nous le ferons au chapitre suivant.

1. Bilan

   • La fidélité augmente avec les certitudes : croquis, wireframe, maquette, prototype.
   • L'inventaire et les flux viennent avant le dessin : ils évitent les écrans inutiles et les parcours trop longs.
   • Un wireframe utile montre la structure, le vrai contenu et tous les états d'un écran.
   • Les annotations et la vérification transforment des dessins en décisions argumentées.
   • Un prototype sert à être essayé : on le partage, on le fait commenter, on le teste, on le corrige.

Un wireframe ne montre pas à quoi ressemblera l'application : il montre comment on s'en servira. Le reste peut attendre.