GUIDELINES FOR WEB SITE DESIGN CHAPTER 10 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 Text Colour Graphics Links Search 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. Text 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. Colour 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 text.
Graphics 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 fullsized 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. Links 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. Search 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 Web," www.coedu.usf.edu/inst_tech/resources/wwwdesg_1.htm Kaiser, Jean, "Web Design Guidelines Design Tips and Guidelines," webdesign.about.com/cs/designtips/index.htm Kaiser, Jean, "Web Design Guidelines Web Design," webdesign.about.com/library/weekly/aa010500a.htm Research-Based Wed Design & Usability Guidelines, provided by the National Cancer Institute in the U.S., www.usability.gov/guidelines Sullivan, Terry, "All Things Web: Design Fundamentals," www.pantos.org/atw/basics.html