Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Recording Remote Usability Tests with Invision App and ScreenFlow

Parent Feed: 

Great designers know that successful solutions begin with being a great listener. Whether we’re listening to stakeholders, the users' needs, or the trends and opportunities in the market, each voice is an important building block, informing the holistic design system. Usability testing is one way we listen to our audience’s feedback throughout the design process, with the goal of determining if a specific website experience is meeting the interviewees' needs, is easy to use and hopefully, even creates delight or surprise.

Usability testing, though, has a reputation for being time-consuming and expensive, and therefore it can be difficult to secure its spot in a design contract. Over the last few years, our design team has prioritized discovering new ways of conducting usability tests in the most efficient, yet effective, way possible. We’ve learned how to quickly organize tests throughout the design process as questions arise, employ tools that we already use on a daily basis, and utilize templates from previous projects wherever applicable.

With these tricks in our back pocket, we can spin up a usability test in minutes instead of hours. Having your preferred testing process and tools ready to go before the design project begins will help ensure that even the leanest-of-lean testing actually takes place, even if there is not a formal line item for testing in the project contract. 

There are a handful of different ways to conduct a usability test and all approaches fall into a few categories: remote vs. in-person, automated vs. moderated. Choosing the best user-testing method depends on a number of things, like the type of asset you have to test (e.g. a sketch, a static wireframe, a prototype), the nature of the question you want to ask (e.g. navigation usability vs. marketing messaging effectiveness), the amount of time you have and whether you have physical access to your participants. Learn more about this process from Nielson Norman Group's Checklist For Planning Usability Studies

Because testing can be difficult to squeeze in early scoping phases, we’re most often conducting remote, moderated tests. In short, remote tests are cost-effective and save time when your audience is geographically diverse. Moderated tests can also save time in test preparation, and we like learning things we did not expect to learn when we can actually be present with the user as opposed to sending out an automated test.

Although our usability testing toolset often changes as we continue to learn and refine our process, one set of tools you’ll find us using for recording remote, moderated usability tests are Invision App and ScreenFlow

Using Invision App and ScreenFlow fit into our principles for choosing usability testing tools: 

  • Efficient: It needs to be as quick and easy to set up and conduct as possible. 

  • Participant-friendly: It needs to feel easy for the participants to quickly get setup (for example, lookback.io has a lot of great features, but requires Google Chrome and downloading an extension for users to get up and running). 

  • Inexpensive: We want testing to create value, not add cost. As often as possible, we’re looking to use tools that we already employ on a daily basis. 

  • Flexible: We need to be able to test on various devices (e.g. mobile, tablet, desktop) as well as different types of assets: from simple paper sketches to a clickable digital prototype.

Let’s take a look at how to conduct remote, moderated usability tests with Invision App and ScreenFlow.

Setting up a Test with Invision App and ScreenFlow

1. Close all apps on your computer (e.g. messenger, slack). Disable all notifications as well (on a Mac, option-click the little notification list icon on the top right of the menu bar). We want to make sure notifications are not popping up while recording the test.

2. Spin up an Invision Liveshare presentation. You can also create Liveshares with mobile projects. Invision Liveshares work best for testing static sketches, wireframes, mockups, or clickable prototypes built in Invision. If you have an HTML prototype, consider using a screen-sharing application (e.g. Google Hangout, GoToMeeting, Slack Calls) to watch the user interact with the prototype, or choose to conduct an automated test. 

Ask the interviewee to select the cursor icon in the Invision Liveshare toolbar. You will be able to see your cursor as well as the user’s cursor on the same screen, whereas in a screen sharing application like Google Hangouts or GoToMeeting, you can only see the cursor of the person who is sharing their screen. 

Tugboat Liveshare
3. Setup your collaborative note-taking app of choice. We love Dropbox Paper for its simplicity. Google Docs works well too. You may choose to invite another co-worker or friend to be the note-taker so that you can focus on interacting with the interviewee. Setup your screen so that the Liveshare and note-taking app are visible. 
Tugboat Liveshare with Notes

4. Create a conference call line. Send conference call line information to your interviewee. You can also use the call feature in the Invision Liveshare. Although lately, we have used Uber Conference just to be sure that we have a backup recording. Loading the Invision Liveshare for the first time can also be a new experience for interviewees, and we find it more bulletproof to be on the phone while they are getting set up. We usually send an email and a calendar event with this call information included a few days in advance, as well as resending a few minutes before the call. Be sure to dial the conference call via your computer, or VOIP (e.g. Uber Conference, Google Voice, Skype, Slack Call), and not on your phone. Dialing in on your computer will allow ScreenFlow to pick up the call audio.

Uber conference

4. Use ScreenFlow to record your screen and call audio. Make sure both “record audio from” and “record computer audio” boxes are checked in order to capture the interviewee's voice as well as yours. Remember to ask the interviewee for permission to record, even if you are not planning to share the video and are simply wanting to check your notes afterward. Also, consider scheduling a conference call test run with a friend or coworker to test that audio is being recorded correctly with ScreenFlow.

ScreenFlow

5. Host the recorded files securely and privately. Export your ScreenFlow video file and host via your provider of choice. We usually use YouTube (remember to make sure the video is privately listed, meaning that no one can find the video unless they have a link), or Dropbox. Both allow us to easily share links if necessary.

YouTube
Usability testing adds incredible value to the design process and most of all can save a lot of time and heartache down the road. And it does not have to be expensive or time-consuming! Explore and practice ways you can utilize tools you already use on a daily basis so that when the time comes, you can easily organize, record and share a usability test as easily and quickly as possible.

More Resources

But wait! There's more!

Curious about the project referenced in the images used in this article? That would be our soon-to-be-released product called Tugboat, the solution for generating a complete working website for every pull request. Developers receive better feedback instantly and stakeholders are more connected enabling confident decision-making. Sign up for our mailing list to receive Tugboat product and release updates!

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web