Prototypes are a fast way to test user flows with a series of linked static screens (no code!) and distribute tests and reports to customers and your team.
Creating a Prototype
Creating a Notable Prototype is the best way to make sure the user flow is easy and logical. You can get your results and validate your design decisions super quickly! Here's how to put together a quick prototype…
Click the Upload Images button to start uploading your screens. Here you can edit your screen titles so you can easily find them later.
Start from an existing prototype when you need to keep many of the same screens from another prototype. To make a copy of an existing Prototype select Copy under the Other Stuff menu on the prototype report page. You’ll then find the copy of the prototype on your dashboard.
Choose Test Device
Give your prototype better context by choosing the device your product is designed for. This will enable users on those devices to use the prototype in the right context. So, if you select Mobile and view the prototype on a mobile device, the prototype will fill the phone as if it was an actual app.
Mobile and tablet prototypes will appear within a stylized chrome, when viewed on desktop screens.
Get rid of the status bar on iOS devices by saving the link to your home screen!
Linking a Prototype
It’s super easy to add hotspots in Prototypes. Simply, click and drag on your image to create the clickable area. A box with a pink border will appear showing exactly where the clickable hotspot is.
When you’re creating hotspots, double click to create a hotspot that is a perfect square.
Sometimes you’ll want to show how the prototype reacts when a user hovers over an area on the page. A common use case is for a drop down menu. Simply select the hover radio button for the linked image to appear on hover.
When a user moves their mouse within this hotspot the page will swap to the linked one. However unlike a click, when the user’s mouse leaves the hotspot, the page will be swapped back. By selecting the Stay on Target Screen option, you can prevent this from happening. The user will stay on the screen they've hovered to.
Stay on Target Screen is great for allowing people to click on links you’ve created on the screen they’re hovering to. It makes it possible to navigate to another page from the on-hover state.
It’s also common to have a repeating hotspot that appears on multiple screens, like top level navigation. Select the Apply Hotspot to Multiple Screens checkbox to apply the same hotspot across multiple screens. Use the type-ahead search to help you quickly find the screen you want to link to. It’s all about efficiency, baby!
Working with a ton of wireframes? To keep long prototypes organized, group your screens. This does not affect the function of your prototype.
There are a total of 9 different transitions you can select to closely simulate a native experience and really sell your work. These include a pushes and slides from four directions (top, bottom, left, right) and a fade. A push pushes the previous slide out of the way, while a slide simply slides on top of the static image.
Oops! You forgot to change one little part of a page. Instead of having to redo all of your hard work to replace your image, you can preserve your hotspots while replacing a screen. In your slides panel, hover over the page that you want to replace and click on the pencil icon. You’ll be able to change your slide’s name as well as replace the image.
Preview Prototype Before Publishing
You can always preview your prototype and check if your hotspots are linking to the right screens by clicking the preview button. Previewing the entire prototype will let you check your workflow from the beginning.
For quick link preview on the fly, you can shift + click while you’re creating hotspots to quickly check that you’re linking to the right screens.
To really get you moving quickly in Prototypes, use the left/right arrows to cycle through your pages. You can also use the up/down arrows to change the default target for a new hot spot (indicated by a pink link icon).
Once you finish linking up all the screens of your prototype, the next step is to decide how you’d like to collect feedback from users. There are three ways to get feedback—the one you choose will depend on the needs of the project.
With this option selected, the user will not be asked to provide feedback at any point while using the prototype. Upon clicking the Done button in the bottom-right corner of the prototype, the user will simply see a Thank You screen. In this mode, even though no feedback is collected, the user’s behavior will still be recorded and saved.
You can ask your testers to give feedback on specific pages, or the prototype as a whole. With this option selected, each page has a Comment button, allowing the user to leave comments on any page. After clicking the Done button, the user will be asked to leave comments on the prototype as a whole. This step is optional for the user.
Page-specific comments can be viewed on a specific screen’s page under the Page Stats tab. Prototype-wide comments are displayed on each tester’s result under the Testers tab. This view also shows each individual tester’s page-specific comments.
This is the most involved option, which allows you to collect targeted feedback from your testers on specific tasks. By selecting this option, a new step is added to the setup process, wherein you create unique tasks for your testers to carry out.
Creating a Task
There are three steps to creating a task.
- Give the task a description. Describe for your testers what they should try to do in your prototype. Remember that your users are supposed to be testing real software, so explain the task as if the user was actually using the app. For example: Purchase red shoes by finding a product page and adding it to your cart. This description gives the task a clear end goal.
- Set a starting page. Often times you’ll want your testers to start on the homepage or main screen of your prototype. However, if the task is one that happens partway through a larger flow, you may want to start the user on another screen.
- Define an end goal for the task. There are two ways a task can be successfully completed:
- By reaching a specific page. To use this option, simply select a page from the dropdown menu.
- By clicking in a click target on a specific page. To use this option, switch to the “User Clicks a Hotspot” tab, select a page from the dropdown menu, then draw a hotspot on the screen that appears underneath.
Directive testing changes how the user interacts with the prototype. Instead of being immediately dropped into the starting screen, they are instead presented with the tasks you’ve set up, and asked to carry them out one at a time.
After being shown their task, the tester can begin clicking through the prototype to try and finish it. When they finish the task, they’ll be asked to give feedback on it. Then they’ll continue onto the next task, until they’ve finished all tasks in the directive prototype. Before they go, they’ll be asked for freeform feedback on the prototype as a whole.
If the tester can’t figure out how to finish a task, they can skip it by clicking I Give Up button in the bottom-right corner of the screen. Upon clicking this button, the user will see a comment box allowing them to give feedback on why they think they couldn’t finish the task.
Enable Introduction Slide
You can create an intro slide that your users will see prior to clicking through your Notable Prototype. You can write a short paragraph or two to describe your prototype and even make it your own by upload your company logo to be displayed upfront.
Need to know info about who is clicking through your amazing new prototype? Prototypes allows you to collect a whole range of information and demographics from your user prior to clicking through. You can get the user’s name, email, sex, age, twitter, phone number, location and company. Always know who’s using your prototype and how to reach them later when you have your next killer revision.
Choose Your Settings
Nows your time to make this prototype fit your needs. Choose whether you would like hotspots visible, hidden or if you’d like your user to toggle this on or off. Give a redirect URL, so once your users have clicked through you can send them to your website another Notable prototype, or just a really cute kitten gif. You decide who gets to see this prototype, by choosing whether it’s publicly sharable or private for your closest counterparts.
Notable lets you choose if you want to get sent an email for every user of your prototype or not. If you’re anxiously awaiting feedback turn it on and watch the emails roll in, or leave it off and check-in with your prototype on your own terms. We don’t want to bloat your inbox if we don’t need to, so the choose wisely, friends.
You can save a prototype to your iPhone or iPad home screen for a fully immersive experience! Just open your Prototype on your iPhone or iPad and click on the share icon to save the Prototype to your home screen.
Prototypes’ reports allow you to visualize user behavior with summary and detailed results for pathways, entry and exit points, time on page, and click patterns.
Here’s what you can learn about user behavior from Prototypes’ reports:
- Number of responses, time, and number of clicks
Prototypes breaks down the number of responses, average time on prototype, number of clicks and success rate. You can configure Prototypes to record these metrics for the entire prototype or by directive. Using directive tasks enables you to see user behavior by task, giving you more insight about where people struggle to complete things.
- Number of view, average clicks, and average time on page
This panel at the bottom of the page gives you a snapshot of users’ average views, average time on page, and average time on the prototype.
- See each person’s click flow
Prototypes breaks down each testers click flow to help you visualize entry and exit points, the relative amount of time spent on each page, and if the tester successfully finished the test.
Here are some the page analytics you can visualize in the reports:
Entry and exit points allow you to see where users entered your prototype and where they exited, with an indication of whether they succeeded or not.
Success rate by tester gives you an understanding of how many testers are able to successfully complete your prototype.
Average time on page and average time on directive statistics give you an indication of time to task completion.
Clickflow on the prototype helps you visualize user behavior and how people solve the directive tasks.