Principles of Good Web Site Design

This page contains some ideas for creating good web sites. Treat these as suggestions, not hard and fast rules. We're still learning about this relatively new technology.

Navigation

• Provide a consistent navigation device on each web page in a web site. Example: The Assignments Site
• Provide plenty of hyperlinks but don't go hog wild; don't make every word a hyperlink.
• Don't force users to follow hyperlinks to understand the meaning of the current page.
• For some situations, consider opening hyperlinks in a second window.

Layout

• Use consistent page layouts throughout the web site, though you probably need several different layout "templates" for different kinds of pages. Example: NY Times
• Separate content from format.
• Put the most important information up top on each page, before users have to scroll.
• Be concise in web site's home page; provide hyperlinks to details.
• Use the layout principles we discussed a few weeks ago when designing the layout of web pages.

Text

• Use best writing practices in all text; web sites are not e-mail.
• Use subheads to organize.
• Use lists whenever possible; consider making each list element a hyperlink.
• Summarize the purpose of the web site in the home page.
• Provide a glossary when the web site introduces a lot of unfamiliar terminology. Provide hyperlinks to the glossary when you introduce (or reintroduce) terms.

Graphics

• Provide plenty of graphics.
• Remember that graphics take much longer to download then text. Don't forget that the average user is still stuck on a modem. Pick "small" graphic files over "large" ones.

Fonts

• There are two schools of thought on specifying fonts within a web page:
  • Don't specify fonts; let each user pick the fonts through browser preference menus. Users with vision problems can choose larger fonts; users with excellent vision can choose smaller fonts and avoid scrolling.
  • Do specify fonts; after all, book publishers have been doing this for several centuries.

  In theory, letting users specify their own fonts seems like the better solution. In practice, though, very few users know that they can customize fonts. So, picking fonts for the user is probably the more practical solution.

• You can control fonts through straight HTML, but this is generally clumsy and makes it hard to maintain consistency. It is better to control font consistency through a Cascading Style Sheet.
• Use sans-serif fonts in a web site; sans-serif fonts are easier to read on a screen than serif fonts.

Miscellaneous

• Validate web sites on both IE and Netscape; don't design exclusively for one browser. Note though, that as of this writing, Netscape has only 3% of the browser market. So, designing for multiple browsers may soon cease to be an issue.
• Prefer tables to frames.
• Assume that most web pages will look bad when printed, but don't worry about it. Rely on PDF for printing.

Excellent Sources for Web Site Design Information

• Jakob Nielsen (the world's leading authority on web site design)
• Dan Bricklin (an excellent site, though out-of-date)
• Web Style Guide (the online version of a very comprehensive book)