I’ve been mentioning moaning about something called negative hovers on Twitter for ages now, so it’s about time I wrote a quick post on them.
At their most basic a negative hover is a link whose appearance is subtracted from on hover rather than added to. This might mean they go from:
| Normal | On :hover |
|---|---|
| Dark colour | Paler colour |
| Underlined | Not underlined |
| A background | No background |
Or any combination of the above.
It is in my (and lots of other people’s) opinion that these are a bad thing. Here I’ll try and explain why I don’t like them. Be sure to look at the negative hovers example so the rest makes sense to you.
Spot the odd one out
Hovering any of the links in the list or the paragraph removes their underline or background which puts them on the back seat, surrounded by the overpowering underlines/backgrounds of the other links surrounding it. The hovered link is the odd one out, but in the wrong direction. The odd one out should be more apparent than its neighbours, not less.
Hover any link on this page and see how hard it is to quickly see which one is hovered. It’s pretty difficult, because its appearance is so much more modest than the links that aren’t even being hovered at all!
Now compare that with this page.
Imagine a user has tabbed to those link. They don’t have their mouse cursor over the ‘current’ link as a visual cue, they’re lost looking for an non-underlined link in a sea of underlined ones. This makes the whole experience more difficult than it needs to be.
Underlines are obtrusive
Underlines are just plain ugly. Especially when you’ve got a few links in continuous text. If you start off with underlined links all you can notice is lines. The text becomes secondary to the underlined links and that makes reading and scanning a chore. You don’t want to interrupt someone’s reading experience with unsightly underlines.
Intuition
The least quantifiable/solid argument is that it just feels wrong. That doesn’t sound like a great argument, but bear with me…
If you hover or act on something in a positive way (giving it attention, wanting to perform something), you would expect that to respond in a positive way, right? If you want to click a link that will, say, take you to another page, you don’t want that link to ‘shy away’ from you, do you? It feels more intuitive that that link would ‘stand forward’ and act positively, becoming more-than-it-was as soon as you focus your attention upon it.
As a UI designer/developer I think this ‘feeling’ speaks volumes. It doesn’t seem right that a positive* action would result in a negative appearance…
*Positive meaning ‘doing something’, even if that something is negative (such as a deletion). Does that even make sense?
The answer?
Positive hovers, of course!
If you started with a pale blue, make it darker on :hover. If you started on a non-underlined link, underline it on hover, or give it a background colour. Simply make its appearance more than what it was before you hovered it.
| Normal | On :hover |
|---|---|
| No underline | Darken/increase contrast |
| Underlined | |
| Underlined | Add a background colour |
| Darken/increase contrast | |
| Background | Underlined |
| Darken/increase contrast |
Issues
There is only one issue I can think of, specifically when starting off non-underlined; accessibility. Colour blind users may not necessarily be able to distinguish a link based on colour alone. Try and use a decent contrasting colour to avoid this…
Final word
So there you have my thoughts on negative hovers. They’re counter-intuitive and can be obtrusive, but do you agree? Let me know! I’d be interested to hear any counter arguments.
By Harry Roberts on Wednesday, May 18th, 2011 in Web Development. Tags: CSS, HTML, UI, UX | 22 Comments »
+
Luke Connolly said on 18 May, 2011 at 8:32 pm
Great post. I was looking for a longer explanation on this!
Easy to agree with, it makes sense visually and from common-sense. The only thing I might mention is that when tabbing links, users will see the :focus state, no? When I was tabbing links on your example, they didn’t get underlined / bg :hover effects, but instead got the standard (webkit, in this case) :focus styles…. so the trouble was avoided.
What are your thoughts on using bold links?
Chris Nager said on 18 May, 2011 at 8:43 pm
I agree. Negative hovers are not intuitive.
Harry Roberts said on 18 May, 2011 at 8:49 pm
@Luke: You’d just add :focus/:active styles, but for the sake of keeping the article focused I only included :hover.
I often use bold and colour to indicate links :)
Cheers!
H
Foomandoonian said on 18 May, 2011 at 8:51 pm
I only caught one of your tweets on this, and I made a wrong assumption of what you were talking about. I think a better description of this phenomenon would be ‘reverse hover’ or ‘vanishing links’ or somesuch. I assumed you were complaining about the style of inverting the text on hover (white background and black text becomes black background with white text – a negative effect).
FWIW, I think you are absolutely right. I don’t know how many people will feel as strongly that the hover effects you describe are poor, but I really dislike them too!
Further point: Though I do like to remove underlines for the reason you describe, I think they do serve an important purpose, and should be retained when possible. If you are willing to use a border-bottom effect (as used to good effect on daringfireball.net), then a subtle underline that gets stronger on hover seems like the best compromise.
Stephen Greig said on 18 May, 2011 at 8:58 pm
I completely agree with the concept and, for the most part, it’s common design sense.
Although, for me, dark to light is by far the lesser of these ‘evils’. The effect is very common and I see it in usage everywhere. As I hover on a tab in my browser above this page, the tab gets lighter… and it doesn’t feel wrong in any way. Contrary to the other negative hover states you describe.
David Bushell said on 18 May, 2011 at 9:11 pm
I’m inclined to somewhat disagree with this sentiment!
It’s not so much about “negative hover” as it is about visual difference. Making something 5% darker or 5% lighter is bad either way. Changing to a an entirely opposite colour adds a visual cue and confirmation for the user (unless red & green for a lot of people). You can’t label a colour change from red to blue “positive” or “negative” for example.
The reason removing an underline doesn’t work is because the noticeable difference can be easily missed. Especially when many lines above & below are underlined, like your example.
At the same time we must consider context within the whole website and dreaded brand “guidelines”. Depending on how we use colour and typography style elsewhere will influence how we style links. God forbid we inherit a brand with a single colour!
Anyway, I’m being picky ;)
steve smith said on 18 May, 2011 at 9:23 pm
I agree with David Bushell it’s not about ‘negative’ or ‘positive’ but about noticeable difference.
Why are you labelling lighter colour = negative and darker colour = positive?
Sounds like your personal taste is not to remove underlines on link hover which is fine but this article reads as fact not personal opinion which I think it is.
davidcmoulton said on 18 May, 2011 at 10:02 pm
I agree with you, Harry. Having been playing about with some negative hovers in a side-project I was working on a while ago, I scrapped them, because they just ‘felt wrong’. At the time I couldn’t put my finger on why, but your rationale of expecting a positive reaction to a positive action makes a lot of sense to me.
Christopher Ogden said on 18 May, 2011 at 11:02 pm
I would generally disagree.
I think it is more important to be able to notice links initially than to have an extra indication of my cursor location. If a link is highlighted, I am cued in immediately. When I am attempting to open the new page, I need to know where my cursor is anyway in order to get it to the right location.
When tabbing to a link, it may be slightly more difficult to tell which link is active, but I think I would also be more attentive to my actions then and would see the change regardless.
However, if the background allows two distinct colors for link highlighting, then I would be in favor of positive hovers.
Jason Persampieri said on 18 May, 2011 at 11:07 pm
This is the most useless article you’ve ever written! Why would you waste your time on such nonsense?!
Oh, wait… Perhaps I shouldn’t be reading this one on my mobile device :)
Sarah said on 19 May, 2011 at 1:11 am
Hey!
I personally don’t see anything wrong with ‘negative’ hovers.
It could easily be a preferential issue. Some designers like it…and some don’t.
You say “see how hard it is to quickly see which one is hovered,” which confuses me a bit because I know which one is hovered because of another visual cue…my cursor!
Underlines ARE ugly and the first thing I do is add the ‘text-decration:none’ attribute to all links.
But I’ve noticed a trend away from plain coloured links. Take the site’s ‘Weapons of Mass Creation’ or ‘Web Designer Wall’ for example.
As designers, we all follow trends. But these trends grow tiresome and people start exploring new options.
My $0.02
:)
cahnory said on 19 May, 2011 at 5:58 am
I agree with you ! I would just talk about “more or less contrasting color” (compared to the background) rather than “dark or paler color”.
Novi said on 19 May, 2011 at 9:11 am
I disagree.
The examples you refer to as “bad” are way better recognizable as links then the ones you call good, and that’s in my opinion a way more important issue than what happens on the hover.
It doesn’t really matter that the links don’t “pop out” when you hover over them. You should be aware of where your cursor is and you can notice what you hover, that’s enough for a hover. Nobody will not click on a link because it is less apparent then the ones around when he/she hovers over it. However .. people might not click on a link if they miss, that something is a link.
Trein said on 19 May, 2011 at 12:19 pm
I personally feel it’s about letting the user perceive that they are getting a reward out of clicking deeper into your site, that you feel is so important.
Convince them.
Whether you use neg/pos attributes in design don’t-none-much matter at that point.
I fancy me some good contrast, though.
Baris Wanschers said on 19 May, 2011 at 12:34 pm
I agree with most parts of your post: I agree that using positive hovers look better and are more useful. However, I believe that your vision on the accessibility part of underlining links does not make sense.
The accessibility guidelines (WCAG) states that links should not be distinguished by color ALONE. Period. So just choosing a color that has enough contrast is not a solution. It should be underlined, bold, italic or bigger. Whatever you do, having another color alone is not enough for sites where accessibility plays an important role (governmental sites for instance).
In my designs I tend to underline all links that part of a sentence (inline). So only for links that are clearly links (menu’s, lists of links in a sitemap, etc) I choose to remove the underlines.
Chris Marsh said on 19 May, 2011 at 12:54 pm
Visual clues are really important for hovered links, and I agree that especially in a bundle of links a hovered link should be the one to pop out.
However, underlining is a very common way (default in most browsers) to identify links, and has become a de facto standard. I agree with you that they look nasty, but sometimes convention has to win out over design!
As always, make sure the site is tailored to the audience, not to your own tastes.
Great post Harry.
Yvonne Tang said on 19 May, 2011 at 7:00 pm
I’m also one of those people who have no problems with hovered links being paler. Sometimes I use a bolder, more saturated color (sometimes lighter in value) for hover, which to me is more intuitive because a lot of times when we press a button in real life, a bright colored light goes on.
Daryl said on 19 May, 2011 at 7:39 pm
“I’ve been
mentioningmoaning about something called negative hovers on Twitter for ages now”I don’t understand this. Have you been seeing it in all your favorite websites, and it’s driving you crazy? Is it about to become a trend and you think we’re all going to jump on that bandwagon?
Personally I haven’t seen any examples of negative hovers in the wild. Maybe I’m blind, but if they’re all over the place, they’re not intrusive enough for me to notice them. The fact that you made up examples in a CSS sandbox tells me that this is really a theoretical problem.
I do notice dozens of other design rules being broken all over the place that designers don’t even have to complain about… like text directly on a patterned background, animated gifs, blink tags, new pages still written in HTML 1.0…using tables…
Steve Rydz said on 19 May, 2011 at 10:15 pm
I’d like to say Harry that whilst I agree with the principle you are putting forward there are exceptions to this. For example sometimes making a colour lighter on :hover actually makes it stand out more. Take my site for example where the links are a pale blue. When hovered they are underlined and slightly lighter – this makes them more visible as the sites background is fairly dark.
molbal said on 30 May, 2011 at 9:27 am
Eeeeerm, I like to play transparencity and letter-spacing, but I never ever underline them.
stope said on 1 June, 2011 at 10:12 am
I have to disagree…
The article bilds its case on the fact that anyone can spot a link because of its color or font-weight (and on the one that underlining is ugly – which is entirely wrong in the first place).
On the contrary – most BFUsers know the links to be something underlined and (in most cases) colored differently. With positive hovers you risk the non-educated visitors to lose their way to the desired page.
Dimitris Romeo Havlidis said on 25 October, 2011 at 1:17 pm
I will begin with saying I agree.
@Chris Marsh: Chris, nobody said you shouldn’t be using underlined to begin with (although I hate them they ARE a very clear and universally understood connotation for a link)
But as I can see at the list of positive hovers, you can have a link that is underlined to begin with, you just have to darken it or add a background to it.