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.