Blog Post

E-Learning Challenges
2 MIN READ

How to Notify Learners When to Click the Next Button in E-Learning #293

DavidAnderson's avatar
5 years ago

Next Button Alerts and Notifications in E-Learning #293: Challenge | Recap

Generally, when someone asks about the ubiquitous next button, they’re looking for creative ideas to move beyond the default next button. Other times they’re looking for help building animated button effects to liven up their course design. 

But in a recent training webinar, someone asked something different and I thought it would make a fun and easy challenge.

This time, the question was around drawing attention to the next button. She wanted to help learners know when it’s time to click next without having to narrate “Click next to continue” at the end of every slide. Finding ways to highlight, emphasize, and help learners find the next button is what this week's challenge is all about!

Challenge of the Week

This week, your challenge is to share ideas for notifying learners when it’s time to click navigation buttons in e-learning.

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own 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 back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you get started on this week’s challenge, check out the creative ways text variables can be used to let learners compare and contrast their answers with an expert’s recommendation:

Using Variables to Compare Answers in E-Learning #292: 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.

Published 5 years ago
Version 1.0
    • JodiSansone's avatar
      JodiSansone
      Community Member
      Who doesn't love a napping seal? Can you describe how you made the pulsing button on that slide? Loved it.
      • CarrieGauthier-'s avatar
        CarrieGauthier-
        Community Member
        Thanks Jodi! I'll include the download in the Feedback section, it might be easier to explain if you can see the method.

        Off the slide I have a circle with two motion paths (Down and Up). I set up a number variable (Glow) to add 1 each time the Down motion path completes. The change in variable then triggers the "Glow" layer appear.

        The Glow layer has the exact same icon but with a custom shadow effect applied to it. I have that layer set to hide when the timeline ends (I adjusted the timeline and the motion paths to my liking). I also added a fade in and face out effect on the glowing icon so that it was a little more of a smooth transition.

        It's very possible that I over-complicated it a bit but I've used this method a few times and I really like it. I can't take credit for it though, I found a YouTube video walking through these steps ages ago. I've never found it again but it was extremely helpful. Let me know if you have any questions!
  • DominikR's avatar
    DominikR
    Community Member
    https://360.articulate.com/review/content/7e0ee108-7e31-428c-9859-cefea87bae23/review

    I tried to do the following:

    1. Compose the slide so content appears in such a way that the learner's view goes from top-left to the bottom-right.
    2. At the end of the timeline, an animated signifier appears to indicate that the slide has ended.
    3. The next button is disabled until the signifier fades in, unless the slide has been completed before.

    For the signifier, I built a quick gif in adobe animate, which morphs a '✓'into a '>'. I hope this is easy enough to understand and the animation should make it hard to overlook.
      • DominikR's avatar
        DominikR
        Community Member
        Thanks. Some time later, I am not very happy with this solution anymore, because it assigns the checkmark a secondary meaning. I noticed that upon seeing a checkmark I had to think for a second to decide what the author (me!) probably wanted to convey. It might be better to use a different symbol, repetition will certainly make its meaning clear eventually, no matter how abstract.
    • FarahAzadeh-1d8's avatar
      FarahAzadeh-1d8
      Community Member
      Well done. In addition to the check list, the yellow arrows flying in shifted my focus to the NEXT button.
  • I am curious about the ability to actually use the player to do this? And, not by hiding the button. Is it possible to 'hack' the player to have the next button change color when it is time to move to the next slide?
    • NancyWoinoski's avatar
      NancyWoinoski
      Super Hero
      Hi Katelin, there is no way to change the colour of the player buttons on the fly even with a hack to the code.
    • DominikR's avatar
      DominikR
      Community Member
      It is defintely possible with Javascript, but if you have to ask, you don't want to know :)
      • NancyWoinoski's avatar
        NancyWoinoski
        Super Hero
        Hi Dominik, have you managed to do this? I know there is a way to modify the modern player colors but I didn't think there was a way to change the colors on the fly.
  • AmanVohra's avatar
    AmanVohra
    Community Member
    "5 Easy Ways to Protect Yourself Online"

    In this sample, the main highlight is the next button that works as a progress bar too and prompts you, when you should move to the next page. However it does not restrict you to go to the next page in between.

    Demo: https://bit.ly/NxtBtnEmph
    • FarahAzadeh-1d8's avatar
      FarahAzadeh-1d8
      Community Member
      Wow! I really like the design of the NEXT button/progress bar combo. Thanks for the sharing, because I always want to have a progress bar but think it takes up too much space.
      It's all about synergy. 😀
    • TeoKar's avatar
      TeoKar
      Community Member
      I will definetly use it as an inspiration one day! Thank you for your contribution. I was curious, is the background part of your webpage or storyline? Cause it looks as the page's background
      • AmanVohra's avatar
        AmanVohra
        Community Member
        Thanks a lot Teo, this means a lot!!
        I have not inserted the background in storyline sample. I kinda' modified the html/css code to insert the background image so that it looks the same on all desktop and mobile devices.