Guidelines for Web Site Design

Document Sample
Guidelines for Web Site Design Powered By Docstoc

What makes a Web site good? Who defines good? From whose perspective is it good—the site
visitor or the sponsoring organization? The following questions and tips are intended only as
guidelines, not hard-and-fast rules that must be followed. These questions are only the beginning
of a series of questions that organizations and Web site visitors should consider. The tips, like the
questions, are only the beginning of tips for good, usable Web site design. Listed at the end of
these guidelines are Web sites that provide additional Web site design tips.

Sponsoring Organization Questions
Visitor Questions
Content Tips
Web Site Structure
Web Page Structure
Audio, Video, and Animation
Links to Other Design Tips

Sponsoring Organization Questions
• Who is our audience? Do we understand them? Do we know what they will search the Web
site for?
• Do we have the capability to build this type of Web site? If not, can we afford to hire outside
consultants to build our Web site?
• Can we obtain statistics from our Web site indicating the number of different visitors and
which pages are most popular to facilitate decision making about the Web site and its content?
• Can our current hardware support the volume of Web site hits we will experience?
• How often will we update our Web site?
• Who will be responsible for the Web site and for updating it?

Visitor Questions
• Is this Web site easy to navigate (i.e., you can click to the desired information)?
• Can I find what I need on the Web site?
• Is the information presented in an easy-to-read, easy-to-print format?
• Is the information up to date?
• Is there a search engine on the home page to help me find what I need? Is there a date that
shows when a particular page was last updated? Is there contact information, including email and
regular mail, as well as a telephone number?
• Are all the pages on this site consistent in terms of navigation and structure? Do the pages load
quickly? Do all of the links work?

Content Tips
• Determine your audience and what their purpose is in visiting your site.
• Determine the intention of your site and the elements and content to be included based on the
purpose of your target audience.
• Consider providing a Web site, either the original or a "shadow" site, for visitors who do not
wish to use Flash and/or for visitors who may be disabled and may need larger font sizes,
different forms of navigation, etc.
• Provide printing options for pages that carry a lot of graphics or that are in frames.
• Content should be understandable, easy to read, concise, complete, accurate, and up to date.
• Each Web page should contain content that is focused on the topic covered by that page.
• Content should be reviewed to ensure that it meets the organization's standards for content,
grammar, tone, style, use of jargon and colloquialisms, etc.

Web Site Structure
• Determine the browsers and versions of browsers for which you are building your Web site.
• Determine which connection speed most of your visitors will use.
• Determine which display resolution most of your visitors will use.
• Try to have all information available within three hyperlinks or clicks of the home page.
• Consider using a site map available from the home page to show users where information they
are looking for may be located. If possible, the site map should be clickable, enabling visitors to
click on a hyperlink within the site map to access Web pages.
• Use consistent navigation throughout the Web site. For example, use only hyperlinks that are
underlined, or use only a particular size and style of icon or graphic to hyperlink to other pages
within the site. Or consider using frames that permit the most frequently accessed links to remain
on the viewer's screen as other pages are brought up in the browser.
• While most Web sites offer navigation at the top or left side of the Web page, the right side is
actually more convenient for mouse-clicking for right-handed visitors, who are the majority of
the world's population.
• Consider the use of frames, "server sides," or tables for the site structure. Once this decision is
made, be consistent throughout the site.
• Consider using an "anchor" element, such as a logo or menu bar, throughout the site.
• Use the same background for all pages wherever possible and appropriate.
• Periodically, review the entire site and each page. There are free sites on the Internet that will
do this for you, checking for functioning hyperlinks, mismatched tags, typographical errors, etc.
Pilot test your site. Where possible, use a focus group of potential visitors to examine your site
and provide feedback.
• Don't disable the Back button—visitors should always be permitted to return to the previous
page on their browser by using the Back button.
• Always give credit where credit is due. Obtain copyright permissions whenver needed and give
credit on your Web site for those permissions.

