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

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 2

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

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

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

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

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

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

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

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.

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.

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

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.

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

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.  

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

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.

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

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

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?

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

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

Organizational Visuals Graphic Design Principles 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 Interpretive Visuals Helps learners understand difficult or ambiguous content Makes concepts more accessible through models or diagrams

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

Graphic Design Principles Visuals and Learning ACE PAT CARP

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

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

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.

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.

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

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

Graphic Design Principles

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

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

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.

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

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

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

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: http://mfolio.wordpress.com/2008/06/09/visual-hierarchy/

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

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

Graphic Design Principles Integration http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/ 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: http://mfolio.wordpress.com/2008/06/09/visual-hierarchy/

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

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

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