navigation, storyboards, and prototypes

Navigation, Storyboards, and Prototypes

Instructional Design for eLearning

Instructor: Scott Nipper

Certificate Program

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

ID for eLearning Certificate Program Structure

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program

Course Objectives

3

• 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 1

Navigation

• The way learners move through a module

• Includes orientation – sense of knowing where they are

• Part of an overall interface design strategy


Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 5

Generally, all principles of good user-interface design apply to good learner-interface design

Let’s take a look at those


10 Principles of Usability1. Visibility of system status2. Match between system and the real world3. User control and freedom4. Consistency and standards5. Error prevention6. Recognition rather than recall7. Flexibility and efficiency of use8. Aesthetics and minimalist design9. Help users recognize, diagnose, and recover from errors10. Help and documentation11. <print pdfs>Source: Jakob Nielsen.


Interface Design

• Defines range of actions available• Influences expectations of what should be done• Sets the mood• Sets what is important, or not• Affects speed and effort of learning• Influences emotion, attitude, and performance• Affects outcomes


More on Interface Design

• There is a need for good design– There is plenty of poor design (see next slide)

• Learner’s take poor design personally• Not just about efficiency• People are smart


Still More on Interface Design

• Pretty ≠ good• Good design is beautiful• Mix aesthetics and functionality• It isn’t easy


Don’t judge a book by it’s cover


Learner Anxiety


Give it Time

• The bulk of design work is given to creating meaningful and memorable experiences

• Don’t short-change the interface design• It affects the quality and effectiveness of every

interaction• Getting it right is not a luxury


Orientation

• This tells the learner where they are in the process• Methods used can be:

– Progress bars– Page x of y– Tabs– Color schemes– Chapter headings– Bread crumbs– Combinations


Themes and Metaphors

• Create an environment that resembles the learner’s real-world environment

• Support the theme or metaphor through the look and feel by using style and graphics

• It helps motivate the learner by placing them in a world they can relate to


• Learners can be so controlled by e-learning module that they feel victimized

• Good navigation helps learners feel they have control

Navigation


Navigation Features

Appreciate Dislike


Navigation can do more than transport learners

It can be the basis of higher-impact learning experiences


Problem

Answer

Ask“Why?”

Exit

Student gives anInvalid justification.

Ask“Why?”

Student gives a valid justification for the

correct answer.

Student cites points validabout the answer given,

but they do not justifythe answer this problem.

Student justifies theCorrect answer, butnot the answer given

“You were correct,but this isn’t why…” Launch appropriateremedial experience

Provide instructionalexperiences to construct

valid relationshipsbetween alternativesand their attributes.

Provide instructionalexperiences to construct

valid relationshipsbetween alternativesand their attributes.

Correct answer given Incorrect answer given

Changeanswer

ChangeanswerChange

answer

Submitjustification

Submitjustification

Submitjustification


Some GuidelinesTwo Layers of Navigation and Interface• Top layer

– Topic selection– Overview access– Progress recall– Quit– Resume

• Second Layer– Context and content-specific– Support for entering and editing responses– Controlling simulations– Accessing resource information– Help


More Guidelines• Test

– Designers don’t usually have problems with their own creations

– Get some objective evaluation– Don’t just ask people what they think, watch them

use it (without comment or help)– Be open-minded

• Reserve space– More controls and features than you initially think

will probably be needed


Must-haves for e-learning navigation

Let learners:• See the boundaries of their universe• See how the contents are organized• See where they are• Back up• Correct themselves


Nice-to-have interface features

• Bookmarking• Personal index• Highlighting• Margin notes• Posted notes


Activity - Navigation Dissection

• Examine example• Analyze navigation• Discuss mapping• Draw mapping• Go deeper

– Branching– Skip Logic

• Examples– Grantsdale– Breeze– Kaiser templates– Kaiser modules– Lectora guide (p 218, 271)– Gov’t Guidelines


Don’t Interfere with Content

• Don’t make the navigation graphic design so “strong” that it is distracting

• Often, more time is devoted to embellishing navigation components because they are used so much

• Don’t draw attention away from content

Graphic Design Principles


Real Estate

• Good navigation takes the space it needs and nothing more

• Don’t consume precious real estate• Think about options

– Collapse navigation panels– Slide them off screen

• Be careful though – don’t remove the benefit of helpful actions learners can take

