Thursday, September 16, 2010

Everything In Its Place

I talk to a lot of designers. We’re all different kinds of designers: visual, interaction, user experience, information, blah blah blah, but many of us take the same things for granted. Because of this, designers will probably be bored to tears by this post, while non-designers may learn something that can make it much easier to build products that people can use.

But first, a story. A designer friend of mine had a baby. She asked her husband to put up a note asking people to please not ring the doorbell, since the baby was sleeping. Later, after somebody rang the doorbell and the baby woke up and she was contemplating divorce, she wondered why her husband hadn’t put up the damn note like she had asked.

The thing is, he HAD put up the note. He had put it right on the door at eye level so anybody could see it. What he hadn’t done was associated the call to action with the actual action.

What the hell does that mean? 

A big part of any user experience design is figuring out where to put stuff. This may sound obvious, but it’s best to put stuff where people are most likely to use it. That means associating calls to action with the thing that is being acted upon.

Here’s an example you may have considered. Where do you put a buy button on a page? Well, when a user is trying to decide whether or not to buy something, which pieces of information is the user most likely to need? He definitely needs to know how much he’s paying for the item. He might need pictures of the item. He almost certainly needs to know the name of the item and perhaps a short description.

Considering those needs, the Buy button should probably go near those things on the page. It should even go in a defined visual area with just those things. Here’s the hard part: it needs to go near those things EVEN IF IT LOOKS BETTER SOMEPLACE ELSE.

What's with all the screaming?

I’m all for having a nice visual design. I believe that a page should be balanced and pretty and have a reasonable amount of white space and all that. But if one element of your gorgeous visual design has separated your Buy button from the information that your user needs in order to decide to buy, then your gorgeous visual design is costing you more money than you think.

This isn’t just true for Buy buttons; it’s true any time the user has to make a decision. The call to action to make the decision must be visually associated with any information that the user needs to make that decision. Additionally, any information that is NOT related to the decision should be visually separate.

This also applies to things that aren't calls to action, of course. Related information should all be grouped together while unrelated information should be somewhere else. It's just that simple. Oh, and bonus points if you keep all similar items in the same place on every screen of your product so people always know where to look.

So, where should my friend’s husband have put the note? He should have put it within inches of the doorbell itself. Why? Because the decision the user was making was whether or not to ring the doorbell. The husband needed to put the information about the sleeping baby right at the point where the user was making the decision, not in a completely different part of the interface (the door) where the user might or might not even notice it.

The next time you're deciding where something goes, remember, this strategy is not only important for creating a usable product, it just might save your marriage!

Like the post? I'm a veritable font of useful information, I swear. Follow me on Twitter!