Should buttons become lighter or darker when hovered over?

What is the mental model of the user interface—or at least the UI buttons?

The Feedback Aspect

Just like with most physical buttons, if a user wants to press it, he or she touches it. The feedback comes from its look and feel (it looks like a button; it feels like it can be pressed by actually pressing it).

With UI buttons, a user could get feedback from the following:

  • Visual Design
    • It looks like a button
    • It feels like it is clickable
  • Accessibility
    • It says that it is a button

It Feels Like it Is Clickable

With some techniques in Visual Design, a designer could reinforce the feeling that the button functions as expected.

The Light Source

Does the button budge up when hovered? Or does it budge down?

If up, then the shade becomes lighter as it moves closer to the light source—which is naturally above us (in the real world). If down, then darker.

The LED Light

Does the button light up when hovered?

If yes, then the shade becomes lighter—whether the light comes from the body of the button or simply around the button.

You may combine those different techniques—but basically, those are the considerations why the shade of a button would be darker or lighter when hovered.

Please note that for devices with pointing device, the mouse changing to a pointer is enough feedback for the button to feel like it is clickable.

However, for touch devices, to feel like it is clickable, a user will actually press it.

Originally published in Quora


Leave a Reply

Your email address will not be published. Required fields are marked *