The Power of Prototype Testing Live Training

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:

‍

1. 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.

‍

Start prototype testing today

Ahead of her talk at UX New Zealand 2016, Lana Gibson from Lanalytics writes about a project she worked on with Te Papa.Te Papa (a museum in Wellington, New Zealand) created audience personas based on user research, and I used these as a basis to create audience segments in Google Analytics to give us further insight into different groups. By regularly engaging with our audience using both qualitative and quantitative user insight methods, we’re starting to build up a three-dimensional picture of their needs and how Te Papa can serve them.

‍

Personas based on user research

‍

At Te Papa the digital team created six audience personas to inform their site redesign, based on user research:

• enthusiast
• tourist
• social
• educator
• volunteer
• Wellingtonian

‍

These formed a good basis for understanding why people are using the site. For example the educator persona wants fodder for lesson plans for her class — trustworthy, subject-based resources that will excite her students. The tourist persona wants practical information — what’s on, how to plan a visit. And they want to get this information quickly and get on with their visit.We’ll follow the tourist persona through a couple more rounds of user research, to give an example of what you can find out by segmenting your audience.

‍

Interpreting tourist needs with data

‍

Te Papa holds information for the Tourist audience in the Visit and What’s on sections of the site. I created a segment in Google Analytics which filters the reports to show how people who visit pages within these two sections interact with the whole site. For example the keywords they search for in Google before arriving on Te Papa, what they search for when on the site, and how many of them email us.Deeper digging revealed that the Tourist audience makes up about half of our overall audience. Because the content is useful to everyone wanting to visit the museum, and not just tourists, we broadened the scope of this persona and called the segment ‘Museum visitor’.

‍

Why segment by site category — what if the audience goes beyond these pages?

‍

Google Analytics segments allow you to see all the pages that a particular audience visits, not just the ones you’ve filtered. For example over 2,000 people who visited a page within the Visit and What’s on sections also visited the Kids and families section in July 2016. So, the audience segment allows us to expand our concept of our audiences.You can segment by a lot of different behaviors. For example you could segment visitors by keyword, isolating people who come to the site from Google after searching for ‘parking’ and ‘opening hours’ and seeing what they do afterwards. But segmenting by site category tests the information architecture of your site, which can be very useful if you’ve got it wrong!

‍

Visit persona wants opening hours information

‍

What did we learn from these personas? One example is that the most searched term on the site for the Visit persona was ‘opening hours’. To help fix this, the team put the opening hours on every page of the redesigned site:

‍

‍

This resulted in a 90% drop in searches that include ‘hours’ (May 2016 compared with May 2015):

‍

‍

Developing personas with Matariki

‍

After the re-design the team ran a project to increase the reach and engagement of the Te Papa Matariki audience. You can read more about this in "Using data to help people celebrate Matariki". Te Papa holds Matariki events in the museum, such as the Kaumātua kapa haka, and this event in particular enhanced and challenged our ideas about this audience.

‍

Experiencing Kaumātua kapa haka performances online

‍

The Kaumātua kapa haka is the biggest Matariki event held at Te Papa, and this year we had 4,000 unique page views to the two Kaumātua kapa haka event pages. Traffic spiked over the event weekend, particularly from Facebook and mobile devices. We assumed the traffic was from people who were planning to come to the event, as they sit in the What’s on section. But further analysis indicates that people were visiting for the live streaming of the event — we included embedded Youtube videos on these pages.The popularity of the videos suggests that we’re taking events held within the museum walls out to people on the move, or in the comfort of their own homes. Based on this insight we’re looking into live streaming more events.

‍

We’ve taken Te Papa personas through three iterations, based on user research, analytics, then a practical application of these to the Matariki festival. Each user research method has limitations, but by regularly using qualitative and quantitative methods we’re engaging with a  three dimensional view of our audience that’s constantly evolving. Each user research piece builds that view, and allows us to plan projects and site changes with greater clarity about what our users need. It means we can plan projects that will have real and measurable impact, and allow people to engage with Te Papa in useful and meaningful ways.

