Transcript Multimedia e-learning design

Multimedia e-learning design



After analysis (audience, needs, goals,
content, resource requirements and
schedule), you are ready for design
But don’t skimp on analysis!
Why emphasize getting analysis right?
Outputs of multimedia design




Produce a complete specification of all media
elements and interactivity
Explicit enough that developers know exactly
what to implement and any standards
Products of e-learning design:
1) User interface design (prototype in Flash)
2) Content design
3) Standards and conventions
Email me a link to a project web site with
iteration 1 of analysis & design documents
and program by 10am, Tuesday March 17
User interface design





Develop a mock-up of look and feel
Model all functions with use cases
Write developer guidelines—standardizing
screen layouts, text, graphics, audio, video,
and conventions for interactivity
See CIMEL guidelines
www.gsu.edu/~wwwitr/docs/idguide/index
.html
Content design:
navigational maps


Navigational maps or flowcharts show
overall structure of piece
Structure may be linear, hierarchical,
multi-linear, web graph, or composite
Why are navigational maps or
flowcharts useful?


Shows navigational structure
Graphics of each screen not necessary
Content design: storyboards


Storyboards show scenes of a story in
pictorial form, screen by screen
What earlier media uses storyboards?
Adding details to storyboards



Storyboards start out as sketches
May add supplementary text describing
non-pictorial details and interactivity
What do you think?
Will you use storyboards?
Scripts





Like movie or TV scripts
Provide complete details in textual form
See Jennifer Birch’s script
Scripts may incorporate some graphics
(another example)
Will you use scripts or storyboards?
Setting project standards


CIMEL project’s script writing guidelines
Why are such standards important?


Consistency among multiple developers
What standards should you set?

Text and font styles, sizes, colors:



Graphics: buttons, clip art, quiz templates?


Design for readability on a screen
Distinguish different voices or personae?
File formats, file library?
Audio: sampling rate, sound effects?
Iterative design (1)




First iteration describes high level
navigational structure and key scenes
Show key scenes: Lopuck calls these
“places” or “environments” for action
Rough, initial storyboards (as in UM
example) may be useful
Template for storyboard sketch available
Iterative design (2)



Successive iterations show more detail
Develop script and/or storyboards that
show each scene, screen by screen
Lopuck’s storyboard adds detail about
interactivity, sound, etc.
Iterative design (3)

Cates’ storyboard shows details about
sequencing of screens, base and overlay
timing, interactivity, etc.
Prof Cates’
storyboard
Iterative design (3)



Cates’ storyboard shows details about
sequencing of screens, base and overlay
timing, interactivity, etc.
Template for Cates’ storyboards available
Which design format will you use—
navigational maps, storyboards or scripts?
Script writing guidelines






Divide the script into small screens
(especially for Flash)
Number screens 10, 20, etc. Why?
Be detailed and explicit, indicating all media
and interactivity
Use enthusiastic conversational tone and
active voice sentences
Exercises should provide feedback for both
correct and incorrect choices
Indicate how to focus a learner’s attention
Reminder:



Produce design documents explicit enough that
developers know exactly what to implement
Products of e-learning design:
0) Update your requirements spec
1) User interface design (prototype in Flash)
2) Content design (script and/or storyboards)
3) Media standards (fonts, file formats, clip art)
Email me a link to a project web site with
iteration 1 of analysis & design documents
and program by 10am, Tuesday March 17