DEMOS Project - Accessibility Guide: Usability

Usability

Accessibility and Usability are related. If a site is designed for accessibility many usability issues are covered already. However, usability is more concerned with the general user experience rather than with issues raised by specific disabilities. Usability deals with issues like consistency of design and ease of navigation.

Visitors to websites don't usually have the leisure to learn their way around the interface and navigation system provided, learn which bits can be safely ignored and which bits lead to the information one wants. Consistency and uncluttered, straightforward interfaces can contribute greatly to easing this experience and gaining the user's trust.

Target Audience

It is important to be clear on a site's objectives and to establish an user profile, which includes the equipment used to access the web. It is a good idea to test a design at different stages, apply necessary changes, then test again.

Consistency

Consistency of style, design and navigation are crucial. Inconsistent design and navigation confuses and frustrates users. Even experienced users give up quickly when it becomes too difficult or confusing to find the wanted information. Users should always be able to know where they are within the site and be able to easily find back to a top-level page.

Especially people with learning difficulties or memory problems will benefit from consistency.

Navigation

In 'Don't make me think', Steve Krug suggests that navigation should answer the following questions:

What site is this?
What page am I on?
What are the major sections of this site?
What are my options at this level?
Where am I in the scheme of things?
How can I search?

Some tips:

Be consistent in the presentation of site navigation, position on page, link colours, etc.

Avoid graphics as navigational links, unless a text equivalent is provided.

Every page should have a link to the homepage, preferably in the upper left corner.

Group related links.

Using so-called 'breadcrumb trails' ensures that users don't get lost. They represent a way up the hierarchical structure of a site. For example: Home > Main Section > Subsection > Current Page.

Provide links to the main sections of the site or a back-to-top link at the bottom of long pages.

Provide a sitemap / table of contents and search options, especially on large sites.

Links

Name links in a meaningful way to provide context and information to where they lead. If link text is not descriptive enough, give additional information using the TITLE attribute:

<a href="guide.html" title="Accessibility Guide for Web authors">Guide</a>

In the latest browsers a small box with the content of the TITLE attribute will pop up when the mouse cursor is moved over the link. This is called a 'tooltip'. Some screen readers can be set up to read out this additional information. [Test this by moving your mouse onto the code example above. If you are using a browser that supports this feature, a tooltip will pop up.]

This technique can be useful if a page contains two links with the same name, which lead to two different pages. To avoid confusion, the TITLE attribute can be used to clearly identify the target of each link.

It is, however, better to avoid using the same text for two links leading to different destinations, or to use two different link texts for two links leading to the same destination. Both these scenarios will trigger accessibility checker alerts.

Avoid the phrase "Click here", as it is not very descriptive.

Conventions

People who are confused by a site's structure or can't find what they are looking for on their first visit are unlikely to ever return to this site. Interfaces and site layouts have to be instantly and intuitively usable. This is why it is important and safe to stick to conventions, especially regarding the positioning of information on a page. These conventions have now turned into user expectations. Ignoring them can therefore quickly frustrate the visitor.

Some of these conventions are:

The organisation's logo is usually placed in the top left corner of a page.
Clicking on the logo will take the user to the homepage.
Utility links (Home, Contact, Privacy policy, Copyright notice, etc.) are best grouped and positioned in the right top corner, together with search facilities.
Internal navigation is most commonly found on the left side of a page, external links on the right.

To learn more check out this information from an eye tracking study.

Some other conventions:

The standard link colours are blue (link), purple (visited link), red (active link).
The main link items should be repeated at the bottom of page.
The date of the last update should be included, usually at the bottom of a page.

Site Maintenance

Usability also includes regular maintenance of content and links. Broken links can quickly frustrate the user and outdated information can give a site low credibility.

Other usability considerations

page size and loading time.
size of graphics.
awareness of 'screen real estate'.
clarity of design.
readability of content.
legibility of fonts.
white spacing (the space between blocks of text).

Some general recommendations

build site structure and navigation from the user's not the organization's point of view.
use established web conventions.
make text scannable.
make all pages identifiable as to which organization they belong.
avoid splash screens or intro movies.
avoid horizontal scrolling. People don't like it, some browsers can't do it (e.g. WebTV).
don't lock visitors in your site by opening external links within the frame of your site.
avoid frames.
avoid advertising.
use homepage for announcements.
provide search facilities, indexes, sitemaps.
allow user control.

[An extensive list of usability links can be found on the resources page.]

| Previous || Table of Contents || Next |