ChangeOrder

Doing the UI Pantomime

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!

The Boundaries of Natural User Interfaces

A few weeks ago, I went to a talk hosted by the IxDA Seattle chapter called "Brave NUI World," hosted by the Artefact Group. At the event, some of the Microsoft Surface team showed off their technology in action and had a panel discussion about how their product's Natural User Interface (NUI) was developed within Microsoft, as well as the user experience and usability learnings they'd gleaned from the 5-year development process.

One of the things that really struck me from this entire panel was how much energy they'd invested into paring away anything that did not look and behave like a real physical object, as opposed to trying to integrate interface elements such as a scroll bar or a text input screen into the device. Everything in their NUI required physics or real-world behavior, which creates some interesting opportunities for interaction, but is also a major limiting factor for accessing any large quantity of information.

Want to see what considerations go into designing a NUI? Artefact has done a good job of videotaping the panel, which you can watch at your leisure here or view them at the original post at 720 px wide:

Another company I saw a presentation from almost two years ago was the Netherlands-based design firm Lust. They crafted a NUI for their design firm retrospective "Generation Random", which is also quite instructive to watch in action. Click in the (not very usable) nav on their site the first text link, to see a video of their first exhibit in action.