Following Instructions

Following instructions is a big part of life. Most of the interfaces we use are easy enough to figure out; even this faucet, which favors form over function, only took me a few seconds of experimentation.

Since it’s mostly used by adults for a brief hand-washing, it doesn’t need a red “hot” knob and a blue “cold” knob. The only affordance is the stick coming out of the top, so you just wiggle that until water comes out of the faucet. 

Doors are also generally well-suited for their purpose. A user simply has to unlatch them with a knob or a handle or a bar, and then either push or pull them. The only time we might need to be instructed in their use is if the door itself is malfunctioning. I recently saw such a door- the bar had some kind of problem and could only be pushed at the mid-point. If a user pushed it anywhere else, it would jam. There was an earnest homegrown attempt to instruct users through color and text.

I stood to one side and watched as three people in a row pushed on the red part of the bar and jammed the door. What’s the problem?

The main issue is the large text, “Press to Exit”. This is a bright signal, and it confirms our understanding of the operation of the bar-latch door design; push on the bar. Since most people don’t anticipate having an issue using a door, it’s likely that they scan the sign and simply do what they think they’re supposed to do; push the bar anywhere. They’re leaving a facility, so it’s a transitional time that is probably occupying their thoughts and there’s not much at all to spare for low-risk issues like potentially pushing the wrong part of the bar. 

Since the bar is the affordance that we want them to focus on, I would have put a very simple message there. I’d also dump the red tape- colorblind visitors won’t benefit from it, and it’s just noise to those with normal vision. Here’s what I would have done.

The green tape is just bright enough to co-opt attention, and the message is simple and located exactly where the action needs to take place. 

Design improvements like this are not earth-shaking, especially given the low risk associated with failing to follow the instructions. However, identifying error-prone conditions and addressing them regardless of risk is crucial for building trust in any interface.

The UI of Comedy

Jerry Seinfeld is a master of stand-up comedy. Many people think they’re funny, but to make a career of it is a lot of work. As Seinfeld himself says, “I’m playing a very difficult game, and if you’d like to see someone who’s very good at a difficult game, that’s what I do.”

Designing interfaces between humans and technology is also a difficult game, and there are some striking similarities between what Jerry Seinfeld does and what we do. Let’s take a look at what helps Seinfeld be as funny as he is.

He’s got a “Movie Theater” bit in which he pokes fun at the “Please pick up any trash that may be on the floor” request that sometimes plays after the credits. Essentially, his stance is that it’s part of an unspoken arrangement between us, the movie-going public, and the nameless, faceless theater owners. They overcharge us for snacks, so we get to toss the wrappers on the floor.

Here’s how you and I might deliver it.

“Movie theaters are ripping us off. We pay way too much for stuff we shouldn't even be eating. And that’s fine! We get it! But in return, when I’ve finished my soda, I’m not going to get up and find a trash can for the empty cup, because the theater owner is overcharging me and I feel like taking revenge. So, I simply drop the cup onto the floor.”

Is it funny? Meh.

Here’s how Seinfeld delivers it.

Now *that’s* funny! Why?

Because he said less words and added a few simple gestures that most of us “get” without even thinking about it. And that’s the secret- he basically offloaded details that would have required us to think by turning them into these visuals;

1. “Seated holding a cup”- In the second image above, Seinfeld has crouched down slightly and is pretending to hold something cylindrical. When we combine this visual with the movie theater context, we can quickly infer that he’s seated in a movie theater watching a movie while drinking a soda. So he doesn’t have to give us these details verbally. He can just set up the joke by saying “In return, when I am done with something”
2. “Smiling, dropping the cup on the floor”- Four words ("I open my hand") and a smile allow us to re-experience that guilty pleasure of littering in a movie theater AND feel good about “getting” the joke despite the minimal information.

OK, so he's creating a very engaging, simple experience through what is apparently a sophisticated understanding of human perception and cognition. But can we really say that Seinfeld is aware of this offloading? In 2012, he gave a fascinating interview to the New York Times in which he discussed the lengthy process of iterating a joke until it’s just right. As an example, he mentioned a joke about marriage being a game of chess played on a board that’s made of moving water with pieces that are made of smoke. He struggled with this joke for three years, until one night, he had a breakthrough.

