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 design3) 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/i

ndex.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: Design for readability on a screen Distinguish different voices or personae?

Graphics: buttons, clip art, quiz templates? 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 spec1) 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