| Appendix B: Prototype Guidelines for Designing and Evaluating Websites |
I. CONSIDERATIONS FOR WEBSITE USERS
Prior to evaluating the technical features of a Website, content and reliability of information presented on a Website are of critical importance to users. Websites are likely to contain one or more of the following kinds of content:
• Education (learning about something)
• Performance (learning how to do something)
• Facts (Which is which?)
• Concepts/Definitions (What is it?)
• Procedures/Steps (How do you do it?)
• Processes/Stages (How does it work?)
• Principles/guidelines (What would an expert do?)
When evaluating Website content, does the Website:
• Explain its purpose? (e.g., advocacy, information, procedures, etc.)
• Let the user know who owns the site?
• Let the user know what the site owner does? (e.g., describes the organization sponsoring the site, which may include philosophy, mission, values, etc.)
• Provide a statement about gathering information about the user (e.g., cookies) and disclose how that information is used?
• Format content effectively and break the content into screen-sized sections?
• Use navigational transitions (e.g., links, headings, bullet points, hot areas, graphics) versus transitional rhetoric? (e.g., terms such as "consequently," "subsequently," "it follows that," which are based on information that either precedes or following them)
• Use graphics and features that contribute to conveying its message, rather than detracting or distracting from its message?
• Communicate the message in a tone that is appropriate to the intended audience? (e.g., neutral, critical, respectful, etc.)
• Provide current and timely information? (e.g., includes the date Website was last updated)
II. CONSIDERATIONS FOR WEbsite DEVELOPERS
Appearance (or Layout)
The organization of the Website allows users to systematically navigate through its visual pathways. The visual structure introduces unity, integrity, readability, and control. Unity means that design elements support a common communication goal. Integrity means that the design is focuses on the communication goal. Readability is demonstrated by dividing information into manageable subsets that can be processed separately or in parallel. Control is shown by features that help users predict areas of interest and navigate through composition. Specif criteria are listed below.
• pages that provide a common look help users to know where they are when navigating through the Website.
• Text is brief and uses the active voice.
• Length is 60 (64 x 20 pixels) words per line.
• Text uses no less than a 10-point font size with sans-serif fonts for the main text to ensure that the user can read the text; bold and italics are used sparingly.
• Bullets help format lists and organize ideas.
• Format incorporates liberal use of whitespace.
• A logo or graphic kept constantly on the screen in a corner or in a column devoted to navigation is a clue to identifying the Website.
Navigational Design
The primary goal of navigational design is to allow users to navigate freely and comfortably through the Website. Users need to be able to access all the parts of the Website that are of importance to them; likewise, they need, through simple means, to be able to avoid all the sections that are not personally pertinent. The following criteria pertain to navigation:
• A link to a site map or a diagram of the site map itself is continuously visible on the screen.
• The user encounters clear, common navigational methods and is not presented with an overwhelming list of options. The set of navigational controls is always visible. These controls include "buttons" or "hot areas" to access: back, main, site history, and an itemization of the other essential parts of each individual site. Navigating through the Website is accomplished with a minimum number of clicks or jumps.
• Controls are accessed easily by the intended audience (i.e., graphic iconic controls may be best for young learners or for those with problems reading text).
• Users can see location information so that they know where they are in relation to where they want to be.
Hypertext (Hypermedia) Features
One of the most useful and least-employed features of Websites is the use of hypermedia. The power of hypermedia is that is minimizes the need for users to deal with material already well-known or not needed at the present time.
• Text screens seldom need scrolling to enable users to see the complete text. Links should be used instead.
• Definitions of technical words are linked to the technical word every time it appears in the text.
• Links to other Websites are used instead of repeating information easily linked to elsewhere if (and only if) a return link is provided to that the user does not lose her or his place in the site navigation.
• Search engines are employed within the site to let the user look up particular details within the content included in the site.
Legibility
There are many qualities and sizes of computer monitors. Web designers often work on very large and very high quality ones. Then they are tempted to use small type or picture sizes that may be unreadable or viewable on smaller or less sharp monitors. Here are two criteria for legibility:
• Test text, graphics, and links on a variety of monitors and browsers (including earlier versions of browsers, text-only browsers, and voice browsers) or simulations of them to ensure that their work will be widely usable on screens no larger than 10" diagonally.
• Avoid flickering/flashing screens or items as they can be distracting and may cause seizures in some individuals.
Graphic and Video Elements
Effective sites are ones in which graphics and videos are used to communicate ideas but not when text would do as well for particular users. Graphics file size should be minimized for load speak, while maintaining legibility, and should contain no more than 72dpi (the standard screen resolution). Although some powerful computers can reproduce millions of colors, designers would be wise to work with thousands of colors (normally 216 colors are used—see http://www.webreference.com/dev/graphics/palette.html) to ensure that images will be clear on users' screens. Websites employ effective use of graphics and video by attending to a number of elements:
• Graphics load quickly to keep user's attention at the Website.
• Videoclips are no longer than 12 minutes.
• when large images are necessary, thumbnail versions of them appear on the Website, and a larger image of the graphic can be viewed only if the site user calls for it by clicking on it.
• Graphics (images and icons) must be effective at delivering information quickly so that there is synergy with the content of the text.
• Websites containing image maps should provide a text-based navigation option.
Electronic Accessibility
Accessibility guidelines for electronic information will continue to change as technology advances. "Accessibility" is a broad term, which for the purposes of this discussion encompasses persons who (a) may not be able to see, hear, move, or be able to process some types of information easily or at all; (b) have difficulty reading or comprehending text; (c) do not have or cannot use a standard keyboard or mouse; (d) have a text-only screen, small screen, or slow Internet connection; (d) do not speak or understand fluently the language in which the document is written; or (f) have an earlier version of a browser, use different browsers, use voice browsers, or employ a different operating system.
The use of universal design concepts can improve access for all users. The World Wide Web Consortium's (W#C) Web Accessibility Initiative (www.w3.org/wai) seeks to increase usability of the Web for people with disabilities; however, their guidelines can be used to increase accessibility for all types of users, rather than just those with disabilities. See WAI Web Content Accessibility Guidelines (http://www.w3.org/TR/WAI-WEBCONTENT/). Some highlights of the WAI guidelines include the following:
• HTML text is used whenever possible (this allows the user to enlarge the text).
• Website images include large areas that are made active for pointing and clicking.
• Text equivalents (ALT text, long descriptions, captioning, etc.) are provided for images and animations, and auditory descriptions are available.
• Background and foreground color combinations with sufficient contrast are selected.
• Information is not conveyed solely by color.
• If frames are used, titles are assigned to each frame, which allows the user to identify the contents of the frame.
• Websites are usable if scripts, applets, and other objects are turned off or cannot be accessed.
• Pop-up windows are not used because of navigational difficulty until browsers allow pop-up windows to be turned off.
• Online videos (a) provide captioning (in several languages) for the benefit of the deaf and other language users, (b) use audio descriptions, and (c) provide transcriptions for narration.
• Vocabulary accommodates the range of reading level of the intended audience and acronyms are defined.
• Pages are created with a consistent style.
• Separate accessible or text-only pages are only used when the primary page cannot be designed to be accessible.
Contact Information
Sites provide an email address for the site manager to report any problems encountered while using the site. The site also contains complete contact information for the group responsible for the content of the site, including street address, phone and fax numbers, and names and email addresses of key contact people.
Evaluation
Sites include an evaluation instrument that all users will be encouraged to fill out. It is short, simple, and focuses on specific elements of the site.