Usability

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee, W3C Director and Inventor of the World Wide Web

I’ve been developing web sites for nearly a decade (starting in 1993 at NASA), and usability has been the central focus of my efforts. It’s very disappointing and frustrating to come across sites that apparently have a lot to offer but present it poorly. One particularly ill-understood aspect is ‘accessibility’ which applies not only to disabled users, but to everyone.

A web site has to be accessible, before it is even usable.

Accessibility refers to the ease with which either disabled users, or users with non-standard browsing situations – or even users with typical visual abilities and the usual browsers – can access the information and other features of a site. In a sense then, accessibility is an extension of ‘usability’, in that a site needs to be accessible by more than just the CEO at his or her PC on your intranet’s T1 or LAN. Consider also blind users, or users at the end of very slow connections, or users with PDAs, etc..

I suspect that most websites are designed with no thought at all for accessibility; in fact many aren’t even designed with adequate consideration for usability by anyone outside the site’s owners. One very common accessibility issue is the left/right placement of navigation menus – if on the left, text-to-speech is going to read out the whole menu before getting to the actual content (if placed in the first column of a table; there are other solutions, almost never used). On the right, in a second column (as at Web Developer’s Virtual Library and EncycloZine) then the user can hear the content up to that point, and then bail out of the page.

We wanted to make EncycloZine highly accessibile – not only for disabled users, but also for users browsing under far less than ‘optimal conditions’, e.g. small screens or large viewing distance; text mode browsers, etc. So we avoided fixed font sizes and image maps, and we put the navigation menu on the right side rather than the left. A useful way to see how your page looks to these graphics-challenged users is to look at it with a text-mode browser such as Lynx.

Usability refers to the ease with which anyone (disabled or not, or with unusual viewing situations or not) can navigate a site and achieve the objectives which you have set for it, such as learning about your product or about an academic topic, or enjoying the games and puzzles in it, etc. And, beyond that, users should be able to succesfully achieve subsidiary tasks such as filling in forms to order from your catalog, or finding contact information in case they want to let you know about problems with your site (a remarkable number seem to assume that their sites are perfect since they supply no way to contact the webmaster!).

Your web site may be wonderful, but if users find it to be unusable or perceive it to be so then it’s unlikely they’ll get far enough to discover just what’s so wonderful about it. The main considerations for usability are:-

  • do your users possess all the characteristics you assume?
  • is the conceptual structure solid, consistent, and intuitive?
  • do your users have browsers equipped with the technology you are depending on?

A page of beautifully colored Netscape layer pull-down menus won’t be much use to the visually impaired non-English speaking users who favor Lynx, for example. If your target audience profile excludes such people, fine, but very often web sites exclude valid users by default rather than design.

Aesthetics

Web developers have evolved several techniques to get around the deficiencies of HTML‘s presentation abilities, e.g. complex layout tables; transparent GIF spacers; etc. They’re now able to create some very ‘cool’ looking sites, very popular with the marketing and management types for whom image is of paramount importance. Unfortunately they’ve all-too often neglected the other important aspects of web site design, such as usability and general user-friendliness.

Aesthetics is clearly important for commercial sites that want to present a good image, but it’s a shame when they reveal their attitude to users as ‘robots’ cast in their own image.

In my experience, the grossest example of an error in web site design, is to emphasise appearance, to the detriment of usability. So many designers seem to feel that aesthetics outweigh everything else – that a web page has to look good, or it’s no good. OK, perhaps – but then they go and design the layout down to the last pixel, fixing the font size so it can’t be enlarged (in some browsers) and run the text out of the perfectly designed space allocated for it. Never mind that it might be too small for a few people to actually read.

Fixed Font Sizes

Some web designers design the layout down to the last pixel. This means that the font size has to be fixed and unchangeable. If the user changes it, the text won’t fill its assigned area, or it will overflow it – design disaster! Never mind that the text was too small to read. It has to look good.

Fixed-font sizes (under IE) can’t be resized (in NS they can). There are some sites where the designer apparently wanted such precise control over the layout that they couldn’t stand for the text to be resized and thus under- or overflow its assigned box. And they felt that a small font looked best. Now you don’t have to be visually impaired to sometimes want a larger font size, for reading comfort.

Some designers apparently cannot grasp that what’s perfectly clear to them, on their screens, with their eyes, might not look as fine to others under different conditions… The designer was able to read it perfectly well on his (or her) screen, so what’s the problem? Well, we don’t all have his (or her) eyes or screen. Perhaps our screen is smaller, or further away. And perhaps we prefer larger text to reduce eye strain and fatigue.

Absolutely fixing font size is probably the best way to insult some of your users. You’re insisting that you know best, and that best means “looks good”. If I and my cohorts can read it, so can you. Well, my eyesight isn’t far from the norm. I wear glasses, but I’m not blind without them. Yet I’m constantly finding web pages where I just want the text a little bigger, but the usual browser controls have no effect. Frankly, I’m saddened that the site designer felt such disrespect for me.

