Don’t limit yourself.
Daily Visual 3: No Limits
Daily Visual 2: Missing Goals
Sometimes you won’t hit your goal.
Daily Visual 1: Closed Door
What do you see?
Using Lightbox Slides to Reduce Cognitive Load
One of the things I touched on briefly in my workshop session at the Articulate Roadshow was the idea of using lightbox slides to reduce cognitive load in your course. Building lightbox slides for certain items can reduce cognitive load and focus the learner on the meat of the content rather than forcing them to click through slides on how to navigate the course.
The function of the lightbox slide is to be hidden until it is opened, and then closed (or hidden) when it is no longer needed. Let’s look at a few examples of using lightbox slides to reduce cognitive load. First, here is the simple lightbox slide I created for the Roadshow workshop that depicts five common lightbox options.
Course Navigation
Yes, I know there is the argument that it is 2018. Do we really need to tell people how to navigate an e-learning course? And for the most part I agree that it shouldn’t be needed. However, I’ve often built this type of slide to explain the functionality of a course (glossary, contact info, resources, information about course assets such as videos, and yes, how to navigate). Think about the fact that there might be a user that needs assistance. If that slide helps one user, it’s worth being built. Unfortunately, there is also another argument for building this type of slide – someone higher up than you is mandating it’s inclusion. Regardless of the reason, if you are building a course navigation or functionality area, the lightbox slide is a great option. Putting this ancillary information on a lightbox slide pulls it out of the main flow of the course and recognizes that not everyone will need it, but it’s there for those who do.
References
Depending on your industry, you may be required to include a references or works cited slide in a particular course. I’ve found this to be true in two sectors I’ve worked in – healthcare and statistical software training. You could make this the last or penultimate slide of the course. But again, not everyone will need (or want) to access this information. In my opinion, this information is perfect for a lightbox slide. It’s there if someone wants to investigate further, but again, it’s not crucial to the main flow of the course.
Glossary
Say you want to build a custom glossary for a course. A glossary is a reference tool that is used when needed. In other words, it is an ideal candidate to put on a lightbox slide. It’s default state is hidden, but it’s always a click away when you can’t remember the definition of a particular term.
Building lightbox slides for these types of ancillary content reduces cognitive load and puts more control in the learner’s hands. The learner can access this material at the time of need, rather than being forced to view it to complete the course. What do you think? What are some other ways to use lightbox slides to reduce cognitive load?
Practical Ways to Use Lightbox Slides
On a fall day in October (between two hurricanes), I was a guest presenter at the Articulate Roadshow in Durham, North Carolina. I joined Tom Kuhlmann and David Anderson for a two-day workshop on building courses in Storyline. My topic was Practical Ways to Use Lightbox Slides. Since this was more of a workshop rather than a presentation, I built everything in Storyline. This made it a little tricky going back and forth between the finished examples to the actual build, but I think it worked well overall.
To capitalize on the ease of use of Articulate 360, I built everything using one of the free templates included in Content Library. One of the Main Menu slides was particularly useful in showing 5 typical uses for lightbox slides.
I decided to focus on four areas.
- form and function of lightbox slides
- how to launch lightbox slides
- how to build an out-of-the-box lightbox slide
- how to build a custom lightbox slide
And since the point of the Roadshow is hands-on learning, participants had time to build their own lightbox slides and ask questions as needed.
Overall, this was a great experience for me. I’m humbled and thankful that Tom asked me to be a part of the workshop. And of course it was great to spend a little time chatting with him and David.
I’m including the source file (mainly for the folks who attended and asked for it).
Lightbox Session Storyline Source File
I also curated the following list of additional resources from the E-learning Heroes Community.
ELH Challenge #200: Using Lightbox Slides in E-Learning
Great e-learning challenge with ~40 examples submitted from the community. Check these out for inspiration and submit your own!
All About Lightboxes
Detailed article from Trina Rimmer, Articulate Community Manager, that walks through the process of creating lightbox slides.
Lightbox Note-Taking
Clever example created by community member Adam Gavarkovs of building a lightbox note-taking area for learners.
Add a Lightbox to the Course Player
Video tutorial from Trina Rimmer on how to launch a lightbox from the course player.
3 Simple Techniques for Remediation in Articulate Storyline
Articulate’s Mike Enders explains how to use a lightbox slide as a remediation technique.
Building a Circular Menu Navigation
The latest ELH Challenge asked members to build a circular menu navigation. One of the inspirations for this challenge was Joshua Stoner’s excellent circular menu with animation post.
When Joshua first shared his nested menu, I really liked what he built. In fact, I modified his design and built a nested timeline. For this challenge, the requirement was to keep it a circular menu.
I frequently like to build challenge entries that serve as helpful tools to use when building in Storyline. I happened to be looking for background photos for a project and was experimenting with color overlays. So I thought I’d create a menu that allowed the user to change the color on overlays for a photo. I picked a transparency value of 75% for each color.
I created the animated SHOW/HIDE animation using Joshua’s technique. I added 6 sub-buttons so as to cover the ROYGBV color spectrum.
Next, I found a background picture from Content Library. Rather than use layers for color changes, I added six states to the background image, one for each color. On each state I added a rectangle overlay for that particular color and changed the transparency to 75%.
Clicking each color circle changes the background to that color overlay and allows me to decide on a color. I also added a trigger to change the background image back to Normal when the user clicks the HIDE button.