Design Your Website Like A Trash Can

This kind of trash can, specifically

You’ve all seen these. On first inspection they’re nothing special. But whoever designed them did so very carefully.

First let’s consider the goal of the designer: to get people to properly sort their waste into three separate categories. Approached with a problem like this, many web designers would resort to a paragraph of text explaining what to do:

Trash Can Instructions  
Copyright (C) 2012 Herp Derp, UX Expert

1. Inspect the type of trash that you are trying to throw away.

2. If you have a bottle, please place it into the receptacle on the right.

3. If you have paper, please place it into the receptacle on the right.

4. All other forms of waste may be placed into the receptacle in the center.

This doesn’t work in trash can design or web design for obvious reasons. No one wants to read a manual before throwing their trash away, and no one wants to read a manual before posting to their blog, checking their email or any of the other things we do on the internet every day.

The next logical step is then to put little symbols on each receptacle to tell people what they should do without resorting to a paragraph of text. So you put a paper icon on the paper receptacle, an image of a bottle on the plastic/glass receptacle and come up with some smart little doohickey for the trash symbol.

This is pretty good. But people are lazy and busy. Many of them won’t bother to try to figure out the symbols, and even if they do they might not heed them. And this is where a trash can design goes from being good to being great:

They put physical constraints on each receptacle to match the possible actions that can be performed on it.

Have a bottle? Well the path of least resistance, that requires the least amount of thinking is put that bottle into that nice round slot on the left.

Have a piece of paper? You’re covered. Slide that paper into the flat rectangular slot on right. It feels so nice and easy!

But we haven’t even gotten to the best part about this design. It’s obvious that whoever came up with this wanted people to recycle more. So not only did they make it instinctual to tell which receptacle takes what kind of trash, they also made it harder to just throw everything into the main garbage can. If you look closely you’ll see that main trash can is the ONLY one that requires you to pull it open before you can put anything in there. That way it’s much easier to recycle than it is to throw everything away, but it’s not so hard that you’ll stick things into the recycling that shouldn’t be there.

Ok so how does this translate into web design? Well let’s take a look at an example form that asks you to enter your phone number:

I see this all the time when signing up for sites. When I read something like this, as a user, a bunch of things pop into my head. Do they need an area code? Do they want spaces? Do they want dashes?

The longer I take to think about these things, the less likely I am to complete the form and sign up, and the less likely you are to get me to pay you money. Let’s see how physical constraints take away these questions:

This answers all of my questions without evening answering them. I know they want an area code, and they’ve already added the dash for me so I don’t have to think about it. This type of thing is so simple and easy, but applied on a broad scale to an entire website can make a world of difference in terms of usablity and user experience. 

So next time you’re designing a website think to yourself, “if this were a trash can, how would it look?”

If you’ve read this far you should probably follow me on Twitter.