Navigation, Storyboards, and Prototypes

1. Navigation, Storyboards, and Prototypes Instructional Design for eLearning Instructor: Scott Nipper Certificate Program

2. ID for eLearning Certificate Program Structure Class Title Length CEU Instructional Design for eLearning 7 hr. .7 Analysis and Planning 14 hr. 1.4 eLearning Technologies and Methodologies 14 hr. 1.4 Designing Instructional Content 14 hr. 1.4 Navigation, Storyboards and Prototypes 21 hr. 2.1 Practicum: Learning Object Design and Development 21 hr. 2.1 Total 91 hr. 9.1 Course Name: Navigation, Storyboards, and Prototypes Program Name: Instructional Design for eLearning Certificate Program

3. Course Objectives List 10 Principles of Usability Apply web design principles to present content online Describe effective uses of visual elements Create a navigation flowchart Create a storyboard for a web-based learning object Describe the characteristics of interaction specifications Define interactivity Develop support materials Compile a design package for development Day 2 Course Name: Navigation, Storyboards, and Prototypes Program Name: Instructional Design for eLearning Certificate Program 3

4. Storyboards A simple method to graphically illustrate the flow or order of your course “the picture before the picture” Cave, 2002 – "Story-Boarding is a popular management tool to facilitate the creative-thinking process and can be likened to taking your thoughts and the thoughts of others and spreading them out on a wall as you work on a project or solve a problem." Lohr, no date – "You can think of a storyboard as a visual outline of your instruction. A storyboard helps you plan for instruction because you draw out in detail all the elements. It also helps you to communicate with others about your ideas." Course Name: Navigation, Storyboards, and Prototypes Program Name: Instructional Design for eLearning Certificate Program

5. Activity – 60 minutes Work in groups Pick from the Prescribed Projects list (next slide) Brainstorm ideas Create a storyboard Use post-it notes Affix to flip-chart Move notes around as necessary Share with class Discuss

6. Prescribed Project Topics Choose One Make a Sandwich Change a Tire on a Bike Plant a Tomato Plant Clip a Dog’s Toenails Change a Baby’s Diaper

7. What is a Storyboard A storyboard is a plan for teaching and learning activities. It can be a combination of outlines and visual sketches (e.g., flowcharts) that map out the contents or sequence of ideas (Klaus, 2002).

8. Why Use Storyboards Helps facilitate development Can save time Get your ideas on “paper” Provides a visual representation of flow, structure, and sequence Helps plan where elements are placed on screens, where each lesson fits Helps with consistency and contiguity Identify navigation requirements Identify gaps or opportunities in learning Get a feel for what and how users will see content

9. When to use Storyboards Part of the Design phase After: Development of initial content ideas Task and concept analysis Preliminary program description Preliminary flowcharts

10. How to use Storyboards Storyboards can be textual, visual, or both Outlines Flowcharts Tables Graphical Be as high-tech or low-tech as you want Paper and pencil work as well as anything

11. Storyboard Examples

12. Storyboard Templates

13. Activity – 60 minutes Work individually Pick from the Prescribed Projects list (next slide) Create a storyboard Use the index cards provided Tape to flip-chart or wall (if more room is needed) Include page titles, on-screen text blocks, un-fancy graphic sketches, navigation buttons) Share with the class Discuss

14. Prescribed Project Topics Choose One Make a Sandwich Change a Tire on a Bike Plant a Tomato Plant Clip a Dog’s Toenails Change a Baby’s Diaper

15. Visual Literacy Graphic Design Principles Visual literacy is a term used to describe how you think about, use, and create images to communicate and facilitate understanding. Many people think that if they create an image it will stand on its own and live up to that famous saying "A picture is worth 1,000 words." A picture is not necessarily worth 1,000 words, and that sometimes a picture may speak 1,000 WRONG words.  

16. Image Categories Graphic Design Principles • Performance images • Educational images • Hybrid images.

17. Image Categories Graphic Design Principles Performance images help your learner do a task. • Help people at the time of need (just in time) • Do not intend to educate or help people understand at a meaningful level • Used to help people access information needed to do a task.

18. Image Categories Used to help people understand: Facts Concepts Principles Procedures Help learners gain an attitude or appreciation Often require text passages to go with them Educational images: Represent Organize Transform Explain instructional content Graphic Design Principles Educational images help your learners' learn.

19. Image Categories Some images are a little of both Performance and educational Called hybrid images Both types are important Educators have tended to not see the importance of performance images Performance images are very helpful in short-term memory tasks – tasks that often lead to education Graphic Design Principles

20. Why The Need? The art and science of communicating visually is becoming more and more critical For teachers, trainers, instructional designers, professionals Many people are visual learners Do you sometimes say, “I see what you mean!”, or “I need to picture that” to understand the concept? Graphic Design Principles

21. Decorative Visuals Makes information more appealing Usually do not have strong association with learning content Graphic Design Principles

