Prototypage interactif : du Figma au test utilisateur

Ce que vous saurez faire

Le prototypage interactif consiste à transformer des maquettes statiques en simulations cliquables qui imitent le comportement d’une application réelle, sans écrire une seule ligne de code. Pour une PME sénégalaise qui conçoit un produit numérique, cette étape est cruciale : elle permet de valider l’ergonomie auprès de vrais utilisateurs avant d’investir 5 à 50 millions FCFA en développement, de convaincre des investisseurs avec une démo crédible, ou de briefer une équipe technique avec une référence non ambiguë.

Dans ce tutoriel, vous apprendrez à transformer une maquette Figma en prototype interactif avec navigations, animations et états dynamiques. Vous verrez comment organiser un test utilisateur à distance ou en présentiel, comment enregistrer les sessions, comment analyser les observations, et comment itérer votre conception. Figma est gratuit pour 3 fichiers, les outils de test comme Maze coûtent environ 60 000 FCFA par mois en version starter, mais Lookback et le simple Zoom permettent de tester gratuitement. À la fin de ce guide, vous saurez mener un cycle complet « Prototype > Test > Analyse > Itération ».

Étape 1 : Préparez votre maquette Figma pour le prototypage

Ouvrez votre fichier Figma contenant la maquette. Créez une page dédiée nommée Prototype. Organisez vos écrans de manière logique : placez l’écran d’accueil à gauche, puis les écrans suivants dans l’ordre de navigation. Renommez chaque frame (panneau gauche) avec un nom explicite : 01-Accueil, 02-Recherche, 03-Resultats, 04-Fiche-Produit, 05-Panier, 06-Paiement, 07-Confirmation. Cette organisation est essentielle car Figma vous demandera de choisir les destinations par nom.

Étape 2 : Activez l’onglet Prototype dans Figma

Dans le panneau droit de Figma, cliquez sur l’onglet Prototype (à côté de Design). L’interface change : des connecteurs apparaissent au survol de chaque frame. Dans les paramètres en haut à droite, choisissez le Device : iPhone 14 Pro pour un mobile, Desktop 1440 pour un web. Sélectionnez l’écran de démarrage en cochant « Starting frame » sur votre frame 01-Accueil. Choisissez un background gris clair pour simuler l’écran autour du device.

Étape 3 : Créez votre première connexion entre deux écrans

Sélectionnez le bouton « Rechercher un produit » sur votre écran 01-Accueil. Au survol, un cercle bleu avec un + apparaît à droite du bouton. Cliquez dessus et glissez-déposez jusqu’à la frame 02-Recherche. Une flèche bleue se trace. Un panneau de configuration s’ouvre : choisissez Trigger « On tap » (pour mobile) ou « On click » (pour desktop). Choisissez Action « Navigate to » et destination « 02-Recherche ». Choisissez Animation « Smart animate » avec durée 300ms et easing « Ease in and out ».

Étape 4 : Configurez les transitions selon la logique mobile

Les transitions communiquent la relation entre écrans. Pour naviguer vers un détail (fiche produit), utilisez « Move in from right » : l’écran entre par la droite, geste familier iOS. Pour afficher une modale (panier), utilisez « Move in from bottom » avec easing Ease out. Pour fermer, utilisez l’inverse « Move out to bottom ». Pour une tabulation entre onglets, utilisez « Instant » sans animation. Appliquez ces conventions de manière cohérente : l’utilisateur testé sera confus si les mêmes types de navigation utilisent des animations différentes.

Étape 5 : Simulez les états interactifs avec les composants variants

Votre bouton « Ajouter au panier » doit avoir trois états : default, hover, et pressed. Transformez-le en composant (Ctrl+Alt+K), puis dans le panneau Properties, ajoutez une propriété Variant « State » avec valeurs default, hover, pressed. Dans l’onglet Prototype, sélectionnez la variante default, créez une connexion vers hover avec Trigger « While hovering ». Puis de hover vers pressed avec Trigger « On press ». Ces micro-interactions donnent au prototype une crédibilité professionnelle.

Étape 6 : Créez un menu ou une sidebar qui persiste

Utilisez la fonction « Fixed position » pour la navigation principale. Sélectionnez votre barre de navigation (logo + items + CTA). Dans le panneau Design, cochez « Fix position when scrolling ». Sur mobile, cela simule un header collé en haut même lors du défilement. Pour une sidebar desktop, appliquez « Fix vertically ». Testez en mode preview : vous verrez la navigation rester en place tandis que le contenu défile, reproduisant parfaitement le comportement d’une vraie application.

Étape 7 : Ajoutez du défilement vertical avec le smart animate

Pour simuler une page longue, créez une frame plus grande que le device (par exemple 2400px de haut sur un device de 800px). Dans le panneau Prototype, sélectionnez cette frame, puis dans « Overflow behavior » choisissez « Vertical scrolling ». Figma permet désormais de scroller dans cette frame en mode preview. Combinez avec une barre de navigation fixée pour un effet professionnel. Pour simuler un carrousel, utilisez « Horizontal scrolling » sur une frame large contenant des cartes côte à côte.

Étape 8 : Lancez le mode Présentation pour tester

Cliquez sur l’icône Play en haut à droite (ou F). Un nouvel onglet s’ouvre avec votre prototype en mode présentation. Cliquez sur les zones interactives : vous devez pouvoir parcourir votre flux complet de l’accueil à la confirmation de commande. Identifiez les blocages : bouton qui ne réagit pas, écran qui n’est pas relié, animation qui bugge. Notez chaque problème. Revenez dans Figma pour corriger. Repassez en preview. Répétez jusqu’à ce que le flux soit totalement fluide.

Étape 9 : Partagez le prototype avec un lien public

