Site icon Hungry Browser Ltd

Remote User Testing Framer Prototypes With Hotjar Analytics

Featured Image
February 7, 2017
 · 
5 min read

Remote User Testing Framer Prototypes With Hotjar Analytics

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.


Prototyping Tools

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.

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.

Because Framer prototypes are made from HTML, CSS and JavaScript, you can add the Hotjar tracking code like you would to a production website and start tracking remote user interactions in your prototypes.

Hotjar provides two key pieces of functionality (amongst others) that can aid in remote user testing:

Heatmaps

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

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.


Setting-up Hotjar

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).

4. Add the Hotjar JavaScript snippet

Open your Framer index.html file in a text editor and copy and paste the Hotjar JavaScript snippet from the Hotjar website. Re-upload your index.html file to your remote hosting location.

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.

Additional Thoughts

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.

Footnote

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:

Hotjar Documentation

Other Blog Articles

A Sketch App tutorial showing how you can create UX mockups in 7 simple steps using Sketch, the Data Populator …
March 2, 2020
 · 
4 min read
A step-by-step account of how I created a design system for my own website using Sketch App and Zero Height.
February 23, 2019
 · 
7 min read
12 tips to consider when designing an online gym class booking experience. A personal story of bad UX and frustration …
October 21, 2018
 · 
7 min read
Here I share the design tools I use on a daily basis to help others going through the same predicament …
July 2, 2018
 · 
8 min read