Daniel Mason
17-11-2014
GoPro headstrap

Usability testing is an effective way to highlight any issues with your site directly from the user's perspective. You can assess the journey the user takes through your website and how they interact with certain aspects. The user's perspective is really the most significant one, which is why usability testing is so important. The key elements in user testing are drawing out user behaviour, followed by analysis of this to determine valid and useful content and design conclusions.

We know that testing through a laptop or desktop computer is relatively simple, provided you have the correct recording software (in our case, Camtasia). Mobile devices however are becoming increasingly dominant, which leads us to the question - how can I conduct usability testing for mobile devices?

This can be done in various ways, including the use of webcams and document cameras. The problem with the document camera is that it is restricting; the user must keep their phone or tablet flat on the table which is not usually a natural way for people to use their device. The webcam option can allow for a more accurate representation. Usability expert Steve Krug discusses in his book 'Don't Make me Think' an interesting way to test using a webcam and a book light. The book light is attached to the webcam and then clipped onto the phone, allowing a recorded view of the screen. He calls this the Brundlefly cam, referencing the 1986 sci-fi film 'The Fly'.

We tested this idea ourselves. Although it is an innovative thought, we came across some issues. it is difficult to get a clear view of the screen without blocking the user's view, and the apparatus weighs down the phone prompting users to place it on the table.


We also tried a different technique using the GoPro camera. We combined this with a strap to place on the user's head whilst they browse the website on their phone or tablet. This allowed for a much more natural user test as they were able to easily hold and use their phone as normal as the camera records what they see. Another advantage is this could technically be done anywhere, so testing a train time app on a train for example.


Taking this a step further we used a program called MirrorOp, which allows Android devices to mirror their screen images to a MirrorOp Receiver through WiFi or USB. We can record the screen using Camtasia, and overlay this on top of the GoPro recording. That way you can see the screen alongside the actions very clearly; it's incredibly useful and clients are impressed!


Step by step guide

This is a list of the equipment we used. Although there are free versions of screen recording software, second hand GoPro's, and other inexpensive ways of getting the same result. You can also now use the iPhone USB cable to mirror screens on a Mac, although we have not tried this yet.

  • Windows 8 laptop (i7 and 6GB RAM, basically something half decent)
  • Camtasia (http://www.techsmith.com/camtasia.html)
  • Rooted android phone, in this case a Samsung S4 running Cyanogenmod
  • Another phone to control and view the GoPro
  • MirrorOp sender and receiver (http://www.mirrorop.com/product_Android_Sender.html)
  • GoPro Hero 3+
  • GoPro head strap (http://www.amazon.co.uk/gp/product/B00F19PYR4)
  • GoPro frame mount (http://www.amazon.co.uk/gp/product/B009PK9QGU)

Screen recording setup

You may well already do this if you conduct any user testing, but have Camtasia running, the audio doesn't need to be on as it works best with the GoPro audio, especially when you sync the two recordings together. Camtasia also has a little screen recording program, no other setup is needed, but check it works as you can't repeat the tests! We also like that Camtasia connects directly to YouTube, as we watch the videos back in one session with the client later, rather than doing everything 'live'.

MirrorOp setup

This takes a bit of experimentation to get working well, so test it out well in advance. The wireless aspect can be a little temperamental so you might be better off using the USB cable, however this wont feel so natural for the user. You need to install the app on the phone, and the receiving software on the laptop, try different quality settings till you get a smooth scroll, this is more important than a high definition.


GoPro setup

The frame mount is important as the supplied water / wind / space proof case muffles the audio, with the frame mounts you get excellent audio from the user synced with the video recording. It's best to tell the user in advance if they have not done it before, in case they spent a long time doing their hair before the test! We used another Android phone with the official GoPro app, this enables you to see the screen so you can adjust the viewing angle, try to get the mobile device in the vertical middle of the field of view, you can also keep an eye on it as the test progresses. One tip here is to keep the user looking at the device as much as possible, if they keep looking round at you when you give them tasks, a slightly sickening 'Cloverfield' effect can happen.


Recording

Start the MirrorOp sender and receiver in advance of the user test so that's running fine, get the camera angle correct and the user comfortable, start Camtasia and then the GoPro recording. Go through your tasks and scenarios, stopping the GoPro recoding and Camtasia at the end.


Editing

The Camtasia screen recording will be in the software already, next up:

  1. mute the audio (see illustrated)
  2. crop the video so you can only see the device (see illustrated)
  3. import the GoPro recording and put below the screen recording timeline (see illustrated)
  4. move (and resize if needed) the screen recording, there is usually space on one side
  5. now the fun bit, you need to sync the 2 recordings, we found using the moment when the user first starts scrolling the easiest point, and moving the GoPro recording left gradually, however you need to account for the lag
  6. crop the beginning and ends and push both to the start, adjust the audio levels, then export the whole lot to YouTube (or wherever you usually export), ready to be reviewed!