When a doubtful colleague disbelieves a usability rule, look it up here! It's a long page and there are two recommended ways to use it. One is to use Find (on This Page) from IE's Edit menu, or your browser's equivalent.
Include these three design elements on every single page: company name or logo in upper left corner, one-click link to the homepage, a search field (preferably in the upper right corner). Nielsen.
Avoid horizontal scrolling. frontend.
Anything that looks like an advert will be ignored, including banner shapes, animations and pop-ups. So don't let anything important look like an advert. Nielsen.
Watch out for colour schemes that give poor contrast. wdvl.
On long pages, try to break up all-encompassing tables into two sections. wdvl.
Standard (default) link colours are best, but others may work well with just a slight usability penalty. wdvl.
Show used links in a different colour to unused links (and preferably in the standard purple) otherwise users may hit the same page repeatedly in their search for information. NCI.
Don't get links to open in a new browser window. It effectively disables the Back button. Nielsen.
Large clickable graphics cause confusion. NCI.
If an image is hyperlinked, make that clear because otherwise it might be missed. (reference no longer available).
The Home link should be close to the top left and preferably be the word "Home". wdvl.
Any image map should be mirrored with text links. NCI.
Navigation should be possible without a mouse. frontend (pdf).
Links that look like file-drawer tabs work well. NCI.
Don't offer too many options or you'll confuse your users. wdvl.
Drop-Down menus: use sparingly. Nielsen.
Be wary of centered links and vertical lists of links without clear separation. (reference no longer available).
Make stylesheets linked rather than embedded. Nielsen.
Text is more important than graphics and is looked at first. Nielsen.
Do not use absolute font sizes in your style sheets. Code font sizes in relative terms. Make your default font size reasonably big (at least 10 point). If possible, avoid text that's embedded within a graphic. Maximize the color contrast between the text and the background (and do not use busy or watermarked background patterns). Nieslen.
Verdana is the best font. Wichita Usability News.
Long lines (100 characters) improve reading speed, but users prefer short lines (55 characters). NCI. Adult readers prefer text not to run all the way across the screen. Children like narrow columns. Wichita Usability News. Lines of text wider than 400 pixels show reduced readability. webreview.
Readers begin at the top left of a page, so the reading order of material should start there, not on the right hand side or at the bottom. frontend (pdf).
Headlines should be straightforward, not cute. Nielsen.
Most text is scanned, not read. So it needs to be presented in an easily scannable format with bullets, breaks and other format changes. Nielsen and Nielsen again. Digital Web, NCI, wdvl. Short sentences and paragraphs suit the common scanning style of reading Web pages. NCI.
Start the page with a tagline that summarizes what the site or company does, especially if you're new or less than famous. Begin the title tag with the company name, followed by a brief description of the site. An About section is the best way to link users to more in-depth information. Offer users a clear starting point for the main one to four tasks they'll undertake when visiting your site. Include a Search Input Box. Nielsen.
The best designs offer a simple search box on the home page and play down advanced search and scoping. On home pages, search should be a type-in field and not a link. Search boxes should be wide enough to take the search string without scrolling. Users almost never look beyond the second page of search results. Nielsen
Always specify image sizes in HTML code to speed up screen rendering. wdvl.
Be careful with pictures of (inactive) control panels, of false active windows and other confusing material. frontend (pdf).
Thumbnails should be cropped to show the main area of interest, not just reduced size versions of the full image. Nielsen.
It's important to recognise your relationship with your visitor and how tolerant they will be of your lousy HTML form design. wdvl.
Collect information in bits and pieces, as required, not in one big block. Merges.
Automatically fill in fields if you've already collected information that is probably correct, for example addresses. wdvl.
Radio buttons are only suitable for two or three options, at most five. wdvl.
Radio buttons are restrictive. Text fields give the user a feeling of greater freedom. Merges.
But users are dumb, which is why radio buttons and drop-down boxes are so common - the error rate is lower, and that's good usability. wdvl.
Clearly mark required fields. wdvl.
Reset and Cancel buttons are useless. Nielsen.
Here's another fine reference for HTML forms - Forms that Work, with a fine Q&A section.
PDFs give poor usability and should be avoided unless they'll definitely be printed rather than viewed on screen. Nielsen.
Flash animation invariably reduces usability. Nielsen.
Create a custom error message with helpful recovery information. Don't rely on standard 404's since they aren't helpful. (reference no longer available).
copyright Foxglove Media Ltd 2004