Here is a list of 6 navigation styles you can use in your e-learning projects with some tips and info about each one. I’ve also included a published course that I developed  featuring an example of each nav style, to help you get inspired.

Horizontal Navigation

• Commonly used navigation style in web design.
• Drawback to using horizontal nav is that you can only display a limited number of links horizontally (probably 5-8, depending on text size and number of characters), so this might not be the best option for complex courses with a lot of information.
• A drop-down sub-menu can be used to link to additional information.

Vertical Navigation

• This is the menu style that is most often used in e-learning courses. Adobe Captivate, Articulate Presenter and Storyline, Lectora and Oracle UPK are all authoring tools that display a menu/table of contents on the left-hand side by default.
• As with the horizontal navigation, a drop-down sub-menu can be used to link to additional information.
• Limit the number of links you use in your vertical menu or it can become overwhelming for users.
• Interesting fact: according to usability study on navigation patterns vertical navigation bars on the left performs better than vertical navigation bars on the right.

Tabbed Navigation

• Tabs are popular in web design and are usually used horizontally.
• Tabs can also be used vertically, but be careful because this might make it difficult to read the text.
• They make navigation intuitive because people are used to seeing tabs to navigate (in filing systems, notebooks, binders, etc.).

Next/Back Navigation

• Next and Back buttons are standard in e-learning courses. Even when you want to avoid boring, linear, “click-next” style courses… you sometimes still need to use a next and back button!
• These buttons are often used in conjunction with another type of navigation (vertical menu, horizontal nav, etc.).
• Arrow icons are often used to add a visual cue of going forward and backward.

Breadcrumb Navigation

• Breadcrumbs are used as a secondary form of navigation and not as the primary nav.
• They are used to show a learner where they are in an e-learning course; they orient learners when there are multiple layers of navigation.
• Interesting fact: breadcrumb navigation gets its name from the fairy tale Hansel and Gretel, where they leave breadcrumbs along their journey, so they can find their way home.

Grid Style Navigation

• Usually created with images, although it could be shapes and text as well.
• Good option for a main course menu and for courses that have visually rich content.

I hope this post has given you some ideas for how you want to set up the navigation in your next e-learning project. Here are a few links to some great resources that helped me write this post:

• Guide to Website Navigation Design Patterns
• Navigation Styles for Effective Website Design

So that’s how this next e-learning template came to be, which I created Articulate Storyline. I was inspired by this paperclip photography and I lifted the turquoise color from the paperclip (using the eye-dropper tool) to use in my design.  The fonts that I used in my template are Bebas, Desyrel (I only used Desyrel on the title slide) and Articulate Light. You can download the fonts for free and install them on your computer if you would like your template to look identical to this (it won’t quite have the same look if you don’t have the Bebas font installed!).

If you want to check out the published Storyline file, you can have a peek at it here. If you’d like to download the .story file to use this template yourself, you can download it here. Sharing is caring! Hope this template is useful for someone, or inspires you to create your own.

Everything in the images was created by me (except the wood texture background) simply by using shapes and lines with the appropriate gradients and shadows, right in Storyline. The fun thing about this is that since they are really just groups of shapes, you can de-construct them, edit them as you please, change the colors, etc. You can also do a right-click on the group, Save as Picture, and then save the shape as a .PNG file that can be used in projects you create using other applications, like PowerPoint or Captivate. As pointed out to me in the forum,  it’s a fun way to extend the functionality of Storyline from an e-learning development tool to a graphic design tool, by using what’s available to you in the right way.

All you need to do to create your own custom shapes is create your individual shapes, color them (using shadows and gradients, such as the path gradient used on orange rectangle below, is critical to making it look realistic), line up your shapes, and then group them together.  The image below breaks down how I created the pencil.

Like I mentioned earlier in this post, I’ve now developed a bit of an obsession with creating fun new shapes. It’s given me all these ideas for fun projects and themes I can create using the shapes I’ve made. For example, I created a really cool looking desk phone (which I will share in a future post) and now I’m working on adding some functionality wherein you press numbers on the keypad, and it links to various slides. I also find that now I’m often challenging myself to see how far I can go “re-creating” simple items right in Storyline. My latest challenge was creating the Microsoft system calculator using shapes in Storyline. You almost can’t tell the difference between the two!

