Designing your website

Introduction

The design of a website for learning requires a carefully considered process and should
be part of a process called instructional design.

What is Instructional Design?

Experts claim that a process of ‘instructional design’ can be followed to develop a wide
variety of learning materials, such as printed materials, computer-assisted instruction,
and even televised instruction. A formal definition of instructional design is: “A
systematic process for designing, developing, implementing, and evaluating instruction."
Therefore, Instructional design refers to the systematic process of transplanting
principles of learning and instruction into plans for instructional materials and activities.

The Association for Educational Communication and Technology labelled the process as
"an organised procedure for developing instructional materials or programs which
include the steps of Analysis (defining what is to be learned), Designing (specifying how
the learning should occur), Developing (authoring or producing the material),
Implementing (using the materials for strategies in context), and Evaluating
(determining the adequacy of instruction)." This definition is often referred to as the
ADDIE-model.

The Analysis phase

The ‘analysis’ phase is the first phase in the ADDIE-process and consists of several
actions. It is basically the collection of data related to the requirements of the learning
(the outcomes), the learners themselves, and the context in which the learning is going
to take place.

o Learning about learners. The more is known about learners, the better learning
activities can be designed for them. What can they do, and what do they know
already? An age-old principle of teaching is: start at the known and work
towards the unknown. It is critical to know what the skills/competencies and
knowledge of learners are before learning materials can be designed. Knowing
the learners’ current level of knowledge and expertise is therefore critical to a
successful design. If your interactive multimedia begins below the current
knowledge-level of learners, they may feel that it is boring, a waste of time, or
patronising—and they may stop learning. If the material begins above their level,
they may become frustrated and discouraged. If learners have various levels of
expertise, interactive multimedia must be designed so that learners at each level
can start at a different point or skip over unnecessary material. One aspect to
consider is their language skills. How good are their typing skills? What
technology can learners use? Can they use a mouse efficiently? Can they use CD-
 ROM’s or printers? How proficient are they with the Windows interface? If the
potential learners have never used a Web browser and they are required to find
information on the Internet, they will not have a meaningful learning experience.
What are the learner’s levels of motivation? Are they self-motivated enough to
learn on their own? Or do they require the authority of an educator, the social
pressure of peers, or rigorous schedules in order to learn?

o Learning about the curriculum and content requirements.

This is an important part of the analysis phase. Not all content is the same. The
nature of content of a subject field like History is vastly different to for example
Mathematics, and content is often presented differently and different learning
activities are associated with these two subject fields. It is therefore important
that the designer has an understanding of the nature of the content. In addition,
in the South African context, legislation may prescribe learning outcomes, for
example the Critical cross-field outcomes, learning area outcomes etc. Any type
of learning materials that are designed must account for the requirements of
these outcomes. In addition, the specific lesson outcomes for the content may
require different types of learner activities. Learners may be required to solve a
problem, analyse a complex phenomenon, compare two ideas, find mistakes,
etc. In summary, the curriculum and specific content may require that

certain critical and learning area outcomes are met,

the content is presented in a certain way, and
certain types of learning activities are used.

In addition to knowing about learners and the content, the designer must take
cognisance of the context in which website will be used. For example, if the website
will make use of sound or video, the computers must be able to play these types of files
back. Computers will also have to be equipped with speakers or headphones. The
physical setup of the room, the arrangements of computers in the room, and the
number of computers in the room are all factors that could play a role. In terms of
software, specialised types of software may have to be installed on the computers, for
example a Flash ™ plugin, or other multimedia players.

Once the instructional designer has completed the analysis phase, the design phase can
be initiated.

THE DESIGN PHASE

The design phase follows the analysis phase, and it is here that the instructional
designer translates the outcomes, context and learner profile into a specific plan, based
on the data collected during the analysis phase. The designer must use knowledge of
learning theories and the capabilities of computers (affordances) to design learning
activities in such a way that that learning takes place in an efficient and effective
manner.
Analysing the outcomes

As the outcomes for the planned learning are deconstructed, the following question can
be asked about each outcome:

In order to meet this outcome, what must done by a learner?

The different outcomes can relate to:

