5

Recently I see more and more websites using color invertion as a hover visualization. For me it's really annoying as I usually start to read the first few words and than hover over the line to have a visual/kinesthetic feedback in which line I am. So I hover over and it gets inverted ... which takes a few miliseconds to adapt to the new font color.

I guess this is coming from the selection color from Windows (and maybe other operating systems). But why? Only because of the better contrast?

Example of color invertion on hover

  • 2
    Hover isn't selection, so are you objecting to the inversion in and of itself or to the inversion on hover? Maybe the hover colors would be better if a toned down (less saturated) version of the selection colors? – Marjan Venema May 29 '14 at 10:49
  • You are right - the title was wrong. I claim the inversion on hover. I prefer saturated colors too, but multiple sites start to use inversion on hover and I'm asking if this is just bad design or something on purpose? – Gustav Jun 4 '14 at 12:23
6

The Selected state is the "opposite" of the Unselected state, and it's often important to let users identify selected items at a glance. "Reversing" the colors — using the background color for content and the content color for background — achieves this very quickly.

Also, inverted colors have been available almost as long as we've been putting text on screens, so it's a natural:

Televideo Terminal Highlighting

  • After writing this answer, the question was changed to address hover highlighting. Inverting on hover is a bit excessive. Typically, the purpose of hover highlighting is to indicate that the element can be clicked (and possibly selected). Hover highlighting should "intensify" the hovered element within the color palette of the site, indicating that it is an active element. Lately, with the advent of "flat design," this kind of helpful user cueing is being lost in the interest of … I don't know, probably "simplicity." – Dave Land Oct 31 '15 at 17:47
3

Two things:

  1. It looks nice
  2. It helps identify elements that are important or selected. It's far much easier to see

this

than " > this"

1

You could use a fade-in or fade-out fx.

Why inverted?

  • Clearly stand out from the unselected.
  • Keep the same colors (eg, red and white -> white and red), so it is understood that belong to the same context.

Not always are reversed, sometimes only the background is changed. But the problem may be that changing the background visibility can decrease (for example white background and red letters -> orange background).

  • Fade out is quiet a bad idea depending upon the horizontal real estate of list item. Even a simple movement in screen will perform fade in/out action. So user has to move his mouse pointer to neutral area every time to see all list items at a glance. This solution causes bigger problem than inverting colors. – PrashanthKrish May 27 '14 at 17:36

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.