July 07, 2008

Gorilla Usability Testing

In my never-ending search for interesting interface design, I had a chance to chat with Andy Budd, of Clearleft, about their new desktop application, Silverback. I believe it can bring usability testing to the masses and will be the go-to application for basic usability testing. It's simple, focused, thoughtful, polished, and a joy to use.

So, what exactly is Silverback? It’s “spontaneous, unobtrusive usability testing software for website designers.” It gracefully records the on-screen action, including mouse clicks, as well as video and audio of the subject so you can create a library of usability testing videos to share or review later.

The Genesis of the Idea

Great software is the usually the result of people “scratching their own itch,” and Silverback is a perfect example. Clearleft has been doing basic usability testing with a video camera and tripod since they opened their doors. It got the job done, but it wasn’t ideal. They had spent some time exploring other options, but none of the solutions met their needs.

One day, a friend of theirs participated in a usability study run by Leisa Reichelt. He noticed that she had created a simple little hack to run iChat video and automatically create screen captures every 5 seconds in order to create a single file showing the screen as well as the test subject’s reaction. One thing led to another, and Clearleft decided they could take this idea to the next level, and the vision for Silverback was born.

Figure 1 The blank slate guidance helps you dive right in without the need to read instructions or configure anything.

Early Concepts & Mockups

We spoke briefly about the development process and how the application has evolved since the early concepting and prototyping phases. Andy graciously shared some of the early wireframes and mockups of Silverback. They were able to ultimately stay very true to their original vision, but the departures and evolution of the ideas are are very interesting.

Wireframing

Like any concept, Silverback’s interface has evolved through a series of sketches, wireframes, and mockups to become the application that is today. (Figure 1) Naturally it’s not an exact replication of the early concepts because ideas change and technical limitations rear their head. The example preferences screen shows some of the basic options as well as comparing the original wireframe to the preferences pane as it exists today. (Figure 2)

Figure 2 While there are inevitably some variances, the resulting application has stayed true to the original concepts.

The wireframes show the concept of projects and sessions, and the only significant changes are how they are organized and presented on the screen. (Figure 3) The export options have also been moved into the save dialogue where they are more appropriate (Figure 4), and the final interface provides a higher level of user feedback about the video and exporting configuration.

Figure 3 Even in the initial versions, the sessions worked with the concept of a project. During the development process, the interface for managing projects has necessarily evolved to be more complete, but the original underpinnings are still evident in the wireframes. Figure 4 The quality options for exporting have migrated to the save dialogue, but the project, subject name, date, length, and notes for sessions have stayed the same.

Mockups

Wireframes are, by their nature, fairly abstract. They generally serve as an exercise in thinking and understanding and don’t need to be high-fidelity. That fidelity isn’t necessary until the mockups. Like the Silverback wireframes, the initial mockups help show an interesting evolution. On Silverback, like any project, things changed. Whether it’s technical constraints or usability enhancements, they embraced the change instead of religiously focusing on following the mockups.

Figure 5 The original mockups show the right pane as being a single all encompassing

Andy also spoke about the implementation saying that the graphical parts of the interface were actually the most difficult aspects to get pixel perfect. When setting out to design a desktop application, there was hope that they’d be able to avoid the issues of multiple browsers that we have to deal with in web development. Unfortunately, developing desktop apps isn’t without its share of inconsistencies. From UI quirks to tracking down bugs on different physical machines with different software and hardware configurations, the team had equally frustrating moments developing for the desktop.

Figure 6 The list of users was migrated into its own pane.

While some aspects inevitably changed, it’s clear the final product didn’t stray far from the original mockups. (Figure 5, 6, and 7) The clear evolution of the application from wireframes, to mockups, to working desktop app is a wonderful example of working within constraints and adapting to new information over the course of a project. Change isn’t a bad thing. Of course, it’s important to manage change, but it’s not something to be afraid of.

Figure 7 The area for video was originally designed to be much different. That area of the screen has now evolved to present context-relevant information based on whether it’s pre or post recording.

The “Final” Interface

One of the reasons Silverback succeeds is its focus. It’s not trying to be a screencasting application, although it could easily be used as one. It’s not trying to be an overly complex solution, either. It’s focused completely on enabling you to capture, store, and export videos of people using software. There’s no editing functionality or unnecessary features. Silverback dutifully performs its job without distractions. (Figure 8)

Figure 8 Silverback presents a simple and intuitive interface for browsing and recording all of your usability tests by project and test subject. There’s even space to jot down notes.

Blank Slate Guidance

Having worked with some of the earlier releases, it’s very clear now the amount of thought and attention that’s gone into making the application easy to use from the moment you download it. (Figure 9) There’s no configuration. You’re ready to go as soon as you open it, and it helps make sure you can get started without ever having to ask, “What next?”

Figure 9 Once you create a project, you still need to create sessions, and Silverback makes sure you don’t get lost along the way.

iSight Preview

Figure 10 The iSight preview pane provides a quick preview of the subject and video just above the button for starting the new session. The preview also provides a subtle outline for helping to ensure that the subject is centered on the screen. And if you’re iSight is disabled, the preview pane appears blank and doubles as a reminder so you don’t start recording without it.

With each session, Silverback helps you get started with a preview of what the camera sees just above the button to start the session. (Figure 10) Within the preview, there’s even a subtle outline to help make sure things are centered and that the videos of the subjects are consistent. It’s not always necessary, but it’s subtle enough that it doesn’t get in the way if you don’t need it.

