Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 6 down vote favorite

While coding up pieces of a website, I was puzzled as to why the designer chose a hover state that is a shade darker than its normal state. It seems logical to me that a rollover state should be a hue lighter than the normal state, in order to put emphasis on its active state. However after noticing this, I realized there are many places (including UX) that darken the button for the hover state. Is this better than highlighting a button on rollover? I'm guessing it suggests downward pressure on the button, making it subversively easier to click on. Which is better, shading or highlighting?

share|improve this question

2 Answers

up vote 4 down vote accepted

The purpose of a hover state is to draw attention to the hovered element. Naturally brighter colors draw more attention (and more importantly the change in colors), but in some light designs, darkening the button on hover has a more noticable or aesthetically pleasing effect.

Colors can only be so bright on your monitor, and you only want them to be a certain brightness to keep within your site's aesthetic. To take UX's Ask Question button as an example, if it got much brighter it would start looking excessively bright. UX uses professional colors that aren't uber-saturated. Brightening up the Ask Question button too far might make it look cartoonish like a Highlighter marker yellow.

This is less a case of whether lightening or darkening is better in most cases, but of picking a color change that is noticeable but not too drastic, something that fits the colors and mood of your interface well.

share|improve this answer
I agree with your aesthetic comments, but not the purpose of hover states; pointing with your mouse almost always follows the attention of your eyes, rather than precedes. You look at items (and thus they have your attention already) before you point at them in the majority of cases. Hovering indicates that something is clickable, it's not there to attract attention. – Myrddin Emrys Mar 21 '12 at 23:03
up vote 3 down vote

Hover changes on a UI item exist for two reasons:

  • To confirm accurate pointer positioning, but more importantly
  • To affirm clickability.

With text links most particularly, it can be uncertain whether something is a link or just differently decorated text. Reacting to your mouse when pointed at confirms and encourages clicking.

Whether you choose to get brighter or dimmer is merely an aesthetic choice, dependent on your color scheme. Early highlighting was often extreme (example: bright red :hover default in Netscape), but sites that cater to more experienced users can tone down the effect to be more aesthetically pleasing, at a slight cost to usability for visually impaired users.

share|improve this answer

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.