This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Question Time: Visited Links

3rd July 2004

Around the table: Andy Clarke, Jason Santa Maria, Mike Davidson, D. Keith Robinson, Cameron Moll, Derek Featherstone and Simon Willison.

How should we represent the distinction between visited and unvisited links within our designs? Recently, a number of industry writers have sought to explode suggested guidelines and reassure us that it’s fine to experiment, so long as we consider the end user.

I consulted several established commentators in an attempt to consolidate these views, and reflect the broad range of methods in use today.

So, here we go. Let’s get deep down and dirty with pseudo classes, use of colour, visual ticks, readability, usability… and Jakob. Over to you chaps…

Links of all kinds

Should visited and unvisited links be distinguished by colour alone?

CLARKE: No and for a whole bunch of different reasons. It’s an obvious no-brainer to understand that some people/devices don’t see colour, so differentiating visited and unvisited states by some other visual device is important, be it a change in contrast/saturation, underline/strikethrough or nifty tricks involving background images. The key to the riddle is setting styles that do not rely solely on colour, contrast or images.

SANTA MARIA: I believe this to be a matter of personal taste.

DAVIDSON: I guess colorblind people would say no, and from what I understand, colorblindness (especially of the red/green variety) is a lot more common than people think. You could extend the concept from colour to contrast whereby a visited link would contrast less against the background than a non-visited link, but you’re still going to run into people who for whatever reason have trouble telling the difference.

ROBINSON: No. Color shouldn’t be used as the sole way to convey any meaningful information on the Web. Unless, you’re 100% sure your audience is sighted and not color-blind.

MOLL: Well, before I toyed with turning off underlining a couple years ago, and before newer methods such as the ticks came along, I would have said color is sufficient. Seems more options are opening up now. At a base level, yes, color is probably sufficient. But as users (likely) begin to adapt to newer methods, why not go beyond color?

FEATHERSTONE: Despite the fact that that is one of the oldest conventions on the web, and that it is likely enough for the average user to distinguish between visited and unvisited, I’ve recently been thinking about it, and I don’t think it is enough…
A lot of my thinking on this is prompted by working with screen reader users in accessibility testing. It is interesting - because they can’t rely on the visual, they rely on code. The screen reader user gets all kinds of metadata about the links (i.e., is it visited or unvisited, is it a link within the same page) regardless of what colours the designer used. Why shouldn’t non-screen reader users have access to the same data? With some of the techniques we’ve seen (like CollyLogic‘s ticks, Mike’s ticks and others…) we can get at that metadata for the links as well. Ideally I’d like to see a mechanism for easily distinguishing between links within your own site, and links that are external. Many sites do this anyway, but generally use a class=“external” or something on their links to accomplish it - it might be nice if browsers/user agents had this type of distinction built in.

WILLISON: I’m not completely opposed to this practise, but it’s important to take colour blindness in to account. It’s a good idea to check that the two colours are still visually distinguishable using a colour blindness testing tool such as the Colorblind web filter.

Do you make use of pseudo link styles on your site? If so, what prompted this decision, and how do the classes vary from your standard links?

CLARKE: Progressively more and more in my designs. I accepted that standard visited/unvisited behaviour is vital to usability and now look for ways to enhance usability through CSS.

SANTA MARIA: Yes I do, the visited states of all my links are a lighter color. The decision was made to improve usability and navigation.

DAVIDSON: I use bold maroon dotted-underlined text for my normal links because I just think it looks good.  In the past, my policy has been to reduce the saturation and the contrast of visited links to make them look “less active”.  I think this is generally a good policy for public sites, but Mike Industries is a bit of a testing ground for questionable material so I thought I’d try something new. By specifying the unicode character for radical in an :after pseudo class for my visited links, I now display a small light grey checkmark after my visited links. This was subconsciously inspired by the checkmarks on CollyLogic and I really like the effect so far. Although a few people have suggested the checkmark be placed before the link and not after it, I feel the readability is better the way I have it. The generated radical doesn’t display at all in PC IE but I can always hack around that by using an image for IE people if need be.

