Prototyping Interaction with Video Scenarios

At the Seattle Make-a-Thon on Saturday, November 6—a collaboration between IxDA Seattle, AIGA Seattle, and Interact—Aaron Rincover and I presented a two-hour workshop about how to prototype and communicate interaction ideas using video scenarios.

In our daily work as user experience designers, capturing the nuances of myriad types of interaction has become core to many of our client deliverables. This isn't something that is going to change. Different modes of user input will increase as more sensors and types of data become available. So the medium of video is perfect to capture, communicate, and iterate these multiple types of interaction.

We've been creating moving pictures for over 100 years to captivate people through storytelling. Filmmaking is not as old as drawing pictures, but it is consuming more and more of our attention. Today, video still reigns as the entertainment option most trafficked and enjoyed online; in Wired Magazine's September issue, Cisco estimated that 51% of all traffic on the Internet is from streaming video.

There's another story lurking behind that statistic as well. The Internet is bleeding pervasively into our world of devices, and what we consume from it best reflects how we view reality: in motion. Considering how much time we spend viewing video, it's surprising how little time we spend as interaction designers wielding video as a tool for communicating complex design ideas.

In the world of wireframes and user flows, we've borrowed heavily from the world of sequential art to imply how an interface should behave over time. But the gaps between those screens are where key details fall through the cracks and become blood in the gutter (to borrow Scott McCloud's phrase). We miss important opportunities to improve how our designs behave in everyday use. And, even more importantly, we don't get a chance to visualize exactly how our users are using them. Motion, sound, haptic feedback, issues of accessibility, and more novel methods of input and output can barely be described via wireframe. This is the new reality that we need to design for, especially as we move from designing applications for devices to designing services that will be used across any kind of device and beyond. Otherwise, we are just "dancing about architecture."

Enter prototyping from stage left. Prototyping has become quite popular in the interaction design community as a way to combat this "death by 1,000 wireframes." I'm a big proponent of it in my work. With a new wave of software tools at our disposal, we can render and iterate draft concepts about how the products we've envisioned should behave. We can use paper and pencil, PowerPoint, Keynote, HTML, Axure, Fireworks, and a range of other tools that are covered quite aptly in Todd Zaki Warfel's Prototyping: A Practicioner's Guide.

But are few words about how video is part of that toolset. Video scenarios are a genre that can incorporate the output of all the tools listed above. They can incorporate everything from paper and pencil to printed and designed screens to high-fidelity motion graphics created in AfterEffects or Flash. They can communicate gestural design ideas in a manner that justifies the time and energy required to build the appropriate fidelity of prototype for more novel interactions.

A video scenario isn't interactive, and it takes time to massage video into clickable prototypes. You can't formally test a video scenario for usability. But you can test assumptions, fit, context of use, and intangible factors like desirability. And video scenarios can be created with existing tools that you have on your mobile device, in your digital camera, or from screen captures on your computer screen. And editing software is often free or easy to acquire.

 

Focusing on video scenarios at a low level of fidelity

Our workshop was specifically focused on creating low-fidelity video scenarios, intentionally fast and disposable. We gave participants a challenge where they had to show how a teleportation system worked that required gestural input to start transport. We dubbed this "mission-critical UX," as if you gave the wrong destination to the teleporter, you may end up in the Antarctic or inside a mountain!

One important learning that Aaron and I had over the course of building this workshop was that when working at a low level of fidelity, video scenarios serve as a method not of prototyping, but of capturing a particular state of a design prototype. Throughout the workshop, we underscored the importance of focusing on the shoot as a way to focus on the interaction and ensure that it best described how a task should be fulfilled in an optimal manner. Otherwise, they may end up prototyping the video as an artifact more than their interaction ideas.

Also, we made the participants focus on planning and proving out details as much as possible before doing the final shoot. Since video is a time-based medium, editing and tweaking footage can be more time-consuming than the shoot if you don't capture exactly what you want in camera with each take. So, through our workshop, we advocated editing every take in camera, throwing out what didn't work, trimming each clip to what they needed before moving into the editing suite, and planning every shot on paper and in camera (not being captured) before the actual shoot.

This sounds like a ton of work, but workshop participants planned, designed, shot, and edited a 30- to 60-second video scenario in approximately an hour and twenty minutes. Working with Flip cameras that had been donated by Cisco Systems, many of them finished early and had time to reshoot takes or re-craft UI moments they weren't entirely satisfied with.

 

Video scenarios as tool for stakeholder and customers

Video scenarios can provide design teams and key stakeholders with a vision of how a set of design solutions should ideally behave. If properly crafted, it can also embody how an organization should characterize the personas or target segments they're reaching through their products and services. In some cases, great video scenarios are often deployed by companies not just as advertising and marketing, but as a way that their customers can most quickly learn how to use new features or services.

With such a number of uses for video scenarios, you can see why they can be a powerful tool in a designer's arsenal. When you're dealing with interactions that go beyond the interface, you may need them at some point in the design and delivery process.

 

Some interesting examples of low-fidelity video scenarios

When looking at prototyping applications in a low-fidelity manner (i.e. with paper and pencil), speeding up or ducking frames out of a continuous video capture can describe application functionality in a compelling manner. This scenario by Alex Tsayun describes how a mind-mapping iPad application could work:

 

Aaron uncovered this fun video by Pol Pla that shows a low-fidelity prototype for "networked tangible play objects," and describes how they can be utilized as part of a game. This is a strong example of how video scenarios can capture context of use:

SoTo (Social Toys) : Networked Tangible Play Objects from Pol Pla on Vimeo.

 

Phil Van Allen came to speak at frog design Seattle earlier this year, and he shared this work with students Jonathan Jarvis and Parker Kunci, where he used video to capture how different kinds of tangible objects suggest on-screen interactions. He's posted a video for download at http://www.philvanallen.com/news/object-screen-simulations/.

Comments

[Rachel]

Hi Dave:

Here is our video http://www.youtube.com/watch?v=87GygfHnWyI