“The breakthrough was doing this”— Seinfeld traced a square in the air with his fingers, drawing the board. “Now I can just say, ‘The board is flowing water,’ and do this, and they get it. A board that was made of flowing water was too much data. Here, I’m doing some of the work for you. So now I’m starting to get applause on it, after years of work. They don’t think about it. They just laugh.”

He simplified the interface to the joke and found success. Striving for the same thing in the UX world might not make you as rich and famous as Jerry Seinfeld, but simple, clean UIs generally result in higher success rates, more conversions, and better user engagement. And that's what we're here for.

The Mass Pike- Information Design at 70 mph

Making good decisions is harder than it sounds. In theory, we look at the options and carefully weigh the pros and cons of each before choosing the one that makes the most sense. In practice, if the sensible choice doesn’t match what our emotions are telling us, we “go with our gut”. This is code for “make a poor choice”.

Not all decisions are created equal; choosing a spouse is not the same as choosing a donut, but they all involve paying attention. Since there’s often new information involved with making a decision (otherwise you’d know what to do without thinking about it), we have to pay attention to that new information so that we can evaluate its impact on the choice before us. Decision support tools are at their best when they feed us new information carefully through attention management. Too much new information can be overwhelming, and this can cause us to make emotional decisions rather than logical ones.

I drive on the Massachusetts Turnpike almost every day. It’s a toll road; when you drive onto “the Pike” you take a ticket, and when you get off you have to pay a fee based on how far you traveled. There are also two large plazas on the eastern section of the Pike that are not associated with getting on or off, they are mainly for suburban commuters getting in and out of Boston. These are called “toll plazas”. It used to be common to see confused drivers at the Toll Plazas gazing at the signs while trying to decide which lane to use. It’s been many months since I last saw someone trying to back out of the wrong lane.

Why?

Two things; first, they reduced the number of choices from five (seen in the image at left) to two;

1. EZPass (electronic payment via transponder)
2. Cash Only

Fewer choices make decision making easier because there’s less information to actively think about. The Massachusetts Turnpike Authority also improved the signage before the tolls to pre-load the decision-making process. Driving a car is not exactly challenging for most people, but it does require sustained attention to the road and traffic. Good information design should be able to support a driver even at 70 mph and help them to make the decision long before they actually reach the toll plaza. Let’s take a look at the signs on the Pike to see how well they manage our attention.

About two miles from the toll plaza, a small yellow sign is seen. It has only two pieces of information on it, “TOLL PLAZA” and “2 MILES”. This is ideal, because consumers of this information are traveling at high speed. They can take their attention safely away from the road for a second or two at most. They can’t attend to more than a little bit of novel information, so it needs to be easy to read and understand, like this sign. Only one of the pieces of information is likely to be unfamiliar to some drivers (“TOLL PLAZA”), and since it’s still two miles away, there’s time to think about what it might mean without much pressure. 

One mile later, another sign appears, much larger and with flashing lights at each corner. This has also only one new piece of information, “CAUTION”. Drivers have now been primed that there is a toll plaza coming up (whatever that is), and they should be cautious. They also know it’s about a minute or so away. So far, these two signs show good attention management.

About a half mile from the toll plaza, drivers are told that there is a choice coming up. The choices are “EZPass” or “Cash Only”, and they are presented on one sign. Even though there’s eight separate data points on this sign, we’ve already seen most of them. The only really new information is that we’re going to have to pay some money up ahead. The driver just needs to decide between “EZPass” and “Cash Only”, which can easily be processed as a choice between purple and green. Imagine how much harder it would be for drivers to process the information on this sign if they had not seen the previous two signs.

Now that the driver has made the choice, the signs guide them to the correct lane primarily through color. The signs can be split without risk to our ability to pay attention because the information is not new, only the location is. The driver does not need to read the text; they just need to align themselves under the correct sign.

By the time the driver reaches the toll plaza, they are no longer making a choice; they are simply acting on an earlier choice and using the subtle cues that they have been carefully fed to get through the toll plaza without incident.





By directing driver attention to the right signal at the right time, the information designers have enabled drivers to make a decision within the context of an attention-heavy task. It’s impressive, and even more importantly, it’s effective; I can’t remember the last time I saw a driver trying to reverse out of an EZPass lane to avoid the $50 penalty.

Bad Apple