ROBINSON: I do.  At least within the content of my post, but to be honest, it’s a rather subtle effect visually.  I’ve thought about making more extensive use of the visited pseudo style as I find it very helpful as times in my own experience using the Web.

MOLL: I don’t really make use of such. Probably the most extensive use I’ve done is on Espeakers for content-specific links that needed different styling, e.g. no underlining for entire blocks or color-themed links.

FEATHERSTONE: What prompted it? Not sure, but I’ve always used them - though not always in the same ways on different sites. It is dependent upon context and design. Even then, I don’t always use them differently within the same site, either. Text links for nav bars and blocks are usually exceptions and I generally give them mostly the same style whereas links in the body text are different. I generally leave all links in the content underlined. In one case, unvisited are underlined, one colour with font-weight of bold, and visited are underlined, another colour with font-weight of normal. Links that I use in navbars/blocks tend not to be underlined, as they are usually distinguished as links by their surrounding context and their labels. If I do take the underline off, I usually bring it back with :hover, but not always. Again, its dependent on context and design - different font-weights may work with some designs but not others…

WILLISON: I’m a huge fan of :hover styles to distinguish links, as I think they give a very good impression that a link is “active” content. I find them particularly effective for navigation bars.

 

In your opinion, do visible check marks or ticks in a sidebar (such as on CollyLogic) enhance usability? Do you feel such methods clash with other link styles on a page (lack of uniformity)?

CLARKE: It depends entirely on the particular design, but I have said before that the ‘ticks’ are a neat usage and do enhance usability on sites (like blogs or news sites) that contain a large number of links.

SANTA MARIA: Yes and no. They make sense to me, but they are used in my culture to signify approval or completion of something. I would venture a guess and say that they may mean something else to other people. I don’t believe it’s as intuitive as say a lighter shade of a color, but that may be because its a new treatment that is still be adjusted to… also because I have seen people use check-marks as bullets in lists. [There is no clash] if the designer knows what they are doing. It wouldn’t clash if used properly… no more than say, a particular color or ugly photo. It’s up to the designer to make it work.

DAVIDSON: I feel like they enhance usability a bit, but not necessarily in a mission-critical way. If accidentally revisiting visited links was a destructive behavior, then I think the treatment of them would be a lot more important. But the fact is, differentiating between visited and non-visited links is more of an added convenience for users and not so much a make-or-break piece of functionality.

ROBINSON: I do! I find them very helpful and see them as a great, accessible, usable visual way to convey visited links.  As far as the method clashing goes - I guess it really depends on the implementation of the method.

MOLL: My $.02? It’s all about balance. There’s a point at which informing a user that s/he’s visited a link by utilizing color change, underlining, and checkmark becomes excessive. Like “I get the point, thank you.” But used properly, checkmarks and the like seem to have a shot at enhancing usability, yes. All in moderation, baby. All in moderation.

FEATHERSTONE: The nice thing about a sidebar of links is that it is somewhat distinguished by its context - it is separate from the body and usually in some type of container of its own with a label. These sections of the site are already distinct from the content anyway, so I don’t see it as a problem to make links in one section different from that in the content. Even a sidebar of links is usually distinguishable from main navigation. The basic principle in my mind is to make sure that links are easily distinguishable. Whether it is underlining or otherwise, distinction is the key…

WILLISON: It’s a tough one to call. Check marks are certainly a neat effect, but as they are currently very uncommon it is unlikely new visitors will make the mental association between a check box and a visited link. Once repeat visitors have made the association check marks are certainly more instantly visible than a simple colour change.

 

Mike Davidson is implementing tick-marks within articles and general links, often mid-sentence. Does this blanket method of representing visited links aid usability, or obstruct readability?

