Moving Beyond E-Learning's Next Button #462

David Anderson
By David Anderson

Moving Beyond the “Next” Button #462

Beyond the E-Learning Next Button #462: Challenge | Recap

 

The “Next” button often gets a bad rap in e-learning. It’s commonly associated with linear, information-heavy courses that promote passive learning, leading learners to click through screens without truly engaging with the content.

To be fair, the blame doesn’t lie with the Next button itself. Blaming the Next button for boring e-learning is like blaming the Play button for a boring video.

For course designers, a good design exercise is to reimagine course navigation without relying on the ubiquitous next button.

How would your learners navigate forward and backward? Can you integrate the course content into the navigation? Can interactive objects like sliders, dials, or text-entry fields be used in place of next and back buttons?

🏆 Challenge of the Week

This week, your challenge is to show alternatives to using the next button.

You can create something new or rework an existing project.

Please include the original with your entry if you modify an existing project. Seeing both examples will help users connect the dots between where you started and where you finished.

And if you have time, create multiple variations to show how clicks, slides, hovers, drags, and typing can advance learners through the course.

🧰 Resources

Check out e-learning challenge #144’s examples to get an idea of what designers came up with in a related challenge.

✨ 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 slide into this week’s challenge, check out the audio interviews your fellow challengers recorded in last week’s challenge:

9 Interactive Audio Interviews with E-Learning Challenge Heroes #461

Interviews with E-Learning Challengers RECAP #461: 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 weekly e-learning challenges in this Q&A post.

📆 Upcoming Challenges

  • Challenge #463 (05.24): Using progressive disclosure in e-learning. 
  • 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.

Related Content

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

David Anderson
David Anderson

Audio Interviews with E-Learning Challenge Heroes #461

David Anderson
David Anderson

How Are Designers Using Toggle Buttons in E-Learning? #460

David Anderson
David Anderson
94 Comments
Jonathan Hill
15 days ago05/18/24 at 6:31 pm (UTC)
Hello! There's more than one way to 'click next'. But hover states don't work on mobile devices and drag and drop isn’t always accessible. This demo attempts to address these challenges by providing device-specific interactions. For instance, the hover interaction is replaced with a press and hold interaction if the demo is running on a phone. The drag and drop is in reality an invisible slider, which makes the interaction accessible from a keyboard but also provides a tactile control on a touchscreen. Try it out on your desktop and your phone and let me know what you think! HOVER CLICK DRAG https://bit.ly/elhc462
Jonathan Hill
12 days ago05/21/24 at 5:53 pm (UTC)
Thanks Jodi. It does look a little like a snowboard, but I'm actually riffing on the hoverboard from Back To The Future 2 😄 Ollie and Nollie are skateboard moves. I studied a bunch of videos to mimic the motion. I guess this might also qualify for the 'rotate a 3D object challenge'? I'm off to google whether you can Ollie and Nollie on a snowboard now...
Thaddaeus Smith
15 days ago05/18/24 at 6:32 pm (UTC)
Well, I was thinking this challenge was going to be about click, hover, drag. So, I created this sample that even uses the Next button. 😂 But, it does still showcase how you can access different information on one slide without clicking next. I will be leaving on vacation tomorrow and will be gone for two weeks. This interaction is inspired by my destination! https://360.articulate.com/review/content/9ca36482-6fa3-44ed-9dfc-66d7d977da91/review
David Anderson
15 days ago05/18/24 at 6:42 pm (UTC)
You're on target, Thaddaeus. Interactive markers and non-linear click navigation are precisely what this week's challenge is going for. Thanks for showing the same interaction reworked in multiple ways. For someone like you with experience building e-learning, this is a simple exercise. But I find it's beneficial for new users to help them see how the same content can be reworked in multiple ways. Thanks for the great share. Have a great vacation.
Jodi M. Sansone
14 days ago05/19/24 at 6:16 pm (UTC)
This is awesome. I really liked how you showed the three different ways to present this content. When I did my training on Storyline back in 2016 (with the amazing Ron Price from Yukon Learning) one of the first things he said was that no matter what you want to do in Storyline, there are 10 ways to do it. You really showed that. And I'm embarrassed that I thought Santorini was in Italy all this time. :)
Jeffrey Riley
14 days ago05/18/24 at 8:05 pm (UTC)
This is a very simple idea for this challenge. I did use a slider to start the interaction, but as Jonathan says, that is not an accessible action nor is it good for mobile devices. What I did that fits is the last slide would use characters as a link for participants to access scenarios. I also use the Visited state to have the character turn around to show the participants they completed that scenario. Not fancy but I hope people get something from this. https://360.articulate.com/review/content/65cd4e2b-96f9-4e00-964b-3f9869b38bd1/review
Jonathan Hill
14 days ago05/18/24 at 9:15 pm (UTC)
Sliders are cool Jeffrey. You can make them just as easy to use on a mobile device as a desktop, by making the slider thumb as big as possible. They can be a reliable alternative to drag and drop, with the added benefit of being accessible from the keyboard. I'd consider placing your icon in a transparent shape to increase its grabbable area, and then embedding it in the slider thumb. Maybe add more steps to the track, to make the motion smoother too?
Jodi M. Sansone
14 days ago05/18/24 at 8:43 pm (UTC)
Bold & Beautiful Art Movements 1900 to Today Demo: https://jodisdemos.s3.amazonaws.com/462+Art+Movements/story.html Download: https://jodisdemos.s3.amazonaws.com/462+Hover%2C+Drag%2C+Click.story How about 10 next buttons on one slide? When you study art history it is often taught linearly because it's hard to disconnect the art from what is happening in the culture or politics of the time. In this demo I turned the next buttons into objects/labels you can drag (or alternatively click if dragging is hard for you, like it is for me). You can explore 10 different major art movements/styles in any order you like (and see the art hung in a gallery). I can think of a bunch of other ways to do this demo, but since it was about next buttons I over-used them.
Thierry EMMANUEL
14 days ago05/19/24 at 8:24 am (UTC)

