Blog Post

E-Learning Challenges
2 MIN READ

Moving Beyond E-Learning's Next Button #462

DavidAnderson's avatar
6 months ago

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:

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.

Published 6 months ago
Version 1.0
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      The overall look and feel was good. The drag and drop interaction worked well at the end. My only concern was the white text on the tan background. Consider changing that one to black text for improved readability.
    • Fabienne_Werder's avatar
      Fabienne_Werder
      Community Member
      I also loved the way the buttons to the next ADDIE step appeared on the slide, well done!
      You could consider resetting the state of your drag&drop slide every time the learner clicks on "RETRY", or maybe even add hints after the learner tried it one or several times.
      The design is very clean and nice :)
    • RohitSaxena's avatar
      RohitSaxena
      Community Member
      Wow. Loved the clean and very asthetically designed interface.
  • 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.articulate.com/review/content/f5677f27-410e-4cf5-8274-abb2411737be/review
    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member
      I really like how the quiz is integrated this way Thierry. Would love to see how you organized it all under the hood.
      • ThierryEMMANUEL's avatar
        ThierryEMMANUEL
        Community Member
        Thank you Cyd, and apologies for the late reply. I no longer receive notifications of messages from members of this community left here. So, if I don't accidentally revisit this week, I can't tell if people are asking me anything. The .story file is now attached in the review comment. Have a nice day
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      Great work, Thierry. I like the integration of the knowledge check to advance the history/description of the art form.

      I would have liked to have the option to view the slideshow in full screen or to be able to click on the currently displayed art and zoom to view closer.
      • ThierryEMMANUEL's avatar
        ThierryEMMANUEL
        Community Member
        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.
    • Fabienne_Werder's avatar
      Fabienne_Werder
      Community Member
      Wow, I am impressed!! What I like most about this course are the tabs with the questions that appear some seconds after you have started reading. It makes it so much more interactive and engaging if these tabs are not yet there from the beginning on. Very nice!
  • Hello Jodi. I tried this several times on my phone and it was working very well. All clickable buttons worked correctly as well as the dragging and dropping.

    Very nice and beautiful sample!
  • JodiSansone's avatar
    JodiSansone
    Community Member
    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.
    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member
      I always love your short courses on art Jodi, a more engaging way to learn about art history versus the classroom lecture.
    • wrighs27's avatar
      wrighs27
      Community Member
      This is neat, Jodi! 🧑‍🎨

      Would be cool to add a map of the gallery so a learner could go back to view something in addition to the restart at the end.
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      I like the two options of selecting or dragging and dropping. The variety of styles and the selection of samples was cool. I like how the gallery options featured varying numbers of "viewers"
  • 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
    • TeresaSandragor's avatar
      TeresaSandragor
      Community Member
      Hi Jeffrey! I love this idea and would love to know how you connected the image to the function of the slider, and hid the slider?

      Many thanks!
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      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?
    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member
      I enjoyed seeing the 3 different methods; it expands the mind to think of possibility! Hope your vacation is full of possibility as well Thaddaeus!
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      As per our conversation over on LinkedIn, this is a cool exploration of how different interactions can be used for the same content. It wouldn't take much to build these in as fallbacks to a primary method, or show a particular interaction based on the device it's being viewed on.

      Great work!
    • JodiSansone's avatar
      JodiSansone
      Community Member
      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. :)
  • 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
    • JoanneChen's avatar
      JoanneChen
      Super Hero
      This is an awesome demo! I'm currently working on a Rise project, so your JavaScript code is perfect for detecting mobile users. This way, I can have different instructions for SL blocks since they work differently in desktop and mobiles. Thanks!!!
  • Looking forward to this week's challenge. Some of my favorite examples were from a related challenge (#144) 7+ years ago.