I wonder how using such a toggle could change the user behavior. I had a bit of a hard time turning the face into a sad face. I really liked it much better at green. It would be easier to convince me to pay money with this toggle.
Then again, I'm a sucker for happy faces and cute things, so maybe I'm just weak to this kind of thing.
This reminds me of Chuzzle[1], a cute puzzle game by PopCap (makers of Zuma, Pebble, Plants vs Zombies etc) that, when you tried to quit the game, it'd show you one of the furry creatures with googly eyes, asking you if you really wanted to quit[2]. I thought it was a nice touch at the time (maybe 10 years ago).
Five years? It's already happening. There's a large number of "shaming" dark patterns out there already. "No, I don't wish to save money.", as an example.
Click delay is bad UI. When you click it, the face first blinks, then moves. So it appears to not be working. Would be better to move first, then blink upon completion.
Nice! Though it looks like in your version the blink is happening from top-to-bottom as opposed to collapsing in the middle. I like the blink after the toggle, but the actual blink animation in the original in preferable imo.
You should, working with SVG is interesting. It makes you think differently in how to handle UI design. I wish it were better supported across the board in browsers, it would help solve a great deal of UI issues.
It really kind of depends on what you want to do with the SVGs. They can cover topics such as icons, animations, UI, charts, reports, and so on. Just about anything you can imagine using a vector image instead of a raster applies. Many javascript libraries already exist to cover many of the usual situations. You can look into those and play with them to figure out where your interests lie.
And this isn't limited to web technologies and browsers.
I started learning SVG going through all the jenkov examples - really great resource. The SVGs I create now are designed to be easy to understand because I wanted to pay it forward. Have a pick through my other pens and maybe my channel http://YouTube.com/+framespark
This should really be an <input type="checkbox"> with bonus CSS/JS so that it's backward compatible and doesn't break the world of accessibility, tabs, focus, forms, etc.
I think it's fine for design to explore visual representations of an input but the HTML should try to stay clean.
what is a "slider toggle"? sliders should be used for ranges of values. checkbox for toggling values.
we could argue it's unfortunate that iOS(?) decided to start making their "checkboxes" look a little like sliders, but they still only toggle values thus you don't slide them.
in any case, i get where you're coming from. using mousedown instead of click or up maybe kind of solves both use cases?
"Checkboxes" that look like little sliders usually are good UI because they avoid this confusion, "is the control showing me the current state or the option to change to the desired state?" For whatever reason, toggle switches like this better convey that they're displaying the current state before you touch them.
The slide is so big on this one that it looks like multiple targets. The iOS ones are small enough that the only useful interaction is to mash with fingertip.
Well as another here has pointed out this is licensed under the MIT license on codepen and explicitly for this at [0] then click "license" below the pen
I'm just saying as the original designer/artist I don't give permission, regardless of the MIT license (which I disagree with on CodePen but that's another story).
I get that from a "ethics" standpoint (and I won't be using it in our project like I wanted), but legally you are giving permission for anyone to use the software in any way they see fit within the MIT license.
It doesn't matter what you say here, the license is kind of final for the code it's referencing.
IIRC CodePen does allow you to license your code differently, but it requires a "pro" account.
I am a Pro and to legally avoid this I could create pens that are private but then nobody would learn anything from them and I wouldn't get them featured anywhere. So people can use them as long as they include a license which, let me assure you from bitter experience, nobody ever does.
Judging by the fact you said you won't use it, you seem to have a working moral compass - unfortunately you are a minority.
Really cool. Changing the timeScale value on JS line 33 to 1 slows everything down and makes the animation a little easier to see if you're interested in seeing how the effect works.
I wonder how using such a toggle could change the user behavior. I had a bit of a hard time turning the face into a sad face. I really liked it much better at green. It would be easier to convince me to pay money with this toggle.
Then again, I'm a sucker for happy faces and cute things, so maybe I'm just weak to this kind of thing.