Toggle, Switch, and Slide Your Way to More Creative E-Learning 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.
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.
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.
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.
View the Adventure time feeling toggle
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!
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!
View the animated toggle button | Download the source
Last Week’s Challenge
Before you switch into this week’s challenge, check out the examples shared in last week’s Anniversary Challenge 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.
208 Comments
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