Since the shapes I created last week were a hit, I decided to make a few more this weekend. I created a couple of folders, a notepad, and a clipboard. I’ve posted these files in the e-Learning Heroes forum as well, so check it out, and if you use Storyline, by all means, save them for your own projects. Here’s a photo below to show you what the new shapes look like.

I hope this has inspired some of you guys to create your own custom graphics in Storyline! And if anyone has any suggestions or ideas for future shapes or challenges for me — bring it on!

When I decided to make my first screencast I thought it would be easy-breezy since I have a lot of experience recording software simulations. It turns out there’s a really big difference between recording a software screencast vs. a software simulation. When I would record simulations (using either Oracle UPK or Adobe Captivate), I would capture the process slide-by-slide. Afterwards, I would be able to edit my screenshots and clean up my work. With UPK and Captivate, the audio could be recorded separately and added in later. With the free version of Screenr that I am using, it’s a one-shot deal. The recordings are maximum five minutes long and there’s no editing – you just click go and record!

Before I made my first recording, I did a bit of homework into what goes into a great screen recording. Here is a list of the best practices, tips, and techniques that I came across in my research. These are some of the Do’s and Don’ts of screen recording to help you if you’re making your own screencasts!

Select a topic

• Do have a clear purpose for the screencast
• Do keep it short and simple

If the process is too long, chunk it down and make several short videos. This is something I learned myself as I was trying to cram a somewhat complicated 10 step process into a 5 minute video. I realized I was trying to show too much at once, and broke it down into two five-step processes instead.

Write a script or storyboard

• Do script out your process step-by-step. (This is a critical step. Without the script you might forget a step, ramble about useless information, do something backwards, etc.).
• Do create a storyboard of the different shots, or screens, you need to capture and in which order.
• Do include any “set-up” instructions that are required to do your screencast in your storyboard. For example, you might need the application to be logged in and displaying a specific window, or you might need certain data or information to already be input in the system. Think along the lines of cooking shows – some things take too long to demonstrate in the time available, so different versions of the dish are made ahead of time and are ready in varying degrees, so they can just pull it out of the oven and Voila!

Select your recording software

• Free options: Screenr, BB FlashBack
• Purchase: Camtasia, Adobe Captivate, Articulate Storyline

If you’re unsure about which software you’d like to purchase, you can download a free trial of any of the paid software options to get a feel for the features and interface

Set up your screen/applications

• Do close all other applications and windows.
• Do hide your start menu and any visible taskbars, menus.
• Do turn off all pop-ups, alerts, and notifications.
• Do have all the data you need in front of you (if you need to input data as part of your process).
• Do hide your favorites, quick links, and any other personal information that might show up on the screen if using an Internet browser (no one wants to see your personal links).
• Do use an “administrator” or “general user” account (if possible) so your recording doesn’t reveal any names or personal information.
• Do ensure applications are open, running, and ready to go before you start recording. Set it up to the exact screen you’d like to start from – don’t waste time navigating to a screen unless it’s an important part of the process that learners need to see.

Select an appropriate screen size/resolution

• Do take screen size into consideration. The recording size will depend on things like: your audiences’ monitor display resolution, the size of the slides in your e-learning course, etc. At this point in time, it’s probably still safe to optimize for 1024 x 768.
• Do keep the recording area as small as possible – without making it so small that you can’t see features or easily navigate in the application (this will help minimize file size).

Practice, practice, practice.

• I don’t think I need to elaborate!

Use the right equipment

• Do have a good microphone.

This is another thing I learned myself when I did my first few recordings using my laptop’s mouse trackpad and the built-in microphone. Result: really crappy audio quality. Since then I went to Best Buy and bought microphone for under 30$ and the audio quality is now far superior. Apparently learners will tolerate bad visuals over bad audio, so this is key!

Control your voice

