I’m returning from a long hiatus with a new bit I call “Content Strategy in the Wild.” These posts will apply real-life examples of strategy, design and usability to our work on the web. The first one comes from a photo I took a few months ago at Austin-Bergstrom Airport.
At first glance, the design of this recycling bin is pretty straightforward.
- The traditional green and blue colors communicate that this is a recycling bin long before you are close enough to read the print.
- When you do get close enough, the labels clearly explain the types of materials you can recycle at this particular location.
- The 50/50 split between green and blue help users separate the materials between paper materials and plastic or cans.
- The specially shaped openings further reinforce this division—only flat paper materials can fit through one opening, while round cans and bottles easily fit through the other.
So far, so good.
A Quick Usability Test
But now imagine you’re eating a quick lunch at the gate before your flight. It’s almost time to board, so you look around for a trashcan. This is what you see:
The big “RECYCLE” logo is clearly visible on the side, and you think, “Yes, I should recycle this instead of throwing it in the trash.”
Above that, it clearly states “Plastic Bottles & Cans.” So you get up and take your plastic bottle over to recycle.
As you get closer, you notice the bin is clearly divided into two sections, so your bottle must go in the blue section on the left.
Now, directly in front of the bin, you reach to put your bottle in the blue section, labeled “Plastic Bottles & Cans,” but the opening is the wrong shape.
Upon closer examination, you realize the blue section is now labeled “Newspaper & Magazines Only,” with a slotted opening for paper products. The “Plastic Bottles & Cans” go in the round opening to the right, clearly labeled and colored green.
There’s a conflict between the expectations this design sets for users and the ultimate actions they are expected to take.
Now I realize this is a very minor inconvenience. It took approximately 1 millisecond to recognize what happened and move my arm 6 inches to the right. Obviously I’m not going to be so confused by this design that I just drop everything in the floor.
But it was bad enough that I noticed, and that goes completely against the point of the design.
The best designs go almost completely unnoticed. Clear labels, colors and design cues can make usability so natural that people don’t even realize they doing what the designer intended.
If the labels on the front of the bin matched those on the top, I would have walked up, thrown my bottle into the green section and gone back to my seat, without ever noticing how or why it worked.
So What Does This Have to Do with UX or Content Strategy?
Online, it’s not as easy to recognize where you are when you’re lost, and confused users are just as likely to leave as they are to hunt around on your site. Here’s how these lessons apply to your site:
This design started with the right intentions. Instead of throwing everything into a single bin that would need to be sorted later, the structure, colors and messaging create a clear line between recycling paper and recycling bottles/cans.
If your site serves more than one function, don’t muddle it all together, or you can confuse your users and cause more trouble for yourself down the line.
Think of the labels on the front of the bin as your main navigation labels. Do people have a clear idea of where they will go if they click on that link?
In this case, I thought I had a clear idea of where I was going—the blue section for plastic bottles. But that turned out to be wrong. Make sure you’re not misleading your users with vague titles, unclear SEO keywords or blatantly wrong labels.
In the case of this bin, the traditional colors and standard recycling logo make this bin immediately recognizable, while the clear delineation of green and blue gives me a hint that there may be two different sections.
How does this compare to the overall design style of your site? Do your design elements create a recognizable identity from the beginning to the end? If there are obvious distinctions in content, are they reinforced by obvious distinctions in the design? (For example, if your site has an educational area and a transactional area, can your users easily tell the difference between them?)
Calls to Action
Think of the openings in the top of the bin as your calls to action. Is it easy for your users to understand what you want them to do? More importantly, does it align with what they wanted to do in the first place? If you and your users aren’t on the same page, it doesn’t matter how easy you make it for them—they’re not going to do it.
Ultimately, this all comes back to anticipating, understanding and meeting user expectations.
In this case, the airport anticipated my needs for a recycling bin and they understood that I would react to the colors, labels and design to put my bottle in the right place. And in the end, it wasn’t a seamless transaction, but we both achieved our goals—I just had to look around for a second.
But online, it’s just as easy to click the back button or close the tab as it is to keep looking around, so make your site as user-friendly as possible.