The Road Less Driven
Interaction'09 | Day 1: Please Confirm or Deny Your Involvement

Doing the UI Pantomime

Unifi In Progress User Flow

In my last 80 Works class, I asked the talented designer Scott Scheff to come as a guest. He brought a great exercise that has a lot of practical application for a group of designers looking to explore the nooks and crannies of an interface. Scott dubbed the exercise the "UI Pantomime," and it is a twist on a few of IDEO's role-playing methods.

The students were tasked with helping create the in-store experience for a "record store of the future" called Unifi. At this store, you could use an iPhone application as an adjunct to the shopping experience. The app would add the following to your retail browsing experience:

1. When looking at a CD, you could sample audio from the CD's tracks
2. When you purchased a CD in the store, you would automatically get MP3s of the CD tracks downloaded to your device
3. The application would also prompt you with related artists and featured artists (this week: Wilco)

After the students were briefed, we set them loose with about 30 minutes to work through the details of the interface through "UI Pantomime".

Here's how the exercise played out:

First 5-10 minutes: The students chose roles. One was the shopper entering the store. She held an eraser, which was a stand in for an iPhone. A second student played the interface of the iPhone app and had to act out what was happening within the interface. The shopper and the app then worked through the use cases we'd provided, while another student was responsible for documenting a rough user flow and UI ideas based on the conversation between the phone and the shopper.

Second 5-10 minutes: All the students stopped role playing/documenting the action and examined the user flow and user interface sketches, making refinements to screens based on the varying perceptions of each student.

Third 5-10 minutes: The students playing the shopper and the iPhone interface attempt to follow the user flow/UI sketches as documented. The third student observed the tension between the real-world interaction and the documented flow and recorded any new screens/areas that emerged.

Fourth 5-10 minutes: The students debrief and revise the flow and screens.

If this was an at-work exercise, this iterative cycle could continue until the final "performance" felt complete.

When watching the students work through this exercise, there were a number of aha! moments for all of us.

Working out user flows and UI designs on paper is never a substitute for living through one. When creating a user flow and UI, it's fairly easy to document and improve upon what already exists. But if you're making a Web app or site from scratch, you should try to find a way to "live through it". Acting the flow out in the physical world affords us a much wider range of observed behaviors, which helps us select the one that is most usable and human.

What may not be apparent as an issue to one designer can be immediately apparent as an issue to a group of designers. Moving from free-form improvisation to literal, documented flows causes powerful tension that immediately calls into question every detail you've documented to date. After only a minute or two of directly following along with the documented user flow and UI design, the students asking to break out of the exercise and revise the UI right on the spot. They immediately knew which details weren't right.

Great Web sites and applications require friendly dialogue. Acting out interfaces forced us to bring a conversational nature to our application design. Alan Cooper said rightly that we treat computers like people, not boxes of logic -- we expect a tiny bit of emotion to how we exchange information. One of the students joked at the start of the exercise that he didn't feel like he was acting like an interface... he was too human-sounding. I shot back that he was acting how a good interface should behave.

Give this exercise a whirl and let me know how it works for you. We'll be trying it again in our next class!

Comments

The comments to this entry are closed.