• Don’t remove orientation – i.e, their position and progress



Placement• Fixed

– Keep navigation in a section always reserved for it– Learners become accustomed, tend to see past it– Effects can call attention to it when needed

• Floating– Sometimes entire screen is needed for content– Allowing a navigation panel to be moved, or

layered, and contrast with (but not upstage) content can be helpful



Active and Inactive Objects• Good practice – let users know when something they

expect to be active isn’t– Dimmed buttons, for example– Differentiate clickable objects from static, never-clickable

objects (and be consistent)• E.g., underline hypertext and 3-D button for other objects

– Alternatively apply a highlight to active objects

• Use one scheme for navigation, another for interactivity

• Clicking – cursor should change shape when over an active object, and don’t mix single and double-clicks



Icons• Advantage

– Small– Take up little screen space

• Disadvantage– Designing instantly recognizable ones is hard

• Appropriate when they save– Time, effort, and space

• Don’t use if users must think too much about them



Reporting Status

• Buttons should report status of the function– E.g, “Play” should lock down to indicate “playing”– It should not transform to a “pause” button



Button Placement• Language is a consideration• If language reads left-to-right then “forward” is a l-r

function and “backward” is r-l– Similarly, buttons relating to “forward should be on the

right and “backward” on the left

• Other languages may be the reverse, or use up and down

• NOTE: do not put commonly used functions next to irreversible functions– E.g., BACK, NEXT, REFORMAT HARD DRIVE all together– E.g.,



Learner Comfort

• Learners are most comfortable when familiar objects are kept– In the same place from display to display– Consistent in use of

• Color• Backgrounds• Font type• Font size• Actions

– Contrast, Alignment, Repetition, Proximity• Shape, Depth, Space



TransparencyTo the extent we can –• All aspects of the interface relating to viewing and

operating need to be transparent– Instantly understood– Effortless to use

• It’s not easy and requires a lot of – Design thought– Development effort– Experimentation– Evaluation

• Make the most of the learner’s time and energy


Reverse and Confirm• Learners need to be able to reverse actions

– Buttons are easy to click – easy to click both the one you want and the one you don’t want

– Allows users to undo an unintentional act and can reduce anxiety over using elearning

• What if reversing is too hard to do?– You can ask users to confirm their intention

• Let them know what’s about to happen and ask if that’s what they want

• Make the confirmation more than a simple 2nd click– Make them move mouse to a new location and use and different

gesture

• Make sure the action is appropriate – don’t require a lot confirmation for something that’s minor


The Song Remains the Same• Sometimes learner engagement will change

warranting a different environment – so change the look

• But don’t move or redesign the things that will still be available and function the same– Exit– Help– Back up– Glossary


Mistakes designers make

• Make active and inactive elements look the same

• Makeover central• Blankety, blank, blank, blank• Convention mix-up• Too much stuff• Kitchen sink syndrome• Glitz and glamour


Activity – Navigation Map

• Use your practicum project as source• Use flowchart symbols from Bill’s class• Build a navigation of your module


Final Thoughts• Learning takes time, effort, and involvement• Good interface design should focus efforts on

learning and not on dealing with the mechanics of computer operations

• Don’t let interface design preclude the success of otherwise well-designed modules

• Great interface design does more than stay out of the way – it sets the stage for making elearning memorable and meaningful


References• www.elearningguild.com• www.astd.org• www.alleninteractions.com• Web Development and Design Foundations with XHTML, Fifth Edition, by Terry

Felk-Morris. Published by Addison-Wesley• http://www.useit.com/papers/heuristic/heuristic_list.html• http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-

examples/• http://test.elearnmag.org/• http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-goo

d-web-design/• http://www.grayharriman.com/ADDIE_Interface_Design.htm• http://www.learninggeneralist.com/2010/03/3-ways-to-spice-up-linear-navigation-

in.html• http://www.articulate.com/rapid-elearning/• http://blog.cathy-moore.com/2007/09/visual-menus-structure-with-style/• http://www.concentric.net/~ktchang/tech/user-interface-design.shtml• http://www.clarktraining.com/content/articles/MoreThanEyeCandy_part1.pdf

navigation, storyboards, and prototypes

Documents

design package

prototypesinstructional

learning object design

poor design personallynot

elearning technologies

navigation flowchartcreate

instructional content

interface designthere