Navigation, Storyboards, and Prototypes

1. Navigation, Storyboards, and Prototypes Instructional Design for eLearning Instructor: Scott Nipper Certificate Program

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

3. 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 1 Course Name: Navigation, Storyboards, and Prototypes Program Name: Instructional Design for eLearning Certificate Program 3

4. 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 Prototypes Program 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

6. 10 Principles of Usability Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetics and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation <print pdfs> Source: Jakob Nielsen.

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

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

10. Still More on Interface Design Pretty ≠ good Good design is beautiful Mix aesthetics and functionality It isn’t easy

11. Don’t judge a book by it’s cover

12. Learner Anxiety

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

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

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

16. Navigation • Learners can be so controlled by e-learning module that they feel victimized • Good navigation helps learners feel they have control

17. Navigation Features Appreciate Dislike

18. Navigation can do more than transport learners It can be the basis of higher-impact learning experiences

19. Problem Answer Incorrect answer given Correct answer given Change answer Ask “Why?” Ask “Why?” Change answer Change answer Student gives an Invalid justification. Student gives a valid justification for the correct answer. Student cites points valid about the answer given, but they do not justify the answer this problem. Student justifies the Correct answer, but not the answer given Submit justification Submit justification Submit justification “You were correct, but this isn’t why…” Launch appropriate remedial experience Provide instructional experiences to construct valid relationships between alternatives and their attributes. Provide instructional experiences to construct valid relationships between alternatives and their attributes. Exit

20. Some Guidelines Two 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

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

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

23. Nice-to-have interface features Bookmarking Personal index Highlighting Margin notes Posted notes

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

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

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

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

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

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

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

31. 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., Graphic Design Principles

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

33. Transparency To 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

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

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

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

37. Activity – Navigation Map Use your practicum project as source Use flowchart symbols from Bill’s class Build a navigation of your module

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

39. 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-good-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