Important Principles of Interface Design and Usability

November 12, 2008

When we design products with our clients, we seem to spend a lot of time talking about usability and intuition along with user interface aesthetics. You might be surprised at how many people focus primarily on look of their product and less on what the user is doing on the site.

My favorite example of usability gone bad is Amazon.com. Try finding your wish list or creating a new one. Try adding something to your shopping cart and then wanting to continue shopping in the same area you were at before. The only thing that says them is the usability of product search. But even then, the link to log in doesn’t even say log in. There’s simply too much focus on what they want me to do and not on what I am trying to do.

Take a look at these 3 legal Web sites quickly (10 seconds or less): Site 1, Site 2, Site 3. Waiting… Now, ask yourself, what do you remember? Don’t forget, you knew going in that they were Web sites having to do with law. I found one of these in particular that was clear and effective at communicating what was the focus of the site (do you know which one?). We often ask clients to send us links to sites they like to get a feel for their aesthetic values and design priorities. In the case of the law Web sites, the client walked in the door with one of these as an example of what they liked.

Web sites seem to be moving away from the crowded page like you might find on Amazon.com and moving toward the simple concept of “let’s get started.” This is a great trend. It worked pretty well for Google, if you compare Google to other early search engine sites.

Product interfaces should help the user answer 3 simple questions to be effective:

  1. Do I know what to do?
  2. Do I know what is going to happen when I do it?
  3. Do I like what I am looking at?

If your users are able to answer these 3 questions with a “Yes”, then you’ve done a great job. Let’s look at some examples.

Question 1: Do I know what to do?

If you compare www.avvo.com to www.nolo.com, you will see the difference between a site where the user knows what to do and a site where the user does not. Although, I think both of these sites could use a more informative name. Avvo has a search box in a prime location. The title says “Find lawyer”. I have no doubt than when I enter the name or location and click the button, I will get a list of lawyers.

Question 2: Do I know what is going to happen when I do it?

Have you ever really looked at the buttons on the Google home page under the text input field? You probably have not since hitting Enter works fine. Take a look and then ask yourself what does “I’m Feeling Lucky” mean. If you are not sure, click the button with an empty search field and you get a nice little explanation, “The “I’m Feeling LuckyTM” button automatically takes you to the first web page returned for your query.” How about naming the button something like “See first page” or “View first page found?”

Keep in mind that your users are generally trying to achieve something when using your product. They will feel more productive if they are focussed on that goal rather than clicking around to just see what happens. Use clear text for buttons that explains what will happen. Use text under icons to explain what the feature does just in case the user does not recognize the image.

Here is something you can try. Print your site, hand the copy to a friend who knows nothing about it, and ask them what the buttons do. You just may be surprised at what your friend is able infer from the image. We recommend of course that you fix anything they didn’t understand.

Question 3: Do I like what I am looking at?

Aesthetics still do matter. Function is more important. But after that, people tend to use products and Web sites that are pleasing to them in some way. I know that this is common sense. Surprisingly, from my own personal observation, companies that are really good at the first two points tend to fall down on the third. Which brings me back to our new partnership! Our teams work with clients to create intuitive work flows. And our friends at Luma are here to make sure the interface “pops”.

In addition to asking ourselves these questions, we also have some good tips to help with usability. Here are two of our best suggestions.

A great deal of research has been done with eye tracking to understand how people evaluate Web pages. Take a look at the blog by Eye Tools, Inc. The heat maps are very interesting. Another study to look at is done by the Poynter Institute in Florida. Click this link and scroll down to the section At the core: Homepage layout. We quote this information often when discussing design approaches with clients.

Eye tracking tells you where the user is most likely to look first. We suggest to clients that they put the primary focus of the page where users look first. You also use this to then determine where to put navigation, additional links, related information, etc.

We also own and reference several books by Edward R. Tufte. I recommend buying as many of these as you can, but be prepared for ideas that are part aesthetics and part design with hints of philosophy and history in between. What impressed me most was the power of data when presented in a way such that the images draw the conclusions. I am sure you will walk away with your own insights after perusing a few of his books.