HN Explorer

7 comments

[ 4.2 ms ] story [ 33.4 ms ] thread
pmontra
About the UX of that site and of many switches: I touch the sun and it gets dark, I touch the moon and it gets bright. It works only because there is nothing else to do but it's hardly what I expect to happen.
d1sxeyes
Interesting point. I think it's supposed to replicate a (relatively uncommon) physical switch behaviour where sliding the switch shows an indicator which indicates the state of the switch (eg: https://cdn.shopify.com/s/files/1/0560/8085/9187/products/zi...)

How would you do it differently? Icons outside the toggle at either end?

pmontra
Looking at that picture I have no idea if that position means that the sun is on or if it will be on when I move the toggle to it.

Your proposal is good, sun to the left, moon to the right, the toggle on the active side.

Or, as the active state is self evident, only a moon button when the light theme is on and only a sun button when the dark them is active. No toggle needed.

alldayeveryday
> Icons outside the toggle at either end?

Makes the most sense to me.

Sun <0- > Moon

Sun < -0> Moon

d1sxeyes
This got me interested and I found this which looked like a super cool idea although the execution is not as polished as I would like: https://codepen.io/4rron/pen/vYpwyYa

This one is also quite interesting: https://codemyui.com/sun-to-moon-on-off-switch/

This one is sort of the opposite of the first - lovely execution, but the actual switch has the same problem as OP identified: https://codepen.io/steve_walson/pen/oNprgre

pmontra
The labels in the second one shouldn't be on and off but light and dark. There is nothing to turn on and off, it's a change of status. Basically two radio buttons each one with its own label.
artberri
Hey!! I'm the owner of the website, I've just found that someone added the post here in HN (in the referrer stats) and I've found your comment. It's absolutely interesting.

I'll think about it and I'll see what can I do.