To Florida Gulf Coast Home Page
Principles of Online Design
Principles of Online Design
 

Home

Introduction

Instructional Design

Interaction & Feedback

Instructional Media

Course Management

Support Services

Instructional Media

Information Presentation | Interface Design | Multimedia Elements

3.2 Interface Design
Principle:
3.2.1 Navigation devices should be carefully designed on a web page to orient the user and provide a sense of direction.

Practices:

A. Tell users where they are.

Examples:

One of the most common complaints from users is disorientation. To help orient users, use multiple techniques to highlight the current location. Some techniques include:designating a page "title" that appears in the Title bar; having a "Banner" at the top of the page; having a different color on the navigation bar that designates the current page, and / or having a separate heading for the screen. Note that this site uses a combination of these.


B. Clearly tell users how to move forward and backward.

The "Back" and "Forward" buttons on browsers make it easy to move from one viewed screen to another. But do not overestimate your student's experience. They may want to move back and forward within the section.

This Online Tour uses an arrow bar with text to tell users where they are and how to move back and forward.

C. Tell users how to "get there" from "here".

To help students move from one section to another, use visible links showing them where to go. These links can be at the top, bottom, or side of the page. They also need to reflect the overall content design. There should be a clear link to sections within major content elements as well as links from one content element to another.
This course web site uses buttons that change color as the mouse passes over them.
  D. Clearly set the signpost on the web page.
Some of the more common elements of navigation ("back", "next," "forward") provide very little context - forward to what? A more useful approach is a "button bar." This provides not only the physical "button" to move forward and backward within a section, but also a textual reference saying where the user is now.
Previous topic
<<
Current topic
Next topic
>>
Such a bar could go at both the top and bottom of pages to orient the user. A second bar could be used to help students navigate within a topic.

E. Clearly indicate different sections of a web site.

In a web site, common sections should have a common design as illustrated in this introductory course website.. In addition, there should be design differences from one section to another. The common elements help the viewer know their location within the larger web site. The different elements help the viewer know when they have moved from one section to another. The absence of a common design is confusing to viewers.
F. Clearly indicate links on each web page.
Are the links obvious? Are they displayed in a different color or style than the standard text? Clear links are one of the most important navigation tools. No one should have to drag a mouse across a web page waiting for it to turn into a hand.

Use the same conventions for links throughout the site. If you are using something different from the standard web convention for links (blue underlined text for active links), be sure they are obvious.

If you are using graphics, such as buttons, for links, ALWAYS include an "ALT" tag so that users who have either turned off their graphics or are using speech-recognition software will still be able to use them.

Principle:
3.2.2 Graphic elements on the web page should support information processing and retrieval and have clear instructional purposes.
Practices:

A. Graphics and media elements play an important role in implementing the "dual coding theory"(Pavio, 1971).

B. Graphics on a web page must have meanings otherwise they are not necessary.

Examples:
Studies emphasize that graphics and media elements must directly support the text and be used, not for diversion, but for a clear instructional purpose (Cotrell & Eisenberg, 1997; Debra, 1996; Everhart, 1997).

If web pages are instructional units ("chunks"), unrelated graphics might actually hinder understanding by creating cognitive "clutter" (Norman, 1990).

C. If a graphic element is necessary on a web page, consider the size of a graphic and its download time.

Studies show that after only 8 seconds of waiting for a page to download, a significant number of viewers will move on (Infoworld, 1999). Studies on computer-based training show delays as short as five seconds have a negative impact on comprehension (Spool, 1997).

D. Use HTML techniques to enhance the usability of graphic elements, such as, Alt and Lowsrc tags.

E. The HTML "Alt" tag should always be used, to aid usability and accessibililty and as an "alternate" image to view while the main image is loading (Waddell, 1998).

For unavoidably large graphics, the "lowsrc" tag can be used to load a lower resolution or black and white copy of the intended image first. The larger file-size "true" image will then load over it.The lower resolution image will act as a visual "anchor," holding the viewer in place while the larger graphic loads.

Large images can also be "sliced" into component parts. These parts load faster than a single image. The image and logo on the FGCU homepage is sliced. Sliced images can also contain text and links.

F. Use appropriate graphic formats to save graphics and place them on the web.

Graphics size can be reduced through "optimization" using GIF or JPEG formats, browser safe colors, and compression. Often, the size of a graphic can be cut in half with no apparent loss of quality using programs designed for this purpose. Consult with a web-developer or an instructional designer.


G. Use appropriate and consistent color to increase the web page's visual appearance and information retrieval.

H. Color can be a primary navigational guide.

 

"Color is probably the most powerful design tool for aesthetic decision making" (Howlett, 1996). A consistent color scheme within sections is a navigational tool. Colors can set the "mood" of a site. Color can also be distracting. "Use colors to group or relate information and to attract attention where you want it. Do not use colors arbitrarily; users assume that colors are important or related in some way" (Howlett, 1996).

Colorblind students perceive colors differently which could render an appropriate color combination useless. Keeping the color contrast between the background and the text high will decrease problems for colorblind students.

Be aware that PC and Macintosh monitors process colors differently rendering different end results.


I. Use background color with caution. Do not use background colors that reduce text readability or prevent users from printing.
White text on dark backgrounds (such as black and dark blue) can be viewed on the screen, but is difficult to print. Black text on a white (or very light gray) background yields the best overall type contrast and legibility. Studies have shown dark backgrounds are significantly less legible than light backgrounds, even when light type is used for maximum contrast. Colored backgrounds can work as an alternative to white if the colors are muted tones and low in color saturation (pastels, light grays, and light earth tones).
Top of Page

J. Use standard or default color for hyperlinks.
The standard color for hyperlinks is blue. For hyperlinks that have been accessed ("visited links"), red is standard (or purple, depending on your monitor). Faculty who use alternative color schemes for hyperlinks risk confusing students. They may not know when a link is a link.


K. Choose typeface that facilitates viewing and reading text on the screen.

"At about 12 point and above (Windows type sizes), most fonts are fairly legible … because there are enough pixels to render the shapes of the characters clearly. … sans serif fonts are more readable in an interface, because the small details of serifs are too hard to see … serif fonts work very well in large sizes on the screen." (Howlett, 1996)

Default Fonts

Since not everyone will have your primary font choice installed, always specify multiple fonts. "Geneva" and "Helvetica" are standard Mac fonts. "Arial" is a standard Windows font. And "sans serif" is used by Unix computers.

Macintosh and Windows do not process the same font the same way. A 12-point font on Windows will appear two or three points larger on a Macintosh. This is why tables designed on one platform can appear out of proportion on another. These differences can be viewed at the Yale Web Style Guide.

Cascading Style Sheets (CSS) are a newer method for controlling typeface design on the web. Some of your students may not have the proper browser to use CSS. Microsoft has a detailed explanation of CSS , plus here is an online tutorial on CSS.

If you use CSS, you must test your pages in both Netscape and Internet Explorer to make sure you haven't stumbled across an incompatability.


L. Be consistent in the use of typeface.
 

 

Follow the lead of print publications and create a consistent typographic hierarchy. Body text, sub headings, and headings should be consistent from page to page to provide navigational clues.

Avoid the "Ransom note" affect!! A general rule is to only use 2 different types of fonts; 1 for headings (often a "serif" font, such as "Times New Roman") and 1 for the Body text (usually a "san serif" font, such as "Arial", "Helvetica", or "Verdana".)

Top of Page

FGCU 2006. This is an official FGCU Web page.
Florida Gulf Coast University is an equal opportunity/affirmative action institution.
10501 FGCU Blvd. South, Fort Myers, FL 33965-6565