Welcome to our latest addition: Prototype testing 🐣
Today, we’re thrilled to announce the arrival of the latest member of the Optimal family: Prototype Testing! This exciting and much-requested new tool allows you to test designs early and often with users to gather fast insights, and make confident design decisions to create more intuitive and user-friendly digital experiences.
Optimal gives you tools you need to easily build a prototype to test using images and screens and creating clickable areas, or you can import a prototype from Figma and get testing. The first iteration of prototype testing is an open beta, and we’ll be working closely with our customers and community to gather feedback and ideas for further improvements in the months to come.
When to use prototype testing
Prototype testing is a great way to validate design ideas, identify usability issues, and gather feedback from users before investing too heavily in the development of products, websites, and apps. To further inform your insights, it’s a good idea to include sentiment questions or rating scales alongside your tasks.
Early in the design process: Test initial ideas and concepts to gauge user reactions and feelings about your conceptual solutions.
Iterative design phases: Continuously test and refine prototypes as you make changes and improvements to the designs.
Before major milestones: Validate designs before key project stages, such as stakeholder reviews or final approvals.
Usability Testing: Conduct summative research to assess a design’s overall performance and gauge real user feedback to guide future design decisions and enhancements.
How it works 🧑🏽💻
No existing prototype? No problem. We’ve made it easy to create one right within Optimal. Here’s how:
- Import your visuals
Start by uploading a series of screenshots or images that represent your design flow. These will form the backbone of your prototype.
2. Create interactive elements
Once your visuals are in place, it’s time to bring them to life. Use our intuitive interface to designate clickable areas on each screen. These will act as navigation points for your test participants.
3. Set up the flow
Connect your screens in a logical sequence, mirroring the user journey you want to test. This creates a seamless, interactive experience for your participants.
4. Preview and refine
Before launching your study, take a moment to walk through your prototype. Ensure all clickable areas work as intended and the flow feels natural.
The result? A fully functional prototype that looks and feels like a real digital product. Your test participants will be able to navigate through it just as they would a live website or app, providing you with authentic, actionable insights.
By empowering you to build prototypes from scratch, we’re removing barriers to early-stage testing. This means you can validate ideas faster, iterate with confidence, and ultimately deliver better digital experiences.
Or…import your prototypes directly from Figma
There’s a bit of housekeeping you’ll need to do in Figma in order to provide your participants with the best testing experience and not impact loading times of the prototype. You can import a link to your Figma prototype into your study, and it will carry across all the interactions you have set up. You’ll need to make sure your Figma presentation mode is made public in order to share the file with participants. If you make any updates to your Figma file, you can sync the changes in just one click.
Help Article: Find out more about how to set up your Figma file for testing
How to create tasks 🧰
When you set up your study, you’ll create tasks for participants to complete. There are two different ways to build tasks in your prototype tests. You can set a correct destination by adding a start screen and a correct destination screen. That way, you can watch how participants navigate your design to find their way to the correct destination. Another option is to set a correct pathway and evaluate how participants navigate a product, app, or website based on the pathway sequence you set. You can add as many pathways or destinations as you like.
Adding post-task questions is a great way to help gather qualitative feedback on the user’s experience, capturing their thoughts, feelings, and perceptions.
Help Article: Find out how to analyze your results
Prototype testing analysis and metrics 📊
Prototype testing offers a variety of analysis options and metrics to evaluate the effectiveness and usability of your design. By using these analysis options and metrics, you can get comprehensive insights into your prototype’s performance, identify areas for improvement, and make informed design decisions:
Task results
The task results provide a deep analysis at a task level, including the success score, directness score, time taken, misclicks, and the breakdown of the task’s success and failure. They provide great insight into the usability of your design to achieve a task.
- Success score tells you the total percentage of participants who reached the correct destination or pathway that you defined for this task. It’s a good indicator of a prototype’s usability.
- Directness score is the total completed results minus the ‘indirect’ results.
- A path is ‘indirect’ when a participant backtracks, viewing the same page multiple times, or if they nominate the correct destination but don’t follow the correct pathway
- Time taken is how long it took a participant to complete your task and can be a good indicator of how easy or difficult it was to complete.
- Misclicks measure the total number of clicks made on areas of your prototype that weren’t clickable, clicks that didn’t result in a page change.
Clickmaps
Clickmaps provide an aggregate view of user interactions with prototypes, visualizing click patterns to reveal how users navigate and locate information. They display hits and misses on designated clickable areas, average task completion times, and heatmaps showing where users believed the next steps to be. Filters for first, second, and third page visits allow analysis of user behavior over time, including how they adapt when backtracking. This comprehensive data helps designers understand user navigation patterns and improve prototype usability.
Participant paths
The Paths tab in Optimal provides a powerful visualization to understand and identify common navigation patterns and potential obstacles participants encounter while completing tasks. You can include thumbnails of your screens to enhance your analysis, making it easier to pinpoint where users may face difficulties or where common paths occured.
Coming soon to prototyping 🔮
Later this year, we’re running a closed beta for video recording with prototype testing. This feature captures behaviors and insights not evident in click data alone. The browser-based recording requires no plugins, simplifying setup. Consent for recording is obtained at the start of the testing process and can be customized to align with your organization’s policies. This new feature will provide deeper insights into user experience and prototype usability.
These enhancements to prototype testing offer a comprehensive toolkit for user experience analysis. By combining quantitative click data with qualitative video insights, designers and researchers can gain a more nuanced understanding of user behavior, leading to more informed decisions and improved product designs.
