Remove toggle hover effect

[paaljoachim]

Hovering over a toggle makes it move. It would be better to not having this hover effect as it confuses a bit as it kinda starts to move on hover. It should only move when one clicks the toggle.

[sheabunge]

Hi @paaljoachim,

We can definitely remove this, however the idea behind the effect was to indicate that the toggle can be interacted with to activate or deactivate the snippet.

Can you think of a different way to convey this that might not be as confusing to the user?

[paaljoachim]

You could instead just toggle the circle color on hover. What is important here is that there is only one animation and that happens on click. On hover something can change color.

Here is an example I made in Figma. The purpose is to just add a hint that something happens when one clicks. https://www.figma.com/proto/MMD2FHdir87zE6Vse5RcXu/Untitled?node-id=1%3A35&scaling=min-zoom&page-id=1%3A32&starting-point-node-id=1%3A43&show-proto-sidebar=1

Instead of the color change I made in Figma one can make the effect even smaller by just adding a thin blue or grey border around the toggle to give a hint of something happens when one clicks it. If one hovers an off state have a thin blue border around the toggle seen. As one hovers an off state have a thin grey border around the toggle to give a hint of the off state. Something kinda like this: https://www.figma.com/proto/MMD2FHdir87zE6Vse5RcXu/Untitled?node-id=1%3A79&scaling=min-zoom&page-id=1%3A70&starting-point-node-id=1%3A76&show-proto-sidebar=1

The hover effect needs to be different compared to the click effect to not confuse the user. Hover gives a hint (color change). Click moves the toggle to on or off position (animation).

[paaljoachim]

Btw Looking at various toggles in Gutenberg. There are no hover effects. User just clicks to turn on or off the toggle.