About Us

Lessons Learned

10 Design Guidelines for Developing Interactive Learning Web Pages

Work in a Team for design and development

Use team members to cover multiple areas of expertise:

  • Subject matter experts
  • Instructional designers
  • Programmers
  • HTML specialists
  • Graphic designers
  • Interaction designers
  • User testers
  • Someone knowedgeable in copyright and fair-use restrictions

Start Project planning with learning goals

Think about what you want the learner to walk away with. For example:

  • Understanding a concept
  • Being able to follow a procedure
  • Provide an analysis or critique
  • Develop a deeper understanding or appreciation
  • See another viewpoint

Consider that learning may be indirect, taking place in order to perform some other task

Develop a Pedagogical strategy

Plan the uses of text, media, and interactivitity and assessments to support your learning goals

Combine presentations "telling or showing" the learner, with opportunities for them to practice or apply what they've learned

Use activities appropriate for the learner level that build on one another, allowing the learner to progress

Motivate & engage the learner

Provide realistic contexts for learning activities, in which learner participates. For example:

  • scenarios
  • practices
  • case studies
  • problem-solving

Provide opportunities for learners to have options and make choices

Provide practices and questions for which there is not just one right answer

Use the web appropriately as a content medium

For example

  • use linear presentation to work through an example
  • use branching to explore possibilities and reactions
  • use multiple communication types to reinforce message (words and pictures, animation and voiceover)

Use audio, video appropriately, when voice, and/or movement contributes to experience, enhance authenticity

Avoid gratuitous use of media or letting the technology drive the learning experience

Give users a degree of control and manipulation -- let them click, manipulate, try new things, navigate

Consider alternate formats of media presentations for differences in learning styles and learner preferences

Take advantage of the web as a resource (and check links regularly for currency). For example:

  • field trips to online museums
  • web research tasks
  • comparisons and analyses of real-world examples

Provide an information framework and structure of lesson

Use a repeatable lesson structure and names for repeatable elements such as Units, Topics, Practices, Quizzes

Use text elements such as headings and subheadings, topic menus, advanced organizers, or outlines

Use graphic elements such as meaningful icons, colors and page layout to distinguish sections or direct attention

Let the user know where the lesson begins and ends and how to move through, (with elements like a description, welcome, a summary, checklist, clear navigation paths)

Even if an activity is purely exploratory, give guidance of what to look for and where to focus attention

Communicate expectations -- what should the learner know or be able to do as a result of the lesson?

Use an iterative design process throughout the project

Try out your design ideas in a low tech way and get feedback and reactions before investing in technical development

Use rapid prototype methods, such as paper and storyboards

Get feedback, make changes, get more feedback during the design and development process for overall course design and specific activity design

Provide support in the learning tasks

Provide temporary support for difficult tasks, helping a learner go beyond current capabilities. For example:

  • Break a complex task into subtasks
  • Simplify reality
  • Provide context-sensitive expert help, coaching, or worked examples

Present general, overarching supportive information first

Present specific procedural information at the point where it is needed

Provide meaningful feedback to the learner

Give learners meaningful feedback on the result of their action/choice

Encourage reflection, and evaluation of their thinking process, or problem-solving process

Give learners practice situations in which they can fail, get feedback, and try again

Write clearly and concisely

Avoid lengthy texts for onscreen reading

Write for readers who will scan the page rather than read word-for-word

Use natural-sounding, conversational language

Consider using storytelling and narrative techniques

Use the web appropriately as a technical delivery medium

Consider what technical capabilities your learners will have, such as operating system, age of computer, data connection speed.

Use web page elements that can be effectively delivered and supported within the available technical infrastructure.

Communicate technical requirements to learners at the outset of lesson

Have a technical support plan for the learners. Who will they contact for technical difficulties, and how?

Have "Plan B" for outages or for learners with special requirements