Slide, Drag, and Hover Past Boring Next Buttons #144

Moving Past the Next Button #144: Challenge | Recap

Engage your learners by designing interactions that move beyond the boring “Next” button and motivate learners to touch the screen!

  • Next buttons are the gatekeeper to course content
  • Find ways to get learners to stop clicking and start touching the screen
  • How can the content be transformed to be part of the navigation?
  • Combine next buttons with progressive reveals to create stories

How to Practice E-Learning and Make Next Buttons Feel Less Like Next Buttons 

If you want to get good at e-learning, you need to practice e-learning. And by practice, I mean deliberate, repetitive practice that pushes you try things you normally wouldn’t in your daily work. 

A simple way you can practice interaction design is to take a typical click-Next course and rebuild it multiple times using different techniques for the button navigation.

Here are three interactions that were each built using a click, hover, and drag approach.

Click | Hover | Drag Click | Hover | Drag Click | Hover | Drag

 

Using different navigational elements for the same interaction forces you to see new ways to tackle interaction problems. It’s a lot like we do in the weekly challenges.

The Next-less Button 

Dave Charney recently shared a series of examples that let learners navigate through the course by completing specific tasks.

This is a fantastic way to build the navigation into the on-slide activities. You can learn more about Dave’s project and how he built it in this YouTube video.

The Next-less Button

Click here to view the nextless button example

NEXTCHA: Ask Learners to Prove They’re Learning

How many times do learners click the Next button in your courses? Did you know each of those button clicks is an opportunity for reinforcing the learning content?

Instead of letting learners blaze through your slides, ask them a question to prove they’re paying attention ... to prove they’re learning.

Based on the CAPTCHA model that asks website viewers to prove they’re human before viewing a webpage, NEXTCHA asks learners to correctly answer a question before moving through the course. You can learn more about NEXTCHA and share your own examples in this e-learning challenge.

Pre-roll NEXTCHA Post-roll NEXTCHA
Pre-roll NEXTCHA Post-roll NEXTCHA

Challenge of the Week 

This week, your challenge is to share an example that allows users to navigate without clicking a typical Next button.

If you make over an existing project, please include the original with your entry. Seeing both examples will help users connect the dots between where you started and where you finished.

You’re welcome to use any interaction you want for this week’s challenge. Take an existing project you’ve built, grab a free template from our downloads, or create something from scratch. Just get rid of the Next button!

Last Week’s Challenge:

Before you navigate to this week’s challenge, check out the rocking band sites your fellow community members shared in last week’s challenge:

E-Learning Röck Band

E-Learning Röck Band RECAP #143: Challenge | Recap 

Have a next-tacular week, E-learning Heroes!

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.

149 Comments
David Anderson
David Anderson
David Anderson
Magic Johnson
David Anderson
Nick Russell
Tracy Carroll
Richard Hill
Michael Hinze
Ashley Chiasson
David Charney
Dan Graham
David Charney
Jaipreet singh
Dan Graham
Andy Locke

Hello folks! I've noticed lots of really cool, innovative uses of the slider for this challenge, so for my attempt, I decided to go a different route. One can navigate through this short, three-slide demo (technically 6 slides, but I'll explain that in a second) just by hovering over the top or the bottom of the slide. You can check it out here: http://andylocke.net/sites/default/files/nextLessDemo/story.html I can't freely distribute content I develop for work, so for this example I just used the same raw material that I always use for demos: Dungeons & Dragons. And since the focus of this exercise was the navigation, I didn't put much thought into the graphic design, nor even try to teach a complete lesson -- I just wanted to see if I could prove the concept. As for the "technicall... Expand

Carl Boyd
Niels Rop
Dianne Hope
Richard Hill
Dianne Hope
Kartik Tyagi
David Anderson
Carl Boyd
Manta Kripotos