Monday, December 11, 2017

website design - Change text color when hovering over hyperlink


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



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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...