Skills. What skills must learners have after the learning? What new procedures
can they perform if required to?
Knowledge. What understanding will they possess? What decisions can they
make based on their current knowledge?
Attitudes and beliefs. What beliefs do they hold to be true? Do they need to be
convinced of some principle or fact? Are there biases that need to be erased or
instilled?

Once an understanding of the outcomes and the types of activities that they will require
has been determined, the next step in the design phase can commence.

Developing initial content ideas

Now that a clear understanding exists about the envisaged outcomes has been gained,
initial ideas for the content need to be developed. Two techniques may be used for this:

Brainstorming (initial content and learning approaches). Brainstorming can be

used to develop specific ideas for content and approach. In other words: what
needs to be learned (guided by the outcomes), and how learning will/can be
facilitated. Brainstorming will generate many ideas, but, because by nature
brainstorming is non-evaluative, many ideas will have to be eliminated.

Elimination of some initial ideas. Some of the ideas generated during the
brainstorming session will need to be eliminated, and this can be done based on
the following:

The characteristics of the learner population. Learners’ age, pre-

knowledge and skills, reading ability, aptitudes, computer skills, etc., may
necessitate the elimination of certain ideas.

Relationship of ideas to subject matter and outcomes. Ideas generated

during the brainstorming may only remotely relate to the subject matter
or goals. Even though these ideas may be good ideas, they will have to
be discarded.

Amount of time needed to learn the content. Some of the ideas

generated will take up too much time in relation to the overall available
 time for the project, or the amount of time required does not match the
importance of the topic or idea.

Restrictions of the delivery system. Depending on the delivery system,

some ideas may have to be eliminated. The limitations relating to the
delivery system may relate to the capabilities of the computer system
itself, bandwidth, multimedia capabilities of the computers, etc.

Ability of the developer (which may also be the educator). The skills of
the developers need to be considered. Simulations, games, and highly
interactive systems are considerably more difficult to create than simple
drill or tutorial systems, and the developer may simply not have the
necessary skills.

Having eliminated many ideas, only a few ideas may remain, and it is these ideas that
need to be developed into usable ideas.

Preliminary programme description

The previous activities help to analyse content and instructional ideas into manageable
pieces. For these pieces to come together into a whole, they must be integrated,
keeping in mind what is known about the way that people learn. The process by which
this integration can be established is often referred to as instructional analysis. These
considerations are now described.

o Identifying types of learning

The designer will have to decide what the nature of the intended outcomes is. Will
learners have to discuss, write up, explain, solve problems, generate solutions, do
things, demonstrate skills, collaborate with other learners, construct or build and
electronic task, etc. An understanding of the nature of the type of learning that is
envisaged helps to gain insight into what cognitive levels learners should operate, which
in turn will impact on the methodology and strategies that will be employed.

o Choosing a methodology

The process of generating ideas during the brainstorming may already have hinted at
the methodology that could be used to create learning experiences. The following
examples are only a fraction of possible learning experiences that learners can be
exposed to:

Examining good and bad examples

Performing a procedure or playing a role
Planning and conducting experiments
Listening to someone tell a story
Answering questions on a subject
Searching for relevant resources
 Participating in a discussion
Gathering and analysing data
Repeatedly recalling and applying knowledge
Creating work and having it critiqued by others
Critiquing the work of others
Watching a video or animation sequence
Comparing, contrasting, and summarizing information
Building a web site
Making a game

If a decision on the methodology has not yet occurred at this point, it should now be
finalised. The decision will be a function of:

The ideas previously generated

The capabilities (or limitations) of the delivery system
Consideration of the learner level (cognitive/motor) and motivational levels
The types of learning involved

Important: When designing a web site, it is important to consider some of the design
principles appropriate for the medium. Some of these principles relate to aspect of
learning, while some relate to aspects of screen design. These concepts are discussed in
later in this text.

o Factor decisions

Having decided on a methodology or combination of methodologies (tutorial, drill,

simulation, etc), it is now time to consider the factors that are associated with these
methodologies. Some of the more important factors are:

Feedback: when, how much, way of feedback, etc.

Question types: Multiple choice, True-or-False, one-word, etc.
Learner control: how much control should the learner have?
Motivation: What can be done to improve motivational levels?
Judging: will answers by learners be judges and tracked?

