Figma Prototype Testing: How to Test With Users

This article will cover everything you need to know about Figma prototype testing. Usability testing with prototypes might initially seem complicated, but with the right knowledge and guidance, it is a breeze. With our help, you will uncover design mistakes and prevent some serious website issues from happening. After all, it’s better to fail at the prototyping stage than having to fix some post-development mistakes later on, right?

Why is Figma user testing important?

What if we told you that you could avoid the majority of your future UX mistakes and start building a user-friendly product even before the beginning of the development process? Well, that’s exactly what prototype testing allows you to do. Instead of fixing flaws in an existing product (which is difficult and expensive), you can just prevent them from happening.

Figma user testing with prototypes allows you to collect both qualitative and quantitative feedback from your users early on, see what works and what doesn’t, and prevent yourself from making poor design choices.

How do you perform remote usability testing with Figma?

You can follow these steps to perform a usability test in Figma:

1. Сreate a prototype of your concept. To do this, use design software like Figma to construct a clickable flow by connecting various artboards or pages in your design file.
2. Pick a type of test you want to use – you can opt for unmoderated testing, where participants complete tasks independently, providing feedback without the presence of a facilitator (in this case you ideally want to gather as many interactions as possible, try to get the audio and video feedback, as well as interaction or heatmaps – all of this is supported within UXtweak Prototype Testing Tool.
   • Alternatively, you can use moderated testing which, enables you to ask follow-up questions. We recommend combining both approaches for the best results.
   • Reading Tip: If you need additional help with the recruiting process, read our guide on recruiting respondents for usability testing. 
3. Design your study and add the tasks. You can use UXtweak to quickly build up a prototyping testing study. Include realistic tasks that represent real-life scenarios of users interacting with your product. Define the path or paths participants should take to successfully complete the task.
4. Recruit respondents.
   • Begin by identifying your target user demographics you want to test with. Don’t forget to consider factors such as age, occupation, and tech-savviness.
   • You can utilize various channels to reach potential participants, including social media, and email lists, or you can recruit verified and targeted participants from UXtweak User Panel effectively.
5. Analyze and improve. After gathering all your data, rewatch and analyze the statistics and recordings to identify usability issues and user pain points. Look for patterns in user behavior, and note where participants struggle or express frustration. Pay attention to both verbal feedback and non-verbal cues to gain. Use this to pinpoint specific areas of your design that need improvement.
   • Implement the necessary changes and consider running additional tests to verify that the adjustments have effectively resolved the identified issues. This iterative process of testing, analyzing, and refining will help you create more user-friendly and efficient designs. 

What are the benefits of usability testing a prototype?

Helps you save a lot of money

Solving usability problems on an already running website generally will cost you a couple of times more than doing the same but with the Figma prototype. Not to mention all the time and clients you will lose due to your bad UX choices.

Gives you all types of feedback

You test user flows, discover drawbacks, and evaluate your designs in a way that allows you to gather both qualitative and quantitative feedback. And the best thing is, when recruiting the right participants you can be sure that your studies are unbiased and objective.

Proves or breaks your doubts

User testing Figma prototypes will answer all the confusing questions beforehand, assuring you have a confident launch of your new project.

Discovers new ideas

This amount of user feedback will not only help you improve your current design but also uncover countless opportunities for future development. Getting in close contact with users can sometimes bring insights we didn’t know we needed and even inspire your future upgrades.

Test your Figma prototypes with UXtweak

Easy prototype upload, customizable tasks, and clear reports - all with the most competitive pricing.

Register for free

When and with whom should you test your Figma prototypes?

The best way to do it is to undertake several rounds of testing during the whole design process. Test both low-fidelity prototypes and high-fidelity prototypes. The final round of usability testing, of course, should be conducted with a finished high-fidelity interactive prototype so that you can easily follow the user flow and see how they perform certain tasks.

We also recommend you conduct some preference tests as you move through the design process. 

For the participants, keep in mind that those people should be your potential users, so take your time and define the target audience and user profiles. As for the number you should test with, the best rule of thumb is to listen to the usability pioneer Jakob Nielsen:

If you want a single number, the simplified answer is: test 5 users in a usability study. Testing with 5 people lets you find almost as many usability problems as you'd find using many more test participants.

Jakob Nielsen, NN/g

Source

Nielsen goes on to clarify, however, that this number may vary, depending on the goals of your study and the methods you choose (which we strongly agree with). Quantitative studies require a bigger number of testers as it’s necessary for accurate statistics and card sorting and eye tracking are also best done with a larger number of testers. We actually wrote a whole article on the topic of How many particpants you need for usability testing.

What are the most common mistakes of prototype user testing?

Usability testing your Figma prototypes is a straightforward process that yields a lot of insights. However, there are mistakes one might make in the testing process that could render the results skewed or unhelpful. In this part, we will review some of the most widespread mistakes made when running usability tests on Figma prototypes:

• Unclear goal or task for usability testing. It’s important to have a clear understanding of what you want to learn or achieve through usability testing so you can plan and design the test appropriately and interpret the results accurately.
• The involvement of non-diverse groups of participants. It’s important to recruit a diverse group of users for testing, to ensure that the prototype is usable for a wide range of people with different backgrounds, abilities, and preferences.
• Providing participants with insufficient time to complete tasks. Make sure to allow enough time for participants to complete tasks and explore the paths they can take, as rushing them may lead to incomplete or inaccurate results.
• Absence of observation and recording of the testing process. Observing and recording usability testing sessions allows you to see how participants interact with the prototype and identify any issues or challenges they encounter.
• Insufficiency of analysis and reporting on the results of usability testing. It’s important to carefully analyze and report the results of the usability testing so you can identify any issues or areas for improvement and make changes to the prototype accordingly.

How to get the most out of your Figma prototypes: testing tips and tricks

1. Test the prototype early and often

User testing prototypes early and often prevents you from making any mistakes that could become incredibly difficult and costly to fix in the later development process. It is like a preventive check to see if everything is on the right path to a finished product that will be well received by the users.

2. Use real content

The truth is, that content directly influences the user’s decision-making process. That’s why using realistic labels and photos is so important. Try to stay away from the “lorem ipsum” labels and texts as well as some unrelated pictures.

3. Define what you are testing

Setting a clear goal will help you later with analyzing insights. Be specific. 

Instead of: “I want to test my Figma prototype” try “I want to know if people are able to log in to the app through my prototype”  

4. Write good questions

Writing good questions is key to getting high-quality feedback when usability testing Figma prototypes. Your questions should be unbiased and not pressure the tester to answer a certain way. Here is a great article from NN Group covering some common biases. It will help you learn how to choose your words wisely.

5. Test your prototype in different environments

Your product is probably intended to be used on multiple devices. Test your responsive layouts as well and make sure everything works perfectly whether it is a desktop-based or mobile prototype, Make sure it also works in every browser.

6. Don’t change the tasks

If a user finds themselves lost or stuck on the wrong page, instead of changing the task just prepare some follow-up questions. Find out what the confusion point is, why they decided to click there, and what they were expecting to find.

7. Run A/B Testing

With A/B testing, you can test two or more different user interface prototypes. Versions A and B will be displayed to different users. You will be able to determine how well both versions perform in comparison to one another after a number of users have visited the site.

Watch the recording of our webinar A/B testing on Prototypes! In the webinar, we will show you how to run user testing of Figma prototypes on a specific example, give useful tips for proper analysis, and generally have an informative conversation.

How to test your Figma prototypes with UXtweak?

Even if it sounds scary, testing your Figma prototypes is a piece of cake when done with the right tool. With UXtweak you can set up a prototype testing study in a couple of clicks and here’s how:

Confused by some instructions or have unanswered questions? No worries – let’s go through it step by step:

1. Prepare your Figma file and import the prototype

1. Prepare your Figma file: Create a copy in Figma and trim any unnecessary content you don’t need for the testing.
2. Register or log in to your UXtweak account.
3. Create and name your study.
4. Share your Figma prototype:
   1. Sign in to Figma and open the file you want to test
   2. Click the Present button in the header 
   3. Click Share Prototype and make sure anyone with the link can view it
   4. Copy the link
5. Import the prototype: Once you have the link, you only need to insert it into the Prototype link field and click Import. UXtweak will do the rest of the work and you should see your designs, including the hotspots appear in the prototype editor. Watch this video to learn how to easily import your Figma prototype into UXtweak:
   

Importing your prototype:

1. When you open your design file in Figma, click Share prototype in the upper right corner.
2. Make sure that Anyone with a link can view the prototype.
3. Click the Copy link button.
4. Create a new Prototype Testing study in UXtweak.
5. Insert the link into the Prototype link field in the Designs Tab and click Import. 
6. You will be asked to log into your Figma account if you haven’t yet.
7. Click Allow access so that UXtweak can download your prototype.

If you’re having trouble importing your prototype into UXtweak, please make sure to check our quick guide on How to prepare your Figma prototype for Prototype Testing.

Linking your prototype designs together:

If you haven’t yet defined the navigation flow between frames in Figma, you can now do this with Hotspots directly in UXtweak. Hotspots are invisible rectangle links between designs that let your participants explore your designs as a fully interactive prototype.

Connecting static designs to each other via hotspots:

1. Click on the design that you want to start with.
2. Click-and-drag wherever on your prototype where you wish to create a hotspot. 
3. Define which design clicking the hotspot should lead to in a popup window. 
4. Label the hotspot in the right panel.
5. And repeat.

Once you’re done with defining the navigation flow between your frames, you’re ready to start setting up your study.

2. Create tasks for testers to fulfill

Now to the fun part! Let’s set up your tasks to see how well respondents can use the interface to achieve their goals. Specify the starting points and correct paths to the solution in your prototype using the imported images.

How to do it? Watch this guide and learn more!

Tips for writing good tasks:

• Phrase them like a scenario that the respondents can imagine finding themselves in.
• Don’t spoon-feed your respondents a solution. Make them think about the tasks.
• Write the tasks instructions in a way that won’t box your respondent’s thinking in a certain way.
• To learn more about writing good tasks, check out our detailed guide.

Setting up your tasks:

1. Write the text of your task.
2. Select on which design the task is going to start and on which design the respondent should end up to successfully complete the task.
3. In the lostness metric, define the optimal number of designs the respondent should go through to complete the task. This will be used to calculate how much people are getting lost during the task.
4. Adjust the tasks to match your personal needs – randomize the order of tasks, let the respondents skip tasks, etc.

3. Customize and Finalize Your UXtweak Study

1. Write instructions, welcome, and thank you messages.
2. Set up a screening question for your respondents, and add some pre-study and follow-up questions.
3. Brand your study with the company’s logo and colors.

4. Recruit respondents

You can share a link to your study via email or social media or set up a Recruiting Widget on your website and get your real users to participate! Or simply order participants from the User Panel.

And that’s it, you’re good to go! Now just perform your study, analyze the results, and move on to the next stage of creating your user-friendly digital product.

How to analyze Figma testing results?

Before diving into the results, revisit the goals and objectives of the testing. This will provide context for interpreting the data.

Look at any quantitative data collected during testing:

• Take a look at task completion rates – The higher the rate of successful completions, the more successful a design.
• Time taken to complete tasks – Higher times mean less efficiency.
• Explore heatmaps and click maps – In tools like UXtweak, you can see where users clicked most, even the sequence of clicks a user made. Compare this with the ideal path you want users to take and explore where they were confused.
• Take a look at dead clicks – If an element is not supposed to be clickable and has been clicked a lot (dead clicks) it shows flaws in the design that cause confusion for the users.

Conclusion: The faster you fail, the sooner you succeed

Testing Figma prototypes is the ultimate way to take a quick glance at the future and be able to prevent the usability issues that may occur on a real website. It ensures you launch an already user-friendly product that meets your customer’s needs and expectations and provides the best user experience. Start running usability tests with your Figma prototypes as a part of the design and development process and improve the performance of your digital products!

Test your Figma prototypes with UXtweak

Easy prototype upload, customizable tasks, and clear reports - all with the most competitive pricing.

Register for free