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?
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.
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.