There are many more factors to consider. These factors need to be considered carefully
as to how they will be treated in the programme.

o Sequence description

The last activity in the preliminary programme description is to produce a preliminary

description of the sequence of the programme. This preliminary description will include
information about the general order by which information will be presented, the
opening scene, directions, interaction, remediation, the closing, method of item
selection, etc. To this aim, it may be helpful to draw a simple flowchart, which will also
help to sequence and organise the programme.
Storyboards

Storyboards are a visual way of representing the design that has been decided upon.
Once the preliminary programme description has been done, the “plan” for the
interactive multimedia learning programme can be transferred to a storyboard.
Storyboards are a series of pages or cards that can be stuck to a board which indicates
the sequence and flow of the programme. A storyboard therefore provides an “at-a-
glance” view of the entire programme and can become the basis from which the
developers, the programmers, graphic artists, etc. work. Storyboards may differ in
complexity or detailed, which is often determined by the needs of the instructional
designer or personal preferences. Below is an example of how one page of a storyboard
may look like. Each page in the storyboard represents one screen.

Number Q14 Programme Name: Baking a cake

Comments
Author: Tom Harris Date: 13 June 2001
 Display text in
Complete the statement 18 point, font
Tahoma
 Exit to screen E1
Oranges are Press A or B on the keyboard  Help to screen
H7
A. Sweet
 Back to Q13
B. Bitter
 Next to Q15
Exit Help  

In the storyboard page above, Q14 would refer to question 14. The name of the
programme, the author, and the date also appears. Text on this screen will appear in
Tahoma, size 18. Should the learner click on ‘Exit’, screen ‘E1’ will be activated. Clicking
on ‘Help’ will take the user to screen ‘H7’. The left arrow will take the user to Q13
(question 13).

Storyboards are often handwritten scribbles, and as said before, the details included on
it may vary. The example above gives a pretty adequate layout of the screen, but does
not specify text colour. No indication of the use of graphics, backgrounds, etc is made.
In a subsequent paragraph, the layout and composition

Ongoing evaluation

Suffice here to say that it is imperative that each step in the design process MUST be
accompanied by evaluation and revision. Evaluation should not be done at the end of
the entire design process (summatively), but as the design process develops, step by
step (formatively). Some aspects of design (like look and feel) should be evaluated early
on, as it may impact on other design aspects.
Once the design phase of the ADDIE-process has been completed, the next phase can be
entered, namely the “Development’ phase.

THE DEVELOPMENT PHASE

Once the design phase is complete, the interactive multimedia programme can be
constructed. Development refers to the entire process of producing, refining and
validating the programme. A whole host of software could be used during this phase.
Material created for web delivery can be developed in pure HTML, or by using web
authoring software like Microsoft FrontPage, Coldfusion, or Macromedia Dreamweaver,
or online designing tools like Yola, Homestead, BlueVoda, etc. In addition, image-editing
software such as CorelDraw, Adobe Photoshop or Gimp will have to be used to develop
the necessary graphics. If the programme will utilise sound, graphics or animations,
software to develop and edit those elements will have to be obtained.

To reduce development effort and ensure consistently high quality, page templates and
other reusable elements for common pages and interaction types may be first created.
Such page templates are partially completed components with editable areas where
courseware developers can pour their content. A page template might include a course
emblem and navigation buttons already in place while leaving placeholders for the page
title and other text, graphics, or video content.

Typically, the following steps will have to be followed:

o The development of a project management plan. It is important that the

development of multimedia software be managed in terms of time and budget.
Students in this course should not spend money on their assignments, but the
development of commercial software will definitely cost money. It is further
important to set a realistic time frame. Using Gantt-charts is an effective way to
manage the timeframe of a project.

o Preparation of the text components. Most educational multimedia will have

some text in the software. The developer may use a word processing tool like
Microsoft Word to develop text and simply import the text into the authoring
tool.

o Authoring of the separate pages or screens. Every single “screen” that is to be

used in the multimedia programme will have to be developed. These screens
may contain text, graphics, video, sound or animations. In addition, interactive
components like questions, hyperlinks, and navigation buttons have to be
developed.

