User Testing with Framer

Testing prototypes with users can be a tricky undertaking, but testing with Framer is simple!

It’s important to test early design and prototype ideas with users when creating a new product, feature, or tool.

User tests with prototypes can have a big impact on the success of a new product, feature, or tool.

According to studies, every dollar invested to enhance usability yields $10 to $100 in benefits, increased customer satisfaction and loyalty, and increased profits.

This post provides you with the information you need to test your Framer prototype yourself with Userbility.

Let’s dive in!

Traps to avoid when user testing with Framer

Mentioned earlier, user testing prototypes can be a tricky business, but there are a few simple traps you can avoid to ensure a successful study:

• Provide correct link sharing access: set your Framer prototype link sharing access to ‘Anyone with the link’. This will ensure participants are able to access your prototype. Once the test has concluded, change the link sharing access back to ‘Anyone at your company’ or ‘Only invited people’.
  
  
• Select the correct device in test creation: if your prototype is designed for mobiles, test with participants on mobiles and vice versa. This to ensure people are emulating similar behaviours to how they would a real world situation.
  
  
• Provide alterative navigation paths: a prototype may be low fidelity and only have one navigation path. This will limit users and prevent them from displaying the full range of behaviours whilst using your prototype. Offer alternate navigational paths within your prototype.
  
  
• A thorough, yet concise scenario: testing with Framer prototypes aren’t as common as testing with live websites. It’s important to explain the test to a participant and let them know that not all functions may be available, prior to testing the prototype.
  
  

User Testing with Framer Setup Checklist

It’s even more critical to spend a bit more time setting up Framer prototypes for user testing than for a live website. This is due to

To make the setup process simple, we’ve broken it down into 3 steps:

1. User test creation
2. Participant recruitment
3. Study analysis
   
   

User test creation

Creating a user test for testing your Framer prototype is simple! Follow these simple steps:

1. Framer link sharing: to begin user testing your Framer prototype, all you need to do is create a shareable link of your designs. To create a shareable link of your prototype, head to Framer and generate the share link from within your project. Be sure to set your access permissions to ‘Anyone with the link’, as this will allow participants in your user test to access your Framer prototype.
   
   
2. Define a clear testing script: a well put together user testing script consists of 3 parts: scenarios, tasks and questions. The beginning scenario is the most important. This is because the beginning scenario sets up the study and allows the participants to get in the right mindset. The beginning scenario will also allow you to explain to participants what they’re about to test.
   
   Tasks are what you observe – what the user participant is doing and how they’re doing it. For example, using the prototype, find the make-up category.
   
   
3. You only need 5 participants to get started: when creating your user test, it’s really easy to think you need more feedback from more people, because more is better, right? The most effective way to run a user test, is to test with a small group of 5 participants, and run as many small tests as you can afford.
   
   Userbility’s pricing allows you to pay-as-you-go. You only pay for the number of participants you need, when you need them.
   
   

Participant recruitment

Recruiting the correct participants to test your Framer prototype can be the difference between a successful and successful study.

To ensure you’ve recruited the correct participants, follow these 3 core actions:

1. Filter by behaviours: whilst demographics allow you to filter a large pool to a smaller subset, they don’t provide you with the behaviours that make up your users. A 30yr old female can both be a user for Home Depot and Maybelline. Filter by behaviours to find your ideal participants e.g. uses eye-shadow, shops online 3+ times a week
   
   
2. Avoid leading questions in pre-screening: participants can easily spot the answer you’re looking for if you provide a leading question e.g. Do you use makeup? Yes or no. Re-write your screener questions (where possible) to be open e.g. How often do you use makeup? Never, once a week, once a month etc
   
   
3. Add fake answers to your pre-screen questions: if your users really know your brand, product or website, they’ll know the correct answers to your questions. Adding a spoof answer will ensure to sift out the pretend e.g. Which of the following makeup brands do you? Maybelline, Star Powders, Dior, Chanel
   
   

Study analysis

Analysing a prototype user can be broken into 2 parts:

1. Recording observations
2. Building insights

You record observations by noting down behaviours e.g. User landed on the homepage and immediate dismissed the pop-up.

Building an insight is down by combining observations together to identify patterns in behaviours e.g. 12 of 13 participants dismissed the pop-up on page load.

Recording observations

Start playing one of your Framer user test recordings and begin note-taking what the participant is doing e.g. Landed on homepage then navigated to make-up category.

It’s useful to add a ‘tag’ to each observation, as this will allow you to find them when building an insight.

Not sure what to record? Reflect on the objectives on your user test. This will allow you to focus on recording key observations before and after a certain action is displayed.

Building insights

With a compiled (and tagged) list of observations, you can build insights.

An insight is usually highlighted when there is a trend in user behaviour and observations are triangulated within the study e.g. if a trend in behaviour is to immediately dismiss the pop-up and post-study feedback indicates the pop-up is frustrating and intrusive, it’s fairly accurate to say ‘the pop-up is frustrating users’.

Wrap-up

The process of testing interactive prototypes using Framer is quick and efficient. You can use user testing to validate ideas, identify critical usability issues, and boost conversions. When user testing with Framer, take your time creating a user testing script and checking your link sharing settings before publishing your test.