Usability

Introduction

Since we've already talked a lot within each topic about making sites easier to use, most of this content is going to feel like a review of what was covered before. However, this isn't necessarily a bad thing, and I also feel that considering usability as a whole is important.

What is usability?

Usable Web sites are those which help users to accomplish a goal (e.g. to obtain some information) easily, quickly, and pleasantly.

What makes sites usable?

Many of the techniques discussed in this course help to make sites usable. Some specific usability strategies include making sure the content is worthwhile, and keeping page size small so that the site can be navigated quickly.

What causes problems?

Many sites on the Web are not very usable. Some common problems include a lack of clarity (the site does not explain what it is about) and slow loading times due to overuse of large graphics.

Users

Usability is about users. We can divide users into different groups (by ability, etc.) and consider the needs of each group, as mentioned in the lesson on content.

One way to test a Web site is by getting a potential user (somebody who wasn't involved in development) to use the site, watching any confusion or problems they might experience.

Usable sites

In my opinion, a usable Web site is one which:

• can help users to achieve a goal (usually, to obtain some information or "do something" such as ordering a book)
• makes it easy for them to achieve that goal
• allows them to achieve it quickly
• gives a pleasant (i.e. not boring or painful) experience while the goal is being achieved

I wrote that list roughly in order of priority (most important to least). Some sites may have different priorities.

Many of the techniques discussed previously help to achieve those criteria. To give specific equivalents to the above list, a site is probably usable if:

• the content is worthwhile
• it is easy to find desired information within the site
• pages download quickly and there are not too many "clicks" between the front page and a target page
• the page is pleasantly, cleanly designed

Worthwhile content

To be usable, your site must do something useful - provide information or services that will be of interest to your audience.

For example, users heading to an electronics manufacturer's site are likely to have one (or both) of two goals in mind:

• information about products
• chance to buy products

If it is not possible for a site to include content which users will want, then a site can still achieve usability by wasting as little of the users' time as possible - in other words, by making it clear and obvious from the very start that the desired content is not present.

Making it easy

Pages can make it easy to obtain content by providing good navigation controls, and helping the user to understand the navigation scheme with location information etc.

Considering the different types of users your site might have (especially their levels of experience) can help you determine how best to design controls suitable for those users. For example, inexperienced users may need more explanation while experienced users might understand common Web concepts like "home", "up", "shopping cart", etc.

Making it quick

There are two main ways to make a Web site quick to use:

• Making pages download quickly
• Designing the site so that users can get to a desired page quickly

You can make pages download quickly by being careful with image sizes, and carefully balancing page size against the number of pages (e.g. making an appropriate decision about where to split information into multiple pages).

Allowing users to get to their desired page quickly is less simple, but usually more important. Here are two strategies.

• Consider each group of user, figure out which pages or sections they will most likely want, and feature these prominently from the site's front page
• Make sure that pages contain sufficient navigation so that users can get directly to other pages they want from within the site (but not so much navigation that users will be confused)

Clean design

Clean design can make pages more pleasant to look at, and also easier to use. You don't need to be an expert graphic designer to create cleanly-designed pages.

• Avoid unnecessary elements (graphics or text that isn't relevant)
• Avoid distracting elements (animated GIFs, striking colours, etc.) that don't have a clear purpose
• Don't use techniques you don't understand (e.g. if you are not confident of your colour design skills, stick to very basic colours based around black on white)
• Arrange the page into visual areas (title, content, navigation, references, etc.) and stick to that template

Usability problems

Many sites on the Web are not very usable. Some common problems are:

• confusion because the site does not clearly explain what it is about
• long loading times due to overuse of large graphics, Java applets, ad banners, and other "flashy" elements
• inconvenience because sites require bizarre software to be installed
• difficult navigation because the navigation controls are hard to find or poorly labelled - or because there are far too many navigation links on the front page
• poor readability because of inappropriate design
• ugliness because of bad or inconsistent graphic design, when a simpler approach within the designer's capabilities would have worked better
• irrelevance because pages were designed considering only what a company wants, not what the users of its Web site want
• complexity because the page designer expects users to "learn" the site, rather than using standard conventions
• inacessibility because the site was not designed correctly and cannot be viewed by users with disabilities

Site identity

Every page on the Web should ensure that users can understand its purpose. Even users not in the target audience should be able to figure out enough about the site to know whether it has content they are interested in or not.

This can usually be achieved by a few sentences on the front page, linked to a more detailed "about this site" section.

Many, many sites on the Web neglect this basic duty, which means that users' time is wasted as they look around the site trying to gain some sense of its purpose - which could have been simply summarised to them from the start.

Speed problems

Lots of Web sites are unnecessarily slow to use. Speed problems can be caused by a variety of issues, most of which are within the control of the site designer.

• Large graphics. Each page's total size should be kept small, as small as possible. This means avoiding large graphics wherever possible.
• Gratuitous technology. Unnecessary Java applets, Flash movies, MIDI files, and the like adorn far too many Web pages. This technology (apart from MIDI files) is useful in some situations, but it's inexcusable to waste a user's time just because you want a stupid "reflection in water" effect on your logo.
• Superfluous graphics. I'm sure you've all seen these: "send me email" animated GIFs, "Best viewed with Internet Explorer" buttons, "Under Construction" icons: these all increase download time, and are completely unnecessary.
• Abuse of tables. Tables are often used (usually inappropriately) to lay out pages. If the entire page is placed in a table, then some browsers will not display any of the page until the whole thing has loaded.
• Including too much on a page. If a page has more than 50 KB of text, then something is probably wrong (unless it's a special compilation of other pages designed for printing).
• Poor Internet connectivity. Some sites, especially on free services, may suffer from slow data transfer rates.

Plug-ins etc.

Sometimes sites require plug-ins. There are two general guidelines about this:

• Nobody will download a plug-in just to view your site, however wonderful you think the site is.
• RealAudio and Flash plug-ins are installed on a fair proportion of machines. Acrobat Reader is available on a smaller, but still significant, proportion. Other plug-ins are very rarely installed.

Even if you are only using one of the common plug-ins, there will probably still be a significant proportion of the audience that cannot see the site, so it is good practice to provide an alternative version of content. (You may also find that many people still prefer a non-Flash version, even with Flash installed.)

Difficult navigation

Some sites have navigational controls which:

• are not clear to new users, because they use an unnecessary metaphor
• are not clear because they rely on icons without explanatory text
• are misleading because the titles were poorly chosen
• are far too numerous, so that it is difficult to find the desired choice

To be usable, a site needs to include clear navigational facilities so that users can usually understand which link they will need to follow for a specific task.

In addition to choosing clear, comprehensible navigation links, it can can help to give clear descriptions of each option from the front page.

Poor readability

Sites are often difficult to read because:

• a small font was specified
• poor colours were chosen (e.g. white on black) - if, when using a site, you tend to highlight paragraphs of text with the mouse so that they are reversed out and you can read them, this indicates a problem in colour selection :)
• the "measure" (length of a line in words) is too long, so that text is too difficult to read
• a repeating background image or texture was used, making text difficult to read

Ugliness

Often pages are rather ugly, because the designer used techniques that they weren't competent in.

An important rule of life - "know the rules before you break them" - applies to graphic design too. (There are plenty of other relevant platitudes: "don't run before you can walk", etc.)

The important idea to understand is that pages do not have to include lots of graphics, complex colour schemes, or interesting layout in order to look good. A page can still look good even if it is very simple. The problems mostly occur when people attempt complex designs.

Irrelevance

Sites often contain, or prioritise, information which isn't relevant to their users, because the designer (or their company) thought it important.

For example, recently one financial company, on signing a business deal with American Express, placed an abbreviated form of their press release on the front page of the site, so that people had to click through it before they could get to other information!

This was not at all helpful and might put users off. While such information might encourage people to buy from the company, it would be more appropriately placed in a "why should you buy from us" section, or similar - somewhere that people will go if they are looking for information on their purchasing decision.

The basic message is that, although a Web site probably is intended to fulfil objectives for the designer or the company, it must meet the user's requirements first and foremost. Web sites are about users, and if users are annoyed or put off by a site, it makes no difference whether the marketing department's message got through: they're gone.

Non-standard design

Sometimes page designers, because they have spent days or weeks working on a site, forget that users will probably only spend a few minutes there. There's an important rule to bear in mind:

• Users should never have to learn how to use your site.

If you're tempted to put text on the front page, explaining how to use the site in some way (for example "click the frog icon to hop back up to the top of each page", "you can return to the homepage at any time by right-clicking on the fluffy bunny icon and then dancing around your computer three times widdershins", etc.) then your site is probably not usable enough.

Essentially, anybody with even a little experience using the Web should immediately be able to understand your site first time, without needing instructions or explanations. This means following Web standards; for example, the word "Home" will usually provide a link to the front page, and the text "back to top" makes far more sense to most Web users than a frog icon.

You may be tempted to do some things differently from most Web sites: sometimes this can be a good idea, but as usual, it's best avoided unless you really know what you're doing. Web users rely on the experience gained from visiting other sites in order to navigate your site.

(Note: the frog icon example does come from a genuine site, although I made up the fluffy bunny voodoo.)

Inaccessibility

Some sites are not accessible because they miss out ALT tags or are impossible to use without Javascript. Apart from making your page unusable for the disabled, this can also result in other problems: for example, this kind of page is unlikely to work in devices with small screens, and it may not work even on TV-based web browsers such as WebTV or the Dreamcast game console.

Usability testing

Once a site has been developed (or partially developed), you can test it to ensure that it is usable and spot any potential problems.

Testing has to be done by other people, not the designer (who is too experienced with a site to realise its problems). A good way to test is to make up imaginary "use cases" corresponding to the different groups of user identified. A tester can then pretend to be one of those users, and see how easy it is to achieve their goal.

Obviously, formal use-testing is normally only possible on a commercial site. However all sites do benefit from some testing - ideally, you should always have other people test your site before it goes live.

Testing is necessary

However well a site was designed, there are bound to be a few problems - inefficient design decisions which can make the site annoying or incomprehensible to some users.

It's difficult or impossible to spot many of these problems yourself, as a site designer. Because you know the site intimately and understand exactly how it works, you'll have difficulty putting yourself into the place of somebody who's new to it. So it's necessary to have other people help you test the site.

One way to test a site is to work out some imaginary users of the different types you identified earlier. You can assign each tester one of these users, complete with a task they have to accomplish, and watch them to see if they have trouble accomplishing it.

Testers

Because it's more difficult to spot problems in a site you've developed, you will need to find some uninvolved people to test it.

Unless you are working on a corporate site, it might seem difficult to find testers, but in fact you can probably badger friends or family members into helping.

Use cases

Sometimes it's helpful to structure your testing, rather than simply asking people to find problems with the site. One way to achieve this is to come up with use cases.

A use case is a description of a task somebody might want to complete using the Web site. You can come up with use cases for imaginary users in each of the different types of people you identified for the site's audience. For example, if you run a recipe site, and one group of people is inexperienced cooks, a possible use case might be one of these inexperienced cooks looking for a bread recipe. You can make these use cases as detailed as you like - perhaps even making up a name for the imaginary user.

Note: The term "use case" is not standard within the field of usability: it comes from software design, which is my own background.

Roleplaying

Although you could consider the use cases yourself when evaluating the site's navigation etc., if they are being used for testing you will need to assign each of your testers with a use case.

The tester then "pretends" to be the person described in that use case, as far as possible, and attempts to achieve that person's goal.

Ideally you would use testers who are as close as possible to the imaginary people in the use cases. (For example, if the use case says that this user knows nothing about cooking, then ideally you would choose somebody who knows nothing about cooking to imitate that user.) Of course, this isn't always possible.

Learning from testing

You can learn from this testing by watching the tester as they try to find their way through the site. (Obviously, you should not help them out or offer suggestions!)

Here are some examples of what you might observe and learn:

• Do they pick the correct navigation options first time? If not, the choices may not be sufficiently clear.
• Do they need to spend a long time considering navigation choices? If so, there may be too many options.
• Do they need to go through many screens to reach their destination? If so, you may need to provide additional navigation or useful shortcuts.
• If the information they want is not actually available on the site, do they discover this quickly?
• Does it take them longer than necessary to read text, or do they have to struggle to read it?

Case studies

These case studies link to sites and provide sample use cases. The idea is to practice usability testing on these commercial sites.

To use the case studies, pick a site and a task. One person should attempt to carry out the task (with absolutely no assistance or communication from others) while others watch and note any problems that the person comes up against.

Note that not all of the tasks are possible. If a task is not possible using the information on the site, then the task is considered "completed" when the user realises that they've got as far as they can.

Some useful questions to ask (bearing in mind that a usable site is one in which the user can attain their goal easily, quickly, and pleasantly) might be:

• Did the user achieve the goal (or find it definitely wasn't possible) or simply give up?
• Did the user find it difficult to achieve the goal?
• How long did it take to complete the task?
• Was the user annoyed by the site, even when it worked okay?

The answers to this checklist, along with the specific problems encountered, could provide a very rough assessment of the site's usability. Obviously if you are developing a significant site, you will need to ask more detailed questions.

Summary

Usable Web sites...

Usable Web sites help users achieve their goal easily, quickly, and pleasantly.

...and unusable Web sites

Many Web sites are not very usable. Some common reasons for this are a lack of clarity about the site's purpose or navigation, the use of unnecessary elements such as large graphics which slow page loading, and a failure to properly consider readability.

Usability testing

Web sites need to be tested by other people (not the site designer) to find out whether or not they are usable. One way to structure this is with "use cases" - imagainary users with imaginary goals, assigned to real testers to see what problems they have achieving the goals.

References