o Creation of graphics, sound and video. Web pages would be very boring if it only
consisted of text. However, graphics, sound and video may require significant
skill and additional software tools. For professional multimedia, it is best to have
these aspects developed by professionals. Keep in mind that this could be very
expensive!
 o Assembling the pieces. Once all the different components have been developed
(like text, sound, graphics, etc.), they need to be included in web pages in the
sequence that was decided on during the design phase.

o Preparation of support materials. Good educational websites may be

accompanied by support materials. Support materials may include use guides,
help pages, additional content, exercises and contact details for the developers.

IMPLEMENTATION AND EVALUATION

The final phases of the project in the context of the ADDIE model are the
‘Implementation’ and ‘Evaluation’ phases. These two phases are narrowly related and
inter-dependent and interact so closely that it is virtually impossible to separate them as
distinct phases. Hence, they are discussed together here.

No web site is perfect and can always be improved. As soon as the web site is
developed, it should be evaluated for its effectiveness. Such an evaluation will serve as
a guide during the efforts to continually improve the course. There are several ways in
which implementation and evaluation can take place.

The first step in evaluating multimedia is to conduct a pilot offering of the web site. Plan
a pilot offering early enough so that enough time is had to correct any mistakes that
may be discovered and any misunderstandings brought to light by the initial learners.
Recruit learners with the same needs, motivations, and background as those who will
eventually take your course. The group should be large enough so that results will be
meaningful but small enough for the group to be manageable. The pilot should be as
realistic as possible. The results of the pilot offering should be compared with the goals
for the educational multimedia. Questions to ask are:

o Did learners learn what they were intended to learn?

o Which outcomes were fully met and which only partially?
o For outcomes that were not fully met, try to identify what went wrong.
o Were there confusing aspects?
o Did learners lose motivation?
o Did technical glitches interfere with learning?

Once the pilot offering is complete, it will be necessary to revise the web site, based on
the lessons learnt. Good instructional design is never a linear, one-time process but an
ongoing cycle of development. By continually analysing, designing, building, evaluating,
and redesigning, perfection - or at least effectiveness – may be approached. In general,
the more design cycles are employed, the better the final design will be.
Once the cycle of pilot implementation and evaluating is complete, the educational
multimedia is ready for use.

PRINCIPLES FOR EFFECTIVE DESIGN

In the previous paragraph, the design phase of the ADDIE process was discussed. In this
paragraph, a closer look is taken at some of the issues to consider when educational
multimedia is designed. These aspects could be considered principles for the design of
educational multimedia.

THE IMPORTANCE OF MOTIVATION

Probably the most critical factor in learning is the motivation of the learner. The
designer must ensure that learners are properly motivated. With proper motivation,
learners surmount difficulties and overcome problems that would stymie their less-
motivated counterparts. Motivation can be either internal (intrinsic) or external
(extrinsic). Internal motivation works from within the individual. The internally
motivated learner learns in order to satisfy curiosity or purely for self-fulfilment.
Externally motivated learners act to satisfy outside needs, such as to achieve a required
certification, to please the boss, or to avoid embarrassing mistakes, for more money, a
promotion etc.

Classroom education provides ample doses of external motivation such as the

encouragement of the educator and fear of embarrassment in front of fellow learners.
Multimedia however, must rely more on internal motivation and, in fact, may be better
suited for learners with already high levels of internal motivation or else with a direct
external motivation, such as passing a course. How can motivation levels be improved?
Motivation can be improved by:

o Clearly stating the benefits of learning. Learners need to know what they will
accomplish through learning. They need to know “What’s in it for me?” How
will learning make them healthier, wealthier, or happier? However, a statement
listing the educational objectives of the course is seldom sufficient to motivate
learners today.

o Invoking curiosity. Curiosity is one of the most powerful motivators. It can be

used in multimedia to plant questions in the minds of learners that they can best
answer by completing the multimedia learning. Here are some ways to use
curiosity to motivate learners:

o Start with a pre-test that leaves learners wanting to learn why their answers
were right or wrong. State a problem that the multimedia will teach how to solve
and make it a problem experienced by most learners. Show desirable results that
learners can accomplish by completing the multimedia. Include evolving content,
such as new material, news events, and links to ongoing problems.
 o Challenge learners. Overcoming challenges is inherently motivating. This is why
