1. Be easily learned

You shouldn't have to think about how to navigate--it should be readily apparent. This is called being "transparent" to the site.

• use standard cursor shapes--don't change to unusual ones
• keep text links underlined and graphic links bordered (don't turn this off with CSS) and the expected color (blue)
• use breadcrumbs to know where in the site you are
• use a lesson table of contents
• use a site map to show location of the current section in the site
• use image maps

2. Remain consistent

Navigation bar location and icons should be the same on all pages of the site. Don't leave links off a page; if they are not appropriate, dim them down. All pages of your site should be easily accessible from each page.

• common background color/image on all pages in the site, or if not, have a good reason for using a different one--such as to distinguish a quiz page or feedback page from the main instructional pages
• keep the navbar location the same on all pages
• create a style guide identifying the purpose of different icons, what font/color is used for section headings, etc.
• limit the number of different fonts used to no more than 3; size may vary but should be used to indicate levels of importance/hierarchical organization
• frames may help unify the site and limit getting lost; they should be used with caution, however, as they are complex to construct and are not well accessed by search engines
• use pop-up windows to access more in-depth but non-essential information
• don't remove links to other parts of the site to avoid clutter--allow your learner to access each page in the site at all times or be no more than a click or two away

3. Provide feedback

Use visual change to provide cues so the user knows something is/has happened.

• use a different graphic for when the mouse rolls over a graphic link
• use a different color on text links for when the mouse rolls over it
• have links change color after they've been visited

4. Appear in context

Allow full access to all parts of the site from each page; don't just provide "previous" and "next" links. Users may enter your site from outside your site and need to know where they are at. Indicate if a link will take you off site.

• indicate if a link will take you off-site; if so, indicate how to get back to the site
• use pop-up windows for offsite links
• use anchor links to jump to different sections within a particular page
• allow access to all parts of the site from each major section; users may enter your site at other than the index page and need to be able to access more than just the previous or next lessons
• cue the next logical link to visit; understand and indicate the sequence in which to best access each page in the site
• indicate how far the learner has progressed in the lesson--for example, "This is lesson 3 of 4 in Unit 1."

5. Offer alternatives

Make sure people who have their graphics turned off can still use your site. Make sure both Mac and PC users can use the site. This also goes for different browsers and versions of browsers.

• use alt tags and link titles on graphic links
• use link tags on text links
• if a site uses frames, provide a link to a non-framed version from the index page of the site
• if a site uses Flash, provide a link to a non-Flash site from the index page of the site
• In a flash version of the site, provide a way to break out of the movie and/or skip the intro
• design for both PC and Mac platforms
• design for multiple versions of the major browsers; this does NOT usually mean for the latest/greatest browser--education often doesn't have the budget for hardware/software that corporations and individuals do

6. Require an economy of time and action

Design so you get fast loading pages and don't make your user have to click more than 1-2 times to get to the desired information.

• avoid forms if possible; they intimidate many users
• make your site "broad", not "deep"; have lots of pages only 1-2 levels from your index page, rather than only a few pages which then have more links to the info; (remember how you hate getting into phone menu systems???)
• use pop-up windows for links so you don't have to keep hitting the back button on your browser; this avoids confusion and saves time

7. Provide clear visual messages

Use tags that let you organize information in lists, headers, tables and so forth.

• use headers to create heirarchies
• don't underline for emphasis--people will think it's a link--use bold, italics, or a contrasting color instead
• use tables to group related information-
• use all types of lists--numbered, ordered, and definition
• use color to convey information--headers in contrasting color; color for page backgrounds
• don't remove the underlining decoration or border on text/graphic links; the user may not recognize it's a link
• use graphics to cue the learner to important areas

8. Use clear and understandable labels

Use terminology the user will understand, not jargon only you, the instructor, could be expected to know.

• avoid acronyms (the "alphabet soup" syndrome--SPCA, ADA, AMA, etc.); not only may your reader be unfamiliar with them, but even if they are, some acronyms stand for more than one organization--for example, "ADA" can indicate all of the following: American with Disabilities Act, American Dental Association, American Dietetics Association )
• use common language; most college textbooks are written for an eighth grade level reader

9. Be appropriate to the site's purpose

Don't mystify learners by using abstact icons/labels--make it obvious what the icon does.

• keep links updated; they should not go "dead"
• use obvious icons/graphics for purposes--such as a "?" to indicate help is needed, or an envelope graphic to indicate e-mail, books graphic for reading assignments, and so forth
• combine text with graphic icons to make sure learners know what an icon means

10. Support users' goals and behaviors

Do learners make use of what has been provided (resources, online questions, chatrooms, etc?)

Field test your site!! Have them do the following kinds of tasks:

• contact the instructor by e-mail
• take a quiz
• get to the course home page from somewhere within a lesson
• tell you where in the unit they are--how many lessons are left to complete?
• identify major sections in a given lesson
• navigate to the next/previous lessons
• access online resources for a lesson
• get feedback for a quiz/task
• tell how they know they've accessed a text link
• tell how they know they've accessed a graphic link
• participate in a chatroom/discussion board
• send an email attachment

previous

next