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
DavidAnderson
Staff
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
E-Learning Challenge
  • Jonathan_Hill's avatar
    Jonathan_Hill
    Super Hero
    5 years ago
    Hello! This is an interesting -- and potentially controversial -- topic!

    I think 'next buttons' get a bad press but there's definitely an art to getting them right. With that in mind, here are three experiments in meta messaging, symbols and movement to help the user 'click next' without er, clicking next.

    CE N'EST PAS UN BOUTON SUIVANT

    Demo: https://bit.ly/elhc293
    Download: https://bit.ly/elhc293dl
    • AndrzejJaboski-'s avatar
      AndrzejJaboski-
      Community Member
      5 years ago
      I'm a big fan of using the elements of course design to move further e.g. bend page corner or bookmarks. Nice job!
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      5 years ago
      Thanks for taking part in my experiment folks!

      I was going to let this run a while longer, but the comments and feedback I have received so far have been really interesting.

      What I didn't highlight in my original post, is that each interaction has a 10 second timer. If you don't 'click next' in that time, the next button is then highlighted to help you.

      What's fascinating is that no-one appears to have stayed on each slide for more than 10 seconds, even those of you who found the design choices less obvious or unclear. You nonetheless identified the next button within 10 seconds without help.

      This provokes a follow-up question:

      How long is 'too long' to make the user wait to move on or until you highlight the next button?

      What are your thoughts?
      • KOsunero's avatar
        KOsunero
        Community Member
        5 years ago
        I think that we might be a little biased because we know the challenge is to create a next button and thus, we're going to be on the lookout for it. I also think that our ability to quickly identify the next button is due to our experience with e-learning and having seen many examples of course navigation. This is definitely not the case for all audiences and I find that I usually err on the side of making things explicit, just in case. However, I thought that the images you used in the first and second examples (door handle, arrow) and way you used animation and bright text to catch the viewer's attention in the third example worked well here to prompt the viewer to interact with those pieces.

        Like everyone else, I didn't even know the timer was there and stayed on each slide for under ten seconds. I love the idea behind it and how the animations were subtle enough to catch your eye.

        I would say that the amount of time on the timer should be dependent on the amount of content on the slide. I usually time how long it takes for me to process the slide content to approximate the timing of animations like these. I thought that 10 seconds for each slide was appropriate for your demo, Jonathan.

        This was a great question and thanks for prompting an interesting discussion! For my demo this week, I tried to use subtle animations for my buttons but ended up labeling them for clarity because I didn't think they were intuitive enough. I'm considering going back and seeing if I can improve my demo. (Maybe adding a brief timer before the labels pop up!)
  • AndrzejJaboski-'s avatar
    AndrzejJaboski-
    Community Member
    5 years ago
    Hello!

    I've reused my previous demo with the next button created for challenge #285.

    I believe that when using custom navigation, subtle next button animation is enough to draw the attention yet not to distract users if they decide to stay on the screen a bit longer.

    Demo: https://storylinec.s3.eu-central-1.amazonaws.com/SLC+%23293/story.html
    Download: https://storylinec.s3.eu-central-1.amazonaws.com/SLC+%23293/Next+animations.story

    Every animation is based on the variable increment, so you can easily manipulate the duration time. All done using default shapes and animations so feel free to reuse it:)
    • KOsunero's avatar
      KOsunero
      Community Member
      5 years ago
      I was thinking about how to repurpose my demo from that last challenge, too! These are excellent examples -- the download is appreciated!
    • NickRussell's avatar
      NickRussell
      Community Member
      5 years ago
      Many thanks Andrzej. Very useful. I'll be interested to see how you made them.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      5 years ago
      A great effect, achieved in a deceptively simple way. I agree with you about keeping things subtle in case the user decides to stay on the screen a bit longer. These animations attract the attention without being distracting.
    • AndrzejJaboski-'s avatar
      AndrzejJaboski-
      Community Member
      5 years ago
      *bad joke alert*

      Hope this cat won't eat my mouse 😂

      I like the combination of video and static elements.
    • FarahAzadeh-1d8's avatar
      FarahAzadeh-1d8
      Community Member
      5 years ago
      Yes, your kitty would eat my chick. :)

      I like the animation, color palette, and most important having the kitty rub against the NEXT button to shift my focus and let me know it was time to click NEXT.
    • AndrzejJaboski-'s avatar
      AndrzejJaboski-
      Community Member
      5 years ago
      Love the dog animation :) Can I bribe the dog with some food and get the next button earlier? ;)
    • FarahAzadeh-1d8's avatar
      FarahAzadeh-1d8
      Community Member
      5 years ago
      Very cute. I like how the dog has to dig up the NEXT bone for me.
    • KOsunero's avatar
      KOsunero
      Community Member
      5 years ago
      This was so cute :) I love the dog animation and the way the "Next" bone bounced out of the freshly dug hole.
  • alexjinca's avatar
    alexjinca
    Community Member
    5 years ago
    Hi, Everyone! When you can't get to sleep and you are playing with the next button :) Here's my entry for this week : https://bit.ly/3knDe3w . I played with the bottom of the screen to draw the attention, a few changed states and an animation (AE script).
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      5 years ago
      I particularly like the monkey's brief reaction when you 'click next'..!
    • PhilLak's avatar
      PhilLak
      Community Member
      5 years ago
      Great animation ! i like it. Beau travail !
    • TeodoraPuiu's avatar
      TeodoraPuiu
      Community Member
      5 years ago
      Great animation! You could use it as a a silver lining for a learning journey as well!
    • TreyMcNabb-f8db's avatar
      TreyMcNabb-f8db
      Community Member
      5 years ago
      I like the animations between the slides to show the subject as well Nick. The one with the phonograph asked if I was going to play it after I clicked the needle. The only real problem was the music was so relaxing, combined with working from home and reviewing this right after lunch, I found myself almost dozing! lol.
      • NickRussell's avatar
        NickRussell
        Community Member
        5 years ago
        Thanks Trey - glad you like Debussy too - well who doesn't?
    • AndrzejJaboski-'s avatar
      AndrzejJaboski-
      Community Member
      5 years ago
      Like the use of the tooltip, simple yet effective! I know it's a demo, but I would consider hiding it after few seconds so the text on the base layer is not covered :)
      • MarkW's avatar
        MarkW
        Community Member
        5 years ago
        Hi Katelin. Here's what I did: I have a trigger set up to show the blinking layer when the timeline hits 4.5 seconds. On that layer I have another copy of the regular grey forward arrow icon and a red copy that fades in and out (I removed the hover state for both to ensure that blinking happened even if they left the cursor there). I then added a trigger to jump to the start of this blinking layer when the timeline of the layer ends.