Why Do Chairs Have Four Legs? The Cornerstones of Usable Websites

Without going into great detail about the structural design or integrity of a simple chair, they have four legs because if they didn’t we would fall over. We trust in this fact everyday and when we use a chair we trust that it will not fail us, but we take this fact for granted everyday. We never think about how a chair does its job or why it has four legs, but we continue to trust in their support.

Why not three legs or even five legs? Why shouldn’t someone re-invent the chair? Its an old outdated design, isn’t it, why not modernize it? Four legs have been proven over hundreds of years to be sturdy, usable and successful; that is why designers don’t monkey around with it. So then why do we – the web designers – monkey around with what has been proven to work on the web?

A huge, gigantic, humongously important part of web design and development is usability – the ability for your users to actually use your web site. Just as chairs need four legs that make them sturdy, usable and successful, web sites also need four legs to make them sturdy, usable and successful:

• Standards
• Direction
• Affordance
• Feedback

Use Standard Elements

Blogs have archive pages, E-commerce sites have shopping carts and social networks have member logins. Standard layouts and elements determine how familiar a website is to your user. When a user hits your site for the first time, they will categorize your site very quickly based upon what features and item they see. If they see a shopping cart icon and a UPS badge they know they can buy stuff. Make sure your site has familiar, standard features that give the user clues as to what kind of site they have arrived on.

Another huge usability mistake is using cool, hip names for labels and navigation. Naming pages and elements by their simple, plain descriptions will help the user find exactly what they are looking for. If you’re using icons instead of labels, make sure they are normal recognizable symbols that anybody, even the novice web user can understand. Think about your TV remote for just a second; we all know what the “volume” button does because it clearly labeled. What if your remote didn’t use the word volume but instead used something cute like “audible intensity” or “amplification”? It would probably be somewhat confusing until you decided to buy a new remote.

Decide For Your User

Do all the hard decision making for your user, don’t give them a bunch of options. Options force decision making and website users just simply don’t have the time or the energy to make complicated decisions. Have you ever been starving and went to a restaurant that had a huge menu full of different options? What to order is a very important decision to make and the more options you have the harder it is for your stomach to decide.

Just remember that users are hungry and they have plenty of other options, so make the decision easier for them by not forcing them to make a decision at all. Present them with a clear direction, a clear call to action. Tell them what they should do, tell them where to go. If you are hungry and stumble into a Five Guys Burgers and Fries, chances are you’re walking out with a belly full of delicious hamburgers and fries.

Affordance – You Be The Teacher

Chances are most of your users are first timers, so treat them as such and teach them how to use your site by adding affordance. Affordance means adding clues for the user. Visual clues like underlined text tells the user there is a link here or forcing the cursor to be a pointer on every clickable hover state tells the user that element is clickable. These visual clues instruct the user of the purpose of any function without them having to discover anything first.

In some cases, it’s important to go the extra mile and give the user a quick tour or simple instructions on what something does. For example, if you are designing a web application that manages task, when the user first logs in, show them how to add a new task instead of giving them a big blank space where their new task should go. Be creative and find simple ways of teaching your users what to do next, but please what ever you do, don’t use that crappy Flash animated spokes person to do your teaching – try using tool tips instead.

Once you have taught your users how to use your site or application, quit teaching them. There is nothing more annoying that somebody telling you things you already know so don’t keep nagging your user.  Allow them to turn off teaching aids or magically remove them after the user logs into your site the second or third time. One more thing about affordance – never punish your user for doing something different, allow them to learn and do things the way they want to, make sure you don’t just have one way to accomplish a task.

Give Feedback

Feedback is key to the success of any user experience, make sure the user gets feedback whenever any action is accomplished. This doesn’t have to be a big extravaganza, make it simple. When a user clicks into an input field, highlight it. When a user roll over a button, change its hover state. When a users fills in a form element correctly, show them a cute little green check (or something similar).

Always use positive feedback, don’t just use bright red text that says “You messed up” when the users messes up. Instruct the user what happened and how to resolve their issue. Have you ever filled in a form element wrong and just got a red asterix next to it without any explanation? Then you stare at what you entered and it looks right so you try it again and continue to get the little demon asterix. Then you finally figure out that the site does not accept a web mail address as being valid. That happened to me the other day and it’s super frustrating.

The 404 page is a designers little secret piece of witty freedom, it’s a place where designers can make a statement and really stretch their creativity without any real consequences. But, the 404 page still needs to be informative. The 404 page is your site’s OnStar operator when your user get’s lost or crashes the site. It is great to design your 404 page fun and exciting because when someone get’s lost it’s a great idea to lighten the mood, but always make sure it offers them a solution.

Just Another Design Chore

I know, usability is just yet one more design issue you need to think about and resolve when designing a web site. It’s just another hurdle in getting your job done successfully, but it’s not a chore, its becoming a necessity. Websites are no longer just pretty web pages with some content on them, they are complicated multi-media experiences that deserve the extra thought and care in order for them to spread their wings and be successful applications.