CLARKE: Personally I feel that while an interesting usage, it adds little to usability over an altered link-text state and could be seen as adding visual clutter.

SANTA MARIA: I think he does it well, but it could still be considered confusing to someone unfamiliar with check marks.

DAVIDSON: With regards to this particular issue, I think it is actually more important in mid-sentence context than in things such as link sidebars. Here’s why: In something such as a link sidebar, your items may look something like this: Mezzoblue, Stopdesign, Zeldman. As a user, I pretty much already know whether or not I’ve been to those sites.  But in a sentence, I may see something like this:
<a href=“article.html”>Zeldman explains that it’s important to know your audience</a> when you’re designing a website.
In this context, as a user, I’m not really sure where that link points to since it’s part of a sentence and not just a reference to Zeldman. But if it’s visually differentiated with a checkmark, I can infer that it’s talking about a specific article that I’ve already read. The same is true for more cryptic mid-sentence references like: It is true that <a href=“article.html”>people just don’t feel the need to switch browsers</a> right now.

ROBINSON: I don’t know, to be honest.  When I first saw it I really liked it, it was very interesting if nothing else.  As far as readability, it would really need more study. It didn’t bother me. But, like most Web readers I’ve watched, I’m a scanner.  I scan links anyway and I didn’t feel this tick method Mike uses obstructing in any way. When I really want to READ something I print it out. This behavior is pretty common among users I’ve seen.

MOLL: See my previous answer.

FEATHERSTONE: That’s a tough one - I’d almost like to see some metrics/testing on that - it might actually do both - aid usability AND obstruct readability. Readability is a tricky subject - I recall some references that measured readability and line-length. Performance was better with longer line lengths, but users preferred short line lengths: see Reading Performance or User Preference.
While readability and speed may be impacted by those extra inline ticks because of them being “distracting” or what have you, the trade off in usability may be worth it - users may find they are able to read slower, but that they actually prefer to have the ticks to provide more information or context. Performance vs. preference.

WILLISON: A bit of both for me. I actually found Mike’s inline tick-marks a lot less obtrusive than I thought I would, probably because he only uses one or two links in each of his entries.

 

Would you ever support a standardised link styles methodology, such as blanket use of underline for a:link, or blue for the link colour?

CLARKE: Hell no, but I do think that adherence to general usability accessibility guidelines are vital, however you choose to implement them.

SANTA MARIA: No. I think it’s a bit limiting to standardize usage as an underline, check marks, colors, etc. Links are (obviously) such an overwhelmingly important part of any website’s navigation that it can be essential at times to have them mesh seamlessly with the content and support of the overall design. If I have to adhere to visual guidelines like that for my websites, I will go mow grass for a living.

DAVIDSON: I would never support standards for anything that involves blanket declarations for colors.  There is just too much visual variety on the web to dictate that everyone’s links be blue or everyone’s visited links be purple.  I do, however, subscribe to the general belief that visited links should look “less active” than unvisited links.  I don’t have a problem adopting this philosophy throughout all of the sites I work on, but like everything else in web design, I feel it’s a personal choice. Do what you think your users will like best.

ROBINSON: Nah. What’s the fun in that? But seriously - it depends on the link.  Sidebar links are different than content links.  Anyway, those “conventions” I think have been safely broken.  I do think that when placing a link in a block of content you should underline it - I always do - but there could be other ways that will work.  When in doubt - test with your users!

MOLL: Well, we’ve already got that - Jakob’s law, as you call it. Surprisingly, I’d follow standardized methodology surrounding the issue if there were enough evidence to support it (perhaps there already is), the same way I’d support standardizing on which side of the steering column the wipers control is located. (I hate that when I turn on the headlights in my wife’s car thinking they’re the wipers.) But I’m positive users can still navigate without a problem if link styles are used appropriately.