people spend time solving puzzles, playing games, and exploring interesting
places. Use the following techniques to make the multimedia effectively
challenging:

o Increase the difficulty gradually. Make sure that all learners can get started but
none run out of challenges. Include a few easy questions on tests and a few very
difficult questions. Acknowledge progress by providing encouraging feedback to
learners as they move through the multimedia. Promote learners through a
series of levels, as in video games. Layer materials by providing deep reserves of
optional material so that learners who are interested in a particular part of the
course can find out more on their own.

KEEP THE DIFFERENCES IN THE LEARNERS IN MIND

Designers often fall into the trap of referring to “the learner” as if there is only one
learner or that all learners are clones of the same learner. Such thinking can lead to an
oversimplification of the approach by assuming that all learners are alike. Not only are
learners rarely the same, they vary in their attitudes and abilities from hour to hour or
even minute to minute. Learners vary in the ways they attempt to learn material and in
the ways they are most effective when interacting with learning material. Some
learners are primarily verbal while others are highly visual. In his book Frames of Mind,
Harvard psychologist Howard Gardner identifies seven “intelligences” through which
people learn and think. These include linguistic, logical-mathematical, spatial, bodily-
kinaesthetic, interpersonal, intra-personal, and musical.

Learners also vary in how they assemble new knowledge. Some benefit from a bottom-
up approach, learning small pieces and then assembling them into larger and larger
units of knowledge. Others absolutely insist on a top-down approach, starting with a
big-picture preview of the whole before considering any of the details. Some learners
prefer to begin with abstractions and then view examples of how they apply to specific
cases. Others prefer the opposite approach, starting with concrete examples and
discovering the general principles for themselves. In addition, differences in language
skills, visual and hearing impairments, and varying levels of computer skills profoundly
affect how well people can learn from a particular medium or technology.

It is best to design for the mainstream preferences and common abilities of

heterogeneous groups. Designers may suggest a specified path through the material,
but should not restrict learners to this path. Through menus, course maps, hypertext
links, and an alphabetical index, learners can locate and learn exactly they way they
want to learn.

Often the best approach is to let learners choose how to learn. Provide the same
material in different forms and let learners select the form that best meets their needs.
By providing a rich navigation model learners are enabled to work through the material
in a sequential, top-down, bottom-up, or exploratory order. Provide tools for learners
to measure their progress against their own goals.
Simplify learning activities to match learners’ computer skills. Do not overwhelm
learners with new technology. As a rule, do not require learners to master more than
one new technology at a time. If learners’ skills are limited to surfing the Web and
sending e-mail, you probably do not want to require them to download and install three
player programs, hook up a microphone and video camera, and engage in
videoconferences all during the first module of the course.

EMPHASISE IMPORTANT CONTENT

It is important to focus the attention of the learners on important material. A

multimedia learning environment may contain many, many pieces of information, and it
is important to make sure that the focus is on the most important parts. Explicitly tell
learners what is important and why. Use motion, bright colours, loud sounds, stark
contrast, larger size, arrows, and other emphasis mechanisms to focus the learner’s
attention on the material you are teaching. Conversely, use static shapes, cooler
colours, low contrast, and small size for secondary or purely decorative items.

Attention is like a torch in a dark room. People observe the details of objects in the
bright beam but notice less about objects in the dim shadows. The more time people
spend considering an object the more likely they are to learn about it. It is important to
realise that distractions may hinder learning. Noise, interruptions, and distractions can
interfere with learning, as anyone knows who has tried to study with unwanted loud
music playing. Anything that disrupts thought processes or draws attention away from
the material being taught can hinder learning. Therefore, in multimedia learning
environments it is important not to use too many flashy, attention-grabbing elements,
unless the focus is meant to be on that part of the screen.

INCLUDE OPPORTUNITIES FOR PRACTICING

