Visual Design and Navigation Guidelines

By Ann Tothill, Association for Progressive Communications (APC)
May 2001

Visual Design

SD users come from many different backgrounds, accessing the Web at a variety of speeds and using a range of equipment. Developing a consistent "look and feel" for your organization's site serves the dual purpose of assisting the user and promoting your organization. Your Web style guide should take both of these functions into account. Following are visual design topics that should be specified for your organization when establishing your guidelines:

• Design elements: Use design elements such as graphics and page layout to assist the user to use your site effectively (not just for aesthetic or marketing purposes) and avoid distracting graphics and layouts. Establish guidelines around use of graphics and how to layout images, as overloading your site with endless graphics only "dumbs down" your site.
• Consistent layout: Establish a consistent approach to layout, and develop standard templates for both top and lower level pages. Top level pages often take up more screen "real estate" and contain more information than is needed for lower level pages (don't forget to do preliminary usability testing on these templates before you apply them to your whole site). Set the navigation bar in a consistent location.
• Graphic size: Use graphics sparingly and with purpose. Users are impatient of long download times, and many users of SD Web sites have slow Internet connections and poor bandwidth. Think about what purpose is served by the graphics you plan to use, and how they improve the user's experience. Remember the "10 second rule"—if users have to wait more than 10 seconds for a page to download they are likely to give up and move on to another site. Set a maximum KB size for your site.
• Accessibility guidelines: Develop some scenarios for the types of users you expect, and what type of Web access they are likely to have. You might decide to adhere strictly to specific Web accessibility guidelines, or to design the site to be most effective for the majority of expected users, but remain functional for others. You might, for example, include graphics in your site, but provide ALT tags for the benefit of those using text-only browsers or screen readers.
• Document formats: Bear in mind that users will both look at pages online, and print them out. Establish a guideline on establishing printer-friendly versions of pages—particularly those containing large amounts of text.
• Typefaces and font sizes: Identify a set of readable type-faces and font sizes for use throughout your organization's Web site. Remember that for the font to display, it must be installed on the user's computer, so stick to the most common fonts.
• Browser compatibility: Take questions of cross-platform and cross-browser compatibility seriously in the initial design of your organization's Web templates—what looks good in one browser may not display at all in another. Make sure that visual elements such page or table background colours and images do not render the site non-functional in older browser version or across different platforms.

Navigation

The Web offers users multiple entry points to sites, as well as multiple navigation paths within sites. Users may enter your site through the "front door," or a search engine may lead them straight to a page within the site. They also bring with them different mental models of finding information (some may prefer to browse, some to search, while others like to go straight to an index), different levels of Internet competency, and different languages and cultural background. Consistent, predictable navigation structures reflecting a clearly-structured information architecture will help them make the most of the resources your site offers.

Following is a list of things to keep in mind when establishing guidelines related to Navigation:

• Include standard navigation information on all pages. As a rule, each page should provide a link to at least the organization's main page, site map, search facility, and basic contact information. In addition, it is often useful to include links to the main sections of the organization's Web site.
• Provide at least some contextual information about where the user is in relation to the section of the Web site and the Web site as well. This may be done in a variety of ways, and at different levels of detail, but generally follows a format along the following lines:
  
  Web guidelines and product specifications -> visual design and navigation -> navigation
  Decide on a consistent format for your site and stick to it.
• Provide a site index setting out the main sections and sub-sections of your site.
• Provide the shortest possible routes to information—for example, don't try to force users to click through 20 screens of mission statement and annual report in order to reach your contact details.
• Make navigation terms as descriptive and straightforward as possible—"clever" or unusual naming schemes are likely to confuse users.
• Give users an indication of where the next link will take them—for example, what type of information it leads to, and whether it takes them off site.
• Always include a text-only version of essential navigation information.
• Ensure that your overall navigation structure will remain stable in the face of additions to the site. You don't want to have to revise the navigation structure on each page every time a new page is added.