|
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 |
| |