When it comes to learning, practice makes perfect—or, at least, it perfects and deepens
prior learning. Repeated practice improves recall. Repeated practice is a useful way to
make the recall of facts faster and more reliable. Practice also helps to consolidate
complex activities so that they can be performed smoothly and spontaneously. Only by
repeatedly speaking in a foreign language people progress from hesitantly uttering
individual words to fluently discussing complex issues. Only by practicing the individual
steps of a dance movement do people begin to integrate them into smooth, graceful
movements.

Therefore it is important to let learners practice newly learned material as soon as

practical. Immediate practice helps to reinforce learning. It also rewards learners with a
sense of accomplishment and lets them monitor their own progress. Provide lots of
opportunities for practice and let learners decide how much enough is. Some learners
may master a skill or concept immediately. Others may need more practice. Some may
want only a cursory ability while others may want to perfect their abilities before
moving on. Rather than specify how much to practice, specify the level of performance
to achieve. For example, “Repeat the game until you achieve a score of 60 points or
higher.”
To the extent possible, make the practice required in activities similar to applying the
skill in the real world. It’s important that the practice exercises the same mental
processes as the real-world application. A highly realistic visual simulation of real-world
situations helps, but is not the most important factor and not absolutely necessary.

STIMULATE THINKING, NOT MERE CLICKING

Much “hands-on” learning is unfortunately “brains-off” learning. Many activities require

little more than a modicum of eye-hand coordination. For effective learning, design
activities that require learners to think about the material. Require analytical thinking to
complete activities and pass tests. Rewrite questions that can be answered by process
of elimination or by parroting back words read earlier. In multiple-choice questions,
provide at least four plausible answers. Require learners to apply knowledge. Present
realistic situations in which learners must specify how they would apply what they
learned. Require combining separately taught ideas. Require learners to compare,
contrast, and integrate separate ideas.

HELP LEARNERS SEE ASSOCIATIONS

Help learners to connect ideas so they are easier to recall and their context is clear.
Relate new ideas to old when introducing new ideas. Remind learners of related ideas
they learned earlier and show how the new ideas extend or contrast with the older
ones. Present multiple examples and show more than one version of an idea. Try to
include enough examples and non-examples so that learners recognize the essence and
limits of the idea and see how many ways it can be applied. Encourage learners to
explore an idea from different perspectives. Let learners examine a single idea, then in
context with related ideas, and as a part of a larger whole. Help learners understand the
idea in the abstract as well as embodied in concrete examples.

CONSIDER THE LIMITATIONS OF HUMAN PERCEPTION AND MEMORY

The limitations of human perception, memory and attention are well documented.
Visual perception for humans is limited to six or seven items. People can take in only
about a half dozen objects at a glance. More than that and they have to laboriously
examine them one at a time or in small groups. Working memory is also limited to about
seven items. Try remembering a list of more than a few items and you quickly run into
the limits of human working memory. Working memory is short term. Try recalling a
new phone number for more than about 20 seconds, without continually repeating the
number to refresh our memory.

Therefore, keep content simple, short, and to the point. It is relatively easy to overload
learners. Too many facts and images may dazzle the learner without teaching anything.
Rather than long lessons, teach in a series of micro-lessons, each conveying a single
concept, skill, or fact. After presenting a concept, immediately let learners practice
applying the concept and verify that they understand it. (An increasingly common term
for such small, complete units is learning objects.)
The more complex the content is, the more the need to simplify the presentation.
Eliminate unnecessary material. Move secondary information, needed by only a small
fraction of the learners to a deeper layer or subsequent page. Limit the number of items
the learner must contend with. Keep lists short. Divide the display into only a few main
areas, each with only a few objects. Simplify text and graphics. When possible, use
shorter paragraphs and lists. Employ only as many colours, shapes, and other objects as
necessary.

THE IMPORTANCE OF SCREEN AND TEXT DESIGN

On a web site, learners can jump around, taking topics in the sequence that best suits
their needs and preferences. Therefore, designers must ensure that when learners
arrive at a page they clearly see how it fits into the overall learning program. Here are
some suggestions for keeping context clear:

o Title pages clearly. Ensure that the title (and main heading) makes sense by itself.
Avoid titles that assume learners have read some “previous” topic. Also avoid
cute titles that are explained only by reading the text of the page.
o Introduce the subject. Include a brief introduction, just a sentence or two to
explain why the subject of the page is important and how it relates to other
subjects.
o Include where-am-I cues. Large Web sites frequently show the path from the top
menu to the current topic, something like this: “Overview > Getting started >
Step 1.”

