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.
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.
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
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.
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.
79 comments
[ 4.8 ms ] story [ 154 ms ] threadOne minor annoyance is toggles is meant to respond instantly, and when I click it just accelerates tad slow as to make you think it's a bit lagged.
Looks very cool, though.
to read eg var toggleTl = new TimelineMax({paused:true}).timeScale(5);
instead. (I'm not the author, just fiddling)
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.
(*) Yes, I'd like to receive further emails about louis C. K. things.
( ) No, leave me alone forever you fat bastard.
[1] https://www.youtube.com/watch?v=V3LJ9n43M-4 [2] http://www.mobygames.com/images/shots/l/112433-chuzzle-delux...
* Yes, I want to be a better person!
* No, I don't want to be a better person and am content to live a life of misery without this service.
[1] http://www.imdb.com/title/tt5497778/
http://confirmshaming.tumblr.com/
You did the same thing.
Nothing wrong with being objective.
All of the widget is actionable yet the cursor is not always pointy.
It's one of my pet peeves.
That being said, the animation is beautifully done and the widget very cute. This is just eye-candy.
In "native apps" on desktops, all buttons look the same, so users know they're clickable because they've already learned it.
On the web however, every page looks different, so it is helpful to show the users you can click things by using the "hand" cursor.
Edit: only the second blink is funky. The first is how you recall.
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?
mousedown++ but also touch events
Because it’s large and I want to see it wiggle? :D
I just wonder how long it's gonna last.
I'm not the most familiar with codepen so I apologise if it's on there somewhere already.
Public pens are MIT licensed.
[0] http://codepen.io/chrisgannon/details/WpjXVr
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.
Judging by the fact you said you won't use it, you seem to have a working moral compass - unfortunately you are a minority.
Btw this is a joke, but how far from reality is it? In Japan there is definitely a cute UI. I could even say that the Nintendo Switch UI is a cute UI.
Also if you use Atom you should install this package: https://atom.io/packages/svg-preview
Overall it's quite simple especially if you have experience with HTML and Canvas. Much easier for me than Inkspace.
And this isn't limited to web technologies and browsers.
I think it's fine for design to explore visual representations of an input but the HTML should try to stay clean.
What is the behaviour? Should I click the switch? Where do I click it: where it is or where I want it to go? Or should I drag it?
And usually only one of those actions work and I seem to always miss toggling it on the first try.