The photo above shows my take on a
mobile device usability testing jig, inspired by the work of Kirk Henry of Lokion Interactive (via
Harry Brignull). I’ve been working on this device to help with testing site and app designs on mobile phones and tablets. Quite often these contraptions are called a sled but I’ve been calling this one “The Claw”, for hopefully obvious reasons.
Its purpose is to allow you to get a good view of the screen of a mobile device—handset or tablet—as well as the user’s face, during usability testing (or any other activity that you’d like to see what’s happening while someone uses a mobile device. Using software such as TechSmith Morae 3.0, you can easily record from both cameras.
A key feature of this particular design is its flexibility, it’s attached to the device and moves with it, and it can be used for two different sizes of device: smaller phones, handsets, smartphones (eg iPhone, Android, Blackberry), as well as larger tablets (eg iPad, Samsung Galaxy Tab 10.1). This second feature is achieved by having two sets of attachment locations for the cameras: one lower down for handsets and one higher up for tablets.
Design and development
After a much earlier prototype built out of a desk lamp (left side of photo below) a major design decision was made, that the rig needed to move with the mobile device, rather than sticking the mobile to the jig and asking the user to use it fixed in place.
While the claw is tethered to a PC via USB cables, it still allows quite a lot of freedom of movement and lets the user hold the device more or less naturally.
A second prototype was built using a wire coathanger, to get the dimensions and angles right before committing to a building material that wasn’t as pliable (right side of photo above). Two things became obvious and resulted in two distinctive features of the final design.
The downward-facing camera that records the screen of the device needs to be at the right height and angle to get a good view of the screen. If angle A is too much more than 90°, you either can’t see the whole screen, or the view you get is at a steep angle meaning the perspective distortion is high (the end of the device closest to the camera appears much smaller than the end that is furthest away from the camera). Additionally the end of the mobile device furthest away from the camera may be out of focus compared to the closer end.
Also, you’re balancing getting a good view of the screen with obstructing the user’s view of the screen. This is especially an issue when the camera is this close to the device.
Another factor to take into account is the ‘focal length’ of the camera being used. The Microsoft VX-6000 webcams I use can’t be placed any closer to the device than I’ve placed them, otherwise the picture was blurry and the camera also gets in the way of the user viewing the screen.
I also discovered that in order to provide a good view of a larger device like a tablet (without too much of any angle) the downward-facing camera needed to be more directly overhead. Hence the second bend in the claw that brings it back past vertical (ie angle B). The height of the camera was also a factor, as having it too close to the device means that you can’t see the whole screen of a 9-10” device. As before, a balance needs to be struck between getting a good view of the screen and obstructing the user’s view.
After some experimenting, the angles and heights were worked out and it was time to build the next prototype...The Claw.
Manufacture
With very little budget, and because it was just a prototype, I decided not to use something like
Ponoko but instead to make it myself. The Perspex is 10mm thick, to give it strength and stop it bending when in use. You can get it at any plastics fabricator, I bought this black specimen from
Australian Plastic Fabricators for about $20.
There are also places that can cut, bend and drill any design you want (including Australian Plastic Fabricators) but it can be expensive if you’re ordering a low number of units, like one. So I again decided to do it myself.
Note: 10mm Perspex is hard to bend! :) If you have a heat gun (used for heat-shrinking, stripping paint, welding copper plumbing pipes etc) it should be fairly easy, especially if you have a nozzle that focuses the heat to a narrow strip. I didn’t have one. So I used my toaster. I don’t exactly recommend it, but it does work.
- Print out a scale diagram of your design and place it on a heat resistant surface right next to the toaster (you’ll use it as a guide to bend the perspex)
- Mark the Perspex where you want to bend it
- Place the Perspex over the top of the taster, with the mark positioned above one of the slots (don’t stick the Perspex into the toaster!)
- If you have a multi-slot toaster you might need to cover some of the slots so that your Perspex only gets heated in one spot. I used slices of bread to do this, since they were right there next to the toaster and I got a bonus snack! Don’t completely cover the slots of your toaster might have a meltdown
- Adjust the toaster setting to a fairly high/long setting, I had to heat the Perspex for about 4 minutes, but experiment a little and see what it takes for your toaster to make it pliable enough. You don’t want to melt it, firstly because it will give off fumes but also because it’ll likely stretch as you bend it, you want it about as pliable as a paper clip
- Once you think it’s ready to bend, use oven mitts or some heat resistant gloves to pick up the Perspex and place it on the scale diagram and bend to the desired angle and hold it in place
- Do this quickly as the plastic will cool and stop being flexible within 10 seconds or so
[A toaster oven might also work, but it wouldn’t be very precise in terms of where it heats the plastic, and you’ll probably burn your hands. Just buy/rent a heat gun :) ]
After bending is when you drill and cut the holes. If you drill and cut before bending, the lower structural rigidity will probably mean it won't keep its shape. The purpose of the drill holes is to mount the cameras. The cameras I used are both Microsoft LifeCam VX-6000 models, fairly cheap but also fairly good quality, but probably their best attribute of this webcam is it's tilt and swivel bracket that attaches to a round base. If you unscrew the base and removed it, you can mount the tilt and swivel bracket to the perspex, using the original screw. The hole for the screw will need to be countersunk because the screw is not long enough to make it all the way through 10mm of Perspex.
The purpose of the large cavities is to save weight. That’s why I used 10mm Perspex, because that thickness would mean there would be enough strength after the weight-saving holes were cut. Also these large holes are a neat way to thread the cameras’ USB cables out the back of the claw.
To make the cavities I drilled holes around the perimeter, very close together and then bashed out the centre and filed down the edges. It’s an old trick I picked up somewhere, probably making stuff in the garage when I was a kid, but you could drill one hole and use a jigsaw to cut around the perimeter. The weight-saving cavities remove about 32% of the weight, but leave structural integrity.
Cameras
The cameras I chose are good enough for the job, but to further advance the design, smaller and higher resolution cameras might be used. But is likely to mean a move away from USB webcams, making for a more expensive and complicated exercise.
To attach the mobile device to the rig, I use
3M Command Strips (normally used for hanging pictures on walls etc). The advantage of these strips over double-sided tape is that they can be easily removed and they don’t damage the mobile device or leave any sticky stuff on it.
Morae setup
Morae 3 allows you to record from two webcams, and it’s pretty easy to do so. Start with a hardware or mobile recording configuration and set the “Main” source as the bottom webcam (the one pointing down at the device). I mount the webcams upside down to allow the tilt mechanism to work, giving an easy way to adjust the angle of the camera in relation to the rig. So in Morae you need to flip the camera using the camera settings.
Set the “PiP” source as the top webcam (the one pointing at the user’s face). Again I mount it upside down so you need to flip the image in the settings.
For a reason I can’t currently figure out, Morae won’t use the microphone in either of the webcams as the audio source for recording, so I use a Logitech USB desk microphone placed nearby, it picks up audio well enough.
That’s it, the only things you need to do each time you use the claw is adjust the camera tilt and angle, and maybe adjust the focus ring (in case it has been bumped since last use). Then you plug in the USB cables, stick on your mobile device, launch Morae and away you go!
Future development
The claw is currently being is used for several different projects, on both handset and tablet devices. Next steps are to make some refinements to the angles and dimensions and then produce a better quality version using a service such as Ponoko.
