|
|
Keep It Super Simple! Online Course web pages must
be functional. Layouts for online courses need to be easy to navigate.
Keep everything that is important in a logical or easily found place.
For example, put navigation links consistently at the bottom of the
page, such as ION's MVCR Online Learning:
an Overview does.
|
|
|
Keep it Clean! Images can be essential to your message,
but use them sparingly. Images add downloading time to you page. When
in doubt simple is better. If an image does not greatly add to the
subject taught or the appearance of a page - do not use it. This advice
also applies to background images: |
| |
Background images can be really
cool, but hard to read. |
|
|
Only Links are Underlined. Underlining usually means a URL link.
Most browsers display links in a color that is distinct from text, it is
best to avoid underlining text that is not a link. If you want to call
attention to a word or title, change its color, size, or font style instead
of underlining.
|
|
|
A Browser is not a Browser,
is not a Browser. Browsers do not all work the same. Your
course page might look extremely different in one browser than it does
in another. Netscape and Microsoft Internet Explorer may display some
web pages differently. Check your page with both browsers to make sure
that they look just as you intend.
|
|
|
Make Font Readable. Use dark colored font on a light
colored background. Not all monitors or browsers are created equal.
A color combination that looks good on your computer, might not be
readable on another monitor. To avoid problems, keep fonts and backgrounds
in high contrast colors.
|
| |
Dark on dark is
very hard to read |
| |
Even light on light
can be difficult to read. |
| |
The font size needs to be large enough for most people to read. Choose
a common font, such as New Times Roman or Arial, and a clean font,
nothing too fussy, which is hard to read. Serif font, fonts which the
letters have tiny lines that guide the eye toward the letter, are easier
to read than sans-serif such fonts.
|
| |
This is an example
of sans-serif font.
This
is an example of serif font.
|
| |
|
|
|
Short & Sweet. Try to keep your web
pages only two screens long. If a web page needs to be longer than two
screens, try to break it up into chunks, and have links for those chunks.
|
|
|
Keep Download Times Short. Keep
your pages' loading times under 10 seconds. Graphics, animation, and
sound cause longer download times, so use them only for academic reasons.
If you use include these technologies in your online course, let students
know what the minimal technology requirements are, so that they are prepared
and able to handle such teaching/learning aids.
|
| |
|
|
Graphics, especially animated ones, often
draw attention away from a page's content. Be extremely reserved and
meticulous about graphics, animation, and sound that do not signifigantly
contribute to the content of a page, such as the above arrow and target
animation. If in doubt - do without. |
|
|
Try to have Only One Window. Having more than one window (using
frames) in a webpage may cause students problems printing, searching, bookmarking,
and navigating. Format you page using tables to avoid the use of frames.
For an example tour through ION's
pages and note the left sidebar which appears almost all of ION's pages.
If you do use frames, offer a frameless option. [Editor's Note Feb.
2003: This sidebar is no longer the case on the ION Website.]
|
|
|
If You Post it, They will Print it. There
is a good chance that a lot of your course web page will be printed out
by students. For large chunks of information, that a student might want
to read off-line, provide a print friendly version. See ION's Web
Design Principles: About this Course which offers a print friendly
version of itself. [Editor's Note Feb. 2003: This sidebar is no longer
the case on the ION Website.]
|
|
|
There's No Place Like Home. Always
have a link to return to the home page from all your course pages. You
might also want to have links to other important course sections on most
of the courses web pages. Keep your navigation link system constant throughout
your site.
Resources:
MVCR's Web Design Principles
http://www.mvcr.org/
Web Design for Online Courses
http://illinois.online.uillinois.edu/resources/webdesign/index.html [search
ION site for current location]
Good Web Design: Guidelines to Follow when Designing
http://www.rpi.edu/%7Egoodsd/docs/goodweb.html
Hypertext Markup Language
http://www.w3.org/MarkUp/
The Top 15 Web Design Irritants & How to Avoid Them
http://www.netscapeworld.com/netscapeworld/nw-07-1997/nw-07-bestpract.html
Using Color on your Web Page.
http://html.tqn.com/compute/html/msubcolor.htm
Webmonkey/Design/ Information Architecture Tutorial
http://hotwired.lycos.com/webmonkey/templates/print_template.htmlt?meta=/webmonkey/98/28/index1a_meta.html
Web Pages That Suck
http://www.webpagesthatsuck.com/home.html
Yale Style Manual
http://info.med.yale.edu/caim/manual/
|