Dans Figma, cliquez sur « Share » en haut à droite. Un panneau s’ouvre avec un lien. Choisissez le niveau d’accès « Anyone with the link » puis permissions « Can view prototype only » (pour ne pas exposer vos maquettes sources). Cliquez sur « Copy link ». Le lien est de la forme figma.com/proto/xxxxxx. Testez-le en navigation privée pour confirmer qu’il s’ouvre sans login. Vous pouvez partager ce lien par WhatsApp, email ou SMS à vos testeurs.

Étape 10 : Rédigez votre scénario de test utilisateur

Un test sans scénario ne révèle rien. Rédigez 5 tâches concrètes à accomplir : « Tâche 1 : Vous souhaitez acheter un sac à dos bleu de moins de 25 000 FCFA. Trouvez un produit correspondant et ajoutez-le au panier. » « Tâche 2 : Finalisez la commande avec livraison à Dakar Plateau. » Ne donnez jamais d’indice sur le chemin à suivre : le but est d’observer comment l’utilisateur trouve (ou non) le parcours. Prévoyez aussi 3 questions post-test : satisfaction globale (échelle 1-10), point de friction le plus gênant, fonctionnalité manquante.

Étape 11 : Recrutez 5 testeurs représentatifs

La règle de Nielsen : 5 utilisateurs détectent 85 % des problèmes d’usabilité majeurs. Recrutez parmi votre cible réelle, pas parmi vos collègues. Pour une app de mobile money visant les commerçants sénégalais, trouvez 5 commerçants : 2 à Dakar, 1 à Thiès, 1 à Saint-Louis, 1 à Ziguinchor. Proposez une compensation modeste : 5 000 FCFA ou un crédit de communication. Planifiez des créneaux de 45 minutes. Envoyez un rappel la veille avec le lien Zoom ou l’adresse de rendez-vous.

Étape 12 : Conduisez le test en pensant à voix haute

Invitez le testeur à « penser à voix haute » pendant toute la durée : tout ce qu’il ressent, comprend, hésite, juge. Restez silencieux : n’aidez pas, ne corrigez pas, ne confirmez pas. Si l’utilisateur bloque, demandez simplement « Qu’attendez-vous de voir ici ? ». Enregistrez la session avec son accord (Zoom propose l’enregistrement local gratuit). Sur mobile, utilisez Lookback.com ou simplement la captation d’écran du smartphone via miroir. Prenez des notes en parallèle : timecode, citation, émotion.

Étape 13 : Analysez les résultats avec la matrice Sévérité/Fréquence

Après les 5 tests, compilez vos notes dans un tableau Notion ou Figjam. Listez chaque problème observé, avec : description, écran concerné, utilisateur(s) ayant rencontré le problème, sévérité (1=gênant, 3=bloquant), fréquence (1/5 à 5/5). Priorisez les problèmes Sévérité 3 et Fréquence 4+ : ce sont vos urgences. Les Sévérité 1 et Fréquence 1 peuvent attendre une v2. Communiquez cette matrice à l’équipe dev : elle oriente immédiatement les corrections à faire.

Étape 14 : Itérez le prototype et retestez

Retournez dans Figma. Corrigez les 5 à 7 problèmes prioritaires : simplifiez un formulaire trop long, agrandissez un bouton, reformulez un intitulé ambigu, ajoutez un écran de confirmation manquant. Sauvegardez comme v2 de votre prototype. Partagez un nouveau lien à 3 nouveaux testeurs (pas les mêmes, pour éviter le biais de familiarisation). Confirmez que les problèmes résolus ne reviennent pas. Si le test v2 est concluant (taux de complétion > 80 % sur les tâches principales), vous pouvez lancer le développement avec confiance.

Erreurs fréquentes

• Tester uniquement sur soi ou ses proches : les collègues et amis sont biaisés. Ils connaissent votre produit, vos intentions, et veulent vous faire plaisir. Testez uniquement sur des inconnus issus de votre cible.
• Guider l’utilisateur pendant le test : dès que vous aidez, le test perd toute valeur. Mordez-vous la langue, même quand l’utilisateur galère.
• Faire tester un prototype trop incomplet : un prototype avec des flèches qui mènent nulle part crée de la frustration. Au minimum, tous les écrans du parcours principal doivent exister.
• Confondre préférence et usabilité : si un utilisateur dit « j’aime bien ce bouton rouge », c’est sans valeur. Observez ce qu’il fait, pas ce qu’il dit qu’il aime.
• Ignorer les silences et les hésitations : un utilisateur qui reste 10 secondes sans cliquer vous révèle un problème majeur même s’il ne dit rien.
• Négliger le contexte mobile réel : tester sur desktop ce qui sera utilisé sur smartphone 4G dans un bus à Pikine donne des résultats biaisés. Testez dans les conditions réelles d’usage.

Checklist finale

• Maquettes renommées avec convention numérotée (01, 02, 03…)
• Onglet Prototype activé avec device approprié choisi
• Starting frame défini sur l’écran d’accueil
• Connexions créées entre tous les écrans du flux principal
• Animations de transition cohérentes (droite pour navigation, bas pour modale)
• États interactifs (hover, pressed) configurés sur les boutons clés
• Header ou sidebar configurés en Fixed position
• Défilement vertical/horizontal activé là où nécessaire
• Lien public de prototype testé en navigation privée
• Scénario de 5 tâches rédigé sans indice de parcours
• 5 testeurs représentatifs recrutés avec compensation
• Enregistrement des sessions avec consentement préalable
• Matrice Sévérité/Fréquence complétée après analyse
• Prototype v2 produit avec corrections des problèmes prioritaires
• Test de validation sur 3 nouveaux utilisateurs avec taux de complétion mesuré