Website Usability Guidelines

Website Interior Page

Follow these usability recommendations:

User Controlled Navigation - On the Web, the user controls almost all elements. Users can take a path that the designer never intended to take or they could enter in the middle of the web site. This is called user controlled navigation. Special consideration must be given to not locking-out the user.

Always Link Home - Always have a link to your Homepage. You can use the company logo or you can have a link called Home. Users always need a link to home in the event they get lost on the website.

Resolution Independent Design - Because you have no clue how large your user's screens is, you need to design for all sizes. The main principle for resolution-independent design is to never use a fixed pixel-width for any tables, frames, font size or other design elements. Instead of using fixed sizes, you should specify layouts as percentages of the available space. This is called a fluid or liquid layout.

Interior Page Response Time - Every web usability study states the same thing: Users want web developers to speed up downloads on the ALL pages, including the shopping cart. Homepage to Interior page should be approximately one second.

Speed is the overriding design criterion. To keep page sizes small, graphics should be kept to a minimum, and multimedia effects should be used only when they truly add to the user's understanding of the information. Remove graphics - improve traffic. It's that simple.

Graphics Rules - Follow these graphic rules:

• In general it is not recommend to include any text in graphics because doing so slows down transmission and makes for more work to translate the user interface into foreign languages.
• Use graphics to show real content, not just to decorate your web pages. For example, use photos of identifiable people who have a connection to the content as opposed to models or generic stock photos. People are naturally drawn to pictures, so simple graphics are better.
• Label graphics. If their meaning is not clear use title text. 
• Overly detailed photos and drawings don't convey information and look cluttered. Do not shrink a big photo - crop it.
• Avoid watermarks graphics (background images with text on top of them). They add clutter and often decrease visibility.
• Don't use animation for the sole purpose of drawing attention to an item on a web page. Do not use animations on the Homepage because it distracts from the other Homepage elements.
• Text formatting used as a graphic can detract from the meaning of the words. If text elements look too much like graphics, users tend to overlook them, mistaking them for ads.
• Use high-contrast text and background colors so that the type is as legible as possible.
• Aside from the logo for the site, use other logos only if your users know them well and you want to draw users' attention to them.

Interior Page Size - The need to keep the page below 34 KB for the modem user is confirmed by a case study. You can increase page size if the majority of your users' use a broadband transmission.

• Pages over 40 KB had a 25-30% bail-out rate.
• Page below 34 KB had a 7-10% bail-out rate.

A 7-10% bail-out rate is considered normal. The limits are strict (34 KB), there is no doubt that sites pay a sever penalty in loss of users when they go beyond the 34 KB limit.

Hyperlink Enhancement - Never send your website user out of your website to find additional information. If necessary make the information available on your website.

Users like to know where they are going and what information they will find before they click on a hypertext link. If you provide a summary of the link, your users will be more likely to click the hypertext link. Simply use a title code in the hyperlink.

Selecting Fonts - Do not use absolute font sizes in your style sheets. Code font sizes in relative terms, typically using percentages such as 120% for big text and 90% for small text.

• Make your default font size reasonably big (at least 10 point) so that very few users have to resort to manual overrides. If your site targets senior citizens, use bigger default font sizes (at least 12 point).
• If possible, avoid text that's embedded within a graphic, since style sheets and font size buttons don't have any effect on graphics. If you must use pictures of text, make sure the font size is especially large (at least 12 point) and that you use high-contrast colors.
• Consider adding a button that loads an alternate style sheet with really big font sizes if most of your site's visitors are senior citizens or low-vision users. Few users know how to find or use the built-in font size feature in current browsers, and adding such a button within your pages will help users easily increase text size.
• Maximize the color contrast between the text and the background (and do not use busy or watermarked background patterns). Despite the fact that low-contrast text further reduces readability, the Web is plagued by small text and gray text these days.

Creditability - One of the main goals of great web design is to create your creditability as a professionally run operation. Do not fill your pages with amateur junk like heavy backgrounds or animated email-a-friend. Remember, your web page is your first impression to your user - make it a good one.