FEATHERSTONE: I tend not to stray too far from that path already to be honest - even if I did though, IMO, it is more important to support standardized principles rather than methodologies. Things like “make sure content links are distinguishable from the rest of the text” make more sense than a blanket methodology for styling links with colours and underlining.

WILLISON: Absolutely not. Design rules for links differ in different contexts. A good example is navigation: a list of navigation links down the left hand side of a page do not need underlines because their positioning within the design makes it clear that they are links. Underlining is a very good idea for inline links in blocks of text but isn’t as important for links that are already obviously active.

 

Finally, Jakob states about visited/unvisited links: “The two colors should be variants or shades of the same color, so that they’re clearly related. Using drastically different colors (say, orange and green) makes it hard for users to understand the relationship between the two types of links and to identify which color is the “used” version of the other.” Seeing as many of us use drastically different colours, do you agree with this suggestion, and should we listen to Jakob at all?

CLARKE: Users are cleverer than Jakob sometimes gives them credit for. But this does not mean that Jakob isn’t making a very important point on this topic.

SANTA MARIA: I half-agree. It is a simple design issue. I believe that links, if given a “unused” and “used” states, should relate in that the “unused” should have a visual hierarchy which is greater than that of the “used” state, and doing that is not brain surgery. There really is no excuse for overtly confusing your visitors with random color usage.

DAVIDSON: This is one principle I definitely agree with Neilson on, but I wouldn’t necessary expect others to agree as well. It’s your site so do what you want with the link colors. If you use completely unrelated link colors, the learning curve for users to figure out what’s going on will clearly be a bit steeper, but you might be okay with that. If your user base visits your site multiple times per week, it shouldn’t take them long to figure things out. Just be mindful of the fact that new users may not “get it” at first.

ROBINSON: I’m calling BS on Jakob with this and would challenge him to prove this behavior.  The problem here, as I see it, is one of accessibility if anything.  As I mentioned before, color alone used to convey information can be a problem for colorblind and non-sighted users.  But Jakob is talking about “regular” users, and his logic, IMHO, is flawed.  I’ve never seen a “regular” user remark on this or in anyway react to it. Now, I’m quite sure Jakob has much more experience with users than I do, but, honestly, I don’t think this is even an issue as long as you, again, don’t rely solely on colors to convey this information.

MOLL: I prefer the term “spent” instead of “used”. I think this recent advice from Jakob is fairly reasonable. Hence, the spent grey color of my links verses the unspent red. He’s finally gotten over being bent on blue and purple as the absolute rule, and I’m fine with color-themed links if, again, they’re done properly (which is subjective, I know, but you get the point).

FEATHERSTONE: If the colours are too close together is that they become tougher to distinguish to some users. Again, I’d say that the important principle is to show that the links are related - making them the same colour for visited and unvisited but differing in font-weight might be just as effective a method and perhaps even more clearly demonstrate the relationship between a visited link and an unvisited link. After all, they are the same link - and that doesn’t change after its been visited…

WILLISON: The challenge is to pick two colours that are obviously related in some way, with one colour (the visited colour) slightly less prominent than the other. This is a difficult thing to get right, and Jakob’s suggestion of using two colours of the same shade is a simplification of the real underlying problem. As with much of Jakob’s advice, it’s useful to consider but doesn’t need to be treated as a hard and fast rule.

Responses

# Jason Santa Maria responded on 3rd July 2004 with...

Hey now, according to dictionary.com “colour” is actually a variant of the widely accepted “color”. See for yourself. We yanks aren’t all that bad :D

I would have written more if I knew you were going to use it all. Great article my good man!

# Simon Collison responded on 4th July 2004 with...

Blimey Jason, that’s a comprehensive definition. I happily stand corrected! I ended up using all of the responses in full because there was so much quality feedback. Link styles are such an obvious, necessary element that it’s so easy to overlook their implementation, and it’s refreshing to get your alternative views.

# Mike D. responded on 4th July 2004 with...

Great writeup Colly.

