With Wynde, you can conduct usability testing for scenarios created in Figma, the most popular tool for designers to create prototypes.
Figma offers a robust built-in tool for creating functional prototypes that can be tested on users through Wynde. You can learn more about its prototyping features on Figma's website.
Although Figma provides extensive prototyping capabilities, it’s essential to design the prototype in a way that makes the results easy to analyze.
In this article, we'll walk you through the testing process, explain how we gather results, and offer insights into creating the most effective prototypes for research purposes.
Transitions Between Main Screens
The core of research focuses on the main screens of the prototype. Inside Wynde’s report, you can track the sequence of testers’ transitions between these screens and see their exact clicks. This information is available both in an aggregated view and for each individual tester.
How Does Task Completion Work
Testing starts with the initial main screen. The task is considered complete when the tester successfully navigates to one of the completion screens, which you add during setting up the Figma block.
When designing a prototype, it's crucial to implement key actions as opening a separate screen. For example, in our sample prototype, interactive components are used for actions like rating orders or adding tips. However, viewing the receipt is done on a separate screen because it is a primary action.
Interactive Components
Figma allows you to create complex scenarios on a single screen using variables and interactive components. However, it's important to note that the report will only show clicks on elements in their initial state.
For example, if a hidden element appears after giving a negative rating (👎), clicks on that element won't be recorded in the report. To capture interactions with such elements, you can duplicate the screen to reflect the necessary state.
☝ General rule: If a component is used to enhance interactivity or realism, leave it as is. However, if interaction with the component's states is crucial for the research, create separate screens for those key states.
Collecting Clicks on the Prototype
When a user interacts with a prototype in Figma, we record all their clicks to create a detailed statistical report. Think of the prototype as a layered cake: clicks are registered on the topmost layer, even if it's transparent.
In the report, each click is tied to its specific layer, whether it's floating or within a scrollable area. So, when designing your prototype, make sure that important elements aren't covered by other layers and can be easily accessed by a cursor or finger.
Analyzing Results
For each main screen, you'll get detailed statistics. You can view all the clicks, generate heat maps, and gather statistics for specific areas on each main screen.