1. Navigation, Storyboards, and Prototypes
Instructional Design for eLearning
Instructor: Scott Nipper
Certificate Program
Welcome to Navigation, Storyboards, and Prototypes.
Today we will focus on storyboards and graphic design principles, next week we will focus on prototypes

2. ID for eLearning Certificate Program Structure
Class Title Length CEU
Instructional Design for eLearning hr. .7
Analysis and Planning hr. 1.4
eLearning Technologies and Methodologies hr. 1.4
Designing Instructional Content hr. 1.4
Navigation, Storyboards and Prototypes 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 2

3. Course Objectives Day 2 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
Course Name: Navigation, Storyboards, and Prototypes
Program Name: Instructional Design for eLearning Certificate Program 3 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
Topic choices are meant to be simple, to learn the process and begin using forms.
Students should think of them as one learning objective, i.e.,
Make a quality (edible) peanut butter sandwich in 5 minutes or less.
The primary target audience might be 5-year olds, but there may be secondary or tertiary audiences. (hence the learner characteristics form)
Students shall pick one Prescribed project and manage their work/forms accordingly. However, there will be opportunities to work in pairs and groups. Students are always encouraged to help/support each other through the learning process. 6

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
How it Works All you need is a screen image capture tool, such as SnagIt, an image editing tool, such as Photoshop, and MSWord. Here are the steps for really fast storyboarding:
Use SnagIt to take a screenshot of the approved screen templates for your E-learning project. The screenshot should include the entire E-learning screen, with all standard buttons, banners, footers, and navigational tools.
Import the saved image into the header of an MSWord document. Use the FORMAT PICTURE option to set the image to “FLOAT OVER TEXT.” Also, increase the BRIGHTNESS of the image so it is barely visible in the document.
Close the header and go back to the PAGE LAYOUT document view. You will see the template in the background of your MSWORD document.
Set the margins, header, and footer of the MSWORD document so that the page accommodates only enough text to fit within the template.
Use CUSTOM STYLES to set the text size, font, and other attributes to match your project requirements.
Now the writing can begin. As instructional designers generate the content in MSWORD, they will see the E-learning template in the background. In addition, MSWORD will automatically wrap to the next page/screen when available space on the current page/screen is exhausted.
Some Other Ideas
Paste image comps directly into MSWORD for approval.
Use MSWORD CALLOUTS and COMMENTS to indicate popups, glossary terms and definitions, and other interactions.
Use the REVIEWING TOOLBAR to request and approve of changes.

11. Storyboard Examples
Here are some examples of storyboards. Notice how they can take different forms. I once wrote a storyboard on napkins in a bar in Beijing.

12. Storyboard Templates
Go over some template ideas. Pass out some templates. Post templates on portal for download.

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
Tell them the elements you want to see on the storyboard (e.g., page titles, on screen text blocks, un-fancy graphic sketches, navigation buttons…), details you think are reasonable to ask for to give them an good idea of things they need to think about. Otherwise, you’ll get the deer-in-the-headlights glare.

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
Topic choices are meant to be simple, to learn the process and begin using forms.
Students should think of them as one learning objective, i.e.,
Make a quality (edible) peanut butter sandwich in 5 minutes or less.
The primary target audience might be 5-year olds, but there may be secondary or tertiary audiences. (hence the learner characteristics form)
Students shall pick one Prescribed project and manage their work/forms accordingly. However, there will be opportunities to work in pairs and groups. Students are always encouraged to help/support each other through the learning process. 14

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 Performance images Educational images Hybrid images.
Graphic Design Principles
Image Categories
Performance images
Educational images
Hybrid images.

17. Image Categories Performance images help your learner do a task.
Graphic Design Principles
Image Categories
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 Educational images help your learners' learn.
Graphic Design Principles
Image Categories
Educational images help your learners' learn.
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

19. Image Categories Some images are a little of both
Graphic Design Principles
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

20. Graphic Design Principles
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?

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

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

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

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

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

26. Graphic Design Principles
Visuals and Learning
ACE
PAT
CARP

27. ACE it Analyze Create Evaluate Graphic Design Principles
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 Contrast Alignment Repetition Proximity Graphic Design Principles
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
Within PAT, CARP is the Actions your visual take

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

30. Figure-Ground Definition
Graphic Design Principles
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.

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
Graphic Design Principles
Figure-Ground, cont’d
Problems
Figure and ground compete
They’re reversed
They create an optical illusion

33. Graphic Design Principles

34. Working with Figure-Ground
Graphic Design Principles
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

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

36. Activity Graphic Design Principles 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
Show image from Lohr book, p 117.

37. Hierarchy The relative importance between elements in a visual
Graphic Design Principles
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

38. Hierarchy Graphic Design Principles
Source:

39. Hierarchy Graphic Design Principles
“Visual hierarchy adds 'depth' to a flat paper or on-screen map”
Source:

40. Graphic Design Principles
Hierarchy
“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:

41. Hierarchy Graphic Design Principles
Using scale as a variable to show hierarchy
Use of value with the scale to give emphasis
Source:

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

43. Graphic Design Principles
Integration
Gestalt
One of the bright minds of gestaltism, Kurt Koffka, made the famous statement, "The whole is other than the sum of its parts."
His statement is often mistranslated as the much more familiar "The whole is greater than the sum of the parts."
Mr. Koffka didn’t like that translation, and pointed out that in his statement, he means the whole exists independently from the component parts.
“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:

44. Notice Visuals Around You
Graphic Design Principles
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

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