Change text color when hovering over hyperlink

Question

Should the text color change when hovering over a hyperlink? I usually change my hyperlinks to a lighter shade of blue upon hover.

a:link {
 color: #0088cc;
}

a:hover {
 color: #0099dd;
}

I believe this would make it easier to target and click a hyperlink because there's extra visual feedback. I have hover states for nearly anything clickable on my site for this very reason - images, buttons, etc...

I see that Google search results don't have color changing hyperlinks. Did they do a study on this and conclude that it lowers usability? I know they do a lot of crazy testing, like testing the conversion rate on 41 shades of blue, so they must have done testing with hyperlink hover states, right?

Answer 1

A few of my colleagues and I had just conducted a set of usability tests of a web application. Although we didn't specifically study whether or not to add other visual clues (apart from the hand cursor) on a link upon hover, we found that click-able elements (links, buttons) with more visual feedback have higher chance of being noticed and/or clicked. When I mentioned "more," it doesn't mean it needs to be very attention-grabbing; a subtle change in color or an underline for a link helps.

We can discuss endlessly about how much darker / lighter to set the link's hover-state color. But, specifically for links, we found that i) adding / removing an underline and ii) showing a tooltip upon link hover significantly make users more aware of the existence and click-ability of the link.

I hope this helps.

Answer 2

I think, as you've pointed out, it can aid usability in terms of 'spatial discovery' - i.e. making it slightly more obvious when a link can be clicked, especially if links have a large footprint that isn't otherwise indicated.

However, the cursor change already indicates this, so I think the benefit is minimal; in my experience, it's more often used for the 'pretty effect' than for any positive usability.

One case where I think it could probably prove very effective is when small links are placed closely together - e.g. in an 'A-Z' bar. This will make it much easier to select a specific link because it's easier to determine which link is being selected, something which the cursor change does not offer. However, that's probably not the best solution to the original problem: space links out slightly and increase the footprint!

Finally, if textual links are adjacent, a hover style could help to indicate the separation and, again, which link is being selected.

Answer 3

I'm not sure it's primarily used for the "pretty effect" -- I think it speaks to visual affordance. It shows more clearly that the site is responding to you and that the area you are currently on is interactive. If anything, I've worked with some visual designers who have tried to push against having hover states; I've never heard anyone say it makes things prettier.

Also, the cursor does not always change -- by default it does, but designers can override that and also if there are interactive elements triggered by javascript or within a Flash module, they may not always be indicated with a cursor change.

I must admit I have puzzled over why Google does not do this. They do offer some highlight states otherwise with each search result (some icons next to the link become darker), but they also have other odd design decisions -- such as the URL itself within a search result is not clickable, which to me seems counterintuitive (although I might guess it's because in sponsored ads, the URL shown may just be the top-level domain, not the actual URL you will go to when the link is clicked).

My best guess for why Google does this? Because it is default browser behavior. Which means that even if you had everything disabled (CSS, javascript, etc.) and just had pure HTML, the color/functionality of the links would still look the same for everyone.