ISD Process & Design Principles For WBT Jan 2010

Web-based Training Development(process, design & team)

Peter Vloyanetes [email protected]

732-222-1621

Presentation by:

Peter VloyanetesInstructional Design & Management

Best Practices-“Instructional Development & Design Principles

for Web-based Training”



732-222-1621

Web-based Training Team

Web-based Training Development Process

Web-based Training Design Principles

Web-based Project Plan

Presentation Topics



732-222-1621

Video/Multimedia Producer

Business Development Manager

e-Learning Instructional Designer

Project Manager

My Background…25 plus years delivering business communications and training solutions.

What’s yours?



732-222-1621

Web-based Training Development Team

- Key Competencies


- Instructional Design Steps aka-”Chunking”

Web-based Training Design Principles

- Graphics/Media, Type Fonts/Size, User Interactivity & Navigation Controls

Why the Confusion?



732-222-1621

Business/Financial Sponsor

Project Manager

Instructional Designer

Technical Sponsor/IT

Subject Matter Expert

Web-developer

Graphic Artist

Writer/Editor

Web-programmer

Systems Administrator

Marketing Sponsor

The “Team”



732-222-1621

Business/Financial Sponsor- the person paying for it

Project Manager- the person responsible to the person paying for it

Instructional Designer- the person responsible for maintaining the instructional integrity of the project

Technical Sponsor/IT- the person responsible making it work

Subject Matter Expert- the person responsible for the content

The “Team” top of the food-chain



732-222-1621

Web-developer

Graphic Artist

Writer/Editor

Web-programmer

Systems Administrator

The “Team” the ones who make stuff happen



732-222-1621


Instructional Design Steps… AKA “Chunking it down”

“…a systematic approach or set of processes for managing the development steps used in converting learning content into web-based training.”

What I call the Instructional Design Master Document …which has very little to do with “Design”



732-222-1621

What are the Steps?

Course Learning Objectives

How does it support the business?

Audience Analysis

Knowledge Gap Analysis

Tech Analysis

Content Review

High-Level Outline

Detailed Outline

Storyboards

Web-Production



732-222-1621

But first, “What’s an Adult Learner?”

Controls the Learning Experience-why, what & how

Controls the Timing of the Learning-self directed & autonomous

Prior Experience-pre-existing mental model

Readiness to Learn

Orientation to Learning

Motivated to Learn



732-222-1621

What’s an Adult Learner?



732-222-1621

What are the Steps? (cont.)

Use-ability Testing

Beta Testing

Revisions

Roll-out

Evaluation



732-222-1621

Development Steps…

Audience & Knowledge Gap Analysis-Learner Centric

Who are they?

What do they know?

What do they need to know?

Why do they need to know it

- or “what’s in it for them?”

What are the learning objectives?

How will you determine if learning

- took place?



732-222-1621

Development Steps

Tech Analysis & Content Review

What’s the user environment?

What’s the system environment?

What form does the content exist in?

Is the content- information or performance based?

Who’s the content SME?”



732-222-1621

Development Steps

High-level Outline, Detailed Outline & Storyboards or “Chunking the Content”

High-level Outline

- Modules & Lessons

Detailed Outline

- Modules, Lessons & Topics

Storyboards- Modules, Lessons, Topics with

Supporting Web Pages



732-222-1621

High-level Outline



732-222-1621

Detailed Outline



732-222-1621

Storyboards



732-222-1621

Process Steps Web-Production “where the rubber hits the road”

Corporate Design Standards

- Color Palette

- Type Style & Font Size

- Use of Logo & Accepted Graphical Style

User Interactivity-types and complexity

- Practice Exercises, “Show Me-Try It”

Navigation Controls

- Course Index, Forward-Backward, Bookmark & Help

Use of Support Materials & Web Links

Pete’s Rules



732-222-1621

Process Steps

Web-based Training Design Principles- Pete’s Rules

No Scrolling

“Pop-up” pages

Prominent Display & Accessibility of Course Index

A picture is not necessarily worth a 1000 words



732-222-1621

Process Steps

Web-Production “where the rubber hits the road”

Use of Text, Graphics, Spacing & Audio

“Multimedia Learning Principles”

Graphics for Learning & Performance

Writing Style

Page Layout

Personal Assist



732-222-1621

Process Steps

Use-ability & Beta Testing, Revisions, Rollout & Evaluation

Are there any navigation issues/problems?

Is the content correct?

How are revisions handled?

Assemble a Test Group

Be ready to update, re-evaluated the course



732-222-1621

Design

Web-based Training Design Principles- the basics

Juxtaposition of Text & Graphics

Ample use of “White Space”

Divide the page between text & graphics

28 pt size for Headings (at least)

18 pt size for Body Text (not less than)

Present text where possible as bullet points

Limit text to approximately 60-75 words per page

this page has 50 words



732-222-1621

Design

Multimedia Learning Principles (Mayer 2003)

Multimedia Principle

- Learning increases with use of words & pictures

than from just words alone.

Spatial Contiguity Principle

- Learning increases when words & pictures are presented near

each other, rather than separate

Temporal Contiguity Principle

- Learning increases when corresponding works & pictures are presented

simultaneously rather that successively



732-222-1621

Design Multimedia Learning Principles (Mayer 2003)

Coherence Principle

- Learning increases when extraneous material is excluded

Modality Principle

- Learning increases with animation & pictures than from just graphics & text

Redundancy Principle

- Learning increases with animation & narration than from

animation, narration & text on screen

Personalization Principle

- Learning increases with use of a conversational style- “we, you & us”



732-222-1621

Redundancy Principle



732-222-1621

Sample Screen



732-222-1621

Sample Screen



732-222-1621

Sample Screen



732-222-1621

Sample Course

eMail Etiquette

www.sa-developer.com/Compass/email/index.html



732-222-1621

Putting it All Together, Course Revision/Updates



732-222-1621

Putting it All Together, Course Revision/Updates



732-222-1621

References• Multimedia Learning- Richard Mayer

• Instructional Design for WBT- Kerri Conrad

• E-Learning & the Science of Instruction - Richard Mayer & Ruth Clark

• Creating Graphics for Learning Performance- Linda Lohr

• Visual Information- Edward Tufte

• Web-based Training Using Technology to Design Adult Learning- Margaret Driscoll



732-222-1621

Peter [email protected]

Office-732-222-1621Mobile-732-610-8519