Oct 29 2008
Help a User Out – Underline Links
I was reading a great post over at Usability Post about the top usability mistakes of websites. I got thinking about higher education websites and if we’re guilty of breaking any of the top 7 rules. Of course no website is perfect and probably *every* higher ed website breaks at least one of the rules.
To tell you the truth, this is really a rant about why we should still be underlining all content links. If links *can’t* be underlined for some weird reason, the contrast should be *dramatic* between the color of the link and the color the non-linked text. Dramatic. I’m not sure why content links *couldn’t* be underlined, but I’m sure there is an exception out there (maybe your Web Style Guide says don’t underline? Even then, I think I’d defy the style guide).
Remember, “don’t make me think.” You can argue that users are more used to seeing non-underlined links now, but it still makes users *think* about what’s a link and what’s not a link.
According to Jakob Neilsen’s alertbox about visualizing links, there are two exceptions to underlining links:
… navigation menus and other lists of links. However, this is true only when the page design clearly indicates the area’s function … Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites.
Incidentally, also mentioned in the Alertbox … all green or red links should be underlined for colorblind users.
Anyway, I was just thinking about link styles today. Any strong opinions about underlining links?
Update: I actually just realized that my links are a dark green. The contrast should be more (even though the links are underline). So, I’ll be changing that to a more *contrasty* green.
Nice little simple reminder. Point well taken and something everyone should just double check.
Had never thought of the colorblind issue with red or green links…a very valid point! I agree with you that if you’re not going to underline, there has to be some sort of contrast to set them apart, even if it seems obvious to *us* that the user should know its a link.
You know, earlier today I was perusing Matthew Oliphant’s site redesign (well, perhaps I should say site shift, since he went from usabilityworks.org to xhipi.com), and it is *highly* usable. While he doesn’t underline links, in much the same way, Matto does make links very obvious by contrast. Posts are white text on gray background, while links are hot pink—with visited links being a not-as-vibrant pink. Easy to see, easy to use, and it is very clear and user friendly (sample post here. I find it interesting that, for some reason, this has become a theme for me today. Still worthwhile to come back and review the basics. For as much time as I spend on the web, it still pains me to have to mouse over text before I can figure out where the embedded links are.
And I’m glad I wasn’t just imagining that your links used to be darker green. Viva la difference!
Hi Shelby,
Thanks for mentioning my article
I like underlines and usually prefer to use them — not quite sure what I was thinking with my theme design where I left them out, though I’m working on a new design where I’ll make sure to underline links. The great thing about underlines is that you don’t need any drastic color differentiation as you’ve mentioned, they’re very easy to spot and everyone know what they do.
Thanks so much for your comments everyone.
@Kyle and @Karlyn – I think sometimes it’s important to get back to basics. We can drive millions of users to our websites, but it doesn’t matter if our websites are not easy to navigate and use.
@Robin – While the hot pink links on Matt’s site are very *contrasty* (I love that word), I do think the bold style of the blue font with the dark background is confusing. Are those links? I’m not sure until I hover over them. I understand that Matt is going pink for October, though, so that’s cool with me. Very cool, actually. We need more men like him in the cause.
@Dmitry – Totally agreed, although I’m not sure it’s good to have the link color be the exact color as the body text – especially for users who are not web savvy.
As a side note, the reason I think underlines are so important is that sometimes we use different colors for bold, headings, or other emphasis. If we don’t use underlines, it’s *essential* that we do not use different color font for any other reason unless it’s *obviously* main or sub navigation.
[...] Underline Links, People – A quick reminder to make sure your links on your website are still underlined. [...]