Consider the following websites to learn more about navigation design:

http://graphicdesign.about.com/od/effectivewebsites/a/web_navigation.htm
http://www.smartwebby.com/web_site_design/website_navigation_tips.asp
http://www.build-your-website.co.uk/website-layout.htm
http://www.efuse.com/Design/navigation.html

Kruse and Keil (2000:107) explain that the design of the web site must be such that it is
simple and apparent for the user to interact with it. Users will often ask:

o What must I do now?

o Where was I before this? How do I get back there?
o Did I finish everything?
o How do I get out?
o What is it doing? Why is it doing this?

It is also important that the user is put in control of the lesson. Perception of control
can be improved by providing status messages, making actions reversible, allowing for
mouse or keyboard control, access to help, menus and exit functions.
The creation of consistent and logical designs is important for good interface design.
This can be achieved by:

o The use of clear and logical screen layouts (see below)

o Be consistent in visual cues
o Use clear messages and be consistent in media choices
o Have menus behave predictably
It is also important to provide informative guidance and feedback. This aspect can be
improved by including page counters, making help and instructions easily accessible,
writing clear error messages, giving appropriate warnings and making messages polite!

Good screen design deals with visual elements like layout, text legibility, the use of
colour and graphics and the use of multimedia components like audio, video, and
interactive elements. Some important principles are:

o Avoid visual fatigue. Learners may have to look at hundreds of pages. Choose
designs that are simple and do not easily tire the eyes and mind.

o Design for scanning. Learners skim, scan, and skip before settling down to read.
Design so that learners can find an individual item of interest quickly and reliably.

o Design to educate or train, not to impress. Learners who have seen the latest
Hollywood special effects and played the latest video games may not be
impressed by a simple multimedia course. But they can learn a great deal if you
design it correctly.

o Be consistent in design. This is a very important aspect for any instructional

software. The simplest way to achieve consistency is to divide the screen area
into functional areas. Divide the page into a large primary content area in the
centre and a few secondary areas around the edge for banners, navigation
buttons, and secondary content. Distinguish areas with different colour
backgrounds or borders, or just by the alignment of objects within the areas.
The area at the bottom could be reserved for the main navigation and course
services (Exit, Help, Menu, Back and Next) buttons. The large area in the middle
could be the main presentation area. The most prominent heading is the banner
heading, with the course title or topic. Once these zones have been established,
use them consistently. Standardise the location of banners, titles, location
indicators, navigation buttons, and any other items common to many pages.

o Text layout and format need to be considered carefully. Adequate type size is
important. In general, use a10-point font. Make sure that the text stands out
from the background. Normally dark backgrounds work well with lighter text,
and the other way around. Avoid fussy backgrounds and backgrounds that are
similar in colour and brightness to the text. Minimal emphasis mechanisms.
Within a paragraph, use only a few variations of font, style, or colour. It is OK to
emphasize a word or two, but not every third word and not the whole
paragraph. Make sure that text if left-aligned text. Avoid centred or right aligned
text except for short passages and then only for a special effect. Keep short line
 lengths. Do not use ALL UPPERCASE for entire paragraphs. Use simple character
shapes (fonts) and avoid decorative and highly stylised fonts. For screen display,
a simple sans serif font (like ARIAL or TAHOMA or VERDANA or CALIBRI) works
well. If long passages of text are included, the learner usually will not read the
entire screen. Seventy- nine percent of computer users always scan new pages
and only 16 percent read them word-by-word. Learners will scan the page,
looking for pertinent keywords, sentences, and paragraphs. When scanning,
learners will read only the first sentence of a paragraph to see if they will read
the entire paragraph. There are ways to help them decide which ones to read:
Write in the inverted pyramid style, where the conclusion is the first
sentence in a paragraph and the least important details are at the end of
the paragraph. Put only one main idea in each paragraph.
Structure the text to help learners scan. Include meaningful headings
and sub-headings or use highlighting and emphasis (like bullets) to make
important parts stand out.

