Wireframe, maquette et prototype : quelles différences ?

1. Objectifs

   • Distinguer le wireframe, la maquette et le prototype
   • Situer chaque livrable sur le spectre de la fidélité
   • Appliquer les conventions graphiques d'un wireframe
   • Annoter un wireframe pour les développeurs
   • Distinguer fidélité visuelle et interactivité
   • Choisir le livrable adapté à la question que se pose l'équipe

1. Présentation

   • La phase d'idéation a produit des solutions précises : fiche concept, storyboard, récits utilisateur. Le chapitre 08 ouvre la phase de conception: il faut maintenant donner une forme concrète à ces solutions, écran par écran.
   • Trois mots reviennent sans cesse, et sont souvent confondus : wireframe, maquette et prototype. Ils ne répondent pas à la même question et ne se font pas au même moment. Cette leçon les distingue clairement avant de passer, dans les leçons suivantes, à leur réalisation dans Balsamiq, ioDraw et Figma.

• Nous continuons avec BiblioCampus, notre application fictive de réservation de livres. Pour les activités, créez le dossier 26-wireframe-maquette-prototype/ dans votre dépôt GitHub ui-ux-design-bts.

1. Trois livrables, trois questions

   • Voici le même écran, la fiche d'un livre, sous trois formes :

• Le wireframe montre la structure, la maquette l'apparence, le prototype le comportement.

1. Le comparatif

   • Les trois livrables se distinguent sur plusieurs points :

1. Un spectre de fidélité

   • La fidélité mesure à quel point le livrable ressemble au produit final. Elle va du croquis papier au prototype haute fidélité :

1. Les conventions du wireframe

   • Un wireframe utilise un vocabulaire graphique simple, compris par toutes les équipes :

1. Annoter le wireframe

   • Un wireframe ne montre pas les règles de fonctionnement. Des annotations numérotées les précisent :

1. Fidélité et interactivité

   • La fidélité visuelle et l'interactivité sont deux dimensions indépendantes :

• On peut donc avoir un prototype en basse fidélité : des wireframes reliés entre eux, ou même des cartes en papier.

1. Le prototype papier

   • Avant tout logiciel, un prototype papier permet de tester un parcours :

1. Quel livrable pour quelle question ?

   • Le bon livrable est celui qui répond à la question que se pose l'équipe :

1. Exemple 1 : le wireframe évite un débat inutile

   • L'équipe BiblioCampus présente directement une maquette colorée de la fiche livre. La réunion porte pendant 40 minutes sur le bleu du bouton.
   • La semaine suivante, elle présente un wireframe gris de l'écran « Mes réservations ». La discussion porte sur l'essentiel : faut-il afficher la date de retour avant le titre ? Le bouton « Prolonger » doit-il être visible sans ouvrir la réservation ?

1. Exemple 2 : un prototype papier en 30 minutes

   • Avant d'ouvrir Figma, l'équipe dessine 5 écrans sur des cartes et fait tester le parcours « mettre un livre de côté » à 4 étudiants.
   • 3 sur 4 cherchent le bouton en haut de l'écran, près de la disponibilité, et non en bas. L'équipe déplace le bouton avant même de faire la maquette : la correction n'a coûté qu'une carte redessinée.

1. Exemple 3 : la bonne fidélité au bon moment

   • Semaine 1 : croquis et wireframes de 8 écrans, discutés avec la bibliothécaire.
   • Semaine 2 : wireframes cliquables pour un premier test de parcours. Semaine 3 : maquette des écrans validés, avec les couleurs de l'établissement.
   • Semaine 4 : prototype haute fidélité dans Figma, testé avant de commencer le développement. Chaque étape a répondu à une question différente.

1. Aide-mémoire

   • Les points clés à retenir :

1. Activité 1 : identifier les livrables

   • Pour chaque livrable de l'équipe CantineCampus ci-dessous, indiquez s'il s'agit d'un wireframe, d'une maquette, d'un prototype ou d'un croquis :

• Vérifier : a et e : wireframes ; b et g : prototypes ; c et f : maquettes ; d : prototype papier ; h : croquis.

1. Activité 2 : associer question et livrable

   • Pour chacune de ces questions, choisissez le livrable : a) « Le menu du jour est-il lisible au soleil ? » ; b) « Faut-il afficher le prix avant ou après le nom du plat ? » ; c) « Les étudiants trouvent-ils comment annuler une réservation ? »
   • Vérifier : a : maquette (contrastes) ; b : wireframe (organisation) ; c : prototype (comportement).

1. Activité 3 : dessiner un croquis

   • Dessinez à la main, en 5 minutes, l'écran « Menu du jour » de CantineCampus.
   • Vérifier : le croquis montre les principaux blocs (en-tête, jours, plats, bouton) sans aucun détail décoratif.

1. Activité 4 : passer au wireframe

   • Redessinez votre croquis sous forme de wireframe sur papier quadrillé en respectant les conventions de la leçon.
   • Vérifier : le wireframe est en gris, utilise les rectangles barrés pour les images et contient de vrais libellés de boutons.

1. Activité 5 : annoter

   • Ajoutez au moins quatre annotations numérotées à votre wireframe.
   • Vérifier : chaque annotation décrit une règle, un cas particulier ou une donnée, et non l'apparence.

1. Activité 6 : construire un prototype papier

   • Dessinez 4 cartes pour le parcours « réserver un repas » et faites-le tester par un camarade.
   • Vérifier : le camarade arrive au bout du parcours ; vous notez au moins une difficulté observée.

1. Activité 7 : placer sur la matrice

   • Placez les livrables de l'activité 1 dans la matrice fidélité / interactivité.
   • Vérifier : chaque livrable est dans la bonne case et vous justifiez le placement des cas hésitants.

1. Activité 8 : planifier la montée en fidélité

   • Proposez un planning sur 4 semaines pour CantineCampus, du croquis au prototype haute fidélité.
   • Vérifier : chaque semaine indique un livrable, la question à laquelle il répond et les personnes qui le valident.

1. Activité 9 : expliquer à un client

   • Rédigez un court message (8 lignes maximum) expliquant à la direction de la cantine pourquoi vous présentez d'abord des écrans gris.
   • Vérifier : le message est compréhensible sans jargon et donne au moins deux avantages du wireframe.

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

   • Photographiez vos croquis, wireframes et cartes, puis regroupez-les avec vos réponses dans 26-wireframe-maquette-prototype/:

git add 26-wireframe-maquette-prototype
git commit -m "Ajoute la leçon sur les différences entre wireframe, maquette et prototype"
git push

• Vérifier : tous les documents apparaissent sur GitHub et les photos sont lisibles.

1. Erreurs fréquentes

1. À retenir

   • Le wireframe montre la structure, la maquette l'apparence, le prototype le comportement.
   • La fidélité est un spectre : du croquis papier au prototype haute fidélité.
   • On utilise la fidélité la plus basse qui répond à la question posée.
   • Un wireframe est gris, simple, avec de vrais textes et des annotations.
   • Fidélité visuelle et interactivité sont indépendantes : un prototype peut être en papier.
   • Tester tôt coûte moins cher que corriger tard.

Plus un écran paraît fini, moins on ose le remettre en question.