What Micro Interaction to use When Hovering Over a Button?

Question

👋

We are trying to learn/understand UX from first principals and build the most intuitive UI.
We are creating buttons in an App and want to know what the ideal micro interaction is when hovering over the button.

We have seen some tutorials decrease the Opacity of buttons when the cursor hovers over the button, however we feel this can be counterintuitive for the user as it's "greying out" the button which could mean the action is not available.

These are the buttons in the App we are currently building:

Does it make sense to reduce the opacity of the button when hovered?
What would be a more appropriate UX / micro interaction for a button?

Thanks!

Answer 1

You are correct that reducing opacity conveys a disabled state. Hovering should make a button appear more clickable, not less.

If you want to convey a hover state with color, try the opposite -- aim for slightly increasing intensity. The normal-state button should look normal (not disabled) and its hover should be slightly more saturated and darker. It can be subtle; the human eye can detect very subtle changes.

If you don't want to change the color, you can either make the button look obviously button-like to begin with using signifiers and context, or animate other elements like the button's "link" and glyphs.

Answer 2

Reducing the opacity on hover, when done carefully, can deliver good UX. I believe the intention behind reducing opacity on hover is to make the buttons appear brighter. But changing only the background color signals disabled state. This can be corrected by making text and/or border darker at the same time. We're essentially increasing the overall contrast of the UI element. Increase of contrast here signals the opposite of 'Disabled'.

Adding two examples for clarity. In the first one, both text and border colors are made darker on hover. Only the text is made darker in the second one. In both cases, we end up with an inverted version of the original button.

Answer 3

I normally take the approach of increasing the opacity of hovered buttons, my theory being hovering over the button is almost like pressing, and pressing would make my button go inward and have more shadow. Alternative justification would be that the cursor by being over the button causes a shadow itself.

I've also seen the counter argument that the opacity of the colour should reduce as the act of hovering is similar to highlighting.

I think either can work, but generally you only want to adjust the colour slightly, your changes from the gif apply quite large changes.

Answer 4

Digital buttons in UI are representations of their real world counterparts. Even tho the days are skeuomorphism are past(but neumorphism is making a come back), i find digital buttons should mimik real world buttons.

Except there are no hover states in the real world. But we could use our imagination for what that would look like.

what could be used

• default state - a combination of brightness on the top edges with shadows at the button edges.

• hover state - same as default but with a slightly saturated or brighter colour

• for pressed state - inner shadows