Le prototype donne vie aux maquettes, il permet de simuler les interactions tout le long du parcours pour faire tester auprès des utilisateurs. Malgré les avancées des logiciels pour la création de prototypes, il ne s’agit que d’une simulation moins poussée que ce que le développement permettra d’atteindre. Pour pallier ses contraintes, le prototype suit généralement un protocole de test pour s’assurer que les liens fonctionnent durant les tests utilisateurs.
En bref, pas d’algorithme complexe, juste des liens simples entre composants et pages, et parfois un peu d’animation magique pour donner plus de vie aux maquettes. Utiliser des prototypes est la solution idéale pour présenter le parcours dynamiquement à des utilisateurs et obtenir des retours !
01
Charger les maquettes ou wireframes
Pour commencer, il vous faut rassembler les différents écrans à partir desquels vous souhaitez créer un parcours dynamique. En fonction du niveau de détail souhaité, vous pouvez utiliser des sketch papiers, des wireframes (le plus souvent) ou des maquettes graphiques.
02
Créer les liens entre les pages
La démarche consiste à délimiter des zones cliquables sur un écran, à laquelle est attribuée une transition vers une autre page. Cette logique permet de construire pas à pas un enchainement d'écran en fonction de là où l'on clique. On se limite le plus souvent à mailler les liens principaux pour atteindre rapidement un rendu correspondant à un scénario défini.
03
Tester le prototype
Les prototypes sont accessibles en ligne de manière sécurisée. Là encore il est possible de recueillir des commentaires de la part de l'équipe projet ou des développeurs. Après avoir édité les liens et les transitions souhaitées à partir des zones cliquables, vous pouvez vérifier que votre prototype fonctionne.
En fonction du projet, nous adaptons les formats des prototypes et leur niveau de fidélité. Storyboard, scénario d’usage, fiches dispositifs, agencement fonctionnel d’espaces, jeu de rôle, prototype d’interface papier sont autant d’exemple de formats que nous proposons
Les logiciels de conception (comme Figma par exemple) permettent d’ajouter des transitions simples entre vos écrans en quelques clics.
Il suffit de sélectionner un composant (ou une zone) de votre interface et d’y appliquer une animation. Pour tester un parcours, on utilise les actions du type “au clic” puis on choisit “naviguer vers” puis on sélectionne l’écran suivant à afficher.
D’autres types d’interaction sont possibles, comme rendre un élément de l’interface “sticky”, c’est-à-dire immobile lors du scroll. Ou encore retarder l’affichage d’un élément pour simuler l’apparition d’une notification par exemple. Le terrain de jeu est très vaste !
On peut créer un prototype aussi bien sur desktop que sur mobile. L’élément essentiel est de bien penser le parcours dans son ensemble pour ne pas se retrouver coincé au milieu de son parcours sans porte de sortie.
Un prototype est une représentation préliminaire d'un produit ou d'une interface, conçue pour tester des hypothèses avant de développer la solution finale. Il peut être aussi simple qu'un dessin sur papier ou aussi élaboré qu'une maquette interactive haute fidélité sur Figma. Son rôle est de rendre une idée tangible pour qu'on puisse l'évaluer, la discuter et l'améliorer à moindre coût.
Un prototype basse fidélité (papier, wireframe simple) représente la structure et la logique d'une interface sans les détails visuels. Il est rapide à produire, facile à modifier et ne génère pas de biais visuels chez les testeurs. Un prototype haute fidélité reproduit l'apparence et le comportement de l'interface finale. Il est utile pour tester des interactions précises, valider des choix visuels ou présenter un concept à des parties prenantes. La basse fidélité convient aux premières itérations ; la haute fidélité aux phases de validation avancée.
Le plus tôt possible. Un prototype sur papier peut être construit et testé en quelques heures. L'objectif est de réduire l'incertitude avant d'investir dans le développement. La règle de base : prototyper avant d'avoir l'impression d'être prêt. Les problèmes découverts sur un prototype papier coûtent quelques minutes à corriger ; les mêmes problèmes découverts après développement peuvent coûter plusieurs semaines.
Pour la basse fidélité : papier et stylo, Balsamiq, ou même des post-its. Pour la haute fidélité : Figma (le standard actuel du marché), Adobe XD ou Sketch. Pour des interactions complexes (animations, transitions avancées) : ProtoPie, Principle ou Framer. Le choix de l'outil dépend de la fidélité visuelle nécessaire et du type d'interactions à tester, pas des préférences personnelles de l'équipe.
On prépare des scénarios de tâches réalistes, on observe les utilisateurs interagir avec le prototype en notant leurs comportements, hésitations et verbalisations. Pour les prototypes Figma, on peut partager un lien et observer à distance via des outils comme Lookback ou Maze. L'essentiel est de résister à l'envie d'intervenir quand l'utilisateur est bloqué : les blocages sont précisément les données les plus précieuses. On débriefe après chaque session pour comprendre les raisons des comportements observés.
Les tests utilisateurs consistent à faire évaluer l'ergonomie de votre produit ou service à des utilisateurs cibles. En fonction des objectifs, différentes approches sont possibles.
En savoir plus sur Tests utilisateursGuerilla tests, pour aller à la rencontre des utilisateurs dans des lieux de passages pour obtenir des retours spontanés.
En savoir plus sur Guerilla testsTout le monde parle experience utilisateur, design de service, ergonomie...
C'est pas très clair, mais vous aimeriez bien découvrir tout ca ou progresser.
