|
|
Usability References
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.
The other is to investigate by section - General page design and layout, Links, Navigation, Location information, Text, Home Pages, Search boxes, Images, Forms, Other.
General page design and layout
Make pages viewable on 800 pixel wide screens. frontend, wdvl. Pages that change size offer better usability than fixed size pages. webreview, Wichita Usability News.
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.
Frames are a bad idea. frontend, NCI, Nielsen. But one simple frame may not be so bad after all. Wichita Usability News.
Page file size - try to get something showing on your visitor's screen within six seconds, ten at the most. Web Style Guide, wdvl, Nielsen.
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.
Links
Buttons and hyperlinks (and anything that looks like them) are expected to function in the way that users have experienced before. frontend (pdf), Nielsen.
Use link titles to provide users with a preview of where each link will take them, before they have clicked on it. Nielsen, IBM.
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).
Navigation
Shallow site structures create less user navigation errors than deep stuctures with many hierarchical levels. Wichita Usability News, IBM.
The Home link should be close to the top left and preferably be the word "Home". wdvl.
Be consistent. For example a Home button should always lead to the same place, not to different places depending on where you are in the site. NCI, IBM
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.
Always offer some kind of navigation, at least to Home or Up a Level, on every page. Web Style Guide, wdvl.
Be wary of centered links and vertical lists of links without clear separation. (reference no longer available).
Location information
Show user where they are right now - where their current page stands in the grand scheme of things. NCI, Web Style Guide, IBM.
A good way to provide location information is to use a breadcrumb trail. Nielsen, wdvl.
Text
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.
Home Pages
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.
Search boxes
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
Images
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.
Forms
People hate forms. Don't use them unless you must. Merges, wdvl.
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.
Check that the information you are collecting is useful. If it won't be used, don't ask for it. Merges, 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.
Don't get over-zealous with your form validation, especially if you're aiming for customers in other countries. evolt, 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.
Other
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.
Up-front user registration is a site-killer. frontend, wdvl.
Qualitative testing on two to five people is often enough. Nielsen, and Nielsen again.
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).
Back to TinHat Usability section menu