Toggle, Switch, and Slide Your Way to More Creative Buttons #97

Toggle, Switch, and Slider Buttons #97: Challenge | Recap

Toggle buttons and switches are not usually the first thing course designers tackle when considering ways to design better courses. I get that. But those simple, On/Off button states are a fantastic opportunity to personalize and engage learners. And that’s what this week’s challenge is all about!

Examples of Toggle Buttons and Switches

To help switch your creative juices to the ON position, I’ve rounded up some inspirational examples of toggles and switches.

Language toggle buttons

More than ever, today's e-learning is being designed for global audiences. Often that includes translating on-screen text and audio narration. Rather than use text-based radio buttons to ask learners which language they prefer, give them something visual and meaningful.

Examples of Toggle Buttons and Switches

View the languages toggle button

Day-Night toggle buttons

Here's a terrific concept for controlling course appearance. Using Day/Night toggle buttons, you can visually communicate that your course offers learners a choice between different moods.

Day-Night Toggle Button

View the day/night toggle button | Animated version

Rock Toggle

Creative take on the yes/no toggle button. Icon variations could include thumbs up/thumbs down, stop/go, and happy/sad buttons.

Rock Toggle Switch Buttons

View the Rock Toggle button

Adventure time feeling toggle buttons

Okay, this example is a little out there, right? But it’s not a far stretch to see how avatar toggles could be used to gauge learner sentiment or to allow learners to choose their course avatar.

Adventure time feeling switch toggle button

View the Adventure time feeling toggle

Adventure time feeling toggle switch button

View the Like toggle button

Animated toggle button by Kevin Thorn

For those looking to take their toggles up to eleven, check out Kevin Thorn’s animated toggle button. Using Storyline 2’s motion paths, this is one wicked toggle button!

Animated Toggle Button by Kevin Thorn

View the animated toggle button | Download the source

Challenge of the Week

This week, your challenge is to show one or more creative ways to use toggle buttons and switches in e-learning.

If you’re using Articulate Studio, PowerPoint, or another tool that doesn’t let you build working toggle buttons, try mocking up some design ideas to show both states of your toggle button idea. The challenges are all about ideas!

Last Week’s Challenge

Before you switch into this week’s challenge, check out the examples shared in last week’s Anniversary Challenge Recap:

2 Years of E-Learning Challenges

2 Years of E-Learning Challenges RecapChallenge | Recap


Wishing you a switchtastic week, E-Learning Heroes!

New to E-Learning Challenges?

The weekly 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.

David Anderson
Simon Wood

Hi Everyone, Wow! A lot of comments. Thanks for the feedback everyone. Let me answer questions: 1. The video/character is an FLV (with transparent background) from eLearning Brothers. They have a stack of video characters! 2. Yes - I need to work on the puzzle element of the course. You're meant to notice that the bulb takes time to cool down! Therefore, solution is: a) Turn one switch on. b) Leave one switch off. c) Turn one switch on, then back off (and immediately enter the room - you'll see it cool down). *Using these three states you can identify which switches are for which bulbs with only one attempt. So my next improvements to the course will be: 1) Randomise the switch/bulb order, so it can't be figured out by repeating the course / trial & err... Expand

Joanna Kurpiewska
Phil Mayor
David Anderson
Veronica Budnikas
Andrew Crotty
Lawrence van den Hoeven