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.

Conflict of Interest- Chairs

I was working at my desk yesterday when I realized it was almost 1:00PM. It occured to me that I should eat lunch...I was actually hungry. Then it occurred to me that even though I often get hungry before 1:00PM, I rarely eat lunch until later.

I began to wonder why I was reluctant to eat lunch; OK, so my usual fare (King Oscar sardines, Wasa crackers, apple, water) is nothing to be eager about, but why would I be avoiding it?

So, I went down to the cafeteria, grabbed a couple of napkins (the sardines are in oil), and picked a table. As I sat down, my calves banged painfully into a horizontal metal rod that spans the two front legs of the chair. Was this what made me reluctanct to eat lunch?


While pondering that, I began to think about why the cafeteria is full of uncomfortable chairs. Maybe the Cafeteria Management prefers chairs that employees don't want to spend a long time sitting in? Does that make them last longer?

Most likely, the Facilities Department simply required inexpensive, durable chairs that are stackable. The chairs certainly fulfill those requirements, but I imagine that there were several options. I checked, and there is indeed a version of the same chair that has the support rod spanning the back legs.

When designing, developing, or selecting something that others are going to use, run a pilot test first. Even two or three users can save you from expensive re-work. I recently deployed a 32-question survey; a pilot user caught a subtle issue that would have compromised several of the questions and prevented me from making some interesting correlations. I've been including pilot tests for years in my work, but there are times when I am tempted to skip it. Make sure to include this step in your plans; a little work now can save you a lot of regret later.

Big Signal for Common Tasks

The power of visual cues to guide user behavior is well known- size and color, for example, are often employed in various interfaces to call attention to the affordance that most users will be looking for most of the time. Large green “Start” buttons on copiers make them easy to use because the most common task is initiated by the most obvious control. The depth of this connection is always impressive when seen in action.

In an effort to relieve my five year-old’s cabin fever, I asked him to come outside with me to fill up the windshield washer reservoir in my car. It’s a brand new sedan, with a complex engine compartment.





I showed him the windshield washer fluid first, and then I opened the hood and said “Where do you think it goes?”

With less than a half-second’s consideration, almost instantly, he pointed at the lid to the reservoir.

“Why do you think it goes there?” I asked.
“Because it’s the same color as the washer stuff”.

The conscious design choice of the blue color for the lid of the reservoir acts pre-attentively to associate the object with the “washer stuff”, which is in the “locus of attention” (see Jef Raskin for more). Almost everything else in the engine compartment is either black or unfinished metal. Even before working memory can process the query and engage in problem-solving, there is a bias towards the large blue “cap”-object.

So, the motorist is happy because they will almost certainly succeed in their task with little to no effort. The designers applied an appropriate signal to the affordance that will be most frequently used. Other preliminary tasks, like opening the bottle of washer fluid and poking at the foil cover, can actually be more challenging than figuring out where to pour the stuff.

We’ve seen that the brightest signal will co-opt our attentional faculty. There will be a bias towards that signal that will require effort for the user to overcome. Violating that expectation through using a color other than blue for either the reservoir cap OR the fluid will impact the user's experience. Predicting and accounting for this behavior is an important part of user-centered design.