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 CDROM’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, preknowledge
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-aglance”
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.
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.
Number Q14 Programme Name: Baking a cake
Author: Tom Harris Date: 13 June 2001
Comments
Display text in
18 point, font
Tahoma
Exit to screen E1
Help to screen
H7
Back to Q13
Next to Q15
Complete the statement
Oranges are
A. Sweet
B. Bitter
Press A or B on the keyboard
Exit Help 
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 lessmotivated
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, bodilykinaesthetic,
interpersonal, intra-personal, and musical.
Learners also vary in how they assemble new knowledge. Some benefit
from a bottomup
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.