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.

Why visual design matters

“The current mindset in many educational institutions is to rush to host poorly designed web-sites, which instead of enhancing the learning process, may, in fact, actually impede student learning” (see reference at bottom)

It’s my own experience that, even today, too many people are ignorant of the real importance and impact of design on the effectiveness of elearning. There’s an archaic attitude that believes design is just about “making something look pretty” and not of real functional importance -- probably a relic of our traditionally arts-sceptical culture. Anglo-western cultures, have for years, (probably since the enlightenment) given preferential treatment to the quantitatively measurable domains like math and science, and often disregarded those with outcomes that we are less able to easily measure, like humanities and arts. Design, though it differentiates itself from visual art in that it always serves an explicit function, sometimes inherits this prejudice.

The irony is, that while decision makers may devalue the importance of design, users respond to their human instincts. As any designer or developer knows, you can have a feature rich application with dazzling functionality, but if it’s poorly designed, users will reject it. It’s not because users are superficial. It’s because design is a functioning part of our world and a key component of effective communication. Most of the information about our world we get visually. So of course it matters. We learn to judge, learn and understand new things based on what we see, and how it relates to what we’ve seen before it. Businesses, because of their experience with marketing psychology, image and experience design, picked up on the importance of elearning design fast. Design was always built into their process. It’s the universities that often lag behind. Perhaps their disregard is a way to rationalise leaving designers out of a very tight budget. Perhaps it’s because design was never explicitly built into the teaching process and now the acceptance that it’s required for the online environment, requires a paradigm shift.

The bottom line is that, without good informed design decisions, an elearning program risks failure and student dissatisfaction. Research into multimedia learning, cognitive load and graphics use, has shown time and again that design can drastically effect student outcomes. Whether students fail, drop out or succeed can depend, not only on instructional design, but also on visual design decisions.

“Online materials should be presented in a manner so that they incorporate, not only different learning modalities, but are capable of reducing cognitive load, increasing retention, and problem-solving transfer, facilitating the process of building internal and external connections among and between information while meeting educational objectives.”

How well students learn, is literally effected by design decisions about the placement and use of text, colour, animation, sound and imagery. There are further design issues to do with building a sense of community, encouraging students to participate, and the effects of graphics on anonymity and conviviality in a learning environment. There’s no way around it, design matters. So let’s stop wasting time arguing about its importance and move on to figuring out how we can use it best to make elearning that works.

Quotations from: The Design elements in developing effective learning and instructional websites. Christina Vogt; Dave Kumrow; E. Kazlauskas. Academic Exchange Quarterly

Designer elearning makes a debut

There's a percentage of digital designers out there gradually sliding into employment positions in which their design skills are set to tackle, not public websites or corporate intranets, but elearning environments. Learning programs, training applications, web-based classrooms, virtual learning environments and all the associated acronyms from LMS and CBT to (spare me the metadata) SCORM, IMS and XML.

Online learning needs to be visually designed and someone's gotta do it. The tricky part is, no one has done it much before. So here we are, doing the pioneering. A lot of the principles we've learned from web-based multimedia design will remain the same, but there's one very key difference: The goal of elearning design, is to support learning. Not to sell, or attract attention, or persuade or just convey information -- not even to entertain, per se -- but to facilitate learning. In this way, elearning designers, like it or not, suddenly become involved in the teaching. The decisions we make will inevitably effect the "learnability" of the content. Our design will never be entirely neutral. It will either clarify, support and enhance, or obfuscate, confuse and cause frustration. So naturally, we're aiming for the former.

Hence the inauguration of this blog. I've been interested in the visual design of elearning for a while now, and I see a scarcity of guidance on the topic (naturally, due to the newness of what I expect will eventually become a certified discipline). There's plenty of information out there we can use, packaged in other disciplines (web design, usability, HCI, human factors, instructional design, interactivity design, interior design, architecture, etc.) but it's yet to be pulled together and re-analyzed for the benefit of the new elearning designers.

For my own professional interests, I decided I would spend occasional bursts of energy, on the hunt for resources specifically geared to the elearning designer (looking especially to the disciplines mentioned above for a start). Then it occurred to me, if I was going to do it anyway, why not share it as I go, in case there are other searching souls out there, who could make use of the nuggets that emerge. The result, I hope, will be a collection of resources, research questions, best practice, inspiration, and provocations, that together, can begin to define a space that we might some day dub the field of Elearning Visual Design.