devices should be carefully designed on a web page to orient the user
and provide a sense of direction.
A. Tell users
where they are.
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.
"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.
uses an arrow bar with text to tell users where they are and
how to move back and forward.
Tell users how to "get there" from "here".
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
course web site uses buttons that change color as the mouse
passes over them.
set the signpost on the web page.
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.
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
Clearly indicate different sections of a web site.
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.
Clearly indicate links on each web page.
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.
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.
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.
3.2.2 Graphic elements
on the web page should support information processing and retrieval
and have clear instructional purposes.
and media elements play an important role in implementing the "dual
coding theory"(Pavio, 1971).
on a web page must have meanings otherwise they are not necessary.
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,
web pages are instructional units ("chunks"), unrelated
graphics might actually hinder understanding by creating cognitive
"clutter" (Norman, 1990).
If a graphic element is necessary on a web page, consider the size
of a graphic and its download time.
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,
HTML techniques to enhance the usability of graphic elements, such
as, Alt and Lowsrc tags.
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).
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.
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.
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.
H. Color can be
a primary navigational guide.
G. Use appropriate
and consistent color to increase the web page's visual appearance
and information retrieval.
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).
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.
that PC and Macintosh monitors process colors differently
rendering different end results.
Use background color with caution. Do not use background colors that
reduce text readability or prevent users from printing.
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).
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.
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.
serif fonts are more readable in an interface, because the
small details of serifs are too hard to see
work very well in large sizes on the screen." (Howlett,
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.
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.
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.
use CSS, you must test your pages in both Netscape and Internet
Explorer to make sure you haven't stumbled across an incompatability.
Be consistent in the use of typeface.
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.
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".)