Examples of Web Usability

Monday, January 28th, 2008

It’s not uncommon for someone to have questions about web usability. It does apply to a lot of facets in web design and development. Generally speaking, the definition of web usability refers to how usable a website is to a user. Good usability would be a site that’s relatively easy to use. In this article, I’ll go over examples of web usability and how they apply to different aspects of your website.

Layout

Usability can easily be applied to a website’s layout. Examples can include your navigation’s position, your logo’s position and size, basically, how you’ve gone about tackling the website’s general look and feel. In terms of this blog, I made sure:

the content’s background color differed from the background color.
the search bar is visible and above the fold
the logo was at the top left
I used typical positioning for my navigation (top navigation and right navigation)

Contrast

Contrast can be defined as a scale of different between two or more items. Something white and something black and better contrast then something white and something gray. By making sure you have a proper contrast between different header levels, background colors, font color vs background color, etc. your website will be easier to navigate and tolerate.

Text Manipulation

Although this section borders into the realm of readability, I’ll mention it anyway. Text manipulation can include:

making sure your hyperlinks stand out, or are properly underlined.
maintaining high contrast between your background and your text color.
ensuring that important text gets a header size of equal importance.

Site Architecture

Although users may not always have the best idea of the behind-the-scenes structure of your website, they may start to get a feeling of it if it’s unorganized. Here are examples of site architecture usability flaws:

Multiple methods to get to the same page.
Disorganized (or lack of) hierarchy.
Too many sections (keep it under seven).

User Interaction

Thought should be put into items like error messages, email notifications, generally anything that might have to do with getting the user to do something. For example, if you have a login screen, and someone types in a bad password, it would be better (from a usability standpoint) to have the error message displayed along with the login form fields instead of a page with uniquely the error message. This saves the user from clicking another link or from hitting the back button.

General Likeness To The Average

This is the last important point I can think of that can strengthen usability. If your website is similar to what users are already experiencing, the user will have a knack for how to manipulate it. You may be frustrating your user if: