Multimedia e-learning design

1. 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?

2. 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

3. 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

4. Content design: navigational maps • Navigational maps or flowcharts show overall structure of piece • Structure may be linear, hierarchical, multi-linear, web graph, or composite

7. Why are navigational maps or flowcharts useful? • Shows navigational structure • Graphics of each screen not necessary

8. Content design: storyboards • Storyboards show scenes of a story in pictorial form, screen by screen • What earlier media uses storyboards?

10. 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?

11. 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?

12. 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?

13. 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

14. 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.

16. Iterative design (3) • Cates’ storyboard shows details about sequencing of screens, base and overlay timing, interactivity, etc.

17. Prof Cates’ storyboard

18. 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?

19. 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

20. 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