Guides for Visualizing Links

19 May 2004 • design | Design • PermaLink

I just came across Jacob Neilsen’s Design Guidelines for Visualizing Links.

It’s an interesting read, with many valid points. In summary:

Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.

I read through his guidelines and by and large, agree. The hints about colour selection are quite useful, especially as they pertain to colour-blind visitors (I read somewhere that 10% of all males have some form of colour perception difficulty).

Naturally, I reviewed my style sheets here with his suggestions in mind. One disagreement I have though is with this guideline:

Use different colors for visited and unvisited links.

Why? To let the user know that he’s visited that page already, I assume. But, in all honesty, don’t you think your users are smart enough to know that already? If I provide a link to somewhere on my site, you read it and come back, I’m going to assume that you’ll remember that you’ve already visited that page on my site.

Nielsen suggests that visited links “should look ‘used’ (dull and washed out)”. I think all that serves is to make the link less visible.

Different coloured visited links would be useful, in my opinion, if they could revert to the unvisited look if the content of that page changed since your last visit. But you can’t do that with CSS.

One thing he doesn’t suggest is distinguishing between links that are internal to the site and external links. For example, this is an internal link, and this isn’t. I think it is especially useful if your external links are configured to open in another browser window … just to give a “heads up” to the user that something special is going to happen when you click it.

(And no, the external links on this site don’t open in a new window. Just my personal prefernce … and the default behaviour for Textpattern).

Comments

  1. No, I’m not smart enough. I always forget what I have clicked so far, because I switch between several tabs. Especially when there are lots of links in the text.
    — orban
    19 May 2004, 12:47 • PermaLink
  2. Got to agree with orban, especially if you’re running Firefox or Opera with a lot (and I really mean a lot) of tabs, you tend to forget where you’ve been. I guess your suggestion for CSS to be able to differentiate between internal and external links, and also updated links should get into CSS 3.0 .
    — Phil Yusenda
    20 May 2004, 06:01 • PermaLink
  3. I agree again with orban about visited links being a different color. But I disagree with you about external links. I do not want them to open in a different window. I use Firefox, which has great tab support. I like having a different look for the external link, but please please please, let me decide where the link goes. If I want it in a new window *I* will do it myself.

    I personally don’t want my desktop cluttered with tons of windows. I like tons of tabs, but only one or two browser windows.
    — Lonnie Olson
    20 May 2004, 12:32 • PermaLink
  4. Lonnie,

    I agree that links that open in another window aren’t the nicest thing, especially if you are using a tab-capable browser (pretty much everything these days except MSIE, I think).

    Hopefully, there will be an addition to the HTML specification that lets you set a target property for links that open explicity in a new tab (in the same way target=_blank opens a new window).

    You’ll notice that external links from viebrock.ca don’t open new windows. I’ve just used CSS to indicate which links will leave the site … so you can right-click and “Open Link in New Tab” to your heart’s desire!
    — Colin
    20 May 2004, 12:40 • PermaLink
  5. Speaking of the Nielsen article, have you seen the following one?

    Nielsen gets a makeover

    Phil: I know what you’re talking about. I would like every browser (and designer, that is) to be capable of :before or [href=...].
    — Kronn
    22 May 2004, 10:20 • PermaLink
  6. Little typo in the last sentence: “prefernce”. Sorry, can’t help me, always see these things ;) Good article though! I think e.g. navigation-links don’t have to be marked visited, others make somehow sense. It would be very if CSS 3 noted updated pages.

    Btw.: Very nice page you have :)

    Alain.
    — alain
    4 June 2004, 12:22 • PermaLink