• Do speak clearly and enunciate words.
• Do stick to the script.
• Do add some personality.
• Do use emphasis at key moments.
• Don’t use jargon or overcomplicated words.
• Don’t breathe too loudly, smack your lips, etc.
• Don’t talk too close to the microphone.
• Don’t say “so, like, eh, um,”. Personally – I am really bad at this, but working on it. Very helpful to have a clear script to follow.
• Don’t be monotone and boring.

Control ambient sounds

• Do choose a nice, quiet location to do your recording.
• Do make sure your heater or air conditioner won’t come on.
• Do put your cell phone on silent and unplug the landline (or turn off the ringer).
• Do put your cat or dog outside.

This is yet one more thing I discovered firsthand (experience is the best teacher, they say!) as I was recording last weekend. I had the PERFECT screencast going — everything was going exactly according to script, I wasn’t saying “so” too much… so of course, my dog chose that moment to break out into a horrible, hacking cough in the background. Thanks, Charlie. Now I go into another room when I need to record.

Edit your recording

• Free: Windows Movie Maker, Apple iMovie (for Mac users)
• Purchase: Camtasia, Adobe Captivate, Articulate Storyline

Share your recording

• Do share it on video sharing sites (YouTube, Screenr, Vimeo, etc.)
• Do share it on social media (Twitter, Facebook, LinkedIn, etc.)

So far following these tips have really helped me improve my recordings – however, it’s like everything else in life, practice makes perfect! The more screencasts you record, the more comfortable you will be with it, and your recordings will improve over time. If you have any other tips or best practices that I did not include, please leave a comment…. and since you made it all the way to the end of this post, perhaps you should subscribe to my blog!

Pros and Cons of Using Video in e-Learning

Whether or not you choose to use video in your project will depend on many factors, including time, budget, and subject matter. Whichever way you choose to go, there will be advantages and disadvantages.

 When you should use video

Although the cost of developing video for e-learning has gone down significantly over the years, it is still a time and resource-intensive undertaking. As such, you should only use video when there is a clear instructional purpose behind it. Here are a few examples of when video might be a good idea:

• To model behavioral or interpersonal skills
• To demonstrate how-to do, and how not to do, a specific task
• To reduce the reading load for learners
• To emphasize an important concept or point
• When you need more emotional appeal than photos and text alone can deliver

High-level steps for using video

If you’ve decided you will be going ahead and using video in your project, here are the high-level tasks you will need to accomplish.

1. Decide which content will be presented through video
2. Decide if you will Do-It-Yourself or hire a professional videographer
3. Script and create a shot-by-shot storyboard
4. Schedule videographer, actors, location, sound & lighting technician
5. Record the video
6. Edit the video using editing software
7. Compress and render the video
8. Insert video into e-learning course
9. Provide learners with software requirements for accessing the video

Key considerations for using video

Below is a list of some of the basic considerations you will want to look at when planning your video project.

• Scripting and Storyboarding: Has the script been written and vetted? Scriptwriting may seem easy but it can actually be quite difficult and time-intensive to create realistic dialog. Do you have a storyboard for all the shots you need to capture when recording your video? Do you need a close-up shot of a product or of a specific technique? Have it planned out, shot by shot.
• Video Equipment and Technology: Do you have the equipment needed to shoot videos? (Camera, editing software, microphones, lighting, backdrops, etc.) If you don’t currently have the necessary equipment, will you be purchasing (new or used) or renting the equipment? What are the price differences? If you are hiring a professional, which equipment will he/she bring?
• Location: Where will you be filming your video? Do you need a sound proof location? Can you film in a public space? Do you need to book the space, or make arrangements to make sure it’s quiet? Do you need to purchase a back drop for the room?
• Actors: Will you be using employees or paid actors? If you are using paid actors, do they need to be a certain age, ethnicity, gender, etc. Do you need to schedule them a few weeks in advance? Do you have any backups in case someone doesn’t show up? Do the actors need to be wearing any specific type of clothing (business suits, casual jeans, etc.) and how should their hair and makeup be done?
• Lighting: Professional looking videos are well lit to avoid shadows, darkness, etc. How will you accomplish this?
• Sound: You may need a professional sound technician who has wireless microphones and the equipment needed to make sure all the sounds are crisp and clear.
• Final editing: Do you have the software necessary to make edits to the footage? If not, will you hire a professional to do this? What are the costs and timeframes involved?
• Logistics: Now that you’ve got your equipment, location, actors and sound & light technicians all sorted out, you need to schedule everyone to be in the same place at the same time for at least a few hours to do the recording!
  

