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.
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…
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!