Take two tablets, see you in the recording

You may have read about our usability lab in such excellent blog posts as “Internet, we have a BoomSled” where Renae talked about our setup for phone-based user testing. Prior to our foray into the world of industrial design, however, we created a setup for tablet device testing which presented some interesting challenges.

The brief, in brief

Our lab was initially set up to cater for desktop website testing – the details of which I will talk about in another post. In short: we have a PC running Morae which records the onscreen activity and, separately, the participant’s face via a webcam. This is streamed out to remote clients using GoToMeeting. The desktop is also replicated into our observation room on the other side of a two-way mirror.

We had a few simple requirements for extending the setup to include tablet testing. To wit:

  • Capture the tablet screen so it’s recordable in Morae, streamable via GoToMeeting, and mirrored into the observation room
  • Be unobtrusive for the user, allowing them to use the tablet as freely as they are usually accustomed (ideally no wires, stands or clamps)
  • Participants to be able to bring and use their own device to test on
  • Workable for both Android and Apple tablets

Are you wearing a wire?

Some extensive web research followed. Some solutions suggested pointing a camera at the screen attached via a clamp or arm (which we would subsequently master in the manufacturing of the BoomSled), but we were more interested in a solution that would remove any wires or attachments and allow the user to handle and interact with their tablet As Jobs Intended – unshackled.

There was also some talk of mirroring screens via VNC – which simply required the device to be jailbroken. Not a major problem – “please take a seat sir; we’ll be with you as soon as we have liberated your device.”

A third option was the (then) relatively new option of using Airplay to wirelessly mirror the iPad 2 screen to an Apple TV. ‘What about Android?!’ I hear 37.69% of you enquire? Wireless options for Android were unavailable at the time, so we decided to progress down the path of wireless for iPad, wired for Android. Since the Apple TV is HDMI out, and so are Androids (fundamentally), we decided that if the PC was set up to capture an HDMI input we could simply switch between wired and wireless depending upon the tablet being used.

Hey, it’s a kind of magic.

Next step was then to get the HDMI signal into Morae. A couple of options presented themselves, but we decided to give the Blackmagic Intensity Pro a go at around $220 from The Video Guys. In addition to having the HDMI in, it also pumps the signal back out – perfect for delivering it through the wall to the observation room TV.

The remaining ingredients:

  • Apple TV: $109
  • HDMI cables x4 (Apple TV > Blackmagic > Computer / To the wall > From the wall to observation room TV): ~$100

Flash and iPad together at last!

After wrestling the Blackmagic card into the testing computer (for some reason it didn’t sit properly – which may have been the PC itself – and took a few reboots to be recognised by Windows) the first surprise presented itself: the Intensity Pro shows up in Morae as a selectable video source (Decklink Video Capture), but will output any signal regardless of settings. So far, so useless.

The card does come with some downloadable software that displays what the card is capturing onscreen – so plan B, run the Blackmagic software full screen and use Morae to capture the desktop as per usual. Unfortunately this particular software shows the capture in a small window that is about 25% of the total screen size – the rest being application chrome. Again – not useful.

The Internet then presented another option: Adobe’s Flash Media Live Encoder. This is free piece of software is intended to do something with some arcane piece of technology called ‘flash’, but it can also talk to the Blackmagic card and display in (almost) full screen what the card is seeing as long as you set the input parameters correctly. Unless you have the input source configured in a very specific way, you will see nothing in Flash Media Encoder – much like when you attempt to use an iPad as a Flash Media Decoder.

The setup is as follows:

  • Device: Decklink Video Capture
  • Device options (the spanner next to the device dropdown):
    • Video Format: HD 720p 60 – 8 bit 4:2:2 YUV

 

Once these are set we run Flash Media Live Encoder fullscreen and then set Morae to capture the desktop, ipso facto capturing the feed from the Apple TV (or HDMI cable for Android), and thus the Airplay mirrored screen of the iPad (or iPhone 4S).

In summary

Our wire-free iPad solution enables the user to manipulate the tablet naturally – rotate it, rest it on their lap, use it two-handed etc – which in turn means more realistic use of the site or application that is being tested. When running tablet testing we seat the participant in a comfortable chair at a coffee table, with the computer that is capturing the screen placed behind them. This allows the facilitator to sit across from the participant to converse, and look over their shoulder at the monitor to see what they are doing without crowding them.

It’s great solution, but it does have the some shortcomings. What it doesn’t do:

  • Wireless Android – can use an HDMI cable into the Blackmagic card though.
  • HDCP – not a problem for mirroring app or Safari screens.
  • iPad 1.0 – there is no Airplay mirroring in Safari on this ancient tablet
  • Capture what element the user interacted with to navigate (i.e. what they tapped / swiped / pinched / swished). This could be partially compensated by having the additional picture-in-picture point toward the screen

One thought on “Take two tablets, see you in the recording

  1. Pingback: Postcards from the Sled « Designing for mobility

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">