How to Alert Users to Click the Next Button in E-Learning #293

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

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.

150 Comments
Jonathan Hill
Jonathan Hill
Jonathan Hill
Kimberly Eng

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... Expand

Jonathan Hill
Nancy Woinoski
Jonathan Hill
Nancy Woinoski
Veronica Budnikas
Phil Mayor

I would agree with Nancy here I don't like calling out the big red Next button ever. You have already lost the battle if your design is not intuitive and fails to follow web standards. I once told a client who asked me to do it: "Your staff have navigated the awful UI of your LMS to load the course I developed for you. If they cannot use a simple forward and back button they shouldn't be set loose on the internet". I have started and stopped three entries for this challenge because of these reasons. I would call out no standard navigation in a nudging fashion, my normal approach is if something comes out during review as they don't know what to do next then I need to look better at the UI/UX rather than call it out. A next button is really just a big call to action and shou... Expand

David Anderson
Mark Weingarten
Farah Azadeh
Jodi Sansone
Andrzej Jabłoński
Dominik R
Carrie Gauthier

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 ... Expand

Nancy Woinoski
Jonathan Hill
Nancy Woinoski

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 solutio... Expand

Jonathan Hill
Jonathan Hill
Nancy Woinoski
Dominik R
Dominik R