If you don’t have a Figma prototype, no worries, you can create your prototype to test from scratch using images or screenshots with our easy-to-use image import option.
Prepare your images for testing
Before you import your images to Optimal, make sure all the images are clearly named. This will make it much easier to create clickable areas, build your tasks, and understand your analysis. If you want your participants' experience to be as seamless as possible, consider making all your images the same width. That way, when your participants navigate from one page to the next, the page change is smooth. Along the same lines, if you have elements that you want to look static across multiple pages, make sure they are in the same position in all your images.
Tip: To get a fully rounded set of results, include pages that you don’t anticipate your users needing to navigate to for the tasks you intend to set. If you only include the pages on the pathway you expect users to take, you will introduce a bias to your results.
Import your images to your study
Create a new Prototype study in Optimal, add a Study name, choose the location where your study will live, and select ‘Image import’ then ‘Create study’.
2. Go to the ‘Set up’ tab and click on Import images. You can select up to 30 .jpg or .png images to build your prototype.
How to create clickable areas in your prototype test
Once you have uploaded your images, it’s time to click clickable areas. Setting up clickable areas in your prototype allows users to interact with the design as they would with a fully developed product, app, or website when testing.
Choose which image to begin with, then click on ‘Set clickable areas’. You can delete any image by hovering over the image and clicking the bin icon.
2. Use the cursor to draw rectangles over the areas you want to be clickable. These should be placed over buttons, links, or any interactive element in your design.
3 To connect the clickable area to the target page, select from the drop-down menu where you want the user to navigate to when they click. Selecting ‘Previous page’, when clicked, will send your user back to the page they were last on.
4. To change the clickable area, click on the area and select another option from the drop-down menu.
5. Click ‘Save’ when you have completed all the clickable areas on each page.
6. Click ‘Preview prototype’ to test the clickable areas. Ensure each clickable area functions correctly and leads to the intended target.