0

I have white buttons on a blue background:

enter image description here

When moused over, I change their background colour to blue to acknowledge this:

enter image description here

When clicked, they become the large square you see on the left.

It's occurred to me that making the button the same colour as the background would imply that it's not clickable, and would maybe be better as a disabled style.

What's a better indicator?

  • This is the perfect opportunity to do a competitive audit to discover how others do this. – Ken Mohnkern Jul 6 '18 at 13:49
4

Your mouse hover state actually looks as if the button is not selected. It should be the inverse of what you are currently doing. See screenshot below:

enter image description here

1

You may want to simply consider flipping them around. The outline is the normal state, white background on hover/mouseover, which spreads to the square upon click.

If you are faced with not knowing what to do with elements that cannot be clicked. Often times, a button represented as disabled when shown at a lower opacity. Try putting all the button elements in a grid to see how they compare to each other in a neutral space. This can help visualize the way they work together as a set. I've attached an example.

button states example

One final thought is that using motion is a great way to capture users attention. Adding an effect to the mouseover can strengthen the clickable elements from those that are not.

0

If it's possible with the technology you have, on mouse over, make the element enlarge slightly to add emphasis.

Or, sticking with the same hover over state you have now, increase the thickness of the white circle around the icon and then reduce back down - like a pulse.

Basically you want to make the hover state more obvious than the disabled style you have. Currently it looks like the opposite way round.

0

My suggestion would be either to change active state, or change hover background color to something easier, i.e. only a little bit shader grey background color.

In addition, you can move down button on hover for 1px, and make also pressed state for 2px. Cursor should ofcourse be pointer, and it should be clear that it is clickable ;)

0

This is always a tricky dilemma when it comes to designing a website/app for maximal clarity in regards to the user's experience. I agree with sclarke (above) that if it's possible to try and enlarge the icon for emphasis while the mouse is hovering. This is a great piece on The 10 Commandments of UX that precisely go through the necessities of designing quality UX that is clear to the user.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.