A short guide for UX Designers and Prototypers interested in remote user testing Framer prototypes using the Hotjar analytics package.
This isn’t an extensive guide to remote user testing. It is a quick-step guide to using Hotjar for remote user testing Framer prototypes. If you want info on the former, then check out these great books: Remote Research or Just Enough Research.
Also note that the Framer prototype I built was put together in about 2 mins and serves no purpose apart from providing me with something to test.
The number of tools available for prototyping digital products has exploded over the past few years. Accompanying this, the number of services enabling product teams to test their designs and prototypes with users has also gained significant momentum.
User Testing Services
So far I have come across the following user testing tools:
Most of these services enable you gather remote user feedback on one or more static screens, through a simple survey mechanism. Some also let you see where users click, tap or scroll. But in most cases this feedback is limited to static screens.
Remote User Testing Framer Prototypes
But what if you want to remote user test micro-interactions, screen transitions and other non-static artefacts? What if you sometimes develop your prototypes in code using Framer Studio?
Framer Cloud interface showing the proof of concept prototype and a sample Hotjar poll to gain user feedback.
Hotjar: A Potential Solution
That’s where Hotjar comes in. If you’ve not heard of Hotjar, then I encourage you to set up a free account on hotjar.com. Hotjar is an analytics package that allows you track user interactions across a website, app or prototype.
Hotjar provides two key pieces of functionality (amongst others) that can aid in remote user testing:
Heatmaps allow you to see where users click, tap and scroll within your Framer prototype.
Hotjar web interface showing user interaction with the Framer Studio prototype through a device heatmap.
Recordings provide you with video playback of an entire user session.
Individual user session video showing key user interactions including scroll, tap and clicks within the Framer Studio proof of concept mobile prototype.
1. Sign up for a free account on Hotjar
Go to hotjar.com and follow the simple steps to create a free account.
2. Decide on remote location for your prototype
You can host your prototype on Framer Cloud or your own web server. I used Framer Cloud for this demo.
Framer Studio Interface showing the CoffeeScript code editor, layer inspector and device preview window for my Hotjar proof of concept Framer prototype.
3. Upload your prototype
Save/note down the URL of your prototype e.g. https://framer.cloud/vNOQr/ (you’ll need this later).
Atom Text Editor Interface showing Hotjar analytics code snippet on Mac OS
5. Set up a site in Hotjar
Navigate to the Hotjar website and set up a new site on the Hotjar Sites & Organisations screen.
Adding a new site in the Hotjar web interface to enable tracking of user interactions in the Framer Studio proof of concept prototype.
6. Set up a heatmap in Hotjar
Once you’ve set up a new site, you can then create a new heatmap for your prototype. Copy and paste the URL of your remote Framer prototype into the page URL field (see screen shot below).
Setting up a new device heatmap for the Framer Studio proof of concept prototype using the Hotjar web interface.
7. Enable recordings
Navigate to the recordings tab and select the green button to start recording user sessions. Recording will then appear in the table below as soon as you start to receive visits to your prototype URL.
Hotjar recordings dashboard showing a table of recordings from user sessions including user, pages, time, device, browser, operating system and date.
8. Send out your prototype URL
Once you’ve completed the steps above, you’re ready to start recording remote user interactions with your Framer prototype.
9. Review heatmaps and recordings
Once you’ve sent our your prototype URL to users, you’ll start to see heatmaps and recordings appear in your Hotjar Dashboard.
The device heatmaps dashboard listing the individual heatmaps that have been set up for the Framer Studio proof of concept prototype.
The above solution isn’t perfect, but does provide one approach to remote user testing your Framer prototypes.
It is also possible to deepen the feedback you wish to capture by integrating Hotjar’s Polls and Survey’s functionality. Caveat: When I tested it, the @2x screen resolution in Framer made the Polls appear at 1/2 their intended size, so they are hard to read and interact with.
Sample results from an individual Hotjar poll showing the responses to the question ‘Did you like this prototype?’. 1 answer yes, 0 answers no.
At the time of writing, Lookback has integrations with InVision, Marvel, and Proto.io so you can capture feedback on the hi-fidelity prototypes produced with these tools.
Also worth checking out:
Framer Cloud Link
Also published on Medium.
Share This Article
If you enjoyed this blog article, then let others know about it by sharing it.Tweet