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

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!

Animated Toggle Button by Kevin Thorn

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:

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.

208 Comments
Paul Alders
Tracy Carroll
Jeff Kortenbosch
Anne Seller
Kevin Thorn