How are Designers Using Progressive Disclosure in E-Learning? #463

Using Progressive Disclosure in E-Learning #463: Challenge | Recap

One of the most common tasks in e-learning is breaking complex concepts or information into smaller pieces. Chunking content into bite-sized pieces helps reduce content fatigue while enhancing learning and retention. E-learning 101, right?

Another way to make complex topics easier to understand is by presenting information little by little, based on what the learner needs or how well they are doing on a task. 

By disclosing information progressively, learners can remain focused on the task without being overwhelmed by too much all at once. And that’s what this week’s challenge is all about!

🏆 Challenge of the Week

This week, your challenge is to show how progressive disclosure can simplify complex information and help learners avoid cognitive overload. 

If you have extra time this week, include a before version of your example to show how progressive disclosure solved the problem.

What are some e-learning examples that use progressive disclosure?

Any interaction that prioritizes essential over nice-to-have info upfront while giving learners access to additional information can be considered progressive disclosure. 

Interactive screenshots and labeled graphics are two common types of progressive disclosure. They start by showing a big-picture view of the content and allowing learners to drill down into more detailed information at their own pace, helping to avoid cognitive overload.

Other examples include accordions, tabs, modals, tooltips, steppers, adaptive scenarios, and most click-and-reveal interactions.

🧰 Resources

Here are some related challenges that can be considered simple forms of progressive disclosure:

✨ Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new thread and share a link to your published example.
  • Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

🙌 Last Week’s Challenge:

Before you disclose your challenge examples, check out last week’s recap for alternatives to using the next button:

16 Navigation Examples That Don’t Rely on Next Buttons #462

Beyond the Next Button RECAP #462: Challenge | Recap


👋 New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article

📆 Upcoming Challenges

  • Challenge #464 (05.31): Labeled graphics and interactive markers

🚨 2024 Articulate User Conference Call for Proposals

We’re now accepting proposals for this year’s in-person user day conference co-hosted at DevLearn in Las Vegas. Learn more about the proposal process.

Jonathan Hill
Jesse Wu

Hello, I will share the framework of my entry below and post link in the reply. Title: Understanding WHMIS 2015 Pictograms Duration: 10 minutes Objective: To identify the WHMIS 2015 pictograms and their associated hazards. Course Structure: 1. Introduction (1 minute): A brief introduction of WHMIS 2015 pictograms and their importance in identifying hazards. 2. Interactive Content (7 minutes): o Pictogram Details (6 minutes): Once the user clicks on a pictogram, the section on the right providing detailed information about the associated hazards. o Pictogram Matching Game (1 minutes): An interactive game where users drag and drop names under onto corresponding pictograms. 3. Quiz (2 minutes): A short multiple choice quiz to test the user’s understanding of th... Expand

Nicole Smith
Jodi M. Sansone
eLearn Dev
Jayashree Ravi
Cheli Kuhar-Hunt
Daniel Canaveral
Stan Sinasohn
Reginald J