22. Representative Visuals Makes information more concrete Conveys information quickly Graphic Design Principles

23. Organizational Visuals Helps learners understand the structure, sequence, and heirarchy of information and to integrate it (maps, charts, and displays) www.edwardtufte.com (a good reference for Information Design) Graphic Design Principles

24. Interpretive Visuals Helps learners understand difficult or ambiguous content Makes concepts more accessible through models or diagrams Graphic Design Principles

25. Transformative Visuals Makes information more memorable (long term memory) Graphic Design Principles

26. Visuals and Learning Graphic Design Principles • ACE • PAT • CARP

27. ACE it Graphic Design Principles • Analyze • Identify instructional function • E.g., decoration, representation, organization, interpretation, transformation • Identify content classification • E.g., procedure, facts, concepts, principles, processes • Create • Generate the visual idea • Work with Principles, Actions, and Tools (PAT) • Evaluate • Assess effectiveness • Assess efficiency • Assess appeal

28. CARP Graphic Design Principles • Contrast • Making parts of an image, shape and color - different • Alignment • Lining up elements along an edge or imaginary path • Repetition • positioning elements close together or far apart • Proximity • Reusing elements or similar elements

29. Working with PAT Graphic Design Principles • Principles • Selection • Figure-Ground • Organization • Hierarchy • Integration • Gestalt • Actions • Contrast • Alignment • Repetition • Proximity • Tools • Type • Shape • Color, Depth, Space

30. Figure-Ground Definition Figure is the takeaway, the particular part of the image/visual that you want to stand out, that you want the viewer to process Ground is everything else, the background, the information that recedes and supports the figure The figure is what the learner pays attention to and the ground is what the learner is not paying attention to. Graphic Design Principles

31. Figure-Ground, cont’d Graphic Design Principles • Make most important information stand out • Use the 3 c’s* • Concentrated • Emphasizing key points • Concise • Reduce to most basic, core level • Concrete • Elements that make it easy to visualize • Eliminate info learners pay attention to • Reduces cognitive load • Make good use of data ink • Date ink = everything that isn’t white space *part of Mayer’s 7 c’s of effective instructional visuals

32. Figure-Ground, cont’d Problems Figure and ground compete They’re reversed They create an optical illusion Graphic Design Principles

33. Graphic Design Principles

34. Working with Figure-Ground Your job Create optimal balance Create clear distinction Organize information for learner up front Goal is to have learner perform task, not figure out what task is Graphic Design Principles

35. Working with Figure-GroundActions and Tools Actions Contrast Alignment Repetition Proximity Tools Type Color Shape Space Depth Graphic Design Principles

36. Activity Duration: 15 minutes Directions: Improve the figure/ground composition in the information below. Don't hesitate to change the words or verbal composition if needed. Facts about tobacco Use Smoking is the most preventable cause of death in our society. Read below to find out more "tobacco facts." The earlier people start smoking, the harder it is to quit when they are older. People who start smoking in their teenage years run the risk of becoming lifelong smokers. One-third to one-half of young people who try cigarettes go on to be daily smokers. It takes an average of five attempts for an adult to successfully quit smoking. Share with the class Graphic Design Principles

37. Hierarchy The relative importance between elements in a visual The equivalent in written form is an outline In visuals we can denote hierarchy with: Tools Type Shape Color Depth Space Actions Contrast Alignment Repetition Proximity Graphic Design Principles

38. Hierarchy Graphic Design Principles Source: http://buildinternet.com/2010/04/designing-without-gradients/

39. Hierarchy Graphic Design Principles “Visual hierarchy adds 'depth' to a flat paper or on-screen map” Source: http://krygier.owu.edu/krygier_html/geog_353/geog_353_lo/geog_353_lo06.html

40. Hierarchy Graphic Design Principles “The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably.” Source: http://mfolio.wordpress.com/2008/06/09/visual-hierarchy/

41. Hierarchy Graphic Design Principles Using scale as a variable to show hierarchy Use of value with the scale to give emphasis Source: http://www.freewebs.com/nishantmungali/Proj_visual_order.html

42. Activity Duration: 15 minutes Directions: Generate an image (of your own choosing) that uses organizational techniques. Share with the class Graphic Design Principles

43. Integration Graphic Design Principles “The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably.” Source: http://mfolio.wordpress.com/2008/06/09/visual-hierarchy/

44. Notice Visuals Around You Look around you this week Notice how visuals are used for learning and performance and how you might create you own Graphic Design Principles

45. Activity – 60 minutes Work individually Use a portion or segment or lesson from your practicum project Create a storyboard Use materials of your choice (post-it notes, index cards, paper, templates) Limit number of pages (i.e., 3 or 4) Share with the class Discuss

46. References http://ets.tlt.psu.edu/learningdesign/webdesign/plan/storyboard