User testing with prototypes can be tricky business. Luckily, user testing with Framer is a piece of cake!
User testing early stage designs and prototypes assist ten-fold when building a new product, feature or tool.
"Studies show that for every dollar a company invests to increase usability, it receives $10-$100 in benefits, and wins customer satisfaction and loyalty."
It matters. A LOT. This post is going to teach you how with, Framer, UserTest.io and 30 minutes of your time, you can test your Framer prototypes. You won’t even need any one to help. This guide will teach you how to do it, all yourself.
What Makes A Good Prototype User Test Study?
Before we dive in – some important qualities when testing a prototype:
Set the user mindset with realistic scenarios
Ask the right questions, set the right tasks
Don’t suggest a user path to complete a task
Use realistic content in your prototype
Make your prototype appear interactive
Source the right people for the test (your actual users)
Common Problems With Prototype User Testing
Let’s be honest for a minute. Most successful businesses create prototypes. Whether they be for a website, service or app, prototypes are part of the development process.
Of course, prototypes are created and tested due to cost and quickness to produce an idea and have it validated. Yet, it’s the testing that you need to nail to validate your prototype. Here are some common mistakes:
Not providing alternative navigational paths. A prototype may be low fidelity and only have one navigation path. This limits users and will not show a user’s full behaviour whilst using navigation. They’re funneled into one path.
Inadequate explanation around the scenario. People who are unfamiliar with prototypes, will not understand why there is limited functionality. Be sure to explain in detail what the user will be testing.
Too many tasks and questions. Limit your tasks and questions to around 3 – 5 tasks and 5 – 7 questions. By limiting your task and questions, you focus on one major area at a time – don’t cramp!
User testing on incorrect devices. A prototype is designed for mobile devices, user test the prototype on a mobile.
Setup Checklist
Since we’re user testing with Framer prototypes and not a live website, it can be even more important to spend a little extra attention to your setup. This means, checking your testing script and your sharing settings for your Framer prototype URL. I’ll go into detail for each item below.
A note taking tool – Google Docs or Microsoft Word are perfect
Testing script
Scenarios that outline what the user will be testing. Ensure users don’t feel dumb if they can’t complete a task. Make your scenarios detailed enough to allow the user to gain the right mindset
Tasks are great for zoning in on specific areas and guiding the user through the test. Try and give specific instructions when testing low-fidelity prototypes. E.g.. Using the main menu at the top of the page, browse to find a men’s watch.
Questions assist in gaining extra insight to a user’s thoughts, opinions and task difficulty.
Set aside time
Your test should go for approximately 10 – 15 minutes
Allow 30 minutes per recording, to analyse the results
Ready to test!
Set Up Your Test
Prototype– When using Framer to create prototypes, you can share your designs via a sharable link. To conduct user testing with Framer, all you have to do is set your test URL as the Framer share link. You can grab your share link from Framer. When generating the share link, be sure to set your access permissions to Anyone with the link. The URL will not load if access is not given.
User testing script– Writing a great user testing script is one of the hardest parts of the job – put it doesn’t have to be. As general rule of thumb, when user testing a prototype, try to do the following: Scenario, task, question and repeat (scenarios may not have to be repeated).
Scenario‘s allow users to gain the right mindset before undertaking any tasks. Tasksare what you observe the most. What the user is doing and how are they doing it? Questions help you prod at the user’s brain – what are they thinking, how do they feel when completing “x” task.
Test Device– Choose which device you’d like to test on. This will be decided by your Framer prototype e.g. if your Framer prototype is designed for mobile, test users on mobile.
Choosing participants – Test with your real users. This means, test with people who would use your website and love what you have to offer. Most user testing services only allow you to test users with certain demographics. Your users are not numbers, they’re behaviours e.g. shops online 5 times a week, buys a new dress every Friday. Our advanced targeting allows you to create custom surveys to find your exact users.
You’ve setup your test and it’s ready to go live. Go over the test twice, making sure the tasks are realistic and the link has correct sharing settings. You’re now ready to go live!
Analysing
Analysing Your Test Recordings
Now, your test is complete and you’ve received 5 test recordings for your Framer prototype. You’re ready to start analysing.
To analyse your results, you need the following things:
A note taking tool
And your test recordings
We’re going to split our analysis into two separate parts: observations and insights. Observations are the way a user goes about doing something e.g. you may observe that 5 of 5 users click the same category. Insights are the “aha” moments of user behaviours e.g. 5 of 5 users clicked the same category, yet, they missed the easier option of the banner.
Why do we split the analysis?
By splitting the analysis into observations and insights, you’re able to gather positive opinions of users as well analyse user behaviour patterns. Something that may not be an insight, but good to know.
Recording Observations and Insights
There is no best practice to analysing remote user testing recordings. Likewise, Google: How to analyse remote user testing recordings. There are not posts that answer the question.
When analysing your remote user testing recordings, it’s always best to draw upon the goals/outcomes you hope to achieve. With the outcomes/goals, you can derive questions that need to be answered to achieve your outcomes/goals. The questions that need to be answered determine what you will keep an eye for in your test.
For an early stage prototype, you’ll most likely want to answer the following questions:
What is working for the users?
What is not working for them?
What confuses them or causes them concerns?
Are their expectations met for the experience? Why or why not?
To tackle your questions being answered, I’ll go over a method that work:
Writing Everything Down
Start by opening up one of your user testing recordings and a note taking tool. You’re going to play the user testing recording and start writing what the user is doing e.g. “User starts navigating by clicking the category “Puppies” in the top-level menu”. I like to add a hyphen after my paragraphs will what that note is about i.e. – Observation or – Insight.
Iterating
Iterating On Design & Testing Again
You’ve analysed your recordings and have discovered critical usability problems. Now what?
Iterate and test again. Your iterations will be based off the findings from your analysis.
Likewise, Framer makes it extremely easy to organise project versions. With the duplication feature, you can create an exact copy and tweak for your next user testing session.
Summary
User testing with Framer is a quick and efficient process for testing interactive prototypes. User testing allows you to validate ideas, solve critical usability problems and increase conversions. When user testing with Framer, be sure to take your time creating a user testing script and checking over your link sharing settings.
Torsten is CEO and founder of Userpeek. He is an old stager in the online business with 20 years of experience as an online marketer, conversion rate optimizer and UX strategist.
