Topic 8 - Designing Hypermedia
Guidelines for Effective Product Design
By David Sebald
These are "quick and dirty" guidelines which have been gathered over a
period of years from many resources on instructional design. Some concepts
are expressed several times in different words, and some ideas are apparently
in disagreement. Visualize each guideline applied to a project you might
create. Reason the logical justification for each guideline.
Rules for Efficient Production
What is the purpose? Who is the intended user? What is the intended
platform?
Research the topic thoroughly:
What is the course content? What are the major topics/concepts?
Establish goals & objectives:
What specific concepts, skills, attitudes should the user acquire through
the instruction? How can these outcomes be measured?
Sequence instructional tasks:
Write a flowchart on paper.
Gather all media.
Decide on appropriate production tools.
Create the computer program.
Package the product
Produce accompanying documents. Create covers.
Implement the product.
Evaluate & revise the product.
Visual Interface Rules
Use Contrast to make things easy to distinguish and keep separated.
Allow "frame" space around the screen elements.
Distinguish different kinds of information visually.
Leave lots of room around graphics.
Use Repetition to keep continuity both on a page and throughout
a project.
Reproduce the screen exactly in each frame.
Keep continuity of screen elements (identity/size/placement) from frame
to frame.
Keep element locations constant.
Use Alignment to make screens sections aesthetically pleasing and
to lead the viewer's eye appropriately.
Titles should be at top and to the left.
Start frame in the upper left.
Use Proximity to group related items together.
Controls and options should be at bottom.
Use Balance to keep make the screen seem economical and aesthetically
pleasing.
Center the display.
Use rule of thirds to place objects of importance.
Weight the screen equally.
Use Emphasis to bring the most important things to the viewers attention.
Omit extraneous detail.
Keep readings short and logically segmented.
Use a 24 line screen.
Indicate topic and concept clearly on every frame.
Keep relationships to all information clear.
Use Logic to put things where they make the most sense.
Form should follow function.
Use Color for psychological reinforcement.
Don't use blue on black.
Don't use too many colors.
4 - 6 colors is best for an interface.
Blue is always a safe background color.
Use Dynamics to imply feeling and for psychological reinforcement.
Consider cultural values in symbol and color choice.
Keep the message more important than the medium.
Keep the interface clean (don't let effects get in the way of clarity.)
Be economical in the use of screen gadgets and controls.
Make sure that the viewer grasps meaning fast and easily.
Don't clutter visuals with too much information.
Make symbols obvious, attractive, simple, informative, distinct, concrete,
familiar, legible, and few in number. Use "normal" photographs to illustrate
concept, not photos that call attention away from it.
Use animation for dynamic concepts.
Keep screens orderly.
Use easily identifiable navigation tools and icons.
The Four Rules of Screen Design
Keep it consistent. Keep it uncluttered. Highlight important ideas. Keep
it readable.
Keep screen consistent:
Type size and font
Element location
Color
Control location and identity
Design and mood
Use lots of blank spaces
Rules for text:
Keep text large enough to read easily.
Don't stack text.
Use serifed fonts for text to be read.
Use sans-serifed fonts for headlines.
Avoid stylized fonts except as symbols.
Limit the sizes, styles, and colors to 3.
Don't use too much text to be read quickly in any text block.
Keep text as short as possible.
Use left justification in text blocks rather than full justification.
Keep text readable.
Grade level.
Wording.
Content.
Context.
Sequence.
Style.
Highlight important concepts:
Use plain English.
Use lots of blank spaces.
Don't duplicate aural narration with visual text.
Rules for user interaction:
Let the user control action as much as possible.
Motivate the user.
Allow the user to control progression and navigation.
Allow for self-pacing but not procrastination.
All frames should contain an interactive component.
Keep the user oriented.
Frames can be multipurpose (present information & encourage manipulation).
General rules for effective instruction:
B.F. Skinner's 4 Basic Principles of instruction:
Formulate clear objectives.
Use substeps in large units.
Allow for individual progress.
Build new concepts on previously learned material.
Other Ideas:
Engage the user's attention. (enhances memory).
Present a question before presenting information. (doubles knowledge
retention).
Clearly connect new information to previously acquired knowledge.
Keep information flowing (to preventg boredom)
Provide mnemonics and iconic or pictorial aids.
Ask the user to reconstruct steps leading to newly acquired concepts.
Use varied repetition & practice to cement important concepts.
Reward correct responses.
Do not use clever, sarcastic, or harsh punishments for wrong answers.
Keep the environment and problems as realistic as possible.
Keep the structure open and understandable.
Keep objectives clear and meaningful.
Keep instruction clearly sequenced, progressive, and in easily digested
steps.
Avoid leaps of logic.
Don't bore the user.
Learning should be fun: Stimulating, motivating, captivating, engaging,
rewarding.
Aim to the level of the user: Age, socio-economic group, familiarity
with topic.
Rules for Physical Environment
Remember that reading text on paper is more efficient than reading
text on screen.
Keep screen brighter than ambient light.
Keep screen contrast high.
Eliminate flicker.
Keep a center of acuity.
Eliminate he