Creating a Switch/Toggle button – Motion Paths vs. Object States

motion-vs-state

This week I was working on Articulate community e-learning challenge #97: Toggle, Switch, and Slide Your Way to More Creative E-Learning Buttons. I contemplated various ideas and built a quick prototype. I was pretty happy with it and moved on to the design of the interaction. Building a toggle button/switch is a game of ‘states’. You’ve got an on state and an off state. Pretty simple right. All you have to do is choose what you want for your overall look and feel so I googled for ‘switch button design’ and was presented with a ton of possibilities. Some very trendy, some very cool, some rather boring. I did a similar search on Pinterest.

switch
Plenty of design options when creating a switch/toggle button.

To be thorough I even added ‘CSS’ to my search which added in a couple of nice animated buttons (example1 | example2| example3) and that set me to created animated switch buttons.

The first thing I did was rebuild Kevin Thorn’s example. It has a sweet, smooth motion path sliding the button back and forth. It’s a real beauty. It took me about 10 minutes to setup, test if I added all the triggers and conditions correctly and to see if the motion paths are properly aligned and basically do what I expect them to do. As usual I had to do a little tweaking with the order of the triggers to make sure the up and down movement was working properly but after 15 minutes I had myself a schwéééét animated switch button. I started to create a second button and started to copy and adapt it, making sure the new variables, motion paths etc were set-up correctly. Once testing it I noticed I missed something (again) and fixed it. I was quickly getting annoyed with all this tweaking. I was spending a lot of time with just a couple of @#$%^&! buttons.

I started thinking about time spent and effectiveness and the added value of the animation on the button. I thought, how long would it take me to build a regular button with a ‘normal’ state and a default ‘selected’ state. 2 minutes later I had an identical, yet non-animated, button. It worked perfectly, it required no variables or triggers to change states and and play various entrance and exit animations. It just worked. Making a copy was even quicker as I didn’t have to make any changes to any triggers, variables, motion paths and conditions. And the end result looked pretty good.

So, what to do? Should I go with the animated switch buttons or should I go with the effective ‘default’ button? Let’s put them together and decide…

 

Powered by elearningfreak.com

So there you have it.

It’s a bit like comparing a Ferrari with a Volkswagen. The animated button is a thing of beauty. When looking at them together I instinctively know I want it. The default button is just so… default. However… although the animated button is awesome it is, like a Ferrari, a costly thing. It takes more time to build, test and work to get it going as well as doing maintenance to it, then it does to create 20 regular buttons that are still pretty nice and get the job done. Is the additional time spend really adding value to your project?

So what would you do? Would you spend the time or save the dime? Would your client and users love you or hate you for your choice?

Love to hear your thoughts in the comments below!

 

Published by

Jeff Kortenbosch

Jeff is a performance-focused learning professional that believes in making learning relevant again!

4 thoughts on “Creating a Switch/Toggle button – Motion Paths vs. Object States”

  1. I love this – it’s a great example of what you can do with Storyline. But project constraints are always a consideration. I think it would come down to what the button is for. If you have, as in this example, an iPhone button that is going to be seen by millions, then it probably is worth the time. If you need 100 buttons in your course, as part of compliance training for a team of 200 people, it probably isn’t.

  2. Love this post Jeff. The constant challenge – trying to do great work, work that pushes the boundaries while also aiming to have our weekends off!

  3. Motion path is prettier but I think the state is more user friendly. The animated version doesn’t work if you click and drag or click outside the circular toggle. The state toggle works if you click and drag and wherever you click. A third option could be a very short slider. Would that work?

Leave a Reply