Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

quick tutorials

Visited links revisited

A while back, some time after I finished the latest version of the westciv site, amongst my fan mail, was an email pointing out that the fact I chose not to indicate visited links was a major drawback of the site. Of course, I sent a polite response explaining my position and then promptly ignored these comments, as I do all criticism, constructive or otherwise :-)

But then, something did niggle me about this point. The decision had been something I had put some thought into, weighing up the loss in terms of design simplicity against the gain of extra navigational info given to the user. I decided to do a bit of a literature review (because it's just possible I'm not always right, and I don't in fact know everything - sometimes) and found that there was in fact a bit of controversy over this a few months ago. Of course, as with so many things web design, there aren't really any clear cut answers that you can apply to every situation, but, for my own site at least, I've changed my mind.....

What do the experts say?

The controversy started (no surprises here) with a Jakob Nielsen edict: Change the Color of Visited Links. As the title suggests, this piece took the usual, convincing, black and white Jakob Nielsen approach. Broadly, if you use the same color for visited and unvisited links, usability tests show that visitors to your site are more likely to become confused and lost, to move in circles, and to give up looking because they can't remember where they've been and they haven't been. According to a statistic in the article 74% of web sites do use different colors for visited and unvisited links, so you are supporting a convention that your users expect.

For an opposing, and equally convincing view though, take a look at what another thoughtful and well respected person, Andrei Herasimchuk, has to say. Andrei demolishes many of Jakob Nielsen's points, queries a lot of his statistics and does a good job of questioning the blanket rule that visited links should always look different to unvisited links. I think his ultimate point is a good one: there is no blanket rule. Yes, sometimes it is good to distinguish the two types of links, but there are also times when it isn't just "less attractive visually" (the only argument I've ever used), but also counter-productive. For example, think about when content at a site is ever-changing: what does it mean to tell a user they have been to a particular URL previously, when the page that appears at that location could well have changed?

I would add to this by saying that at some sites (and I would include ours here) the user's needs are in fact ever-changing. We get a lot of return traffic at our site: in particular people treat our CSS Guide as a reference, returning to it again and again to search for different things. So, while it might be handy the first day someone visits to be able to see from the navbar which sections of the guide they have already been to in looking for a particular piece of information, when they come back again tomorrow, looking for something else, having the links display in this way will be no help to them, and may in fact be confusing.

So, the short answer is, there are no answers. The long answer is you really need to think this through for every project, and do so in the context of the good information you'll find at the two articles linked above.

How does this apply to the westciv site?

Here was my thinking regarding the westciv site. For two reasons, I decided to leave the navbars on the right as they are, with no indication for visited links. Firstly (and Jakob Nielsen would hate this reason), it can be hard to do this without making the navbar look messy and ugly. In particular it's hard to do this if you've done the right thing by your users in the first place and made the text in your navbar relatively large, as I have. Secondly, as I said above, a lot of our users come back again and again looking for different things. Indicating to them that they've been to a page before will often be meaningless. Last of all, as Andrei explains, the navbar and its organisation is a cue in itself to help people see where they are and where they've been.

What about links in the main text? I decided to go the other way with these, in a sense because the situation is quite the opposite of that for the navbar. I don't think it makes the page look ugly when you make this change here, especially when unvisited links are simply the same color as regular text (oops! another Jakob Nielsen no-no....). Changing the link color here too actually does aid navigation. To explain. When I make links in the body text, they don't tend to be in lists, but rather they are individual references to other pages that happen to be relevent to what I'm talking about at that time. So, while they're in context in terms of what the text around them is talking about, they're out of context in terms of where they fit into the site navigation as a whole. By coloring them differently I'm giving users just a bit more information which will help them decide, as they are reading an article, whether or not they want to follow this link.

How should you indicate the difference?

So, once I'd decided to do this, the only question was, what's the best way? The most standard thing to do is to change the color of the linked text in some way. The consensus is that the color of unvisited links should be more vivid, brighter and saturated than that for visited links, which should look "used", ie, a more dull and washed out color. Commonly, developers use a paler version of the color they use for unvisited links. FWIW it's worth, here's a small experiment someone conducted showing that changing the hue as well as the value of the color is not a good idea.

In my instance, the link color is a dark grey, #3e3e3e, so I lightened this down to #6c6c6c. It can be a bit hard to find the right value here, depending on what your regular link color is. The visited color needs to be sufficiently more pale to be distinguishable from the unvisited color, while at the same time not becoming unreadable. I thought that #6c6c6c wasn't different enough to #3e3e3e. But I didn't want to go any paler, so came up with an additional visual cue. Instead of having the regular underlining on the visited links, I gave these a dotted border-bottom, of the same color as the text. This added to the washed out effect whilst maintaining a text color that people will be able to read.

a:visited {

color: #6c6c6c;

border-bottom: 1px dotted #6c6c6c;

text-decoration: none;

}

All in all I'm happy with this decision and the implementation I came up with, but don't be afraid to make your own choice here at any stage. For example, you can just do what I always did and ignore the issue. If you decide to go with changing the appearance of visited links, another option is to use line-through as your text-decoration.

a:visited {

text-decoration: line-through;

}

Westciv Self Paced Courses

Learning web development using HTML 4, XHTML and CSS is easy and flexible with our hands on, self paced courses.

Took me from overwhelming confusion to understanding. I am now using XHTML and CSS for all of my Web development projects.

Don Sambrook, Softwork Orange

A lot of the reading I found did disagree with this technique though, and I do see it myself as being unnecessarily messy.

But, while I don't like line-through when it's used within body text, it can look OK in a navbar if you decide you want to indicate visited links here. And there are plenty of occasions where I do think this is a good idea as well. A lot of the early designs at the csszengarden used to do this, in particular for the listing of the different designs (something most people would go through once only, not return to again and again). The easy thing to do with a navbar is just use line-through, but there's room for quite a bit of creativity here too. Here's a very nice technique indeed involving visited links being ticked off as you go through them. I've seen other people do this but none as neat as this and the best bonus is that the guy who created it, Simon Collison has even gone to the trouble to create an easy to follow tutorial so you can do it yourself.

Still can't make up your mind what to do?

If you're a true glutton for punishment and you want to read even more widely on this subject, check out the comments on this blog posting at whitespace. Seriously, there are lots of really smart and experienced people who comment here so if you have a particular situation, do take a look. Also, feel free to email me via our site contact form and let me know what you think of my decision for the westciv site.

Style Master CSS Editor

Web Directions Conference