You might expect that once your page “looks good”, people will like your site. Sad to say, the “looky-look” crowd have done a great deal of damage to a great many websites. The reason is simple (you’d think): The appearance of a website is only the beginning. A great many that “look good” turn out to be hard to use and poorly organised. For example, one of the commonest mistakes is to insist on rigid layout and font size. Not only are they excluding users with visual impairments, but also users with viewing situations different from the designer’s.

You might assume that, to a first approximation, your target audience consists of people not entirely dissimilar to yourself. But beware of treating them as clones. Allow for the possibility that they might be color-blind, or visually impaired, or they might not share your mother-tongue, or they might not have the same kind of computer and monitor as you. Aim for the lowest common denominator first, and field test your prototypes with as wide a variety of “guinea-pigs” as you can muster. Later you can add the ‘cool’ stuff, continually testing for audience response.

Information Architecture

Web site design properly concerns not only the aesthetics, but also the underlying support structures, and the efforts that go into optimising the user’s experience as they interact with the site.

The most general problem is that too many people treat web design as essentially synonymous with graphics design, and don’t pay enough attention to the more abstract aspects of usability, such as information architecture. Information architecture concerns classifiying and organising content such that users can navigate comfortably and have the most likelihood of finding relevant topics. My general finding is that shallow hierarchies with rich cross-links work best. Deep hierarchies tend to hide stuff and require too much click-through.

Content First

A general principle of our page design has been “content first, clutter last”. Well, maybe not exactly ‘clutter’ – but stuff like ads and menus are less important to the user than the page content – most of the time. One very important, special user class deserves mention here – search engine spiders. We want to help them figure out what the page is about, and they are guided most by what comes earliest on the page. So the navigation menu is on the right, which also usually lessens the distance a user’s mouse has to travel to and from the vertical scroll bar (usually on the right). I think it’s also more helpful for blind users who hear the page via screen readers or feel it on braille writers – they don’t have to wait for the menu before getting to the content. The problems with left-side margins are:-

  • If the user’s window is narrower than the page width, the right side of the page is clipped; the text needs to be moved back into view using the scroll bar. However if it’s the navigation menu it’s less of an annoyance.
  • Non-graphical browsers (Lynx; HTML-to-speech; etc) will usually render the page text in the order it is presented – i.e. the order it comes out of the file – which is often a substantial amount of navigation stuff. The user will be forced to plow through a bunch of junk before they reach the content.
  • Search engines typically give greater weight to keywords in the earlier part of the page; again, navigation margin contents appear first and skew the results because they relate to other pages than the present one. Also search engine results often display the first part of the page in response to user queries. Navigation menu contents are not much help…

Home Page as Site Map

One of the major problems in a site with a lot of content, is how to present it without overwhelming the user. If you bury it down in the navigation structure, many people may never realise it’s there. One way to solve the navigation problem would be to put links to all available pages, on the home page. Your visitor could reach every page with a single click. However, this is impractical for sites with hundreds or thousands of pages; there are further requirements such as keeping the home page fast-loading and not too complicated. Putting it all on the home page may make it too cluttered.

The most important navigational device for any web site is the home page. This page alone is most likely to be the one that determines whether your visitors view one page, or many, at your site. If it doesn’t offer any clue that this site has valuable information, and how to locate it, then people are unlikely to expend much effort to track it down. If on the other hand, the home page gives clear indications about what’s available at the site, and how to get to it, then your user’s interest is likely to last longer.

The conventional approach is to provide a few links to the next level down, from the home page, supplemented with a small selection of representative links from the next level down. An important question to answer is “How many clicks will it take my visitors to find anything?”. People’s patience begins to fade very soon after a few clicks; but you probably don’t want a very large number of links on every page…

Compromising between Too Little and Too Much

I think we have found a reasonable compromise: put the top two or three levels on the home page, and break it up with large main topic headings. Users can see at a glance what the overall site structure is, and they can quickly and easily zoom in on areas of interest. Perhaps we could use some neat JavaScript rollovers or pop-up menus, but I think that the standard window controls (i.e. the vertical scroll bar) serves well enough without introducing browser compatibility problems. Finally, notice the search boxes in the bottom right of the page. If all else fails, the user can search our site or the web.

A visitor can see very quickly what the site is about, by scanning this table. In many instances they will see immediately a keyword for the topic they are interested in learning about. Occasionally, they may need to select the most appropriate area to explore deeper.

We feel that for an information-rich site such as ours, this large (but not massive) collection of links reduces the conceptual impedance (resistance) for most of our visitors. It’s a kind of rapid-transit system. It’s not for everyone – a few might find it confusing. Some people need relatively verbose explanations before they are comfortable with something like that. I confess that I don’t understand their problem very well, and I hope one day to see usability studies exploring these issues.

QUICK TIPS TO MAKE ACCESSIBLE WEB SITES

For Complete Guidelines & Checklist: www.w3.org/WAI

  • Images & animations. Use the alt attribute to describe the function of each visual.
  • Image maps. Use the client-side map and text for hotspots.
  • Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
  • Hypertext links. Use text that makes sense when read out of context. For example, avoid “click here.”
  • Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
  • Graphs & charts. Summarize or use the longdesc attribute.
  • Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
  • Frames. Use the noframes element and meaningful titles.
  • Tables. Make line-by-line reading sensible. Summarize.
  • Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG