Prototype
Définition
Version cliquable des maquettes qui simule les parcours utilisateur sans code. Permet de tester l'expérience avec des prospects ou des investisseurs avant le développement.
Qu'est-ce qu'un prototype
Un prototype est une version cliquable des maquettes qui simule les parcours utilisateur sans écrire une ligne de code. On enchaîne les écrans avec des transitions (slide, fade, push), parfois les états interactifs (hover, focus, erreur, succès), pour donner l'impression d'un vrai produit fonctionnel. L'utilisateur ne distingue pas immédiatement le prototype d'un produit fini, ce qui permet de tester l'expérience comme si elle était réelle. Figma propose un mode prototype directement intégré, qui suffit pour la majorité des cas.
À quoi ça sert
Le prototype est l'outil idéal pour tester l'expérience avant le développement. Cas typiques : valider un parcours d'inscription avec cinq utilisateurs cibles avant de coder, présenter à un investisseur un produit qui n'existe pas encore mais qu'on imagine, aligner les parties prenantes internes sur le résultat attendu, faire valider visuellement par un client avant de lancer le sprint. Toute friction détectée à ce stade (étape de trop, label confus, bouton mal placé) coûte une heure à corriger, contre plusieurs jours après développement.
Le niveau de fidélité
Le réalisme d'un prototype s'adapte à la décision à prendre. Pour valider la logique d'un parcours en interne, un prototype basse fidélité (wireframes cliquables, transitions simples) suffit. Pour tester avec de vrais utilisateurs externes, on monte en fidélité jusqu'à approcher le rendu final : couleurs, fontes, contenu réel, transitions soignées. Pour une démo commerciale ou un pitch investisseur, on pousse jusqu'à l'ultra-fini avec micro-animations et données crédibles. Plus le réalisme est élevé, plus le test est fiable, mais plus le coût de production grimpe.
Le user testing
Le prototype prend tout son sens en user testing modéré : on invite cinq utilisateurs cibles, on leur donne une tâche à accomplir ("inscrivez-vous et créez votre premier projet"), et on observe sans guider. Les blocages, hésitations et erreurs sont les vraies métriques. Cinq utilisateurs suffisent à détecter 85% des problèmes majeurs d'une interface. C'est l'un des investissements les mieux rentabilisés sur un projet produit : quelques heures pour éviter des semaines de développement dans la mauvaise direction.
Les outils
Figma propose un mode prototype natif, suffisant pour la grande majorité des besoins. Pour des prototypes plus poussés avec animations complexes, on utilise Framer, ProtoPie ou Principle. Pour des prototypes basés sur du vrai code (parfois utile pour tester la performance ou les interactions complexes), on monte un prototype Next.js minimal en quelques jours. Sur la majorité des projets B2B classiques, Figma fait largement l'affaire et évite la dispersion d'outils.
Quand sauter le prototype
Tous les écrans ne méritent pas un prototype. Pour des pages standards (formulaire de contact, fiche produit e-commerce classique, page d'inscription banale), les patterns sont connus et le prototype n'apporte rien. Pour des refontes incrémentales d'un produit existant, on peut tester directement en A/B test sur le produit réel plutôt que de prototyper. Le prototype est un outil ponctuel pour les écrans nouveaux ou complexes, pas une étape obligatoire à chaque pixel du projet.