Should links on a web page ALWAYS be underlined?
I do not believe this should be a hard and fast RULE!
I wrote a comment on my blog awhile back about this after another developer complained that I was not following web standards. It is coming up again, and I want to know what you think. Her argument was that for consistance and usability, ALL links had to be underlined ALL the time. My manager agreed, so I changed two lines in a css, and it was done. I did not mind doing the work, but I think the usability of the site is less now. There are way too many things screaming for your attention.
I should mention that this is a web site with many pages of data entry. The links in question were navigation links to the left of the page in a box that was titled "Menu". The underline did appear when you hovered over the link already, and the background color changed when the user hovered over the link. I really could not believe I was even having the discussion. I was even more shocked when my manager agreed.
Am I wrong? What other arguments should I have made? Thanks! :)
views:
355answers:
11I think all links need to be distinguishable from normal text, but not necessarily underlined. Menus and navigation bars are pretty standard on websites, and are usually recognisable as such, so I think they are being a little too dogmatic.
I don't think all links must always be underlined, but they should be set apart from the surrounding text. Generally, blue and/or underline will indicate a link, but it depends on the layout of your site.
I would warn you to be very careful about underlining things that are not links, though. That may mislead users.
@Brad Wilson brings up a good point about color differences and color-blind users. I could be wrong, but I beleive most (all?) color-blind people are only unable to see the difference between certain colors, but not all. Perhaps you could choose colors that always show contrast? Of course, I imagine that color differences (and probably other formatting attributes, such as underlining) are also lost to users using screen readers.
Accessibility brings up a lot of interesting challenges, to say the least. What do Accessibility advocacy groups recommend for these issues?
Generally speaking, links should be underlined (and blue!). If you don't want to underline them, that's fine, as long as they're identifiable.
Underlining text that isn't a link is far worse than not underlining links.
I think that you would need a very good reason not to have links standout in some way. Maybe not underlines, but it should be very apparent at a glance that something is a link. There is nothing worse that going to a new site and moving the mouse all over the page trying to figure out what should be clicked on.
See also Mystery Meat Navigation
I agree, I don't think that underline should be used for anything that is not a link.
There are certain things that need not be underlined. Page navigation, items in menus, prev/next links, especially if they have arrows are just some examples. I would still suggest that giving them an underline on hover be mandatory.
The best bet is to start with blue and underlined for links and only deviate when you have a reason to do so. People expect blue/underlined so obviously this would be "best", particularly as far as links in body text go. However, it would be absurd to suggest that links must be this way. I would say that underlining is more important than blue, since the contrast with regular text is what's important (contrast refers to shape and weight as well as colour.
As long as it looks fairly linky people will assume it is a link so don't worry too much about strictly following the defaults, but using what's familiar is certainly the best way to go if in doubt.
Ask Jakob Nielsen and he'll say yes, all links must be underlined and in blue. Still, look at his site. It's downright usable, no doubt, but (and he assumes it) it goes to extremes to prove his point.
I second the people here in that you must above all clearly distinguish links from other text throughout the page, but having them all underlined might be overkill.
My suggestion: underline links within the main body of text, because these need a bit more effort to stand out. Navigation links should be fine if underlined when hovered or, depending on the case (and whether your overall design is good and consistent enough) even consider not underlining them at all.
At the end, it all boils down to depends. Your bosses just agreed on the most probable, no-risk path.
The most difficult aspect of usability is that every site/project is different, and every element serves a different purpose. I agree with the sentiment that underlined links foster a usable site, however I don't think that links that aren't underlined would cause any usability issues as long as they are styled in such a way that sets them apart from the text or other elements that surround them. These are decisions that should be made design-time; when you wait until implementation to decide on link colors, you put usability at stake. Designs should be well thought-out and carefully crafted in such a way that the navigation scheme is clear to the user. Does this mean you have to underline links? Well, that depends on your user or audience. If your intended audience is internet-savvy types, I would think that you have a little bit more flexibility when it comes to link appearance. For public information and or government sites, I would tend to go with "standard" appearances.
In your case, I think you have a pretty strong argument; the links in question were in a box entitled "Menu," so the user already would have an expectation of something happening if they had clicked an item in that box. One argument you could make is that it sacrifices the look and feel of the site for usability, which decreases the overall user experience.
My general take on this: Pick a standout color for the links, make it consistant trhough all the site. Underline on hover only for menus, tabs, etc. And (optionally) underline always on links that are inside paragraphs.
Links, like anything that designates some sort of interaction, should standout among the other content of the page. This does not necessarily mean that the links should be underlined though. A cold and hard adherance to standards (underlined and blue) limits innovation by defining absolute boundaries. If you think of it in terms HCI design, users are visually drawn to those elements that look different then those things around them. Depending out how you layout different visual elements together, you can achieve that same level of automatic awareness of functionality without relying on those standard style definitions. Of course the challenge of trying to reinvent the standards is if you fail, then you are just going to end up confusing the user.
You're right, I think. If there is a "hard and fast rule," it's this: links on a web page should always have an affordance.
In other words, if the user understands he's meant to click on it, then it's usable, even if it's not underlined. It can look like a button, or a tag (like the ones on each page of this site), or a boxy menu with an arrow, or anything else a user recognizes from experience as something that's clicked on.
(Keep in mind that it's not enough to show affordance on hover. That's only partial credit. The user shouldn't have to mouse around the page and see which text "does something" when hovered over.)