Bonjour Heroes. No "next button" in this demo, but a question on each slide to reinforce the main information (one slide = one idea) before moving on to the next. A sort of nextcha. Quizzes can be of any type, the important thing being to think about the information (for better memorization). Demo topic: I was very enthusiastic about presenting this topic this week 'cause I first met it 20 years ago, and recently met it again last week. I'm still excited, but it's a little less surprising after Jodi's nice demo (again! :-) ). However, it took me a long time to choose and put together the illustrations, in an unconventional way because it resembles the subject matter. I hope you'll discover this subject, or delve deeper if you know nothing about it. I really do. https://360.articula... Expand

Thierry EMMANUEL
11 days ago05/22/24 at 4:26 pm (UTC)
It's a good idea, Ron, and I've already looked at these 2 options. But I've arranged this slide show on the slide mask so that it's available on every half of every slide afterwards. And the illustrations are all different "states" of a first table, dispensed randomly. These 2 choices prevent me a priori from adding a "zoom" to the images. Of course, I could do it in "10 other ways" to have them full screen. But I appreciate that you were curious and interested enough to want to take a closer look.
Lee Rhyne
14 days ago05/19/24 at 10:13 am (UTC)
Hi all, here is my submission. I'm a developing ID so, feedback is most welcome. I tried not to spend too much time on the entry (a couple of hours max) to practice working to a tight deadline. I disabled all navigation in the player and added what I think is intuitive navigation however, I may be wrong. https://360.articulate.com/review/content/9bd54ebf-1c18-4327-9d83-1aeae25d9abc/review Thank you.
Ron Katz
14 days ago05/19/24 at 12:46 pm (UTC)
For this week's challenge I brought back a character/theme from an earlier challenge - "The Red Ked TIme Machine". See below. This episode takes place 37 years after the first one. If you want to know why/how, try and play your way through the first one. Here is the interaction for this week's challenge which was to focus on creating an interaction with no NEXT buttons. https://360.articulate.com/review/content/f837254e-e9ac-43b4-81bd-a392220884bf/review Download: Available in Comments/Feedback of Review 360 Discussion: https://community.articulate.com/discussions/building-better-courses/time-machine-revised-elc-462 "The Red Ked Time Machine" ( https://360.articulate.com/review/content/5237a765-d5f6-4881-bc30-c229dbc989a0/review )
Thierry EMMANUEL
10 days ago05/23/24 at 6:13 am (UTC)
If you need it for a future demo, Samuel, you can add to your collection the French expression "La vache!" to say Wow! I really like the intuitive or deductive way of finding the no next button. But, in my experience, I don't think I can offer it to my customers (except in an escape game like Ron's) because my customers are always afraid that the learners will get stuck/lost and always ask me to be directive and explanatory. It's a shame. But it does make you think about what it could be.
Chris Hodgson
13 days ago05/20/24 at 10:43 am (UTC)
Hello Heroes, I'm trying something a bit experimental for this week's challenge so we'll see how it goes! https://discoverelearninguk.com/projects/voice-activated-navigation-demo-for-articulate-storyline-360/ The idea with this demo is that it's a completely 'hands-free' next slide navigation experience using the current capabilities of generative AI. What's different about it is the AI voice recognition model should interpret what you are saying, so you don't have to strictly say the words "Next Slide" each time, you could instead try e.g. "I'm ready to move forward now thanks", and it should trigger the next slide action. Let me know how it works for you!
Maren West
13 days ago05/20/24 at 2:55 pm (UTC)
No submission for this week's challenge but a question for the group. The use of next buttons is a topic my team has been discussing lately. We would like to be a little bit more creative but we keep coming back to accessibility, namely that advancing slides automatically is not super accessible. I'm interested to learn what work arounds you all have for this, how you maintain accessibility without relying on next buttons.
Ron Katz
11 days ago05/22/24 at 12:30 pm (UTC)
This looks good and plays well. My only suggestions are to change the state of the answers to question 2 to hidden until question 1 is answered and the state of question 3 to hidden until question 2 is answered. This will free up some space and make it a bit more clear. You could also have two messages for your "try again" (as states). One could be "try again" the other could simply be "replay?"
eLearn Dev
12 days ago05/21/24 at 11:31 am (UTC)
For this week's Articulate challenge, created "Wonders of the World," an e-learning course without the traditional Next button. Each question explores world wonders using: - Interactive Maps: Click to explore. - Hotspots: Interact with highlighted areas to unlock content. Discover how we've reimagined navigation for a more engaging learning experience! https://www.swiftelearningservices.com/articulate-challenge-462/
Andreas Paul
11 days ago05/22/24 at 5:52 am (UTC)
Having spent almost 8 years in China, I guess the culture kind of sticks with you 😄. So, I’m channeling that experience into my latest project: a digital culture training course with a twist, powered by AI! 💡✨ In the final product, users can choose their adventure. They can either go with the trusty "click next" button or embark on a mini quest to find the information they need to unlock the next scene. It’s like gamifying learning, and it’s super fun! Check out this short intro and share your thoughts 🌏🎓 https://360.articulate.com/review/content/d9474d9f-4b17-470f-affa-c89782e5e6a9/review
Andreas Paul
10 days ago05/23/24 at 5:29 am (UTC)
Hey Thierry, thanks for your comment. This is just a small section of the project but you can get to the next room by finding 5 of the clickable items. On the fifth just click anywhere on the screen, then you`ll receive a badge which you can flip and then you automatically land on the next slide. I might not work for everyone, thats why I am working on offering both methods in the final project: "click next" and a more immersive approach.
Sean Wright
11 days ago05/22/24 at 11:41 am (UTC)
Exploring Systemic Blood Flow: From Standing Still to Running https://idd.erau.edu/MSHF_640/story.html This interactive tool is a part of the Human Physiology and Adaptation course, designed to illustrate the changes in systemic blood flow across different physical states - standing still, walking, and running. Users can navigate through the tool using arrow keys or by clicking on an icon to access detailed information. Additional insights into the respiratory and circulatory systems are also provided. To enhance user experience, a home/back button is incorporated for seamless navigation. Enjoy exploring! 😊
Thierry EMMANUEL
10 days ago05/23/24 at 6:03 am (UTC)
Great idea, beautiful graphics, sounds, animations, well done, Rebecca. The idea came to me over breakfast (true). If you first use the cursor in the center position, you can slide to the right (to the octopus, the next slide, the next scene or part of the adventure) OR to the left (to the jellyfish, the previous slide or another part of the adventure) and so on. No "next" button is used in the branching course. What do you thik about this ? (I'm certainly not the first to come up with this idea...)
Jayashree Ravi
10 days ago05/23/24 at 10:11 am (UTC)
This entry presents a historical timeline of key events in the history of medicine through two methods: hover interactions and a slider. The dual approach allows exploration of content by hovering over icons for quick information or using a slider for a chronological journey. This entry exemplifies a dynamic way to move beyond the traditional "Next" button in eLearning design. Entry - https://360.articulate.com/review/content/a9093df5-3cc9-4e35-88eb-6b71cf93b19f/review
Kate Golomshtok
10 days ago05/23/24 at 3:46 pm (UTC)
Hey, everybody! Thank you for such a creative challenge. I decided to replace the "next" and "previous" buttons with a slider. You can see an example here. https://360.articulate.com/review/content/1fd39205-f60e-4cd0-9046-06db6e164de5/review I took example 421 as a basis for the challenge. This is the version before edits. https://360.articulate.com/review/content/6eb5278e-daa1-4ce3-a67c-6da2a1007527/review. In the theme of the challenge I remembered another example I did. This one uses dial mechanics. https://360.articulate.com/review/content/f04cd0a0-6200-4858-8598-37ea17c13db6/review
Sneha Sivaprakash
9 days ago05/24/24 at 1:34 pm (UTC)
For this entry I designed an engaging and interactive learning game designed to teach young children alphabets in a fun and memorable way : Buzzing for ABCs. I was inspired by my child’s fascination with bees and have incorporated interactions such as clicking, hovering, drag-and-drop and motion paths to steer away from the traditional next button. Keep sound on for the best experience. https://storage.googleapis.com/snehaselearningprojects/ELH%20462%20Buzzing%20for%20ABCs/story.html
Stephen Taylor
4 days ago05/29/24 at 12:34 pm (UTC)
Hello everyone. Here is a very simple design where I have replaced the next button with a dial designed to replicate one of the controls on the back of a camera to explain some key aspects of photography. It's still technically a next button but I thinks it fits in better with the subject matter. I have also allowed it to be exploratory - learners can click backwards and forwards. It is a very basic piece of content but I hope it illustrates an alternative to the traditional next button. https://360.articulate.com/review/content/96c50e86-f591-41a3-a8ae-324976fe11f7/review
Sean Wright
4 days ago05/29/24 at 1:52 pm (UTC)
Nice, Stephen! Like the photography/camera operation content. 📸 This does fit well with the subject matter. Would be nice to add notches on the dial so the learner knows where to turn. I also suggest adding more instructional text about turning the dial on the aperture, shutter speed, and ISO pages (like you have on the landing page/slide!).
Sign In to Comment