Computer users read 25 percent slower from a computer screen than from
paper. This is often due to poor font quality, especially on screens with low
resolution; low contrast between the background and words; light problems like
being too bright or flickering; greater reading distance for the reader; and layout
and formatting problems. Users will often print pages to read them better.

GRAPHICS AND ANIMATION

The astute use of graphics and animations may enhance learning. Unfortunately the
opposite is also true – when used incorrectly, graphics and animation will in fact be
detrimental to learning. The primary task of graphic design is to create a strong,
consistent visual hierarchy, where important elements are emphasized, and content is
organized logically and predictably.

Special consideration should be given to graphics when the medium of delivery is the
WWW. The WWW relies on bandwidth to deliver information. Traditionally, graphics
files are large, and the more graphics a web page contains, the longer the page will take
to download.

Beware of graphic embellishments. Horizontal rules, graphic bullets, icons, and other
visual markers have their occasional uses, but apply each sparingly (if at all) to avoid a
patchy and confusing layout. The tools of graphic emphasis are powerful, and should be
used only in small doses for maximum effect. Overuse of graphic emphasis leads to a
"clown's pants" effect where everything is garish and nothing is really emphasised. The
overuse of animated graphics may also detract from the purpose of the programme if it
does not serve a specific purpose.
A TYPICAL “LESSON”

As seen from the previous paragraphs, it is not simple to design an develop a

multimedia lesson. It is important that the processes of instructional design are
followed, and that several principles in terms of learning and screen design be followed.
Keeping this in mind, a computer-based multimedia lesson will include several
components, which are briefly discussed below.

The Introduction

Any multimedia programme should have an introduction, which must fulfil some
important functions. The introduction of any programme should contain at least:

o A title page. This page should be interesting, and is often called the “splash”
screen. It should have a clear title, and perhaps identify the author of the
multimedia. It should also give some indication as to the target group of the
lesson.

o The outcomes should be clearly stated on a subsequent page. The outcomes

particular to the lesson, the learning area and the relevant critical cross-field
outcomes should be stated.

o The directions for use should be stated. If the learner needs to know how to use
the multimedia lesson, how to get back to the start, how to access help, etc., this
information should be available.

o It may also be important to do learner identification. The multimedia may

require a learner to “logon”, so that the learner can be addressed by name and
performance can be tracked and stored.

It is important to have a good introduction as a poor introduction may very well impact
on the perception of learners of the programme. Once the introduction is complete, the
learner may be moved on to the next section.

Presenting the content.

Typically, content will be presented in text, graphics, sound or video format, or a

combination of these. Content will be presented keeping in mind the principles of good
screen and text design. The learner may encounter content, and may even be allowed
to choose to read additional content on the same topic. Learners should receive
feedback when they answer questions. After answering questions, the learner may
proceed to the next section. The learner should be allowed to move forward or
backwards, or skip sections if they so wish.
Aspects to consider

o Providing help. Users most often need two kinds of help: Help with procedures
and help with information. Help can be provided either by using rollovers or by
buttons or by menu selection. Programmes can also provide help by means of
print-based materials.

o Assessment. It is important to know that all instructional programmes MUST

have some form of assessment. Sophisticated computerised assessment
programmes keep track of learner performance during the tests. In general, the
following types of assessments are possible in a computer-based environment:

True or false
Multiple-choice
Text-input/ fill-in-the-blanks
Matching items
Click-in-picture
Drag-and-drop

It is relatively easy for computers to assess performance that is measured by

using objective assessment items like the examples above. It is much more
difficult, and probably impossible, to assess essay-type questions with a
computer, although attempts at creating such software is being made.

It is important that meaningful feedback should be given during assessment.

Feedback like “Correct, proceed” or “Incorrect, try again” is meaningless and
contribute very little to learning.

SUMMARY

In this theme, the underlying principles that govern the development of software for
learning were identified and described as instructional design. The concepts was first
defined and described, after which a generic model for instructional design was
proposed in the form of the ADDIE model. Each of the components of the ADDIE model
were identified and described.

Then, effective training principles were identified and describe. The design and flow of
a typical multimedia lesson were proposed after which the ‘secrets’ of user interface
design were discussed.