A Beginner’s Guide to Making Your Site More Usable

Photography: Usability by SantaRosa_OLDSKOOL

As of today I’ve completed a total of 34 simplicity reviews. I’ve spent some time discussing design simplicity already, but now I’d like to introduce a new topic: web usability.

Design simplicity is about creating a site distilled down to its essential elements. Usability is about creating a site that is easy to use.

This post will attempt to answer the question: What are the basic principles of making a site more usable, and what are the benefits of doing so?

How usability links with desired results

I want you to look down at your keyboard, and identify some of the keys you rarely or never use. Their neglect will likely be due to one or two factors: either you don’t know what it does, or you tend to complete the same action in a more intuitive way (perhaps with the mouse).

We’re more inclined to ignore a key we don’t understand than we are to spend time working it out. After all, what if it does something we don’t want?

If you already find it easier to complete they key’s function in another way (for example, most people use the mouse to scroll rather than Page Up, Page Down), you’re unlikely to use it.

This is not such a problem on the keyboard, but let’s imagine that those keys were actually integral in using a computer successfully, and you didn’t know it. Unlike the superfluous keys on a keyboard, web usability problems can discourage readers from completing actions that are central to a healthy and growing site.

Dealing with ambiguity

Ambiguous elements are those which mean something to the site owner but are not in themselves self explanatory. An example of this, which I’ve encountered frequently during simplicity reviews, is the ‘Share This’ social media button. You can see an example of it in the bottom right-hand corner of posts at Web Worker Daily, though the icon is usually green (you’ve probably seen it before).

Though the button opens up a list of social bookmarking services, it’s difficult for the uninitiated to know what it does. The first question a reader might have is: share this, how? It could mean emailing it to a friend, or adding it to del.icio.us only, for example. The feature requires readers who are unfamiliar with the plugin to take a guess at its specific function. Like the strangely labeled key on your keyboard, most won’t take the chance.

Consider every element on your site and whether this will be meaningful to most of your readers. An Alexa widget, for example, on a politics blog, is not good usability. Most visitors to such a blog won’t be webmasters and will not know what it is. The same applies to widgets displaying your Technorati authority, for example.

When readers are able to connect a specific element with a specific action they’re comfortable with, they’re far more likely to complete that action. When it’s something like submitting your site to StumbleUpon, you want to make it as easy for them as possible.

The importance of readability

Readability and usability are inextricable. The biggest impediments to readability I’ve seen throughout the course of the reviews is dark text, or dark links, on a dark background. This is a severe obstacle for readers who do not have 20/20 vision, or for those who’ve set their screens to a low brightness.

If you’d like more proof that the most readable option — having dark text on a light background — works, go through the Technorati Popular list and keep track of the number of blogs there with dark backgrounds. Or, I could save you the time: I haven’t seen any!

Adhering to standards

Readers will generally perform only a few core functions when interacting with your site: visiting a page where they can get a quick overview, extracting contact details, subscribing to your feed, commenting, and exploring categories.

Each of these actions are shaped for the reader by the ways in which they have completed them before, elsewhere. When trying to complete an action, they will look for the ‘standard’ first. For example:

• When looking for information about your site, readers look for an ‘About’ page. If none is present, they look for the most similar element.

• When hoping to contact you, readers look for a ‘Contact’ page. If none is present, they look for the most similar element.

• When a reader is looking to subscribe to your feed, they tend to begin searching towards the top of your sidebar. If not found there, the search will move down the page.

• When trying to comment, a reader will look for an option at the bottom of each post. If not present, they might look to the title area of the post.

• When exploring categories, readers will look for a list. If no list is present, they might begin to wrestle with a tag cloud.

A good general principle: when possible, adhere to the ‘standard’. When a reader looks for the standard and finds it missing, there is a chance they will drop out of the action cycle before making the commitment to search deeper.

If there is no RSS button present in the above the fold area of the screen, for example, there is a chance they will give up before scouring the rest of the site.

If there is no clearly visible ‘Contact’ page, a reader might give up trying to contact you before they take the time to scroll to the bottom of your ‘About’ page, where the contact details are actually hiding.

Where to next?

Usability is a topic I want to explore more thoroughly. If you’re looking for specific guidance on enhancing the usability of your site, I plan to offer a checklist you can use within the next few days, providing this is a topic that interests you.

Would you be interested in such a checklist? If you have the time, please let me know in the comments section of this post.