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
6 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 6 years ago
Version 1.0

151 Comments

    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      Hey Nancy, was looking forward to seeing what you came up with and you haven't disappointed.

      I like the polished 'magazine' look, although i got stuck on a couple of pages and had to refresh the demo to get out. It may be as I am viewing it on my phone, so I will take another look tomorrow on my computer.
      • NancyWoinoski's avatar
        NancyWoinoski
        Super Hero
        Did not test on my phone. I will check it out to see if I get stuck. The nav is supposed to pop-up when you hover over bottom of the slide but hover does not work well on mobile.
    • FarahAzadeh-1d8's avatar
      FarahAzadeh-1d8
      Community Member
      Nice! I like the footer floating up when I hover over the triangle. It saves screen space too (which I love). 😀
      • NancyWoinoski's avatar
        NancyWoinoski
        Super Hero
        Thanks Farah, I usually create custom nav but often struggle with were to put the buttons because they do steal screen space. One downside to the floating footer is that it takes an extra hover action to move to the next screen.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      Yes, that's much smoother on desktop! Very slick. Do you think there's a way to make this work on mobile devices? When I've tucked menu bars off screen like this in past, I've left a small actionable tab visible that can be clicked on, rather than hovered over.

      Only 15% of users on my LMS access my courses on a mobile device, but that's up from 9% two years ago, so it's a growing area. What you've done here is absolutely perfect for utilising space on smaller screens.
      • NancyWoinoski's avatar
        NancyWoinoski
        Super Hero
        Hi Jonathan, I just tried it on my iPhone and the hover does work so that is good news. The issue with this one is that the bottom of the course is cut off when viewing on the phone so you don't actually see the hover area.

        My understanding is that the modern player is supposed to scale to fit whatever browser you are using but it does not seem to work very well on the phone and does not account for the browser bar at the top.

        I originally designed this example in Storyline 2 so it was using the traditional player and the story size was something like 1024 by 576. I switched to the modern player for this iteration but did not do anything else.

        If you start a project using the modern player and design using a story size that will scale better when viewed on a phone, this solution should work.
    • FarahAzadeh-1d8's avatar
      FarahAzadeh-1d8
      Community Member
      Great job! I love the comic book feel and of course, the blinking arrows letting me know it's time to click NEXT.
    • CarrieGauthier-'s avatar
      CarrieGauthier-
      Community Member
      I love the artwork! I like that the next buttons fit in the with aesthetic of the course as well.
  • 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.
  • 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.
    • 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.