Website Look and Feel Guidelines

Stickiness

Make commercial websites sticky to potential customers and users:

• Webpages, especially the homepage and main section webpages, should be interesting and compelling.
• Webpages should be both usable and useful.
• Webpages should be enjoyable to browse.

Rationale:

• Many users quickly will navigate to other websites if the main webpages do not rapidly capture their interest.

Cohesion

Keep the webpage cohesive, containing only related information:

• Group the content of a large page into multiple cohesive subsections.
• Group related information together (within and between pages), but do not group unrelated information just to minimize navigation.
• Ensure that the grouping of content is meaningful to the reader.
• Limit the size of groupings to 7 plus or minus 2 items (e.g., links, buttons).

Rationale:

• A cohesive webpage is easier to read and understand.
• This is the size of most readers short term memory.

Webpage Size

Where practical, keep webpages small enough to be displayed without requiring any horizontal scrolling and without requiring [significant] vertical scrolling:

• Assume the usable width of webpages to be 535 (or 550 or 640) pixels.
• Use the same usable width for both text and images.
• Assume the usable height of webpages to be 295 (or 480) pixels.
• Try to limit the height of webpages to no more than 3 times their usable height.
• If possible, break large webpages into a set of related smaller cohesive webpages.
• Group the information on a single web page into multiple related chunks.
• Beware of using horizontal rules on long webpages.
• If the webpage must extend beyond a single screen ("below the fold"), provide the user with:
  • Clear clues that there is useful content below the fold to which they can scroll.
  • Inpage links to the major subsections of the page.

Rationale:

• Small webpages download faster and are easier to understand.
• Setting an appropriate maximum width eliminates the need for horizontal scrolling on most browsers on most monitors.
• Setting an appropriate maximum height eliminates the need to scroll down more than three times the screen height. Also, some of the original content remains visible if the scroll bar is moved a small amount, thereby allowing the reader to scan the document and avoid getting lost or disoriented.
• Users will often not realize that there is additional content beyond the fold.
• Because horizontal rules imply the end of something, some users stop at the first horizontal rule that they scroll to.
• Usability testing has shown that users will scroll if they realize that there is valuable content to which to scroll.

Organization

Provide a logical organization to the website and its webpages:

• Base the organization of a website either on the logical structure of the content or on the content needed by each role played by users.
• Base the organization of a webpage so that the most important information is at the top left.
• Avoid putting a navigation bar or copyright information in the middle of a webpage.
• Store groups of related static webpages in different directories and subdirectories. Use intuitive directory names that imply their contents. Name directories using only case sensitive letters, numbers, hyphens, and underlines in order to support Unix directory names conventions.

Rationale:

• This ensures that the organization of the website is understandable and therefore navigable.
• The organization of the website and a webpage should be intuitive and self explanatory.
• Because most languages are read top to bottom and left to right, information at the top left of a webpage is read first.
• Because horizontal navigation bars and copyright information typically signal the end of a webpage, users will often not scroll beyond them to any following content.
• Proper directory structures and naming makes the site more maintainable.

Consistency

Be consistent within and across webpages within a single website to produce a common look and feel:

• Use a standard webpage template (i.e., layout grid) that puts the most important content and navigation in the upper left (e.g., above the "fold line").
• Use a logical, consistent, extensible, site-wide organization for your webpages
  (e.g., based on either user tasks or logical branching content hierarchy).
• Items that are of relatively equal importance should have similar size, style, and placement.
• Use a single cascading style sheet (CSS) to standardize and minimize the maintenance costs of the typography (e.g., font, font color, font size, bolding, etc.).
• Perform similar actions (functions, links) in a consistent manner.
• Use a standard brand logo, graphical banner, and/or text-based header.
• Use a common unifying theme, style, motif, and/or metaphor.
• Present the content using a consistent personality and voice
  (e.g., friendly and conversational, wild and fun, or formal and dignified).
• Use a consistent background and color scheme (e.g., either a single common background or slightly different background in different major sections).

Rationale:

• Consistency makes the website easier to learn and use.
• Consistency increases user productivity and minimizes user errors.
• Consistency reinforces the brand recognition of the website.
• Consistency increases the maintainability of the website by:
  • Making global iteration easier and faster.
  • Minimizing the need for future reorganization.
• Consistent branding reenforces the website's digital brand.

Example: The following is an example webpage template for this website.

Browser Interoperability

Ensure that webpages are interoperable with all required browsers:

• Use standard HTML, XML, and JavaScript.
• Avoid uncommon plug-ins.
• Avoide browser-specific extensions (unless they will be ignored without problem by other browsers).
• Use an HTML validation program to catch HTML syntactic and semantic errors.
• Do not optimize for any one browser.

Rationale:

• A user may have set his or her own style preferences.
• This results in better presentations on most browsers rather than the optimum presentation on one browser and poor presentations on many.

Speed

Ensure that webpages load quickly:

• Try to keep each webpage small enough that it can be downloaded in less than 10 seconds over a 56K BAUD line.
• Ensure that large webpages provide valuable content that is worth waiting for.
• Avoid including large gratuitous graphics and multimedia files.
• Optimize the size of webpages.
• Provide interleaved graphics and image descriptions that can allow the user to link elsewhere if the wait is too long for the complete graphics to load.
• Warn users of the size of large files (e.g., label links with size) prior to downloading them.

Rationale:

• Most users will not wait longer than 20 seconds for a webpage to download without getting frustrated.
• Users hate waiting a long time for a webpage that is not worth the wait.

Limit Frame Usage

Limit the use of frames:

• Keep the number of frames per webpage to no more than 3 or 4.
• Keep the size of the main content containing frames large enough to avoid unnecessary scrolling.

Rationale:

• Too many frames either make users scroll vertically and horizontally or else cuts off the content of tiny frames.
• Many search engines have a hard time dealing with frames.