User Testing for Product DesignersUser Testing for Product Designers

Real-time A/B testing, native apps, and tracking feature usage in your prototypes. Learn about product user testing in Framer.

December 16, 2019

If there’s anything we could all be doing more of in 2020, it’s user testing. The term gets bandied about as often as pixels on a screen and yet few actually incorporate it within the design process. Often, designers assume user testing requires entire teams of researchers and big budgets. The reality is, testing early and often is a much more achievable goal.

For the purposes of this post, we’re showing you how to use Framer to design rapid prototypes for usability testing.

User testing vs. usability testing

User testing itself is as an umbrella term, often used to encompass everything from “user research” to “usability testing”. While user testing may be all-encompassing, it generally involves interviewing your target audience to determine market demand for a particular service or product. At product-driven companies, user tests are also sometimes performed to vet the need for new features. These tests are generally run by UX research specialists and require meticulous attention to detail and an understanding of how to combine quantitative and qualitative data. It is, in short, a discipline best left to the experts.

Usability testing, on the other hand, simply refers to putting your prototype in a user’s hands to test the intuitive nature of your product. Do your flows make sense? Are your buttons in the right place? Does your animation distract or assure? In many cases, usability tests are ad hoc and informal in nature, happening internally with teammates, stakeholders, or clients. In this way, usability testing lends itself well to the iterative nature of most product design cycles.

What is product prototype testing?

As a product designer, clickable prototypes that feature a certain level of fidelity are invaluable within the product design process. It’s an effective way to validate design decisions much earlier in the process without depending on developers.

By simply using Framer’s interactive tools (Page, Link, Scroll), you can quickly prototype an end-to-end flow on the canvas, complete with customized transitions. Pre-made packages allow you to take things up a notch with data, working buttons, and sliders. And when you’re ready to test, there’s a handy way to send a web link or mirror your app on mobile to mimic a true-to-life experience.

In a separate post, we’ve covered just how fast it is to create a high-fidelity prototype on the canvas in Framer. Now let’s dive in and look at some features that allow you to customize your prototype for quick and easy usability testing.

Framer’s user testing apps

Let's look at Framer’s native apps first. We offer iOS and Android user testing apps, both free on the Apple and Google Play stores.

While you can always view your prototypes via the browser on your phone, the apps offer a better all-round experience, along with some custom features. First off, they allow you to view your prototype on mobile without displaying headers or footers. Along with making it feel like a native app, you can also download and cache your prototype for offline viewing.

For an even more seamless experience, simply scan the QR code to automatically open your app and display your prototype. Trying to quickly validate a simple idea? Since the app feeds off of live preview, you’re also able to update the prototype in Framer, and instantly deliver the update to your users.

This realtime feedback functionality alone makes Framer ideal for usability testing. Still not convinced? Let's take a look at some common usecases.

A/B testing with Stacks

We’ve talked about usability tests being supportive of iteration. In Framer, we take this realtime customization to the next level. An example of this is our Stacks layout tool. On the canvas, Stacks is a smart tool to auto-magically design always evenly spaced elements on the canvas. Handy for layout design, right? But take this automated tool and apply it during your usability sessions and hey, presto—you have yourself an A/B testing tool!

Rearrange the position of your blocks in a homepage design or reorder the buttons on your tab bar. The Stacks tool always guarantees the spacing of your design, so you can make changes on the fly and in the blink of an eye. This is a real gamechanger when it comes to testing a new idea during a usability session and validating a secondary theory immediately. There’s plenty of other use cases for the Stack tool, even if you just need to organize your components on the canvas.

Enjoying this post?

Sign up here to get content on prototyping, design, and the latest Framer updates delivered to your inbox.

Check out the Stacks lesson in our Framer Crash Course to see some other common use cases.

Share prototypes that feel real with Web Export

Let’s explore another way we can get your prototypes into the world. Web Export is a great feature in Framer X that offers unparalleled flexibility.

Web Export allows you to take your full prototypes (interactions and all), and create a folder that you can share with others. Inside this folder is an index.html, which opens into any web browser. This is pretty powerful on its own, but combine this with a static site service like Netlify or Zeit and you can essentially share a web version of your prototype that looks and feels like a real app or website. We particularly like Netlify Drop, because it’s as simple as drag and drop to send a realistic prototype out into the world.

Collect data with web analytics components

Not many realize this, but one thing that makes Framer so special is that the tool is web-based, which allows for unparalled flexibility.

This also means Framer is uniquely optimized for web analytic tools, which allow you to get quicker quantitative feedback, rather than having to wait or get the approval of the whole company to validate your idea.

First, let’s look into a tool called Hotjar. If you aren’t familiar with Hotjar, it’s a service that allows you to collect user interactions (think heatmaps, recordings, conversion funnels) in your prototype. While this service is mostly used by teams in production, it can be extremely powerful to use this functionality from the start of the design phase. Through Packages in Framer, simply install the Hotjar Analytics package, drop it onto your screen, and watch the information start to appear as users interact with your designs.

Check out the Hotjar package ›

For those already set up with a Google account, we also offer their analytics component as a package in the store. It allows you to easily hook up and start connecting usage in your prototype to the Google Analytic Dashboard. You can use this compoennt to collect real-time data on active users, including demographic information, feature usage, and so much more.

Check out the Google Analytics package ›

Rapid prototyping with Framer Base

You’ve heard a lot so far on different ways to test your designs, but I wanted to highlight one more piece about Framer that makes the tool so special: Packages.

Packages are great, especially if you’re looking for something a little more complex. I'd like to highlight a package we've built, specifically for quick prototyping.

Framer Base is a set of interactive UI components, built in Framer X. This isn’t your standard UI kit though—these components are fully interactive. From inputs to toggles, all the functionality is here and ready to be used.

This package is great for when you want to illustrate a new idea, but don’t have time to worry about fine-tuning style or how something will look.

This package saves you tons of time, and the best part is that it’s already optimized for building in Framer. There’s plenty of other UI kits and Design Systems in Framer, but Framer Base is a surefire way to kickstart your next project.

Check out the Base package ›

Wrapping up

Imagine this: You’re designing a new login flow and need to validate the placement of your input fields. You think it’s going great, until someone mentions during a usability session that it was hard to find the button to log in.

You might think, okay, I’ll go back to the design, change the placement, and do another round of testing round tomorrow. With Framer, you can make this change and do it on the spot. As your testers are going through the app, simply re-order the position of the login button using Stacks. Ask your tester to log out and back in again. This time, they’ll see the updated login screen. Stacks are so easy to use that researchers can even utilize it during larger, more formal sessions. Validating ideas is important, validating them earlier is even better. Couple this with the ability to easily collect quantitative data and you’ve got yourself a quick and dirty way to validate your work to yourself and your stakeholders.

From design and prototyping to refinement, Framer offers all the tools you need to make great products.

Enjoyed this blogpost? Check out some of our other resources:

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.