Of course, sometimes the iSight isn’t enabled or the machine may just not have one. In the case of the disabled iSight, you won’t accidentally start recording and miss the video because the preview pane makes it obvious when you’re not capturing video.

Getting Started

One of the simplest, but most thoughtful features is the initial screen you see when you start a session. Instead of immediately beginning to record, it displays a temporary screen and instructs the test subject to press the spacebar to begin the session. (Figure 11) This way, the screen is blank before the session begins and there’s no need to start the session by reaching around them or swapping seats.

Figure 11 When you start a session, it displays a holding screen until the test subject is ready to begin. This makes it easier to start it for them and help them get going from a blank slate.

Export Previews

After recording a session, you still have to export it to Quicktime in order to be able to watch it. Depending on the length of the video and computer speed, the process can sometimes take a while. As a result, you’d probably rather not have to export, wait 30 minutes, and then view the video only to find out you exported with the wrong settings.

Figure 12 The export previews each show the video preview in a different location based on the export preferences.

Thankfully, Silverback shows a small preview of the video along with the captured video of the subject so you can tell what the export will look like. You can choose the size and location of the iSight video and optionally hide it or make it semi-transparent so that it’s less likely to obscure any screen activity. What’s nicer is that the previews automatically update based on the current settings in the preference pane. (Figure 12)

Export Options

There are a plethora of options when you export your videos. You can choose where the iSight video is located as well as the size of the iSight video. (Figure 13) There’s even an option to have the iSight video be semi-transparent so that it doesn’t obscure any of the screen activity. Of course, there’s also quality and size options for the final quicktime movie as well.

Figure 13 The exported video includes an ever-present video of the test subject. The size and location is easily configurable.

What’s nicer is that you can change the settings each time you export the video. That way you can try several different options or create different versions at different sizes and quality for different purposes. So you could create a high quality version that you keep on your laptop for presentations and a lower quality version for distributing to other team members.

Figure 14 The exported video shows when and where the subject clicked on the screen with circles that gradually expand and disappear.

Capturing Clicks

In retrospect, it seems obvious that we’d want to capture clicks, but after exporting a session and watching the quicktime video, I was pleasantly surprised to see they had thought of it. Conveniently enough, Silverback overlays small circles that expand and then disappear to help show when and where a test subject clicks. (Figure 14)

Exception Handling

Recording audio and video is a tricky thing. There are dozens of edge cases that could lead to an incomplete or corrupt video. The hard drive could fill up, applications could crash, or maybe there’s a hardware problem. Capturing and seamlessly handling these edge cases can be the difference between a successful session and unsuccessful one. Silverback has you covered. (Figure 15 and 16)

Figure 15 Silverback makes sure to draw attention to any potential technical glitches before a recording begins. Figure 16 Silverback also provides immediate feedback if a recording failed. That way you’ll know if you need to go ahead and take more extensive notes, or potentially schedule another session.

Session Avatars

Whenever you’re browsing back through old sessions, sometimes it can be difficult to remember a session based just on the subject’s name. So, to make things a little more visual, Silverback automatically creates an image of the test subject to use as the avatar for each session. (Figure 17) That way, you can remember a session based simply on the subject’s face.

Apple Remote

Figure 17 A picture of the test subject is used as the avatar to assist in finding and remembering sessions.

Finally, one of my favorite features is that Silverback works with the Apple remote if your machine has one. (Figure 18) You can pause and restart the recording without having to be at the keyboard. This is a subtle but incredibly valuable feature. If you’re running a session and the subject is sitting at the computer, it can be physically awkward to get to the keyboard and press the necessarily awkward keyboard shortcut to pause or finish the session. Enabling the use of the Apple remote makes this part of the process measurably easier.

A Brave New World

Silverback is in a great place to bring usability testing to the masses. It will be possible for anyone to quickly and affordably create convincing and useful videos to help improve software. It won’t provide some of the more advanced features of a complete usability lab, but it will be more than enough for most people. All it needs to do is help designers and developers see their products through the eyes of the user, and it achieves that purpose very well. In doing so, it will expose the majority of the flaws as well as strengths.

Personally, I feel that one of the most exciting aspects of Silverback is the potential for getting increased buy-in, understanding, and involvement from executives and team members who can sometimes be too busy to attend usability sessions in person. Creating a report of the results with a word processor or slideshow just isn’t effective enough, but enabling them to watch videos of real people with real facial expressions and audio is.

Summary

Figure 18 One of the most convenient features of Silverback is the ability to use the Apple remote to play and pause a session.

Silverback will be a great addition to any web developer’s tool kit. With it’s thoughtful interface and ease of use, the team from Clearleft has a winner on their hands. It should be available to the public in the next few weeks for around $50, and it will work on both Leopard and Tiger. I can’t remember the last time I was this excited about the potential for software to really help make a difference. Nobody will have a legitimate excuse not to do at least a few sessions of usability testing, and the result will be better web sites and software for everyone.

Congratulations and thanks to the team involved with bringing such a great product to life.

• Andy Budd, Concept Creation and Wireframes
• Sophie Barrett, Project Management
• Jon Hicks, Logo and UI Design
• Paul Annett, Quality Assurance
• Martin Redington, Development