Site hosted by Build your free website today!

Competencies for On-line Instructional Design

There are a few reasons why it is difficult to create good instructional sites. One of these is that because so much of the web is a place to sell products, sites tend to want to "wow" the end user. So we see attention-grabbing flashing, twirling, jazzy graphics and hear sounds. However, when designing instruction, the main focus is to deliver specific information and provide practice using it. So, any graphics, sounds, videos, or whatever used on the site should have an instructional purpose for being there and should help direct the learner's attention to specific information rather than merely providing a distraction. Graphics/sounds used mainly for visual/auditory entertainment are often referred to as "eye candy". It's good to keep the following in mind for instructional sites:

"The foundation of good Web design is intuitive functionality, not aesthetics. The spatial organization of graphics and text on a Web page have a functional purpose: to direct the user's attention, prioritize information, and make the user's interactions with the information more enjoyable and efficient. Each one of us who authors and publishes Web documents is obliged to make our information clear, accurate, and accessible, and then perhaps pleasing to the eye. It is your expectations about how students and other readers will typically use your site that should be the basis of your Web site design."
Lynch and Horton (1998, p. 43)

A second reason that it can be difficult to have a good instructional site depends on who actually is responsible for creating it. An on-line course requires skills and knowledge from at least three different professions: instructional designers, graphic designers, and user interface designers. While some of these skills are shared among all three disciplines, each discipline has their own set of skills and guidelines. Therefore, a site can be lacking if experts in each profession are not consulted. Notice that there is quite a bit of overlap in the skills of graphic designers and user interface designers, but not nearly as much overlap with those of instructional designers.

Major Factors for Effective Navigation

The following table summarizes ten guidelines to keep in mind when designing instructional sites. These come from website usability author Jennifer Fleming. This is not an exhaustive list, but will keep you from some of the major pitfalls of poor navigation. Realize that there are various methods to achieve the guidelines; this is not a "technical how to do" list, but rather a "what to do" list.

Guideline Ways to achieve

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

Quick quiz

Guided Practice:

Now it's your turn to see if you understood this lesson. On a separate sheet of notebook paper, answer each of the following questions using the site for this lesson. Indicate how the pages of this site have accomplished the following navigational issues. After finishing, click on the "check your answers" link below.

  1. Ease of use?

  2. Accessing next and previous lessons?

  3. How this lesson fits in with the other pages used for the course?

  4. Identifying main sections within this lesson?

  5. Identifying subsections within this lesson?

  6. Visual consistency?

  7. Providing feedback?

  8. Having clarity of meaning (Icons, labels)

  9. Appropriate to learners' purpose?

(check your answers)


Lesson 3: Lesson Presentation