Bulletproof Figma usability testing / user research workflow
We use Figma’s Presentation View regularly to observe the behaviors of remote research study participants.
It lets us see what they’re doing on prototypes without having to ask them to share their screens, which is really handy for quick and easy testing – especially for the technically challenged and those who follow our directions at the last minute!
Here’s how to get it up and running
Readying the prototype
-
Make a Figma prototype.
-
Optimize the prototype so that it loads quickly (especially important for mobile): Remove all of the excess pages and elements that you won’t be showing to study participants. We make a duplicate of the original design file to use just for research sessions.
-
Make sure you’re seeing what they’re seeing: Choose a device in the Prototype tab. This allows you approximate what is visible to the study participant at any given time (i.e. what’s above the fold). Without doing this step, you’d just see one long design and wouldn’t know when they’re scrolling. Note: They won’t see the device frame on their mobile device, but will see it if they open it on a desktop device.
-
Hide unnecessary elements: In Presentation View in the Figma app (the hollow “play” icon) click the Options menu and disable “show hotspot hints on click” and “Show toolbar and footer.”
Inviting participants
-
Get a link to share: From Presentation View in the Figma app (the hollow “play” icon) generate a link to share with study participants.
-
Invite the participants: Send the link to participants along with just a phone number to call in to. Prepend *67 to the number if you want to block their caller ID for privacy. You could just use a phone, but if you want to invite observers and record the session then create a conference meeting and share just the dial-in part. Most video conferencing tools have this option (Zoom, Skype, Microsoft Teams, Google Meet, etc.).
Inviting observers
- Invite observers: Share the link to the conference meeting from the step above. We tend not to share the dial-in part because observers have to remember to mute their phone via the phone’s UI (and tend not to!).
Running the session
-
Set up the Figma app to observe: Open your optimized prototype (see step 2), click on Presentation View (the hollow “play” icon), and wait. If you’ve invited observers, share your Figma app screen via your videoconferencing tool now.
-
Wait for the participant to dial in via telephone (see step 6)
-
Have participant open the link: Instruct the participant to open the Figma link in any browser on whatever device you want them to use.
-
Observe the participant: Unless they have a Figma account, the participant will show up as an anonymous user next to you in the upper right hand corner of the Figma app (make sure you’re in Presentation View). Click on the circle to begin observing them.
-
Double check your setup: Make sure you’re seeing what the participant does. Instruct them to scroll up and down.
Why we love this workflow
What’s awesome
• Participants and observers can use the tools they’re familiar with. No special accounts or software is necessary.
• It’s pretty bulletproof. It’s proven to be much more reliable then purpose-built research tools (UserZoom, Validately, Lookback, etc.). This is true both in terms of getting people set up and weird technical errors that are beyond anyone’s control.
• It’s lightweight. For mobile studies phone hardware and bandwidth aren’t taxed as much, resulting in fewer performance-related issues.
• Privacy. Participants can’t see that there are observers, and observers can’t see any participant information.
• You can tell what type of device they’re using. The cursor changes to indicate whether the user is on desktop or mobile (really hand when you asked them to open the link on their phone but they didn’t 🙂
• You can hide Figma hotspot hinting, which has been a challenge in Figma Mirror.
Limitations
• The only thing participants can share in this workflow is an approximation of their screen and their audio. If you want to add video or be able to see other things on their screen, then do use a purpose-built research tool.
• There’s no way to hide the browser toolbar on mobile, which could be important if your prototype is a high-fidelity mobile app.
• When observing light backrounds on mobile, the cursor is invisible. Please help us get Figma to prioritize fixing this by upvoting it! Make cursors more visible when observing in "Presentation View"
An ask:
If you try this workflow, do us a solid and share your experience below. We’d love to hear what could be improved and any tips you have.