I love my iPhone, and I think that Apple really knows how to connect with consumers. They impress me with the way they often anticipate my needs, and with the high level of intuition that characterizes many of their interfaces. So, on the rare occasion that I come across a design flaw in an Apple product, I see it as a good learning opportunity because if Apple fell prey to it, it’s likely I will too.

I mostly use my iPhone for texting and phone calls. Emails next, then apps. I very rarely play games, watch videos, or listen to music. A little googling told me that many people report that they also use their iPhones for communications first, entertainment second.



Even more important than my usage habits is my behavior. I actually answer most incoming calls. To do this, I “slide to answer” by running my thumb from left to right. This unlocks the iPhone and answers the call. This is my mental model for "taking a call", honed over years of iPhone use.



When I am done, the “slide to answer” strip has been replaced by a red “End” strip that I tap to end the call. Simple.



If I’m using the iPhone for something else when the call comes in I’ll see a red “Decline” button at bottom left and a green “Answer” button at bottom right. Also simple. There's no need to "slide to answer" because the phone is unlocked.

So what's the problem? Like I mentioned, I also use my phone for texting and email. When I'm done, I don't lock the phone, I simply put the phone in my pocket because I know it will eventually lock itself. If a call comes in before the phone locks however, I run afoul of a fatal design flaw in which the interface not only fails to support me, it actually accomplishes the opposite of my goal.

In this case, I have left the mental model of "using an active, unlocked phone" behind and have switched to a "locked phone on standby in my pocket" model. When the phone rings, I employ my default “take a call” mental model and I "slide to answer" (and unlock) from left to right. But because the phone is still unlocked, the “answer call” UI has a red “decline” button where my thumb begins its “slide to answer" and I lose the incoming call.

In other words, I have an existing mental model that is very strong and very effective for the most common use case, which (for me) is answering a call on a locked iPhone. The problem is that I cannot easily interrupt this model when I realize it is the wrong response because it consists of a series of actions that have blended into one single routine. So even though when answering a call on an unlocked iPhone I sometimes have time to notice that the "Decline" button is visible rather than the "slide to open" affordance, it's too late. I click the "Decline" button when what I really wanted to do was take the call. Now I'm in recovery mode and I'm mad at Apple because they did not follow through with the mental model that they asked me to create in the first place.

Apple's Human Interface Guidelines is a classic, and is followed by many designers. The Apple standard for action buttons is to place the primary action to the right of the secondary, which is the opposite of Windows. In most cases, it makes sense to follow the standard. In this case, it could be argued that a departure from the standard is justified. For me, this was the most important lesson of the experience; let the use case drive the interaction, not the standards.

Apple designers, if you are reading this, please reverse the order of the buttons to support the most common use case, answering a call. I will use the "hush" button to decline calls. There may be an even better design solution out there, but for now this will support me just fine.

National School Bus Glossy Yellow

In a previous post, I discussed the importance of reserving the brightest signal in your interface for the most common task. Look at the iPhone; there are four mechanical controls (on, wake/sleep, silence, volume up/down). Three are located on the edges of the device, with only the "on" button found on the face.


Given that the face of the iPhone is a smooth piece of black glass, the "on" button is the brightest signal (at least until it has fulfilled its purpose), which is exactly what you would expect. What makes it especially effective is that the location is within easy reach of the holder’s thumb, and I will even suggest that for the holder, the location actually makes sense; they would have been looking for the button to be located here even if it was actually somewhere else. For Apple designers to have chosen any other location would have been counter-intuitive.
So what they did, I imagine, is look for the brightest signal location within the basic design prior to having added any controls. When held in one hand, the face of the iPhone is accessible only by the thumb. Pushing a button on the bottom of the iPhone face is a comfortable motion. Once they had identified that location, they placed the most commonly-used control there.

Where else might we look for examples of this "signal location effect"?

Take a look at this picture; what types of vehicles can you see?

If you’re American or Canadian, you were probably able to identify a school bus. For those who are unfamiliar with the North American school bus, it’s the long yellow-orange (the official color name is National School Bus Glossy Yellow) bus in the middle distance. It’s a “Type C”, which is the most common of the four styles. There are five manufacturers of Type C school buses, and they all follow a rigid set of design standards; in other words, they all look very similar and are unlikely to be mistaken for anything else. Many of you identified the school bus in the photo above even though quite a bit of it is obscured.



