Links in navigation, to underline or not to underline? Options

[suka]

I am curious to get input on navigation links. Are users "trained" well enough with top and left navigation that links in these areas do not have to be underlined, but could utilize hover effects instead?

Here's two different approaches. Just curious to hear everyone's thoughts. It may be hard to compare these sites because they aren't the same industry.. feel free to post alternate examples. :-)

http://www.thingsremembered.com/webapp/wcs...01_537_-1_Y_537

http://www.nationalcity.com/personal/onlin...ing/default.asp

[Respree]

The basic premise of links is that they need to be obvious. Long ago, when the Net was 'young', they were 'always' blue and underlined. Times have changed and differing techniques are now accepted as the norm. Among the most popular would be to use a different color than the normal text.

I would say you can 'never' go wrong with blue (or color other than non-linking text) and underlined. In your two examples, my personal preference would be the underlining method. However, with that said, when it comes to top and left navigation, because this is so commonly understood as navigation, not underlining it would also be perfectly acceptable.

In short, neither is wrong, per se. Just a matter of personal preference.

[Adrian]

In most cases, links should be underlined I feel. However, where the context of the links makes it obvious it's a link anyway (like a very obvious nav bar) then removing the underline is fine.

I do that on my site. The navbar is a pretty obvious nav bar off to the side, looks like buttons, with rollover effects. So I thought it fine to remove the underline.

Text in the main content though, keeps it's underline to identify it.

Depends on the context of the link.

[ResaleBroker]

For one of my sites, ResaleBroker, I have all hyperlinks "Blue" and without the underline. I figured the link convention was pretty intuitive and a visitor would pick up on it quickly.

On my other site, AZMultipleListingService, the hyperlinks are not the standard "Blue" so I did use the underlines.

To me it's about consistency within the site.

[bragadocchio]

Hi ResaleBroker.

Welcome to Cre8asite.

I agree, consistency helps.

But I'll add that something, anything, in addition to a change in color can be a benefit, especially if a visitor is colorblind.

There are some other options in addition to underlines if you use CSS.


One complaint I've seen about underlining links in the body of text is that it makes it more difficult to read the content. There's a balance between making it easy to see that something is a link, and the potential distraction that underlines, and so on might cause. One reason, maybe, not to have too many links in the body of your text on a page. When you do have them, it probably should be because you really want to persuade people to visit that other page.

[Ransak]

If you remove the underlining for your links, one thing you can do in addition to have the color change on hover, is have the underline appear on hover as well. This should statisfy any colorblind users as well.

You can use some simple CSS to do this:

a:link {text-decoration: none; color: #999; }

a:hover {text-decoration: underline; color: #960;}


Frank V.

[Ron Carnell]

This should statisfy any colorblind users as well.

Not necessarily, Frank. Unless the :link stands out for them in some way, they'll never know to move their mouse to find the :hover.

[Ransak]

Not necessarily, Frank. Unless the :link stands out for them in some way, they'll never know to move their mouse to find the

Good point. I was not thinking of all situations.

Frank V.

[Nick_W]

In your two examples:

Example 1:
I found the left nav simple, i didnt realize the links on the topnav were links even though they had icons next to them untill i hovered over them. Bearing in mind im a web savvy user, i'd say that was a potential problem.

Example 2:
The topnav is simple enough, most likely because of the 'button like' look of the links. The left nav links just look like normal text to me, i think that's a big problem.

I dont think the leftnav links on ex.2 need necessarily to be underlined, but if you gave them bullets on the left, or some other way to make each one stand out as a single entitiy it would most likely make them more intuitive. From where i sit, they could be anything as they are now...

Personal preference
I prefer blue for links, its a well established tradition and one that anyone can relate to. Left and top nav need not be underlined, but as with the top nav on ex.1, they do need to be clearly marked as entities in their own right, otherwise they are easily confused with regular/emphasied text. Or in the case of ex.2's left nav, i thought they might be adsense for a minute

For the body, i never leave an underline out. I want them to stand out and be recognized without need for thought. But as bill said, they can detract from the copy. To combat that is simple though, dont use to many links to close together! 1-3 per reasonable sized paragraph seems to be a good balance for me.

HTH

[ResaleBroker]

Unless the :link stands out for them in some way, they'll never know to move their mouse to find the :hover.

I agree. I should have mentioned that the hyperlink text is not only "Blue" but "Bolded." I also use the CSS technique Frank mentioned.

[Adrian]

I like increasing the line-height for body text to help alleviate some of the reading problems. I think with decent sized text and increased line-height, the underline in body text isn't ushc an issue. Though you be careful about having 2 seperate links too close to each other in a line. It makes it more difficult to notice it's 2 links, and to make sure you click on the correct one.

Although it's not about body text as such, Dave Shea's thoughts a while ago on 'big links' is quite good.

It's something that we have here a bit too. Where you have forum/post listings, you should be able to click anywhere in the box to go to the forum/post, rather than having to click on the actual wording.

Thinking about the same kind of thing for body text can help problems with having too many links. If you can work out a good way of doing it anyway

[fisicx]

I believe that a lot has to do with the type of site. If the site is called 'internet for dummies' then the links need to be really be obvious. If however your site is for advanced css/javascript users then the links can be a little more subtle.

The use of CSS to personalize links has a secondary effect. If I choose to print out a page then the links have no value since they don't actually work on paper. You can use css to build a print media stylesheet and remove all the link styles so it looks like normal text - no need for printer friendly pages.

And as to the colour blindness thing, blue will always work, if you choose not to underline it then it can still be differentiated. This site explains why: http://more.btexact.com/people/rigdence/co...lours/index.htm

[Ransak]

Good link Fisicx, though I think I'll have my coffee first before pursuing it closer.

Frank V.

[Scratch]

Ooh, I've got some opinions on this one.

Firstly, re the wedding site: the mouseover effect should always be *positive*. That means NEVER use underline for normal state with non-underlined for hover. That's awful! It feels like the link is shying away from the mouse. It's a sin.

The only hyperlink sin worse than this one is emboldening on hover, which makes the words jump about. There should be a law against that kind of thing.

I've written a piece on making links clear.

The question is: should we underline links in navigation?

I think there are differences between inline links and in-the-nav links, as the question suggests. The key point of using bluing or underlining at all is to differentiate the links - to make it 100% absolutely clear that "This is a link" / "That isn't a link" / "Here is another link", without having to grope with the mouse. K?

For inline links, I find permanent underlines to be a bit overbearing, particularly when you get long links of linked items. A little bit of underline is good for highlighting, but (as with anything that emphasises or draws attention), too much of it actually makes everything less clear.

These days, I tend to use dotted underline (which IE does as dashes), usually in Blue , and go for red underlined on hover.. Shouldn't we also do this onFocus too, in case someone is using the keyboard??

For links that are part of the permanent navigation, i.e. in side nav bars, top nav bars or tabs etc., the question ought to be "Is it 100% obvious that these are links?" If it is, then you have a choice about using other text decoration. If it isn't obvious without decoration, maybe consider why it isn't obvious. Is the text a different colour from the body text? Another way of differentiating might be to make each link element subtly 3D, so it stands up a bit like a button.

Out of interest, here's my link CSS from WDFS:

CODE

a {

text-decoration:none;

color:#00c;

}

p a, li a {

border-bottom:1px dotted #33f;

/* IE does underline dashes instead of dots, so make it paler */

// border-bottom:1px dotted #99f;

}

a:visited {

color:#33c;

}

.content_nav a:visited {

color:#55c;

}

a:hover, .content_nav a:hover {

text-decoration:none;

color:red;

border-bottom:1px solid #f00;

}