Tester les prototypes avec Figma

En un coup d’œil

UserTesting prend en charge de nombreux outils de prototypage, tels que Figma. Utiliser Figma comme outil est utile pour concevoir et collaborer pendant la phase de conception. Cet article explique comment configurer ton test prototype dans UserTesting et ensuite comment partager tes résultats dans les outils collaboratifs comme FigJam.

 

Sur cette page :

À propos de Figma

Figma est un outil de conception collaborative pour concevoir des prototypes interactifs, construire des produits utiles et recueillir des avis auprès de ton équipe. Avec UserTesting, tu peux recueillir des avis sur tes prototypes Figma et créer un aperçu actionnable de la part de l'audience de ton choix. En outre, tu peux intégrer et regarder des clips UserTesting et dessécances vidéo en utilisant l'intégration FigJam.

Besoin d'aide pour utiliser Figma ? Rends-toi sur le support Client de Figma.

 

Modifier les paramètres de partage pour prototype

Dans Figma :

  1. À partir de ton fichier de conception, sélectionne l'icône de lecture pour passer en mode présentation.
  2. Choisis le bouton Partager le prototype dans la barre de menu. Cela ouvrira la fenêtre modale de partage pour le prototype.
  3. Ajuste les paramètres de Partage de liens Discovery à Quelqu'un ayant le lien. Rends-toi sur le Support Client de Figma pour t'aider à gérer la sécurité du partage de liens publics.
  4. Ouvre le menu Options de la barre d'outils pour définir la façon dont tu veux que les contributeurs voient le prototype.
    • Prototypes de bureau : utilise l'option Ajuster la largeur.
    • Prototypes mobiles : Utilise Adapter à l'écran.
  1. Pour éviter de compliquer l'expérience des contributeurs qui ne sont pas familiers avec les prototypes, désélectionne ces options :
    • Afficher les conseils sur les points d'accès en cliquant
    • Afficher la barre latérale
    • Afficher Figma UI
  1. Sélectionne Copier le lien pour copier l'URL du prototype dans ton presse-papiers.

💡Remarque : n'oublie pas qu'en changeant l'une des options du prototype, tu modifieras l'URL.

 

Mettre ton test en place

Dans UserTesting :

  1. Sélectionne Créer un test, puis Créer un test.
    Screenshot 2023-10-26 at 3.17.55 PM.png
  2. Choisis prototype.
    Screenshot 2023-10-26 at 3.18.17 PM.png
  3. Ajoute ton audience. Tu peux choisir test contributeurs sur le Réseau de contributeurs UserTesting ou sur ton propre site.
    Screenshot 2023-10-26 at 3.23.39 PM.png
  4. Construis le plan de ton test. Intègre tout contexte nécessaire dans le scénario. Par exemple, afin de préparer tes contributeurs à interagir avec le prototype, tu pourrais écrire quelque chose comme ceci : "On va te montrer un prototype, merci de noter que tous les éléments de la page ne seront pas interactifs. "
    Screenshot 2023-10-26 at 3.24.30 PM.png💡Remarque : pour les mobiles, sélectionne le pré-requis du navigateur natif.
    Screenshot 2023-10-26 at 3.24.52 PM.png
  5. Fournis l'URL partageable de ton prototype Figma dans une tâche. Ensuite, ajoute autant de tâches que nécessaire après l'actif URL. Tu n'as pas besoin de spécifier l'URL pour chaque tâche ; les contributeurs termineront les tâches à cet URL à moins que tu ne spécifies un nouvel URL.
    Screenshot 2023-10-26 at 3.25.47 PM.png
  6. Utilise Aperçu du plan du test pour revoir le flux de tâches à partir des retours des contributeurs. Une fois que tout semble bon, lance le test.
    💡Conseil : Prends un aperçu de ton prototype dans une fenêtre en mode privé pour que tout le monde puisse y avoir accès.

Les meilleures techniques pour tester les prototypes Figma

  • Définis tes attentes avec tes contributeurs. Fais savoir à tes contributeurs qu'ils vont interagir avec un site prototype qui n'est pas entièrement fonctionnel. Tous les liens ne sont pas fonctionnels, et le prototype peut être lent à charger. Cela peut être fait dans le Scénario de ton plan de test.
  • Optimise le prototype pour qu'il se charge le plus rapidement possible. N'oublie pas que les contributeurs joignent à partir de leur connexion Internet à domicile, et que tout le monde ne dispose pas d'une connexion Internet à haut débit. Un prototype volumineux et lourd prend plus de temps à charger et peut amener les contributeurs à abandonner le test.
  • Créer un fichier de test dédié. Duplique le fichier Figma contenant les conceptions que tu veux tester. Dans ce fichier nouvellement créé, supprimer toutes les pages, les cadres, les éléments, et les images qui ne sont pas pertinents pour le test afin de garantir un fichier de test propre et léger.
  • Fixe des points de contrôle si ton prototype est complexe. S'il est possible que quelqu'un se perde en explorant ton site prototype, intègre des points de contrôle dans ton flux test pour s'assurer que l'utilisateur commence chaque étape de ton site test au bon endroit. Figma prend en charge plusieurs "points de départ de flux" qui permettent d'atteindre cet objectif.
  • Compresse les images avant de les télécharger sur Figma. Ceci est particulièrement important si l'on insère des PNG avec des éléments photographiques qui peuvent entraîner des tailles de fichiers très importantes. Une option à essayer est Downsize, un plugin Figma pour compresser des images.
  • Utilise Smart Animate avec parcimonie. Réduis l'utilisation de Smart Animate dans la mesure du possible pour diminuer le temps de chargement. Utilise plutôt des transitions plus simples qui nécessiteront moins de mémoire vive.
  • Assure-toi que ton test est partagé en toute sécurité avec les contributeurs. Tu peux demander à tes contributeurs de signer l'accord de confidentialité de ton entreprise avant d'accepter ton test si une confidentialité supplémentaire est requise. Rends-toi sur le Support Client de Figma pour t'aider à gérer la sécurité du partage de liens publics.

 

Partage les résultats via FigJam Integration

Après avoir effectué ton test, donne vie à tes résultats en intégrant les clips, les sessions et les moments forts de UserTesting directement dans tes tableaux blancs FigJam. Utilise notre intégration FigJam ainsi que notre modèle FigJam pour démarrer le processus.

 

En savoir Plus

Avez-vous besoin de plus d'informations ? Lire ces articles associés.

Tu veux en savoir Plus sur ce sujet ? Jette un coup d'œil à nos cours sur University.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0