It is often thought that usability negates the visual component of a website, or at least supercedes it as a priority. Not so. The look and feel of a site is integral to usability because it is key to the user experience. Some websites neglect this to such an extent that users would rather abandon the site than be forced to use it. In this two part post we will look at factors such as: design elements, navigation and accessibility.

Modern vs. Old Design

When we look at the definition we gave for website usability in the first post, we recall that it is the level of ease and satisfaction that a user experiences. The visual design of a site will most certainly be responsible for a big part of that.

Let's consider a trip to the grocery store. Two cans for different brands stand next to each other on a shelf. The one is colourful, modern and stylish; the other has a plain old label that looks like it was designed back in the 80's. Which one are you most likely to choose?

People tend to like nice looking things. Would the Apple product range be half as successful if it wasn't for their visual appeal? Why should a website be any different?

What some companies do not understand is that a website is like a sales representative. No company would put a sales rep who does not present themselves according to the brand image in the field. It's therefore not only in the interest of usability, but also of ROI, for your design to be pleasing and up-to-date.

Examples of old design:

Examples of modern design:

Clearly Identify Clickable Elements

Because website visitors are often task driven, it must be highly frustrating when there is no clear path to performing a desired action. It is for this reason that your text links must be clearly identifiable. Calls to action in the form of images or buttons as well as any other navigational aids need to be blatantly obvious to ensure that users can make their way around your site intuitively.

Best practice regarding hyper links dictate that they should be coloured and underlined, unless something different fits within the design of the site, in which case it should be made perfectly clear to the visitor where the links are.

Clutter

One of my favourite design elements (that became popular with the Web 2.0 revolution) was the introduction of ample white space in design. No more did my eyes have to strain to try and separate content. An example of how white space improves a design can be found in the way that News24 and the BBC redesigned their sites to make them more user friendly and easier on the eye. Compare this with the current version of IOL's site and you will see that on the latter it is quite difficult to read or scan for content.

Here are some good resources to help you on your way to making your website design usable:

• http://www.alistapart.com/articles/whitespace/
• http://webdesigntuts.com/web-design/using-white-space-effectively-in-web-design/
• http://www.usabilitypost.com/2008/12/11/take-a-step-back-to-see-the-big-picture/
• http://www.useit.com/alertbox/20040510.html

That is all we have space for this week. Look out next week for part two of this post in which I will cover navigation and accessibility factors.

Also Check Out

• Minimalism in Web Design
• Website Usability: An Introduction