‍

Want to hear more? Come to UX New Zealand!

‍

If you'd like to hear more about how Lana and Ruth redesigned the Te Papa website, plus a bunch of other cool UX-related talks, head along to UX New Zealand 2016 hosted by Optimal Workshop. The conference runs from 12-14 October, 2016, including a day of fantastic workshops, and you can get your tickets here. Got some questions you'd like to ask Lana before the conference? You can Tweet her on @lanalytics00!

In UX research we are told again and again that to ensure truly user-centered design, it’s important to test ideas with real users as early as possible. There are many benefits that come from introducing the voice of the people you are designing for in the early stages of the design process. The more feedback you have to work with, the more you can inform your design to align with real needs and expectations. In turn, this leads to better experiences that are more likely to succeed in the real world.It is not surprising then that paper prototypes have become a popular tool used among researchers. They allow ideas to be tested as they emerge, and can inform initial designs before putting in the hard yards of building the real thing. It would seem that they’re almost a no-brainer for researchers, but just like anything out there, along with all the praise, they have also received a fair share of criticism, so let’s explore paper prototypes a little further.

‍

What’s a paper prototype anyway? 🧐📖

‍

Paper prototyping is a simple usability testing technique designed to test interfaces quickly and cheaply. A paper prototype is nothing more than a visual representation of what an interface could look like on a piece of paper (or even a whiteboard or chalkboard). Unlike high-fidelity prototypes that allow for digital interactions to take place, paper prototypes are considered to be low-fidelity, in that they don’t allow direct user interaction. They can also range in sophistication, from a simple sketch using a pen and paper to simulate an interface, through to using designing or publishing software to create a more polished experience with additional visual elements.

‍

‍

‍

Showing a research participant a paper prototype is far from the real deal, but it can provide useful insights into how users may expect to interact with specific features and what makes sense to them from a basic, user-centered perspective. There are some mixed attitudes towards paper prototypes among the UX community, so before we make any distinct judgements, let's weigh up their pros and cons.

‍

Advantages 🏆

‍

• They’re cheap and fastPen and paper, a basic word document, Photoshop. With a paper prototype, you can take an idea and transform it into a low-fidelity (but workable) testing solution very quickly, without having to write code or use sophisticated tools. This is especially beneficial to researchers who work with tight budgets, and don’t have the time or resources to design an elaborate user testing plan.
• Anyone can do itPaper prototypes allow you to test designs without having to involve multiple roles in building them. Developers can take a back seat as you test initial ideas, before any code work begins.
• They encourage creativityFrom both the product teams participating in their design, but also from the users. They require the user to employ their imagination, and give them the opportunity express their thoughts and ideas on what improvements can be made. Because they look unfinished, they naturally invite constructive criticism and feedback.
• They help minimize your chances of failurePaper prototypes and user-centered design go hand in hand. Introducing real people into your design as early as possible can help verify whether you are on the right track, and generate feedback that may give you a good idea of whether your idea is likely to succeed or not.

‍

Disadvantages 😬

‍

• They’re not as polished as interactive prototypesIf executed poorly, paper prototypes can appear unprofessional and haphazard. They lack the richness of an interactive experience, and if our users are not well informed when coming in for a testing session, they may be surprised to be testing digital experiences on pieces of paper.
• The interaction is limitedDigital experiences can contain animations and interactions that can’t be replicated on paper. It can be difficult for a user to fully understand an interface when these elements are absent, and of course, the closer the interaction mimics the final product, the more reliable our findings will be.
• They require facilitationWith an interactive prototype you can assign your user tasks to complete and observe how they interact with the interface. Paper prototypes, however, require continuous guidance from a moderator in communicating next steps and ensuring participants understand the task at hand.
• Their results have to be interpreted carefullyPaper prototypes can’t emulate the final experience entirely. It is important to interpret their findings while keeping their limitations in mind. Although they can help minimize your chances of failure, they can’t guarantee that your final product will be a success. There are factors that determine success that cannot be captured on a piece of paper, and positive feedback at the prototyping stage does not necessarily equate to a well-received product further down the track.