As for the issue of color, the Limeys could probably argue that since they are allegedly the inventors of the English language, their original spelling of colour is the correct one. And certainly, the Oxford English Dictionary would agree with them.

BUT, since Canadians also spell it “colour”, and Canadians are always wrong, that means the Yank spelling is, by deduction, correct.  :)

# Jason Santa Maria responded on 4th July 2004 with...

Well, my friends, not to split hairs again, but… have a look at the Online Oxford English Dictionary’s definition of colour. Ok, yes, “colour” in UK, “color” in the States… but what is that at the bottom? ” ORIGIN Latin color.”

haha, it’s funny to debate things which have almost nothing to do with gigantic article above, sorry simon ;)

# Derek Featherstone responded on 4th July 2004 with...

C’mon now Mike, Canadians aren’t always wrong - I suppose you’re going to tell me that favourite is really spelled favorite, and that its “zee” not “zed”? ;)

Truthfully, what I really find odd is that despite the fact that us non-Americans all spell colour “colour” in our writing, we have absolutely no problem spelling colour “color” in our CSS. Without hesitation. At all. It just happens.

Great job putting this all together, Simon!!

# Malarkey responded on 4th July 2004 with...

Errr, veering dangerously back on topic…

Great article Colly, a pretty definative overview of current opinion and a comprehensive set of links.

Anyone sent Jakob a link?

# Mike D. responded on 4th July 2004 with...

And to Derek’s point, if everybody spelled it “colour” in their CSS files, we’d all be perfectly in line with Jakob Neilson’s blue-and-purple linking policy.

# Dave Child responded on 4th July 2004 with...

An excellent article. I ever really attached that much important to differentiating visited links, and at the moment just use a subtley darker shade of the same colour on them on my site. Now I’ve read this I’ve got no excuse not to improve things!

# Simon Snorkeller responded on 5th July 2004 with...

I reckon consistency is key here. No matter what styles or mixtures of styles you use, the user needs to clearly and instantly understand what’s a link and what’s not.

And it’s not just about usability. From a branding standpoint, link styles can speak volumes about both image and values. A great example is the 37signals family of websites - all use a simple, usable and consistent link style which fits their design schemes and alludes to their message of simplicity and clarity.

# James responded on 6th July 2004 with...

Thoughtful stuff. I’m in the process of building a complex, multi level site at the moment with a million different link styles, so good timing. I’m not keen on the inline ticks though - unless they are next to stand-alone links like ‘comments’ or ‘trackback’ etc. Otherwise they seem to be a bit obtrusive.

# Simon Collison responded on 6th July 2004 with...

I agree about the 37 Signals suite of sites. Great use of yellow text highlighting with links within on their main home page (the Q and A section). And there’s a large variety of pseudo styles throughout, none of which are big on colour differentiation, mostly tonal. It’s not completely consistent though, some variations on Signal Vs Noise blog, but still it all works contextually.

As for sending Jakob a link, do we think he’s discovered referral logs yet? If so, is he happy with the link states they display? It must be a nightmare for him…

# pINTU Sharma responded on 6th July 2004 with...

There are varios ways of expressing this and we can acheive the target in unlimited ways , each of them good and expressive. Defining Rules will kill creativity.

# James responded on 6th July 2004 with...

Agreed. I don’t think any of these guys are suggesting we restrict creativity. However, all of us have seen terrible examples of ill thought out link styles and methods I’m sure.

And surely, with the advent of ‘standards’ in CSS design, we have not killed creativity, more enhanced it. Rules can be very beneficial. I think the question was a dig at Jacob.

# ITIL Consultant responded on 12th July 2004 with...

Well, just to continue on the great ‘colour’ discussion….even in scotland its spelt colour! WHOS WITH ME! :D :

 


ITIL Consultant

# Sue responded on 6th August 2004 with...

If you don’t mind, I’ll stick to the French way of spelling colour, “couleur”. ;-)

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 227 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

There are 15 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.