Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis | Hacker News Reader

JS toggle switch with happy and sad emojis

codepen.io

202 pointschrisgannon76 comments

That's adorable.

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.

I already see it happening. In 5 years emotional-manipulation-driven design is going to be the next hot thing.

When you buy a recording of one of Louis C.K.'s shows from his website, you are given the choice

(*) Yes, I'd like to receive further emails about louis C. K. things.

( ) No, leave me alone forever you fat bastard.

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).

[1] https://www.youtube.com/watch?v=V3LJ9n43M-4 [2] http://www.mobygames.com/images/shots/l/112433-chuzzle-delux...

Doom had a similar trick, the "Quit: Yes/No" prompt would say something like "I wouldn't quit if I were you, work is much worse".

Yeah. They do that. When you try to quit Bookworm Adventures the bookworm cries "Don't leave me!"...

...and when you select No, does the background fade to black, with crackling lightning and rolling thunder?

Isn't it already, with guilt-laden options like:

* 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.

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.

You mean 5 years ago?

"We want users to understand that they’re pretty much cheating the system when they choose not to pay for software"

Kind of like in the "Nosedive" episode of Black Mirror? [1]

[1] http://www.imdb.com/title/tt5497778/

It's pretty common actually, see here:

http://confirmshaming.tumblr.com/

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.

A slider that doesn't slide when swiping on touch devices also is.

Yep, I tried sliding this slider 3 times and gave up. Had to come to the comments to figure out how to work it.

It handles a double-click nicely though so credit for that.

Seriously? I agree it needs to respond faster, but this is impressive and cool. Start with a compliment, you'll go a lot further in life.

I see nothing wrong with constructive criticism.

> I agree it needs to respond faster, but this is impressive and cool.

You did the same thing.

Nothing wrong with being objective.

Now that we're at it: clickable things have the "hand" cursor.

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.

Would you use a hand cursor for a button?

Yes, I would.

Super late answer but I hope you get it: yes, it is a good practice.

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.

fixed it for you: http://codepen.io/anon/pen/PpJwKL

I think the blinking is actually much more effective this way, too!

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.

If you slow down the original, it does the same thing. Optical illusion I think.

Edit: only the second blink is funky. The first is how you recall.

The first (happy) blink is fractionally slower than the sad blink on purpose. I'm obsessive about details.

Yes you messed up the transform origin.

You are free to improve it, if you "know" how is "better".

The same author: http://codepen.io/chrisgannon/pen/VjWWZO Looks pretty great too!

And now I want to learn SVG.

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.

Any suggestions of how to get started? It's been a topic I have long been interested in but never found a good path to follow.

I've just started, but this looks like a nice tutorial: http://tutorials.jenkov.com/svg/index.html

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.

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.

I don't like the switch design for people using a mouse.

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.

Awesome transitions!

One 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.

You can change the line var toggleTl = new TimelineMax({paused:true}).timeScale(2);

to read eg var toggleTl = new TimelineMax({paused:true}).timeScale(5);

instead. (I'm not the author, just fiddling)

Now try to use a valid checkbox input.

That's left as an exercise for the inclined hn reader.

The author has a lot of interesting pens http://codepen.io/chrisgannon/pens/popular/

Nice. Trying to drag the button doesn't work though; I would add that.

Why would you try drag it? Maybe I'm used to iOS I don't swipe those things I just touch them...

Why wouldn't you? It looks like a slider toggle, not a checkbox.

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.

People do though, I often watch (and cringe as) my parents do it.

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.

mousedown++ but also touch events

I don't see a button, it has a background that suggests it'll slide when dragged.

yup same here, i still love it tough

I still intuitively (try to) slide toggles on my iPad. Just because Apple did it wrong doesn't mean everyone should adapt.

Which version of iOS? As far as I can tell you can tap or swipe/slide the switches.

> Why would you try drag it?

Because it’s large and I want to see it wiggle? :D

It's a toggle. Drag is a no no for something with just two options. UI basics 101.

After flat UI, cute UI? I love this.

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.

Can I use this under any kind of OSS license?

I'm not the most familiar with codepen so I apologise if it's on there somewhere already.

https://blog.codepen.io/legal/licensing/

Public pens are MIT licensed.

No I don't grant permission sorry. I put stuff out to show off my skills and to help people learn.

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

[0] http://codepen.io/chrisgannon/details/WpjXVr

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.

Ok, that's really funny xD

Nice work, looks really great!

haha nice one!

Quite, but not yet.

Cute!

You just found out an emoji HN forgot to remove in the title xD

I just wonder how long it's gonna last.

Looks like HN strips off emojis from titles and comments.

On front page it's just <->

Nice! Slow, unresponsive "cute" visual element. Perfect for modern web-developers.

Reply on news.ycombinator.com