‍

Improving the interface of card sorting, one prototype at a time 💡

‍

We recently embarked on a research project looking at the user interface of our card-sorting tool, OptimalSort. Our research has two main objectives — first of all to benchmark the current experience on laptops and tablets and identify ways in which we can improve the current interface. The second objective is to look at how we can improve the experience of card sorting on a mobile phone.

‍

Rather than replicating the desktop experience on a smaller screen, we want to create an intuitive experience for mobiles, ensuring we maintain the quality of data collected across devices.Our current mobile experience is a scaled down version of the desktop and still has room for improvement, but despite that, 9 per cent of our users utilize the app. We decided to start from the ground up and test an entirely new design using paper prototypes. In the spirit of testing early and often, we decided to jump right into testing sessions with real users. In our first testing sprint, we asked participants to take part in two tasks. The first was to perform an open or closed card sort on a laptop or tablet. The second task involved using paper prototypes to see how people would respond to the same experience on a mobile phone.

‍

‍

Context is everything 🎯

‍

What did we find? In the context of our research project, paper prototypes worked remarkably well. We were somewhat apprehensive at first, trying to figure out the exact flow of the experience and whether the people coming into our office would get it. As it turns out, people are clever, and even those with limited experience using a smartphone were able to navigate and identify areas for improvement just as easily as anyone else. Some participants even said they prefered the experience of testing paper prototypes over a laptop. In an effort to make our prototype-based tasks easy to understand and easy to explain to our participants, we reduced the full card sort to a few key interactions, minimizing the number of branches in the UI flow.

‍

This could explain a preference for the mobile task, where we only asked participants to sort through a handful of cards, as opposed to a whole set.The main thing we found was that no matter how well you plan your test, paper prototypes require you to be flexible in adapting the flow of your session to however your user responds. We accepted that deviating from our original plan was something we had to embrace, and in the end these additional conversations with our participants helped us generate insights above and beyond the basics we aimed to address. We now have a whole range of feedback that we can utilize in making more sophisticated, interactive prototypes.

‍

Whether our success with using paper prototypes was determined by the specific setup of our testing sessions, or simply by their pure usefulness as a research technique is hard to tell. By first performing a card sorting task on a laptop or tablet, our participants approached the paper prototype with an understanding of what exactly a card sort required. Therefore there is no guarantee that we would have achieved the same level of success in testing paper prototypes on their own. What this does demonstrate, however, is that paper prototyping is heavily dependent on the context of your assessment.

‍

Final thoughts 💬

‍

Paper prototypes are not guaranteed to work for everybody. If you’re designing an entirely new experience and trying to describe something complex in an abstracted form on paper, people may struggle to comprehend your idea. Even a careful explanation doesn’t guarantee that it will be fully understood by the user. Should this stop you from testing out the usefulness of paper prototypes in the context of your project? Absolutely not.

‍

In a perfect world we’d test high fidelity interactive prototypes that resemble the real deal as closely as possible, every step of the way. However, if we look at testing from a practical perspective, before we can fully test sophisticated designs, paper prototypes provide a great solution for generating initial feedback.In his article criticizing the use of paper prototypes, Jake Knapp makes the point that when we show customers a paper prototype we’re inviting feedback, not reactions. What we found in our research however, was quite the opposite.

‍

In our sessions, participants voiced their expectations and understanding of what actions were possible at each stage, without us having to probe specifically for feedback. Sure we also received general comments on icon or colour preferences, but for the most part our users gave us insights into what they felt throughout the experience, in addition to what they thought.

‍

Further reading 🧠

‍

• Why You Only Need To Test With 5 Users - Nielsen Norman Group’s Jakob Nielsen explains reveals his thoughts on only using five users when conducting usability testing.
• Sketching for better mobile experiences - Lennart Hennigs explains how to sketch and why you should do it in an article for Smashing Magazine.
• Paper prototypes work as well as software prototypes -  Bob Bailey explains why he thinks paper prototypes are just as good as software prototypes for usability testing.