Wednesday, December 7, 2011

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.

Thursday, October 27, 2011

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!

Tuesday, October 11, 2011

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.

Friday, April 29, 2011

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.

Friday, March 11, 2011

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.