15 July 2005

Design elements in effective learning web-sites

"Meaningful student learning may be dramatically enhanced as a result of vigilantly employing state-of-the-art design techniques, which reduce cognitive load. After examination of the current research in this area, recommendations are made for more innovative use of color, text, illustrations and multimedia when designing and building web-sites for online instruction."

Article: The design elements in developing effective learning and instructional web-sites. C. Vogt, D. Kumrow, E. Kazlauskas. Academic Exchange Quarterly, Winter 2001 v5 i4 p40(8)

This article describes some of the ways colour, images, text and animations can be used effectively based on research by Richard Mayer and others. Key points are summarised below.

Advantages of learning online

The authors claim there are 3 main features of the web that make it unique as an educational medium:
  • Hypertext(the capacity to interlink documents easily)
  • Multimedia (the ease at which multiple media can be combined on the web)
  • Interactivity (referring to instant feedback, self-assessments, simulations, guidance by intelligent agents, etc.)

  • Color

    Colour can make text and images stand out. It can draw learner attention appropriately. Color-coding has been shown to assist learners. Color can be used to organise, categorise, differentiate and help learners recall and retrieve information. Research shows colors for differentiation should be kept to a minimum (and never exceed 10). Research has also shown that color can help decrease cognitive load (which refers to how much your brain can take in at once). Certain colors already have certain meanings, and people understand color automatically. Therefore using color for meaning neans there's less to learn and more space free in the mind to absorb new information. Color is cultural and meanings vary drastically from country to country (so keep your audience in mind.) Research has shown that the overuse of color decreases performance on memory/recognition tasks (so may white space and consistency be your mantras).

    Text and illustrations

    According to the work of Richard Mayer, illustrations are of four types: decorative, representational, organisational and explanative. Research shows explanative images can significantly improve learning (increase recall/transfer by more than 50%). It’s also been shown that labelled diagrams are better than using text and illustrations separately. Images and text used together are more helpful than just plain text, but they should be placed close together ( proximity of related information is key – when learners have to look back and forth to connect information, it's harder to learn). Text, color, bullets, icons and fonts (when used consistently) can provide pre-designated meanings, thus reducing cognitive load.

    Multimedia and Animations

    Mayer's research shows that animations with sound (ie. narration) are extremely effective and better than using only one or the other. If used individually, they can be as effective only if cut down into short chunks. Animations on complex concepts that play without sound, can be useless if there is no additional component that provides meaning. Students need to, not just receive input, but be able to make connections, and the appropriate use of sound and animation can facilitate this.

    The complete article is available at Highbeam Research or, probably, at your local university library.


    1. Hey I'm interested in graphic design. Im trying to put together a portfolio of my work to apply for a course. My site is http://frenchyadv.blogspot.com Please leave your feedback on my work. Id love to hear from you!

    2. Hi! Its really great information you have in elearning design, currently i am my self, have been designing elearning for 3 years :) Its quite challenging task to actually design a perfect elearning module for particular users, whereas you mentioned above, there are several elements you sould pay attention at, like colours, layout, interaction methods (animation with sound, etc). I really love to show you my elearning portfolios n get your feedback, but rite now i haven't got time to upload it on the web, so, i really like your blog here, n see your vision in designing elearning :)

    3. Anonymous1:21 PM

      This comment has been removed by a blog administrator.