Choosing the hover color of a link, logically

Question

The menu color of the apple website fades out when you hover it, which I believe is wrong because hovering an item is like activating it, hence a positive action.

With that said, what's a logical and reasonable way to choose a hover color?

Answer 1

Let me first set out a few things that make it easier to respond to your question.

Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.

The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.

Choosing a hover style

Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:

• Use skeuomorphy. This is about relying on patterns that users already know from the physical world, and borrowing visual cues from that pattern for use in your GUI. Especially for new types of interaction, if the online experience can mimic something in the physical world, it helps people by providing a pattern that a user's brain can relate to. This "relationship" can be about actual physical interaction, like the 3D edges of a button that signals "you can press me and I will move." I can't think of an inanimate physical object that responds to the proximity of a finger or hand. I suppose Well, living things might flinch or fly away, or they might lean in, or change colour.
• Follow a standard. One standard is text decoration. So the blue text of a link becomes underlined on hover, red on mouseDown, purple after it's been visited. I wont' spend too much time identifying other standards or defending any of them, because your question implies you may not want to follow this standard.
• Leverage prior learning. This is what makes skeuomorphism work. It's also why standards work. By any prior experience or learning can be leveraged. So based on previous experience, a user might decide that a small image that they've never seen before is an icon and therefore that they might move the pointer over it to see if it signals affordance, displays a tool tip, or causes the status bar of the browser to show a destination URL. These are all things the user has learned to recognise.
• Leverage precognitive processing. I'm thinking of precognitive reactions, the stuff our brain figures out before we have a chance to think about it. Above, I mentioned flinching; we don't deliberately decide to flinch; it's a precognitive response. Gestalt identifies a variety of visual characteristics that our precognitive processing can interpret. We see this in action in your illustration, above: the menu bar has several links that are part of a group, and then, on hover, one of them separates from the group. Principles of 2D design identify several things you can do with an object to signal spatial relationships. For example, of two overlapped objects, "the one in front" is closer, "the larger one" is closer, "the greyer one" is further, and so on. Of course, this also relies on Gestalt, because our brain interprets that there are two circles, rather than one circle and one crescent. Have a look:

You can combine the above solutions to define/design a visual cue that best work for your audience. That's right—I have no specific answer your question, because it depends on the context, the type of users and their prior experiences, the emotional goal of the visual design, and so on, and so on.

Answer 2

Hover states afford click-ability and hence it's suggested that the hover color should be noticeable. In general, a contrast to the background color will help you achieve this desired effect.

You can see an example on this site itself:

The hover color is in accordance with the triad scheme for the base color.

There are some more technical guidelines available for choosing the color of links and hover state. You can refer to G183 document by W3C that recommends using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.

Hope this helps!

Answer 3

There's no real "logic" to it. It's more of a process.

Identify all the visual changes possible:

• change foreground color
• change background color
• add/change outline
• add/change underline

or any combination of the above. (You can also change sizes of things, but that is problematic so I generally avoid that. It's possible to do right, but complicated.) You want the change to be obvious (enough contrast) and harmonize with the color scheme, and you don't want it to obscure anything (by reducing too much the contrast between the text and background). And you want to be consistent throughout the site/page - all hover effects for all element types needn't be exactly the same, but they should be variations on a theme, and a limited number of variations.

And remember there are no hover effects on touch devices so think of hover effects as just an embellishment for non-touch devices.