Why? Methods used for recording mobile usability tests can be deeply frustrating for the people carrying them out. Issues include a clunky environment for users, output not being professional, performance being unreliable and an overly technical to set up.<\/p>\n
Here’s our Step-by-Step guide to recording reliable, high-quality mobile usability tests.<\/p>\n [GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n Before you get started, here\u2019s an outline of the hardware and software you\u2019ll need. For simplicity, this article will assume you\u2019re using a Mac. See the footnote for instructions on how to tweak the setup for PCs.<\/p>\n Your smartphone and laptop must be on the same WiFI network<\/i>. This simple error has often tripped us up.<\/p>\n First, purchase and install Reflector. This is the key ingredient in the setup as it gives your laptop the same capabilities as Apple TV and Chromecast.<\/p>\n What does that mean? It means you can wirelessly mirror your smartphone screen onto the screen of the laptop. At just $15, it\u2019s undoubtedly the best value software product in our UX toolkit.<\/p>\n Second, purchase and install ScreenFlow, which is a screen recorder that does three essential jobs. It records the smartphone. It records the user\u2019s face (an essential component of any usability test). It records the audio.<\/p>\n To start beaming the smartphone to the laptop, open Reflector on your Mac. You\u2019ll see the Reflector icon in the toolbar in the top right of your screen.<\/p>\n (Image 1) You\u2019ll see this icon when Reflector is open.<\/i><\/p>\n Now we come to the magic part. If you\u2019re using an iPhone, swipe up from the bottom of the screen, and select Screen Mirroring. Then select your laptop from the list (in this example, it\u2019s \u201cColman\u2019s Mac Mini\u201d).<\/p>\n (Image 2) Turning on screen mirroring on your iPhone<\/i><\/p>\n Your iPhone should now appear in the middle of your laptop screen (see Image 4). Magic!<\/p>\n For Android, go to Settings > Connected devices > Cast. Select your laptop from the list (again, in this example it is \u201cColman\u2019s Mac Mini\u201d). Your Android phone should now appear in the laptop screen.<\/p>\n (Image 3) Turning on casting on your Android phone<\/i><\/p>\n Note: Your smartphone and MacBook need to be on the same WiFi network for any of this to work. It\u2019s the first thing to do when troubleshooting, if you can\u2019t get it to work right away.<\/p>\n Also, in some corporate and public WiFi environments the mirroring won\u2019t work, even if you are using the same network. This is because these networks are broken into something called \u201csubnets\u201d. If this happens, we use a hotspot on a colleague\u2019s phone for WiFi.<\/p>\n (Image 4) Your smartphone will appear on your laptop screen like this<\/i><\/p>\n This Step is optional, but I like to use an external display so that the facilitator and notetaker don\u2019t have to peer over the user\u2019s shoulder to see the action.<\/p>\n Run an extension cable from your MacBook to the monitor. You want the laptop and the monitor to mirror each other, that is, show the exact same display.<\/p>\n To do this, open up \u201cSystem Preferences\u201d and select \u201cDisplays,\u201d and make sure the box for \u201cMirror Displays\u201d is checked.<\/p>\n (Image 5) The correct display preferences for your Mac. <\/i><\/p>\n The laptop should be facing the user (see Step 7 below). But we don\u2019t want the user distracted by seeing their own smartphone on the laptop screen. So here\u2019s a neat trick: dim the display on the laptop until the screen is black. The display on the external monitor will still be bright.<\/p>\n [GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n To start recording, open ScreenFlow; the new recording configuration box will appear. You\u2019ll need to check the following three settings:<\/p>\n (Image 6) Setting up ScreenFlow <\/i><\/p>\n Note: depending on your laptop, the built-in microphone might not always record the best quality audio. This can be a real issue during playback, particularly if you\u2019re showing the recordings to clients or senior stakeholders.<\/p>\n To combat this, we use a relatively high-end Blue Yeti USB Microphone<\/a> ($129.99) and the same company also sells Snowball Microphones<\/a> for just $45.99. Either option is a worthy investment if you are regularly doing usability tests (which you should be).<\/p>\n Position the user directly in front of the MacBook. You should see their face in the ScreenFlow preview. Then, press the large red record button. That\u2019s it \u2014 you are now recording.<\/p>\n As you and the notetaker are watching the action on the monitor, the user will be sitting in front of a blank laptop screen, using their smartphone as they normally would. Compared to other setups for recording mobile usability tests, this is incredibly natural. There are no wires, cameras or intrusive mounts for the phone.<\/p>\n When the session is finished, click the stop icon in your toolbar – the recording will stop, and ScreenFlow will open. Save the file and you\u2019re done.<\/p>\n (Image 7) Press this icon to stop the ScreenFlow recording<\/i><\/p>\n A couple of things to point out here. First, ScreenFlow files are huge. A half-hour usability test can take up 15GB of space or more. I like to quickly export them to another format (such as MP4) and then delete the massive file.<\/p>\n Second, ScreenFlow has built-in editing capabilities. It\u2019s simple to use and you can cut out any unnecessary sections of the recording before you export the file.<\/p>\n (Image 8) What your recording will look like – a professional picture-in-picture view<\/i><\/p>\n In Image 8, you can see an animated GIF of the playback of the usability test. I\u2019m playing around with Spotify on my iPhone. The playback provides a picture-in-picture display of the user\u2019s face and upper body. This is perfect for recording the user\u2019s emotional reactions throughout the session, which is a vital component of any usability study.<\/p>\n Combined with high quality audio, we believe this is the best setup for recording professional quality mobile usability tests.<\/p>\n Many people will complain that this setup doesn\u2019t capture the user\u2019s fingers interacting with the device. This is true. But the overall benefits of this technique are so numerous (see the list below) that the trade-off is justifiable.<\/p>\n In my opinion, it\u2019s easy to follow what the user is doing even if you can\u2019t see their fingers. You don’t need to see finger taps to know when somebody is scrolling, pressing buttons, moving to a new screen, and so on.<\/p>\n To be clear, let\u2019s review what your setup should look like. The user should be sitting in front of the laptop, with the smartphone in their hand. And the facilitator and notetaker (if you have one) should be sitting nearby, looking at the external monitor.<\/p>\n Keep the external monitor pointed away from the user. It can get distracting seeing their smartphone flashing on the big screen.<\/p>\n There are so many advantages to this approach that it would be worth listing them:<\/p>\n If you have any feedback or improvements for this approach, or if you have any questions, we\u2019d love to hear them.<\/p>\n For PC users, the key difference is that you won\u2019t be using ScreenFlow as it is a Mac-only tool. Instead we\u2019d recommend Camtasia<\/a>, which will do the exact same job.<\/p>\n With just a few tweaks, the instructions set out above should work perfectly.<\/p>\nWhat you need: hardware and software<\/h2>\n
\n
Step 1: Install software<\/h2>\n
Step 2: Set up reflector<\/h2>\n
![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/\/uploads\/2018\/04\/Image-1-toolbar.png\" "\\"\\"")
<\/p>\nStep 3: Mirror your smartphone<\/h2>\n
![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2018\/04\/Image_2_scren_mirroring_IOS-1024x675.png\" "\\"\\"")
<\/p>\n![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2018\/04\/Image_3_Android_casting-1024x676.png\" "\\"\\"")
<\/p>\n![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2018\/04\/Image-4-Desktop-1024x576.png\" "\\"\\"")
<\/p>\nStep 4: Set up external monitor<\/h2>\n
![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2018\/04\/image_5_system_preferences.png\" "\\"\\"")
<\/p>\nStep 5: Dim the laptop display<\/h2>\n
Step 6: Set up screenflow<\/h2>\n
![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2018\/04\/Image_6_Screenflow.png\" "\\"\\"")
<\/p>\n\n
\nThis should automatically be set to record your laptop screen<\/li>\n
\nCheck this and select \u201cFaceTime HD Camera (Built-in)\u201d which is the default option. Adjust the position of the laptop so the user\u2019s face will appear in the preview pane.<\/li>\n
\nCheck this and select \u201cBuilt-in microphone\u201d<\/li>\n<\/ul>\nStep 7: Start recording the test<\/h2>\n
Step 8: Stop and save the recording<\/h2>\n
![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2018\/04\/image7_stop_screenflow.png\" "\\"\\"")
<\/p>\n![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/03\/giphy-1.gif\" "\\"\\"")
<\/p>\nReviewing the playback<\/h2>\n
What about fingers?<\/h2>\n
Overview of setup<\/h2>\n
Conclusion<\/b><\/h2>\n
\n
Footnote for PC users<\/b><\/h2>\n
Need help finding users for your usability test?<\/h3>\n