cssdb icon indicating copy to clipboard operation
cssdb copied to clipboard
verified publisher icon csstools

Color Mode toggle has a confusing UX

Open bigandy opened this issue 4 years ago • 6 comments

I'm getting this bug on latest MacOS Chrome 97.0.4692.71 (Official Build) (x86_64)

https://user-images.githubusercontent.com/603328/149552759-1cc3d5d9-7ad3-4c9a-a44a-e00265f4de77.mov

bigandy avatar Jan 14 '22 16:01 bigandy

@bigandy thanks for reporting this!

Luckily this is not a bug. It has 3 positions,

Dark, Auto, Light.

Auto is to use whatever system preference you have is set to.

Antonio-Laguna avatar Jan 14 '22 17:01 Antonio-Laguna

@Antonio-Laguna ah thanks. It's not super clear to me as a user that this is the case. Looks like a UI toggle (on/off). https://www.nngroup.com/articles/toggle-switch-guidelines/ I wonder what a good UI for three modes would look like?

bigandy avatar Jan 14 '22 17:01 bigandy

@bigandy completely understand and I agree it's confusing, it's sort of a UX nightmare that we need to figure out

Antonio-Laguna avatar Jan 14 '22 17:01 Antonio-Laguna

I've update the title to keep track of this :)

Antonio-Laguna avatar Jan 14 '22 17:01 Antonio-Laguna

Hi, just fell for this, too, but figured it out with some fiddling. There's just very little room between "auto" and the other states. It might help if the toggle would be a tad wider to give all three states enough room or add icons inside the circle. The "auto" (middle) now looks like the switch is just "resting".

WebMechanic avatar Mar 17 '22 07:03 WebMechanic

I always wondered if sites need to even implement this feature now days? OS's have good support now days for picking the OS style Light / Dark theme, when would a user want to override this specifically if they like dark themes? It's kinda like when people used to allow visitors to select their font size thinking they was helping people with reading issues.

Also yeah I got duped by this also haha. I can think of a few ways that may help

  1. Add a label so that its visible to what option you are on without having to select anything - auto | light | dark
  2. Make it more visually obvious with some illustrations - depends on what style the site is going for
  3. Instead of letting them click into 3 distinct positions, just make the whole thing clickable and just toggle to the next state

https://www.figma.com/proto/qlU8MQFl7SIiAmcj9d1ezP/CSSDB?node-id=1%3A71&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A71

https://user-images.githubusercontent.com/694964/158779776-0a63ca22-532b-4e4c-96be-dfa20f355d93.mp4

AaronLayton avatar Mar 17 '22 09:03 AaronLayton