14 simple tips for conducting a remote usability testing with a Figma prototype
Usability testing 1…2…3… Let’s talk about usability testing, kind of like when you make sure that a mic sounds good before using it. It’s like tuning your design to make it just right. While mic testing may be a breeze, our users bring a tidal wave of emotions, challenges, and authentic experiences. But on the other hand, in a fast-paced product lifecycle, we barely get time to plan an extensive usability testing.
Over the time, I’ve learned some really helpful things while conducting usability testings with Figma Prototypes. They might seem small, but they can make a huge impact when compounded together. Come along with me as we explore 15 simple tips that can make usability testing with Figma prototypes a lot better, turning it into a more user-friendly testing experience.
To show some prototyping examples, I have used a beautiful Prototyping Kit from Figma’s community designed by Renata Pôrto.
1. Create different flows for different tasks and add a description to them
By creating specific flows for each task, we can evaluate how users navigate and engage with the design in the context of those particular actions. This allows for a more targeted and task-specific evaluation. The feedback we receive from the users, also becomes more focused and relevant.
Creating different flows also facilitates A/B testing, allowing us to compare variations in design elements or interactions. This helps to identify which design performs better in terms of user preferences, efficiency, and overall usability.
Next, adding descriptions to Figma flows is important for providing context and guidance to users during usability testing. In these descriptions, we can add multiple things such as links, bulleted list for next steps, or any sort of information the user might need during the testing.
2. Add password protection to your prototype
Adding password protection to your Figma prototype is important for maintaining the confidentiality and security of your prototypes. It helps prevent unauthorized access, ensuring that only designated team members, stakeholders and users can view and interact with the prototype. This massively reduces the risk of unintended exposure or misuse of your prototypes during its development stages.
Note: This feature of adding password protection is available only for paid Figma version.
3. Conduct Pilot Tests
As a beginner in usability testing, I used to share prototypes without actively interacting with them. Although I checked them in my Figma art board, I rarely engaged with them firsthand, leading to issues like inaccessibility, misalignment, and not so smooth smart animate transitions.
To avoid such pitfalls, I adopted the essential practice of personally interacting with the prototype before sharing it. In short, before the actual usability testing sessions, conduct pilot tests with a small group to identify and address any issues with your testing plan, prototype, or tasks. This helps ensure a smoother testing process when working with a larger sample.
4. Follow a user while they interact with the prototype
If you are conducting a moderated usability testing, it’s always a good idea to follow your users while they interact with the prototype. This helps us to observe real-time user behaviors, uncover usability challenges, and gain insights into their thought processes.
5. Add a device type and realistic data in the prototype
Incorporating a specific device type (e.g., mobile, tablet, desktop) provides a realistic environment for user testing. Users are more likely to engage authentically with a prototype that mirrors the device they would typically use after the product is launched. Adding a device also enables designers to analyze the responsiveness of their designs.
Realistic data allows us to gather insights into how users interact with specific content types, helping refine the layout, hierarchy, and presentation of information.
6. Use sections to maintain the state of prototype and where the user left
Figma has recently launched a couple of features for state management inside a prototype. One of them is using sections.
Before knowing sections usage in prototyping, I would connect interactions as shown in the image below, linking them to the initial frame of a specific flow.
The drawback of this approach is that when users press the back button, the prototype resets to the initial frame. Consequently, users have to restart the entire interaction process within the “catto” flow from the beginning, and the prototype doesn’t retain the user’s last position.
Now on the other hand, when you link the interactions of the home page to the “Cattos” section, the prototype retains the information about the specific cat meme you were viewing when you return to that section.
In summary, Figma’s state management feature helps in usability testing by allowing designers to simulate and maintain the current state of a prototype. This ensures that users can pick up from where they left off, offering a more realistic testing experience.
Following are a couple of resources for Figma’s state management tutorials:
7. Provide/hide hotspots hints based on the type of test
Different types of tests may require varied levels of guidance. You can turn on the hotspots, if you want to guide the users through specific tasks without unnecessary distractions. This ensures that participants focus on the intended interactions, leading to more accurate and task-specific feedback.
But if you want to allow the users to explore and figure out things by themselves, you can keep the hotspots off. This encourages users to navigate freely, fostering a more natural interaction pattern.
8. Make it like a PPT with header and description
Another effective method for guiding users through during usability testing is by enclosing your prototype within a frame, similar to a PowerPoint (PPT) slide. This approach serves as an alternative to Tip 1, which involves adding descriptions and flow names directly in Figma. The added bonus? You can repurpose these framed prototypes for seamless stakeholder presentations. This has to be my fav tip! 🫶
9. Use Figma’s Commenting Feature
I really encourage to leverage Figma’s commenting feature to gather feedback directly within the prototype. Stakeholders, team members, and users can leave comments on specific elements, streamlining communication and collaboration during the testing phase.
This is my go-to usability testing hack!
10. Share a feedback form for quantitative metrics/follow-ups
This is a tip that I learned during my Google UX certification. It's always a good idea to share a feedback form with your users after the study is conducted in order to capture quantitative metrics (The graphs generated later on are so satisfying!). You can also add a couple of open-ended follow-up questions.
Feedback forms also allow us as designers to advocate our design decisions in stakeholder meetings and opt for a design that resonates with the majority of users.
11. Record the user testing meetings / ask the user to record it.
Recording usability testing meetings, whether in a moderated or unmoderated setting, is crucial for several reasons. It allows for in-depth analysis of user interactions, provides a reference for revisiting specific moments, aids in uncovering user insights that might be missed during live sessions, and facilitates collaboration among team members who may not have been present during the testing phase.
Note: Before starting the recording, always ask for user’s consent!
12. Keep the usability tests short!
Think of usability testing like ordering pizza. If it takes too long, your users might start feeling like they’re stuck in a never-ending pizza line. Nobody wants that! Keep it short and sweet, just like you’d want your favorite pizza order to arrive quickly.
Pro tip: It can be interesting to ask your testers what they thought about the test duration in your post-test feedback form. It can help you adjust it for your next test sessions.
13. Make users comfortable and encourage thinking out loud
If usability testing participants have rarely interacted with you before, they may hesitate to share any pain-points. Asking for help from someone we don't know can be challenging. As designers, it’s our responsibility to build trust and reassure users that we won’t judge them for any task difficulties.
Using ice-breaker activities like discussing their day, hobbies, or favorite movies helps alleviate pressure. Encouraging users to think out loud during prototype use further fosters a comfortable testing environment.
Here is a great resource for Icebreaker activities!
14. Add Integrations like Maze
If you’ve got extra time and are keen on exploring usability testing integrations, give Maze a try!
Maze allows you to add realistic interactions to your Figma prototypes, making them more closely resemble the actual user experience. This realism enhances the validity of usability testing results. You can easily conduct an efficient remote testing, A/B testing, and get in-depth analytics afterward, offering insights into user interactions and preferences.
Following are a couple of resources I suggest if you wanted to get started with maze:
That’s all about it! I hope these tips help you in conducting a remote usability testing with a Figma prototype. Furthermore, following are a couple of resources to learn more about usability testing and figma prototyping.
Thank you for reading! I’d be happy to connect and talk with you! My social media handles are:
or just drop me an email at: jhanvi.mbhatia@gmail.com
