Effective Information Design
The primary purpose of most websites is to communicate information, therefore access to the information and clarity of communication should be the primary goals of these websites (Pettersson, 2003). This is particularly true of an instructional website. Students must be able to easily find their way through a website so that they can focus on the actual instruction. Information design assists the wayfinding process by focusing on web design as the presentation of information. There are many competing specialty areas involved in the creation of a website- graphic design, text and content design, advertising and programming, among others. Information design balances these competing influences by directing attention on the common goals of communication and information dissemination (Knemeyer, 2003). All of these factors must be considered when developing a website that easily and seamlessly allows users to find their way through a website.
Graphic Design
When people initially began creating web pages on the Internet, the pages were very basic- continuous black text on a grey background. Now, however, web designers utilize complex tables for more graphical page layouts. Although tables can provide advanced page layout options, they must be used with caution. Tables should be created with their size determined by a percentage of the browser window. This will allow the tables to expand and contract based on browser width, thereby eliminating the possibility of the entire table not fitting on the browser screen. Users should never have to scroll from left to right to be able to view the page. This is extremely distracting for the user. If the page design dictates that the table must be set at a particular pixel width rather than a percentage, then the tables should be no wider than 770 pixels. This is because most home users still have monitor resolutions of 800 x 600 pixels (Nielsen & Tahir, 2002).
Figure 1: this is a screen shot of a web page designed by using a
table with a fixed width much larger than 800 pixels. This image was
captured full-screen on a 17-inch monitor. Notice the bottom scroll bar-
users would have to scroll a significant amount from left to right to be
able to view this page.
Figure 2: this is a screen shot of the same web page shown in Figure 1
except the table has been redesigned so that all of the information will fit
on a browser with a monitor resolution set at 800 x 600 pixels. There is
no left-to-right scrollbar at the bottom of the page.
Consistency of page layout from section to section of a website is also critical for users to find their way through the site. All of the pages/sections of a website should have a consistent look and feel. Users need to know that they are still on the same website as they click through links. Maintaining a consistent graphic identity on all site pages is an excellent visual cue as to which links are parts of the same site and which links are to external, unrelated sites. It can also be a good idea to use color-coding to indicate to users the different sections of a website, but it is important to note that color-coding should not be the only identifier because that would make it extremely difficult for color-blind users to find their way.
Figure 3: this is a screen shot of several different sections in
the USA Today website. Notice that the site makes great use
of color as an indicator to the user of location in the site. However,
the site does not rely on color alone, but more importantly, the site
maintains a consistent graphic identity throughout all the sections.
When planning the graphical design of a website, designers should also avoid splash pages unless the website is strictly for artistic purposes or for advertising designing skills. Splash pages are usually graphic-intensive pages (often created in the Flash animation program) that have little or no content, and users have to wait for the splash page to load and play before being able to click to the main site content. Users who are presented with a splash screen at best may be entertained the first time, but most do not want to have to endure the splash page loading every time they visit the site. Users typically want access to the information as quickly as possible, and do not want to wait for useless graphics to download (Culwin & Faulkner, 2001).
Image Design
A common use of images on websites is in the form of icons. Many designers like to use icons because they think icons make sites more graphically appealing. However, more often than not, icons are so vague that they actually hinder the user’s wayfinding experience. Designers should always test the usability of icons with test groups to determine if most users understand what the icons represent. In many cases, one or two words of text added to an icon can greatly enhance comprehension of the meaning of an icon.
Figure 4: This administration area of a webpage uses icons to indicate actions
that can be performed. However, with no additional accompanying text, the
meanings of the “X,” red circle and blue up-arrow symbols are not clear.
In addition, “ALT” text should always be coded in for images so that visually impaired users will be able to find their way through websites. “ALT” text provides a short description of the image that browser readers can interpret for visually impaired users. Without “ALT” text, these users would know that an image is on a page, but they would have no way of knowing the content of the image. This is particularly critical if images are serving as links.
Another popular use of images includes displaying animations. While animations (or any movement on the page) can draw the attention, they can also distract. Animations should only be used when they add worthwhile information to the content of the page. Additionally, users are beginning to associate animations with advertisements because of the prevalence of animated ads on pages. Therefore, often users simply ignore any portion of a page that contains animation (Nielsen & Tahir, 2002). If an animated area contains important information, then the user’s wayfinding process can be significantly disrupted.
A general rule to follow when using images is that simple images are typically better because of the limited resolution of most computer monitors, and because of the download time associated with images. Use images carefully to limit download time because “the major complaint that most users appear to have about using the World Wide Web is that they have to wait too long for information to download” (Culwin & Faulkner, 2001). The recommended maximum download time for a web page via a modem connection is ten seconds (Nielsen & Tahir, 2002).
Text Design
When designing paragraph text, left-justified text has maximum readability- a ragged left margin has distracting line breaks, and justified text can have large amounts of distracting white space between words (Lynch & Horton, 2002). Headings also assist the wayfinding process by denoting different topic areas for users. However, for headings and paragraphs to be effective, they must be presented in a consistent type format. All text design for a website should be standardized in this way so that users scanning a page can quickly find the different sections of the page.
Choose a font for text that is easy for on-screen reading and printing, or provide printer-friendly versions of the content. A sans-serif font such as Arial or Helvetica is considered highly readable on screen but is not as good for printing. Serif fonts work well for reading in print, but the serifs do not show up well on computer monitors because of low resolution. Georgia (a serif font) and Verdana (a sans-serif font) were both designed specifically for legibility on computer screens (Lynch & Horton, 2002).
Also, for maximum readability, the amount of text on any given screen should be limited because “having to deal with great quantities of information may lead to overload conditions, which in turn may reduce the processing of information” (Arthur and Passini, 1992). Some websites make text size smaller to avoid scrolling and make it appear as if less text is on the screen. This is not, however, a good practice. Typically, font size should be between 9-12 pica points, preferably closer to 12 for maximum legibility on screen, particularly since human vision begins to decline around age 40 (Pettersson, 2002). It is even better to use relative text sizes so that people with poor eyesight can increase the font size as needed.
Accessibility needs must also be considered with text design. The colors of text must have high contrast with page backgrounds for maximum readability for users with visual impairments (black text on a white background has the highest contrast). Also, links should be a different color from the rest of the text. Similarly, links should generally be underlined, unless the design of the page makes it very clear where the links are located.
Navigation
It is important that the location of the navigation system be standard throughout a website so that users always immediately know where to look to move through the site. A clear and consistent navigation gives the users confidence that they can find the information they need. The location of navigation works best if it begins in the upper left portion of the page, because that part of the screen never gets cut-off when a browser is re-sized (Miletsky, 2001). Also, the majority of the population reads from left to right, top to bottom, so having the navigation on the right risks breaking the reader’s attention.
Good navigation terms should focus on users’ knowledge and expectations (rather than the site owners’). Navigation terms should make sense to a general audience that may not have any prior knowledge of the subject matter. The goal of a good navigation system should be to “create an information system to assist people in designing their own information…” (Pettersson, 2002). Web designers should create navigation schemes that give people options but do not force sequential viewing.
Navigation schemes should acknowledge the importance of keeping users informed of where they are currently located in the site and where they have already been. Common ways to accomplish these goals include the use of a “breadcrumb trail” to show users where they are in the site (see Figure 5), and the use of a specific color for visited links to indicate to users where they have already been in the site.
Figure 5: This is a screen capture of the upper portion of a web page. Note
the grey area near the top- this is an example of a breadcrumb trail. The trail
indicates to users exactly where they are and how they got there.
Designers should also limit the number of repetitive navigation links- repetitive links can be distracting and confusing because users may be unclear whether the repeating links go to the same page or not. Finally, with website navigation, a good practice is to follow the “3-click rule”: users should be able to get to any page in the site within three clicks, without having to use the browser’s “Back” button (Miletsky, 2001).