Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Are there any standards, principles or best practices to change the color or effect of a button on hover.

Something like :

  • Make it lighter
  • Make it darker
  • Change background and foreground color
  • Add effect

If colors are to be changed on hover, any specific rules or ratio in which it should change?

share|improve this question
    
It depends a lot on your design I think. All the solutions you gave are goods. The point is to make things change when the mouse is over (the pointer cursor is a great indicator) so the user knows he can do something with this button/link. To get some standards I guess you could see the basics, the default styles of browsers/os buttons and links. –  Zhouzi Jan 15 at 10:15
    
If the element is on the dark side of the color spectra make it brighter, if it's on the light side of the color spectra make it darker. If it's part of a group (horizontal action bar for example) changing the background is conventionally used. If it's a individual isolated element then changing the element visual characteristics is usually applied. –  AndroidHustle Jan 15 at 10:19
    
@Zhouzi Thanks. I missed about the pointer:cursor. –  Niranjan Borawake Jan 15 at 10:24
    
@AndroidHustle Thanks a lot. This is helpful. The one you said about changing the color if it is in group is best. –  Niranjan Borawake Jan 15 at 10:25
add comment

1 Answer

up vote 4 down vote accepted

I've read about this a few months back, but can't recall where, so doing this off the top of my head. It goes:

To begin with, systems should not rely on hover effect to denote a clickable item. In this age of touchscreens, the presentation should make it clear what is clickable and what's not.

Then, it is recommended to change the cursor upon hover, affirming the item is clickable.

Any other type of changes to the interface upon hover are done purely for aesthetic reasons. These changes fall into what visual designers call motion, or in simple terms - animation (dynamic change to the interface). Of all the tools in the visual arsenal, motion is the most attention grabbing one. Thus, the popular recommendation is to use it sparingly.

To answer your question directly:

  • Make it lighter - I guess that by lighter you mean increase saturation or brightness, which will make the item 'hotter'. This will appropriately promote call for action.
  • Make it darker - could signify 'cool off' effect, which is probably counter the logical call for action a button involves.
  • Change background or foreground - don't change the colour completely as this will be needlessly attention grabbing. A subtle change to the colour shade/brightness should be OK, but don't change hues.
  • Add an effect - done for purely aesthetic reasons, although one can hypothesise that this increases the responsiveness impression of the system. Use subtle effect so not to grab attention too much; most well design sites using hover animation follow this.
share|improve this answer
    
Thanks a lot. Appreciate your detailed response. This is helpful. –  Niranjan Borawake Jan 15 at 11:19
    
Wrote my own answer before fully reading this one. This covers everything I said so I deleted mine. –  matt at musiclist Jan 15 at 13:46
    
@mattatmusiclist Thats fine. –  Niranjan Borawake Jan 17 at 5:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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