Which video format to use

As  I did my research into using videos I started wondering which video format is best for e-learning. I also found it’s really easy to become confused and lost in the world of video codecs, containers and formats. I think it’s really important to understand these basic video technology concepts so here’s my attempt to break it down. Almost all video out there is compressed (meaning it’s been altered to take up less space on your computer). A video codec is software the decompresses the files so you can watch them (popular ones are QuickTime,  Windows Media, DivX) and a container (really another word for what I call “format”) is the bundle of files that actually comprises the video (popular ones are .FLV, .MP4, .MOV, .AVI). Which type of video “container” should you use for your e-learning project? There isn’t necessarily a right or wrong answer, but you can reference the table below to help make your decision.

Video Format Comparison Chart

Managing Video File sizes:

One of the biggest disadvantages to using video in e-learning is the amount of space/bandwidth they use. Even when compressed, video files are not exactly tiny. However, there are a few basic things you can do to manage your video file sizes:

• Chunk your videos into small segments
• Compress your videos
• Limit the width and height of your videos in your courses (of course, don’t make it so small you can’t see the screen clearly!)
• Host your videos online (YouTube, or similar) and link to them or embed the YouTube videos directly in your course (this might only be a possibility is Internet access is available, and there might also be a security risk involved in this to take into consideration)

Various hints, tips, advice:

Here’s a couple of other interesting tidbits and nuggets of information I found as I was doing my research.

• Keep videos short (no more than few minutes, get to the point quickly)
• Use closed captioning (for hearing impaired, and for clarity)
• Make sure your e-learning authoring software and LMS are video compatible.
• Consider how easy/difficult the use of video will make it to edit and maintain the course down the line
• Remember your color blind audience!
• Articulate Storyline automatically converts all videos to .MP4 during the Publish, so even if you embed .FLV or .SWF files into your course, they should play fine on iOS devices.

Helpful Links and Resources

I thought I would share some of the web pages and resources that helped me write this post.

• http://elearnmag.acm.org/featured.cfm?aid=2206721
• http://blog.integratedlearningservices.com/2012/10/using-video-in-elearning.html
• http://www.learningsolutionsmag.com/articles/596/best-practices-for-using-video-in-e-learning

P.S. I’d like to add a note for my Mom, an avid blog follower: I promise my next post will be about my experience presenting at DevLearn 2012 in Vegas!!

I’d also like to add a disclaimer that the PAF Methods listed in the infographic for presentation and application are only three examples, but there are a lot more methods available to you. Those are just a few examples!

How did I go about creating this infographic? For starters, I browsed online through some instructional design sites to get ideas for what I wanted my subject to be. In the past I’ve designed an infographic illustrating the ADDIE model and Kirkpatrick’s Levels of Evaluations so when I stumbled across an article mentioning Gagne’s 9 Events of Instruction I was intrigued. Of course I had heard about Gagne and his nine events, but I wasn’t too familiar with them. In fact, I couldn’t even name one event! Since I like to use my infographic development process to learn something new about instructional design, I thought this would be a good topic. The next step in my process was to do a Google Images search for some infographic design ideas, to help me get inspired. Then I created the infographic in Adobe Photoshop, starting with the design of the heading/title of the infographic. Once I had the title narrowed down, I used those same fonts and colours throughout the rest of the graphic. I’d say it took about an hour, maybe an hour and a half, to complete. I got to be creative and learn something new about instructional design, so I think it’s a success!

Got any suggestions for an e-learning, instructional design or training themed infographic you’d like to see? If you have any ideas for me please leave  a comment.