Web Page Structure
• Use Web page titles, subtitles, and headings that indicate the contents of the Web page.
• Try to keep all Web pages short so the visitor does not need to scroll down too often. Pages
should not be longer than 2–3 screens of content (use short paragraph/sentence lengths). Put
important information at the top of the page so that visitors do not have to scroll down too often.
• Align Web page elements and keep the overall alignment consistent throughout all site pages.
• Make all Web pages as small as possible in terms of bytes to facilitate fast downloading.
 • Use a "date stamp" to show when the page was last updated. The date stamp should show the
complete date (e.g., January 29, 2002) to ensure that visitors understand the difference in the day
versus the month (01/29/02 or 29/01/02?).
• Balance text and graphics with white space.
• Make sure that any element (text, graphics, animation, sound, frames, etc.) is needed and
relates to the purpose of that specific page and the whole Web site.
• Provide easy access to complementary functionality, such as a calculator.
• Make sure that all page elements function properly (links, counters, clocks, etc.)
• Include copyright notices and credits in the footers of appropriate pages.
• Include the URL on each page to facilitate visitors' return to the page, even if using a printout
as their reference.
• Where appropriate, include at least an email link on each page to the individual responsible for
the content of that page.

• Be consistent in use of font types and styles.
• Use readable fonts and font sizes.
• Use spell and grammar checking for all text.
• Limit the use of blinking text.
• Don't underline text—visitors will think the text is a hyperlink.

• Decide on a colour scheme and stick to it. Use colours that have meaning and will always mean
the same throughout the site. For example, if hyperlinks are to be royal blue, then all hyperlinks
within the site should be royal blue. Conversely, all "used" hyperlinks should also be consistent
in colour, either a faded shade of the original hyperlink colour, or a completely different colour.
• Unused hyperlinks should be brighter in colour than used hyperlinks.
• Make sure you have enough contrast between your background colour and the colour of your
• Use only graphics that are relevant and necessary to convey your message.
• Limit the number of graphics on each page.
• Limit the size of your graphic files. Limit the width of graphics to 472 pixels because most
browsers default to about 500 horizontal pixels.
• Include width and height information in the HTML code for the graphics because graphics load
faster in many browsers when this is done.
• Use thumbnail pictures for large graphics and give the option of taking the visitor to the full-
sized image by clicking on the thumbnail.
• Use JPEG compression for photographs and other continuous tone images.
• Use GIF compression for line drawings.
• Use understandable images and icons, sized as small in terms of bytes as possible while
maintaining legible resolution to facilitate fast downloading.
• Be consistent in the use of icons and images, using labels or descriptions of the image,
including those where clicking on the image will take the visitor.

• If a hyperlink, whether external or internal, takes the visitor to a new browser window, then all
hyperlinks of that type (external or internal) should bring up a new window. If the hyperlink
comes up in the current window, then all of that type of hyperlink should do the same.
• Periodically, check every hyperlink to ensure that it is functional.
• Indicate external vs. internal links.
• If linking to download a file, indicate the size and type of file that will begin to download so
that the visitor may decide not to download the file. Also, use a description of the content of the
file (e.g., video of two dogs barking at the mailman).
• Use descriptive words for links.
• Do not use single characters for links—they can be hard to click on.
• When using a graphic as a hyperlink, include the text or label that accompanies the graphic in
the hyperlink.
• Consider using fixed links to take the visitor to the next page, previous page, or main menu
within your site. This is particularly useful for pages with content that spans several Web pages.
• Include a link to a local home page on every page.

• Use a search engine that will search only your Web site.
• If appropriate, include a search engine separate from the internal search engine that will search
external sites.

Audio, Video, and Animation
• Use audio and video only where appropriate.
• Limit the number of times an animation will loop.
• Provide an "off" switch for music.
• Use multimedia elements in standard formats.
• Minimize the size of audio and video files.

Links to Other Design Tips
Barron, Ann E., Brendan Tompkins, and David Tai, "Design Guidelines for the World Wide

Kaiser, Jean, "Web Design Guidelines – Design Tips and Guidelines,"

Kaiser, Jean, "Web Design Guidelines – Web Design,"

Research-Based Wed Design & Usability Guidelines, provided by the National Cancer Institute
in the U.S.,

Sullivan, Terry, "All Things Web: Design Fundamentals,"

Shared By: