Navigation storyboards and prototypes
This presentation is the property of its rightful owner.
Sponsored Links
1 / 46

Navigation, Storyboards, and Prototypes PowerPoint PPT Presentation


  • 51 Views
  • Uploaded on
  • Presentation posted in: General

Navigation, Storyboards, and Prototypes. Instructional Design for eLearning Instructor: Scott Nipper. Certificate Program. ID for eLearning Certificate Program Structure. Class TitleLengthCEU Instructional Design for eLearning 7 hr..7 Analysis and Planning 14 hr.1.4

Download Presentation

Navigation, Storyboards, and Prototypes

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Navigation storyboards and prototypes

Navigation, Storyboards, and Prototypes

Instructional Design for eLearning

Instructor: Scott Nipper

Certificate Program


Navigation storyboards and prototypes

ID for eLearning Certificate Program Structure

Class TitleLengthCEU

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


Course objectives

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


Storyboards

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

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

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


What is a storyboard

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

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

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

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


Storyboard examples

Storyboard Examples


Storyboard templates

Storyboard Templates


Activity 60 minutes1

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


Prescribed project topics1

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


Visual literacy

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

Image Categories

Graphic Design Principles

  • Performance images

  • Educational images

  • Hybrid images.


Image categories1

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.


Image categories2

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.


Image categories3

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

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


Decorative visuals

Decorative Visuals

Makes information more appealing

Usually do not have strong association with learning content

Graphic Design Principles


Representative visuals

Representative Visuals

Makes information more concrete

Conveys information quickly

Graphic Design Principles


Organizational visuals

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


Interpretive visuals

Interpretive Visuals

Helps learners understand difficult or ambiguous content

Makes concepts more accessible through models or diagrams

Graphic Design Principles


Transformative visuals

Transformative Visuals

Makes information more memorable (long term memory)

Graphic Design Principles


Visuals and learning

Visuals and Learning

Graphic Design Principles

  • ACE

  • PAT

  • CARP


Ace it

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


Navigation storyboards and prototypes

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


Working with pat

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


Figure ground

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


Figure ground cont d

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 d1

Figure-Ground, cont’d

Problems

Figure and ground compete

They’re reversed

They create an optical illusion

Graphic Design Principles


Navigation storyboards and prototypes

Graphic Design Principles


Working with figure ground

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


Working with figure ground actions and tools

Working with Figure-GroundActions and Tools

Actions

Contrast

Alignment

Repetition

Proximity

Tools

Type

Color

Shape

Space

Depth

Graphic Design Principles


Activity

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


Hierarchy

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


Hierarchy1

Hierarchy

Graphic Design Principles

Source: http://buildinternet.com/2010/04/designing-without-gradients/


Hierarchy2

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


Hierarchy3

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/


Hierarchy4

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


Activity1

Activity

Duration: 15 minutes

Directions: Generate an image (of your own choosing) that uses organizational techniques.

Share with the class

Graphic Design Principles


Integration

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/


Notice visuals around you

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


Activity 60 minutes2

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

References

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


  • Login