Multimedia Design Guidelines General Guidelines for Multimedia Learning Design

Keep User Interface Simple Consider the level of the learner Generally, only 5-9 choices at a time Make the program easy to navigate Take time up front to introduce the users to the program Use graphics to indicate purpose Provide an easy to use help function

Be Consistent Use similar objects to perform similar functions throughout the program –Navigation objects –Types of objects used (buttons, text, pics, etc) –Location of objects

Let the User Control Interaction Let the user control what happens next? –Where to go? –What to see? –When to leave? Provide options for… –Navigating through or out the content –Starting and stopping video & sound Is there a specific order to the content?

Give Immediate Feedback Feedback for every action Feedback should be immediate and obvious Examples… –When the user clicks a button –When the user navigates –When waiting to load a video or open a web site –Results in increased attention

Use Familiar Metaphors Take advantage of previous learning Increases learning and comfort Examples… –Use familiar objects as graphics –Calculator, VCR buttons, Control Panel, Telephone, Book (with chapters), Desktop, Filing Cabinet, specific equipment, Paper, Fish Aquarium, Playground, etc.

Design for Clear Sight Use Pastel Colors –Except for videos and black and white text –Use slightly washed out, desaturated colors –Use high contrast foreground and background colors for text –Use fonts that have serifs for text blocks

Limit the Use of Sound Avoid Constant Sounds Use Sound to Inform, Not to Entertain Use Lower Frequency Sound if Heard Repeatedly Let the User Control Sound Volume Quickly and Easily (openscript)

Navigation Options Navigation system must address 5 user needs… –Context: What’s in this program? –Location: Where am I Now? –Destination Choices: Where can I go? –Travel Methods: How do I get there? –Progress Indicators: Where have I been?

Basic Linear Structure Encourages (or forces) users to move through content via a single path Content appears in a pre-determined sequence Navigation is primarily forward and backward with “return to start” and “exit” options

Jump-Linear Structure Offers option to jump out of linear structure to a “home-base” then jump to a new location…

Tree Structures Lets users choose among several branches to follow the path that interests them… It is confusing to cross from one path to another without going back “up”

Network Structures Information is linked without a strict hierarchical order Users can explore in many different ways Use a “hub” or “reference point” to aid users in finding their way through the content Be sure to provide “You are here” indicator or other menu or map to aid navigation

Example: Network Structure

Single-Frame Structures All actions appear to take place on a single screen Navigation appears non-existent even though content may spread out over several screens A “DISPLAY” structure displays with a graphic or text field whose content changes according to user’s choices

Single Frame Display Structure

Introduce People to Your Program Keep the opening short (brief or optional) –Purpose, Learning scheme, and How to use it Make your CBT easy to use, so minimal learning is required Get the user doing something quickly Include a “Main Menu” which is available from anywhere Make the first item in the contents “Help”

Menus Text only menu Text and graphics menu Content map (text or graphic) Metaphors Textual reminders (tool tips) Text presented in a “prompt” or “title” field “You are here” indicators Visual Indicator (thermometer or gauge)

Designing Help Functions Make Help available from anywhere in the CBT program Help Options… –Help is first item in table of contents/menu –One or two screens between the title screen and first CBT content page –Contextual help (related to content) –User help (related to CBT functionality) Present introductory info in short chunks

Integrate Text, Graphics and Audio Text + Visuals = less text Design Consistent Screens and Backgrounds Write for the Screen, NOT for Paper The Help button looks like a yellow diamond with a question mark in the middle. This is the Help button.