Need feedback on designs or prototypes that you’ve already built? Want to design a digital product you know your users will efficiently use? We recommend carrying out a prototype test with UserQ.
But what is a prototype test and what does it involve? How can prototype tests help you make data based decisions when designing the new experience of your digital products?
In this how-to guide, we take you through a step-by-step tutorial to create & run a prototype test using our platform.
What is a prototype test?
Prototype testing is a valuable user research tool that helps evaluate the functionality, usability, and effectiveness of a product or design.
It is a critical part of the design process, as it can help designers and engineers refine and improve a product before it’s released to the market.
It can also allow for iterative design – which means designers can test and refine different design concepts and iterations. This process helps ensure that the final product meets user needs and is effective in fulfilling its intended purpose.
How to run a UserQ prototype test
Now that we’ve explained exactly what a prototype test is, it’s time to create yours…
Get your Figma prototype ready
The UserQ prototype testing tool allows researchers to share a Figma link to the prototype and gather insights and feedback from the completion of specific task(s) or exploration of the prototype.
Here are a few key things to note while preparing your Figma prototype link for this test:
File Access & Settings
- Eliminate password protection from your Figma prototype;
- Configure permissions for your Figma file and prototype to enable viewing by anyone with the link. Otherwise, the preview of your prototype will not load, and testers will not be able to view it during the test. Please note that choosing “Anyone with a link [can view prototypes only]” will also result in an error since UserQ must have access to the file;
- Create a dedicated testing file on Figma. Duplicate your prototype and remove all irrelevant pages, frames, assets, images and elements before importing to UserQ. We advise creating separate files for each flow that requires testing.
Designs & Screens
- Reduce the number of screens in your prototype to speed up the tester’s experience. It is recommended to limit the frames and pages to only what is needed for testing;
- Use separate top-level frames for each screen. Components that are not within a frame will cause processing issues for UserQ;
- Compress images within the prototype before syncing. Large embedded photos may result in very large file sizes, which can be challenging to load;
- Simplify custom fonts. Custom fonts can increase the size of your Figma prototype, making it difficult to load for testers. If using a custom icon font, consider converting the icons to outlines to reduce the use of custom fonts.
Interactions
- Include at least two screens in your Figma prototype and hotspots on the first screen linking to the second. Otherwise, you will not be able to import the file.
- Verify that all necessary screens for the test are correctly linked on Figma.
Now that you’re clear on how to prepare the prototype link, let’s look at a step-by-step tutorial on how to efficiently run a prototype test on the UserQ platform.
Step 1: creating a new test
Click on the “Create a new test” button from your personal dashboard and then “Prototype Test” from the pop-up window.
Next, select your test language (English or Arabic) and name your new test.
While the researcher’s platform will not be displayed in Arabic, the participant’s experience will be fully compatible with Arabic (from right to left).
Tip: your test name will be visible to participants, so be sure to name it suitably.
Finally, you have the option to permit testers to take the test on either a mobile device, desktop, or both, as per your requirement.
Step 2: customize your welcome page
This is a great opportunity to introduce testers to the prototype test they’re about to take. We have pre-populated a default title and description in this section. You can either proceed without making any changes to the generic text or choose to personalise your own.
You can also add a welcome page photo, that acts as a visual cue for the test content.
Please note that if the language is set to Arabic, the pre-populated text will be translated into Arabic too, so remember to write in Arabic if you want to make changes.
Tip: using a friendly tone of voice can make your testers feel at ease. This is a chance to clarify what your prototype test is about and what is expected of testers.
Step 3: add introductory questions (optional)
Before testers get into the prototype test, you have the option to write some pre-test introductory questions. Here you can create up to five pre-test questions in the form of Free text, Single choice, Multiple-choice, Likert scale or Ranking scale.
Step 4: choose the type of prototype test
Depending on the type of prototype testing you want to carry out, you can choose between the task flow or the explore flow.
Task flow
This test helps you track user behaviour as testers complete a specific task. Task flow tests can give you important information like average time spent on a page, average number of clicks, heatmaps, clickmaps and common paths taken by the testers. It is mostly used to understand how users navigate your product to reach a specific goal.
Explore flow
Testers will be asked to freely explore your prototype based on the instructions you provide. You can collect their feedback by asking specific questions during their journey. Explore flow tests can also give you information on average clicks, time spent on a page, heatmaps, clickmaps and common paths taken by testers.
Step 5: linking your Figma prototype
To link your Figma prototype (for both task flows and explore flows), simply paste the Figma link into the input box (indicated below). Once done, click on the “Sync” button.
Next, you will be taken through a series of steps that will help you connect the Figma prototype to the UserQ platform, starting with Figma sign-in, granting the necessary permissions and finally, a confirmation screen.
Once your prototype is successfully linked, you also have the option to resync, preview the prototype or un-sync the link to start over. Please note that once you choose to resync the Figma prototype, the file will sync to the updated and existing version of your prototype.
Step 6: creating tasks or instructions for the test
In order to get the most out of your prototype test, set a clear task for the users to achieve or give them instructions that could help understand their role better.
The type of prototype test you choose will determine whether you need to define tasks for testers or provide instructions.
For Task Flow tests, you should give testers a clear and detailed task to complete.
For Explore Flow tests, you should provide clear instructions to guide testers as they freely explore the prototype.
a. Creating a task flow
This test type helps you create a task description for the tester, define the flow they are expected to take and ask follow-up questions once the task has been completed.
i. Creating the task description
Provide the tester with instructions to complete the task on the prototype. For example, “How would you find the company contact information on this webpage?”
ii. Define the flow
Navigate through the prototype by clicking the preview screen. When you reach the final screen you would like the tester to land on, after completing the task, click on the “Set as goal screen”. This will be your indicator that a tester has successfully completed the task.
iii. Add a follow up question (optional)
You can also include a follow-up question related to your task by using the “Add question” button shown below. We recommend using open-ended questions to gauge what the tester retained or experienced while performing the task.
b. Creating an explore flow
This test type helps you collect users feedback as they explore a prototype.
i. Include instructions for the tester
Here, you can guide the tester through your prototype or explain the reason for the test.
iii. Add questions
For explore Flows, at least one question is mandatory. This question will provide the main input that you receive from the participants. We recommend using open-ended questions to assess what the tester retained or experienced while performing the task.
Step 7: Adding multiple tasks to your test (Optional)
You can add up to 5 tasks to both the task flow and explore flow test.
Once done, you can also reorder the tasks, by clicking the “Change order” button shown below. Drag the listed tasks up or down, to re-order them and click “Submit” to save the new order.
Depending on the device you have chosen to test on, one of the following icons will appear next to your task title:
If you would like to change the viewing device at this stage, you can hover over the device icon that appears next to the title, click on the link that appears in the toast message and change this to the best suitable option for you.
Step 8: ask conclusion questions
Conclusion questions are optional questions you can ask and appear just at the end of the test. They’re great for:
- Getting feedback about the test itself
- Asking behavioral-style questions related to the prototype. For example, “How easy do you find shopping for groceries online?”
Step 7: edit your thank you page
Here you can thank the participants for their time and show your appreciation for taking part.
- Customise the page title
- Write a personalised thank you message
- Add a custom photo.
Step 9: Recruit your participants
You have two choices: you can either recruit from UserQ panel or share the link with your own set of participants.
a. Recruit from UserQ panel
If you want to use your own participants, skip to step b.
- Click ‘Hire from the panel’.
- Choose how many participants you want to recruit by using the slider or the input field.
i. Filter by demographics
Next, switch on the demographic filtering feature, where you can target participants from a variety of demographics, including age, gender, nationality, etc. Use our estimated panel size widget (on the right) for real-time information on how many testers we have in our pool, based on your selected demographics. It also provides feedback on your survey’s results speed, ie. how long you’ll have to wait to get all the results.
The broader the panel, the faster the results come in.
ii. Add screening questions
Toggle this option, to add screening questions to your study. These questions will appear one-by-one to the tester as ‘pre-test questions’. Their responses will determine whether they are eligible to continue to the study.
You can add up to a maximum of 3, single-choice questions to identify the most suitable participants for your study. Each question can have a maximum of 5 responses and must be classified as either a good fit or no fit.
Good fit = Responses that match your criteria for the study and are eligible to take the test or continue on to the next question (in the case of multiple screener questions). Your credits will be spent only on the “Good fit” participants.
Not fit = Response that are not a good fit for the study and the tester will not be able to access the test.
Bonus Tip: Identify your target audience by asking them pre-test questions. For example, if you’re creating a survey for a car company operating in the UAE, add screener questions to your study like, “Do you have a valid UAE driver’s license?” or “Do you own a car?”. This ensures that the data collected is relevant to your research and enables you to make informed decisions.
b. Share with your own participants
You can share the link with your own testers panel at no extra cost. However, we recommend recruiting from our UserQ panel to get the full use of our wide-reaching tester demographic data, including: age, gender, nationality, residency, confidence with technology, employment status, and household status. By using this data, there’ll be no need for you to ask demographic questions in the test itself.
Step 9: publish your prototype test
Review your order summary (including your total testers and required credits for recruitment and publishing fee).
In the case of an outstanding credit balance, you’ll need to process a payment.
Once everything’s set up the way you want it to, click ‘Publish’.
Tip: apply a promo code if you’ve got one.
Congratulations, your prototype test is now live!
You’ll get a shareable link to the test, whether you’ve selected a UserQ panel or have chosen your own participants only.
Build your preference test today
Are you ready to build your prototype test? Join as a researcher and you’ll get the feedback you need in just a few clicks.
Need help with building your prototype test? We can lend a hand.
Send us a message to: support@userq.com to get in touch. We’re always here to answer any questions you might have.
Related Post
Tree testing guide: How to
Want to build a fully functional tree test the easy way? Here at UserQ, we’ve got the tools you need
Tree testing guide: Analyse tree
You’ll have access to the results as soon as the tree test is published. The findings of your test show
Card sorting guide: How to
Want to build simple and easy-to-use card sorting tests? You can with UserQ. Our pay-as-you-go user testing platform allows you
Subscribe to our newsletter
COMPANY
SUPPORT
