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.

Design and usability - separation anxiety

At what point was usability extracted from the design process and repackaged as something very different, or even oppositional? What we now call usability has always been an essential aspect of design itself. The difference between design and art, is that design serves an explicit function. A painting can be beautiful or evocative, can have abstract meanings and solicit different responses from different people. A poster, on the other hand, has an explicit objective, (eg. to communicate a message). If it fails to do this, it fails as a design. Every now and again I see an ad on TV that is funny or entertaining. It seems to have succeeded with me as a consumer as it got my attention and aroused a positive reaction. Then I realize I don't know what it was for. After 4 repeated viewings, though still amused, I still have no product association. The ad has essentially failed.

With design, the objective is the force informing design decisions. Everything in the designer's toolbox, from aesthetics to semiotics, is based on decisions that best meet that objective. Usability is one element in the toolbox that helps meet the objective. For a website, we want users to be able to use the site easily, to get the information they want quickly, or achieve their goal efficiently. We also want them to feel comfortable in the space, react positively to the environment, and trust the site - all of which are psychological reactions to aesthetic decisions as well as matters of ease of use. We may need to attract them first, so they choose to use our site in the first place. We may want to delight them so they choose to come back. Of course, the initial psychological sense of comfort in the space will be undermined if it isn't easy to use. All elements must work together and together make up a good design.

Industrial designers have spent centuries making chairs, appliances, household products, and workplace items that are easy to use, long before the term usability was coined. Ease of use was always one of the definitive roles of industrial design. An object that is hard to use, is considered badly designed.

Neither are design and usability separate in the design process. It's the designer that makes the usability decisions, inherently, as part of the designing. She doesn't do the design and then hand it over to a usability designer to do the usability part. They're not separatable in the creative process. Usability specialists, therefore, are evaluators. Once a site is complete, someone can come in and evaluate whether the design has achieved the "easy to use" element of the design objective.

Perhaps coming up with a separate label for this aspect of design has been an effort to reemphasize the importance of design's role as functional. At worst, however, for some it has lead to a notion that has extracted the function from the idea of design, and leaves design to be associated with purposeless aesthetics, nice if you can afford it but unessential. This is obviously an unfortunate misconception. I hope that the two can come together again in the social consciousness. That they may slowly merge back as one in order to better reflect the reality, that usability is just an element of good design. That it is insufficient on its own, and that it is merely a new word for part of what has always made design different from art: function.