Here’s another view of a school bus, a Type A. The brightest signal is the words “SCHOOL BUS” at the top center. What makes them bright? Mostly these contrast effects-
Size- They are the largest letters
Case- "All caps" carries a connotation of importance
Location- Right in the middle of the top zone.

So what’s the problem? Redundancy. Most drivers already know this is a school bus, in fact we could identify one of these by shape, color or size. Why is redundancy a problem in this case? Because if you read the back of a school bus, you’ll see at least three other pieces of information that are actually quite important. They are safety-related, and violating them could cause injury and/or a hefty fine to the violator. And the bright signal of the "SCHOOL BUS" sign co-opts driver attention and overwhelms these other pieces of information.

Take a look at this one. You should be able to see the following items that drivers need to be aware of;


· Unlawful to pass info ($250 fine AND license suspension for first offense, up to $1,000 fine in California)
· Railroad crossing info
· Stay back 100 feet

Each of these is more important to drivers than the SCHOOL BUS sign. We know it’s a school bus; we may not be familiar with these other critical safety instructions. To complicate matters, these safety instructions have been formatted poorly. They are harder to read than they need to be because they are not in sentence case. Using all capital letters robs us of our ability recognize whole words when reading and can force us to decode each word a letter at a time. Even worse, the "Unlawful to pass" sign is not placed in proximity to the lights that will actually be flashing. And when the lights flash, they carry their own brightness that will draw attention away from the signage that tells drivers what to do.


The following items are also important, and equally muted in the face of the bright SCHOOL BUS signal.
· Emergency door
· The brake and indicator lights
· The bus number, MS159
· The license plate

Here’s a possible redesign. The brightest signal location, the top-center spot, has been reserved for the most important piece of information; Do not pass when lights are flashing. An added bonus is that the lights that will flash are on either side of the signage, which satisfies our grouping instinct and simply makes sense. The “Stay back” information has been placed where it will have greatest impact, at eye level with drivers who are directly behind it and need to stay back.

And, for little kids who may be walking to the bus and are unsure, I have placed the “School Bus” sign at their eye level.

When designing an interface, look for an existing signal location and build from there. The design will come together more logically and will support the task more effectively.

Reassuring the participant(s)

I recently visited a large financial institution in Toronto to conduct some field research with their Fraud Management team. It's a pretty serious environment, with almost no privacy for the agents; low cube walls and constant monitoring of their activities either visually or through listening to their phone calls. No cell phones are allowed, and there is a "clean desk" policy that means the work environment is predictable and impersonal.

So, when I was led to a block of Loss Prevention Agents by their manager, they looked somewhat alarmed. I found out later that it's business-only with the managers, and the agents did not know what to expect when I approached. They certainly didn't think it would be a potentially-welcome break from the routine. I knew my first task was to put them at ease in order to gather usable results.

What did I do? I smiled (always a good start) and said "Don't worry, nobody is in trouble, I'm only here to see how you guys are using our product. You can't give me a right answer or a wrong answer, I'm just interested in what you normally do in the course of a regular work day."

I could see them relax, glance at each other and smile, and then go back to work. It's always part of our protocol to reassure individual participants, but this was the first time I had to reassure an entire group!

A bag with that?

I've always been highly susceptible to subtle visual and aural cues that guide behavior. At a self-checkout earlier this evening, I zipped through the "Pay Now" stuff and was about to leave when I heard an electronic voice say "Please remember to take your bags". The command came as I was retrieving my receipt, so my attention was elsewhere. Instinctively, I pawed open one of the plastic bags. Now, I was buying a gallon of paint and had no conscious intention of putting it in a bag. It has a handle already. I caught myself as I was lifting the can, and realized that it was the use of the word "bag" that had got me. I left the store without another bag to stuff in the kitchen drawer.

Now if the voice had said something like "Please remember to take your purchases", I would have been fine. If I was buying items too numerous to carry, I would have taken a bag through necessity. There must be some reason that the designers of the self-checkout chose the word "bag" though...right? Why are they trying to get us to take the bags?

My vote is for the advertising provided by the bag. Frequent shoppers, such as homeowners and/or parents, may have mental shopping lists represented in long-term memory by a store name or logo. Seeing the logo on a bag could easily bring the latent need to the surface and generate a shopping trip, and a few more bags.