UX Design, Role-playing & Micromoments

Originally published at uxmas.com on December 24, 2012.

Want to see just how inhumane most of our web apps and sites are?

Imagine those web apps and sites as human beings with whom you are trying to have a civil conversation. You’ll find that most of them are rather… inhumane!

Here’s a recent “conversation” I had while submitting a workshop proposal to a conference web site:

Form: “Expected number of attendees:”

Me: Hmm… “about two dozen?” (note: the form field was about 20 characters wide)

Form: ERROR: RESPONSE MUST BE A NUMBER!

Me: OK… “20-30”

Form: ERROR: RESPONSE MUST BE A NUMBER!

Me: Uhm, those are numbers… I guess a range isn’t acceptable. Heck, I don’t know “24?”

Form: ERROR: RESPONSE MUST BE A NUMBER!

Me: {Glaring} “24”

And that was just one form field!

Had this been a real conversation between two people, the “device” in this case would have been a lot more forgiving, and accepted my first response. Or, were this not possible, he or she would have been clearer with me about what an appropriate response was. And if I’d struggled to answer such a simple question, there would have been some consolation at the end.

In “the real world,” most of us are pretty good conversationalists—we should be, having had at least a few decades of practice!

But what of these online conversations?

Role Playing the Browser

The good interaction designers I’ve spoken with always “rehearse” the UI conversation, if only in their heads.

Which got me thinking… why not make this exercise an explicit one, involving others? Throw in a nice prop (in the form of a life-sized browser chrome) and use an existing page as the “script.” Here’s an example of what I mean:

Stop! Don’t continue reading until you’ve watched the video. Seriously. Note you can read a full transcript of the video here.

OK. Seen the video? Carry on…

This is a rather simple exercise, but it can be profoundly illuminating. Here’s what to do:

1. Using a projector, put the screen being evaluated onto the wall, for all to see. Two people “role play” the interaction, while a third person takes detailed notes (trust me, this exercise will surface many surprising nuances).
2. The first person—the “user”—thinks aloud as they try to interact with this page. Note: form pages work best with this exercise, but just about any page can make a good candidate.
3. A second person plays the role of the page. Their dialogue is limited to what is on the screen, although they are free to embellish the delivery of their otherwise scripted lines. And don’t forget to create a nice browser prop—gray foam board, a little white tape, a Sharpie marker, and some small round sticker labels are all it takes to help someone get “in character.”

While this may sound kind of silly, this is precisely the activity I’ve used—quite successfully—with clients to make it painfully obvious just how, well, painful their online experiences are. Needless to say, there is some amount of shame involved. Most pages don’t hold up so well to this kind of evaluation.

But there’s something else neat about this exercise: it surfaces the nuanced details that can make or break an experience.

Conversational Details

Good interaction design is about attending to every moment that passes between a person and the device (or system, or service) with which he or she is interacting. These moments can be explicit, as with gestures, taps, a button-click, or the completion of a form field. Or, these moments may be more elusive, such as a pause while you try and understand what is being asked of you or how to answer. It’s these internal conversations that users have at any given moment that often get overlooked.

In practice, it’s more common for designers to focus on UI elements, the information being asked for, or the content being published to the page. We often lose sight of the conversation—the “volley” if you will—between person and device. Consider the following example.

At first glance, this page doesn’t seem all that bad. There are some nice icons, a header, and a big call to action button. But wait…

Why am I here? What is expected of me? Am I here to sign in, or complete my account? And if I’m not signed in, why do I have the option to change settings or view my bookings? And what about that first line, “We are currently searching for…”

As it turns out, the “Complete your account” button takes the user to a “sign in” page with the familiar username/password combo. Given this was the case, that sidebar information is pretty irrelevant (why show me what I can’t access?!). And that “We are currently searching for bookings…” line is just a distraction—kind of like the person talking at you while you’re trying to fill out a paper form. You can imagine the conversational trainwreck this page would be! There’s a lot of shouting going on, and no clear question being asked.

So how should we redesign this page to address these issues? Well, a simple login screen, with a welcoming message (since this is the first time for someone to visit this page) would probably suffice.

Designing for Micromoments

I’m rather fond of the dating analogy—a good experience is a seductive one. Think of the conversation that happens between two people on a first date. Think of how carefully words are chosen, or how a good conversation is about more than the words. Timing and phrasing are critical—one slip of the tongue or an awkward moment and everything can unravel!

What if we applied this same level of care to the interactions we script when we design a screen? How much better might the resulting digital experience be?

In the same way that we already design for activities, tasks, screens, and states, I’d like to propose a finer level of granularity for our designs: micromoments. A micromoment is the word I use to describe each discrete moment in the interaction when a person might pause, advance, or stop—whether filling out an online form or engaged in conversation. Bill Scott talks about the 96 “interesting moments” associated with a simple drag-and-drop feature. Joshua Porter has written about using microcopy to make confusing forms much clearer. Alan Cooper wrote many years ago about polite software.

Selection-dependent inputs, inline contextual actions, primary and secondary navigation, and other kinds of progressive disclosure (or prioritization)… these are all fairly common practices now. Numerous studies have shown how a simple button label change can make a huge difference to click through and conversation rates. Nothing I’m describing here is novel or new—so, why is this still a struggle for many of the designs we encounter?

Magicians must attend to every detail, or else the illusion they work to create will fail. In a similar way, filmmakers, lawyers, politicians, and other professions attend to every detail, lest their efforts fall apart. How can we ground our work as designers in a way that we don’t lose sight of the critical, nuanced details? For me, thinking of interactions as conversations has proven to be a great metaphor.

Interaction design is a conversation between a human (you!) and the system. This is true whether you are conversing with an online catalogue, or with other people via technology. Why not treat our interactions as proper conversations? Rehearse them the way you would rehearse a theatrical production—get up out of your seat, get others out of their seats, and step through every little detail. You’ll be surprised by what you discover.

And that is my Christmas gift to you—the single best exercise I know of for crafting a better user experience.

Enjoy!