A mobile usability test that you absolutely don't know about.

Usability testing on mobile devices is an area where most user experience design teams are both concerned and frustrated, and the various professional testing tools on the market have their pros and cons and how to choose them is a difficult problem. Good performance, less interference to users, high recording quality, can record the user's facial expression and hand operation, cheap and other elements become the choice of tools and methods when the focus of attention. The author of this article Colman Walsh provides a flattering way to better solve most of the problems in the test. Although imperfect (unable to record the user interacting with the mobile device screen), it is still worth a try, and energetic students can combine lookback (Https://lookback.io) and perhaps work out a better solution.

The incredible growth trend of mobile terminals and the full popularity of mobile devices make it more challenging and entertaining for users to experience designer's work. This means that user testing of mobile applications and mobile sites is an important part of the user Experience tool.

Unlike the desktop environment, mobile-side usability testing lacks the out-of-the-box software logging tools such as Silverback or Camtasia.

Even if you don't develop a mobile app, most of your site's traffic may come from mobile devices. Performing regular mobile usability testing is the only way to measure whether the channel is working properly.

At this time need some hands-on ability, after years of experiments, we think has found the most ideal means. If you want to simply test the iphone or Android experience, this approach is simple, cost-effective, and effective.

　Old method: Cable plus tape

In the past we used "sled" to keep smartphones and cameras in place, so that we could record the user's behavior on the screen. (To make a sled, we bought some acrylic in the hardware store to bend it through the toaster, very interesting)

We taped the camera to the sled and fitted the phone with tape and velcro. In retrospect, the practice is still very simple. Users often have to hold their phones with both hands to keep their skis stable, and of course not natural experience.

Figure 1. Users are using a cell phone with a sled and a webcam

Technically, it's unreliable. With the use of a laptop's dual camera (the sled's camera and the built-in webcam), we had to open two camera applications simultaneously, which caused a certain performance problem. Either the memory is strained in the setting or the camera is extinguished in the test, often both.

There are a number of other problems, such as the glare of the screen and the loss of focus on the camera. In a nutshell, setting up a test environment is time-consuming and unreliable, and the test environment is not optimal. Especially when customers are around, the pressure is especially high, but that's the best we can do at that time.

　　(better): Wireless

Ideally, users should not be able to see the test environment and software. We want to create as natural a test environment as possible, only users and smartphones, no cables, skis, cameras or tape interference.

For the user Experience team, continuous learning and insight in user testing is the key. We don't want to have to worry about setting up a test environment or putting the camera off.

I want to achieve these goals by introducing a simple setup that helps the user Experience team focus on what's really important and let users focus on their phones. Because it is very reliable, we often face the use of customers in training courses.

Next, we'll focus on the usability testing of smartphones, using a MacBook as a recording device. Of course, this approach also applies to Windows PCs.

Figure 2. Wireless testing is a more natural way

　　First step: Install the Software

The key to the magic is Apple's Airplay wireless technology, which allows you to send streaming media (music, video) wirelessly to Apple TV.

So first you need to buy and install a software called reflector (about 15 knives) that can turn a notebook into a airplay signal receiver, like an Apple TV. As a result, we can project the user's smartphone screen in a mirrored way onto a laptop, and the content on the user's screen will appear synchronously on the laptop screen.

Now we can record the user's screen without needing an extra camera, just to record it on the laptop with the screen recording software. Highly recommended Screenflow (about 99 knives), not only high reliability, and in the testing process through the laptop camera to capture the user face content, which is an important part of any usability testing.

　Step two: Set up the monitor

This step is optional. Because I tend to use an external monitor so that the moderator and the recorder do not have to glance at the user's shoulder to observe behavior. This can also minimize user interference, users will not see the laptop screen in front of the huge phone screen projection, it will appear on the external display.

So, if you're connecting your MacBook to an external monitor, if the external monitor and the laptop screen display consistent content, it means that this is not the mirror mode we want to set. Open System Preferences-display to remove the "mirrored display" from the tick.

Figure 3. Correct display settings for Mac

　　Step three: Set up reflector

To send the smartphone content to the laptop screen, simply turn on the reflector and see its icon on the toolbar in the upper-left corner of the portable computer screen.

Figure 4. The icon you will see when reflector open

　　Step Fourth: Mirror the smartphone

Now is the moment to witness the miracle! If you are using the iphone, draw from the bottom of the screen and start airplay. Then select your MacBook from the list and then open the mirror button.

Figure 5. Turn on the mirror on your iphone

Your iphone should appear in the middle of an external display, isn't it amazing! (If the iphone appears on a MacBook screen, just drag it onto an external monitor)

Using the Android 4.4.2 or newer device, move down from the top of the screen into the settings, select the "Projection screen" option, and then select your MacBook.

Note: Your smartphone and MacBook must remain on the same Wi-Fi network, and if there is a problem, this is the first thing to do.

　Fifth step: Set up Screenflow

Before you start recording, open Screenflow. The initial setup dialog box pops up and you need to do the following:

Figure 6. Set Screenflow

1, "Record desktop source"

Select and make sure to select your external monitor from the Drop-down menu. (Refer to the 2270W in the example)

2, "recording video source"

Select and make sure that the default option "FaceTime HD camera (built-in)" is selected.

3, "Recording audio source"

Select and select the built-in microphone.

　　Step Sixth: Start recording test content

Put the user in front of the MacBook so you can see their faces in the Screenflow preview. Then press the Red Recording button, and it's done, and now it's started recording.

When you watch the user's behavior with the recorder on the external monitor, the user sits in front of the blank laptop, using the phone as usual, without cables, tape, cameras or other distractions.

In the screenshot below, I played Spotify on my iphone. As you can see, while recording the phone screen, Screenflow provides a picture-drawing window to show the user's facial expression and perfect usability testing.

Figure 7. Screenshot of Screenflow output recording content

Of course, this way still does not show the user's finger and device interaction process. But overall, it has a lot of merit (see the list in the conclusion), which is a good way to be justifiable.

　　Set Overview

What needs to be clear is that let's look at the full picture of the setting. Users should sit in front of a MacBook and use their mobile phone, and the moderator and recorder should sit nearby and observe the user's behavior through an external monitor.

Figure 8. Test room and screen installation methods

Make the external monitor face away from the user's view, otherwise the screen image on the big screen will disturb the user's attention.

Conclusion

The approach we are introducing has many advantages that are worth a try:

1, simple

After debugging all the links for the first time, it only takes about 5 minutes to set up the next time.

2, reliable

It's not perfect, but the chances of software crashes and setup problems are low. However, it is not surprising that there are problems with the sled + camera scheme.

3. High cost performance

If you use a MacBook, the entire solution takes less than 200 knives. (corresponding, professional high-end usability testing software Morae Price 2000 knife)

4, professional

High-quality and professional output, does not look like hacker technology. We share the recorded content with our participating clients and executives, and the results are good.

5. Flexible

This scenario applies to mainstream platforms: PCs, Macs, Android, and iOS.

6, convenient

Because you don't need any tape or velcro, testers can use their own phones, which makes your tests more natural and effective.