That being said, I was recently inspired to write this latest blog post from something that occurred at work! I’m working on an e-learning project now and I was recently looking into the pros and cons of adding audio to the e-learning course I’ve developed. I decided to compile a bit of my research and write about it!

I’ve come to find out that adding audio to an e-learning project is not a decision that should be taken lightly. There is a lot involved in the process, there is lot to know before you get started and finally there is a lot of room for error! So how do you decide if you need narration/audio in your project? As with all media in your e-learning projects, you should only use narration IF there is a clear instructional purpose behind it (and not “just because”). From what I can gather, there are three types of audio used in e-learning:

• Narration (which has four “subtypes”)
  • Elaborative  (on-screen text summarizes the audio)
  • Paraphrasing (audio summarizes the on-screen text)
  • Verbatim (reading exact words on-screen)
  • Descriptive (audio describes image on-screen)
• Music
• Sound effects

After doing a bit of research on the topic I’ve discovered that there is much debate surrounding which “type” of narration is best for learning. The kind of narration you should use in your projects seems to depend greatly on the specifics of the project (time, talent, budget) as well as what the subject matter is. So which content should you narrate? There are a couple of scenarios where it might be more worthwhile to use narration. For example, when you need to explain a complex definition or process, or when demonstrating situations such as interview skills or emotional interactions between individuals.

The pros and cons of using audio:

Let’s say you have decided there is indeed an instructional purpose for audio or narration, and you’ve narrowed down which type of narration you will use. The next question you might ask yourself is, who will narrate this course? Three ways to narrate your course include:

• A professional narrator
• An employee narrator
• Text-to-voice software

In addition to “the voice” you will likely need a couple of additional people to be involved in the audio recording process, likely:

• A scriptwriter
• A producer (this depends on the technical skill your narrator possesses, and if he/she can do the actual sound recording themselves)

Of course there are both pros and cons to using any type of narration in your project.

• Narration rule of thumb: 1 minute of talk time = 100 words
• Try to keep audio clips to 20-30 seconds (to retain learner attention)
• Find a balance between what learners should read vs. what they should listen to
• Allow users to have control over volume settings
• Have an instructional reason for using the narration or audio (not just because)
• Include a list of hardware and software requirements for learners to know ahead of time if they need speakers or a headset for audio
• Keep in mind that if your e-learning course requires audio, people who do not have audio capabilities will not be able to take the course
• Audio might slow down some learners since they have to go at the pace of narration
• Adding narration will impact on the amount of time it takes to complete your e-learning course

Finally, here are a few links to good articles about narration in e-learning that helped me write this post:

• http://www.learningsolutionsmag.com/articles/666/how-much-narration-in-elearning-our-lessons-learned
• http://theelearningcoach.com/elearning_design/the-art-of-writing-great-voice-over-scripts/
• http://www.knowledgeplatform.com/Content/Pdfs/audio_narration.pdf

http://hasanshaheed.com/folio/zometa-image1.jpg

http://www.learningcreator.com/wp-content/uploads/2009/11/compass-design-final-h.jpg

http://dokeos.com/images/general_practitioner.png

http://www.skills2learn.com/images/e-learning-instructional-design-LG.jpg

http://sportdrawn.com/portfolio/wp-content/uploads/2010/01/accountability_0.1.jpg

http://www.milza.org/portfolio/gui.php

http://www.milza.org/images/COU/presentation-volumeRO.jpg

http://panxplanet.blogspot.ca/

http://panxplanet.blogspot.ca/

http://blog.thewritersgateway.com/wp-content/uploads/2010/10/new_app_training.gif

http://jasonrenshaw.typepad.com/.a/6a00d83452d45869e20176169e9bae970c-800wi

http://kdw.digitecinteractive.com/wp-content/uploads/2012/06/NACUFS_custom_e-learning_course_production_sample_new.png

http://blogs.adobe.com/captivate/files/2011/11/processMod.jpg

http://behance.vo.llnwd.net/profiles/90854/projects/171217/908541232322551.jpg