e-Learning Design: Navigation Styles
Posted: 04.22.2013 Filed under: eLearning | Tags: e-Learning, Navigation 11 Comments »You’re designing an e-learning course and you’re wondering how you should set up your course navigation… the good news is there are more options available to you than just the standard left-hand menu and your typical next/back buttons. This isn’t to say that there’s anything wrong with using the left-hand menu and the next/back buttons — there isn’t. In fact, I think it’s usually a good idea to stick with what people are used to because it means your learners won’t have to guess about how to navigate or where to click. People have certain expectations about how they should be able to navigate an e-learning module (influenced greatly, I believe, by how they navigate websites) and if you deviate too much from the norm, it could lead to confusion!
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:
Free Paperclip-Themed eLearning Template
Posted: 04.14.2013 Filed under: eLearning, Graphic Design | Tags: Articulate Storyline, Graphics, MorgueFile, Template 12 Comments »I’m sure that other e-learning, web and graphic designers will agree with me when I say that I LOVE finding free templates and resources online that I can use in my projects. Last week I was doing a web search for some quality free photos that I could use in a project and I stumbled across MorgueFile. It says right on the website that you can use the photos for commercial purposes without attributing the original author, and the photos are really great, high-quality images! I’m in love with this site. Tons of abstract photos and textures you can use for backgrounds in e-learning templates, and they have a really great set of business people in a lot of different settings. When I saw the following set of paperclip photos I suddenly became inspired to create an e-learning template….
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.
How To Create Custom Shapes/Graphics in Articulate Storyline
Posted: 03.24.2013 Filed under: eLearning, Graphic Design | Tags: Articulate Storyline, eLearning, Graphic Design, Graphics, storyline 8 Comments »Last week I posted a bunch of custom shapes I created using Articulate Storyline in the e-Learning Heroes Forum. Two things have come of this: 1) people seem to really like the shapes (yay!), and 2) I’ve since developed a new obsession with creating custom shapes in Storyline. In case you’re wondering what I mean by “custom shapes” I simply mean that using shapes that are available within Storyline I created the items you see below:
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!
Recording a Screencast: Do’s and Don’ts
Posted: 03.12.2013 Filed under: eLearning, Technology | Tags: Camtasia, Camtasia Studio, e-Learning, Screen Recording, Screencast, Screenr, Youtube 21 Comments »I’m always interested in finding out more about the tools that are available out there for e-learning developers (and for web and graphic designers, for that matter), so last weekend I decided to try my hand doing some screen recordings using the free screen recording tool Screenr!
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!
Using Video in e-Learning: (Almost) Everything You Need to Know
Posted: 02.10.2013 Filed under: eLearning, Technology | Tags: e-Learning, Flash Video, Multimedia, SWF, Video 12 Comments »Not that long ago using videos in e-learning was pretty prohibitive due to the costs associated with it. Fast forward a few years and with everyone having access to video-cameras on their smartphones and laptops, it has become a lot more feasible for the everyday e-learning designer to use videos in his/her projects. However, just because video has become more commonplace, that doesn’t mean that adding video to e-learning is without its challenges or that every project merits it. I recently did some research into using video in e-learning for a course I’m presently designing and I thought I’d compile some of my findings into a blog post.
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.
|
PROS OF USING VIDEO |
CONS OF USING VIDEO |
|
|
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.
- Decide which content will be presented through video
- Decide if you will Do-It-Yourself or hire a professional videographer
- Script and create a shot-by-shot storyboard
- Schedule videographer, actors, location, sound & lighting technician
- Record the video
- Edit the video using editing software
- Compress and render the video
- Insert video into e-learning course
- 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
|
Video Format |
Pros |
Cons |
| .SWF (Flash File) & .FLV (Flash Video) |
|
|
| .AVI |
|
|
| .MP4 and .MOV (MPEG-4) |
|
|
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!!
[INFOGRAPHIC] How to Use the PAF Model to Improve Training and e-Learning
Posted: 01.20.2013 Filed under: eLearning, Graphic Design, Infographics, Instructional Design | Tags: e-Learning, Graphic Design, Infographic, Instructional design, Training 13 Comments »Last weekend I posted a new infographic (Gagne’s 9 Events of Instruction) and I got some really good feedback about it. One piece of feedback that I received from several people was to incorporate more graphics/icons into my infographic designs. Of course I think we can all agree that using visuals is only a good thing if it adds value by providing an instructional purpose. This weekend when I decided to make another graphic, I was careful to choose a few icons that I thought were really representative of the elements of PAF. I created this infographic in Adobe Photoshop.
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!
[INFOGRAPHIC] Instructional Design Model: Gagné’s 9 Events of Instruction
Posted: 01.13.2013 Filed under: Graphic Design, Infographics, Instructional Design | Tags: eLearning, Gagne, Graphic Design, Infographic, Instructional design 19 Comments »This weekend I decided it was about time I created a new instructional design themed infographic. I’ve created a few in the past, which I’ve shared on my blog (here, here and here), and they’ve proven to be some of my most popular postings.
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.
