Been There, Done That

For whatever reason, I often struggle with visited link treatments, perhaps because (for me) it’s often an afterthought. A color palette is selected, the page is designed — now it’s time to figure out how best to show that a link has been visited. For most sites, it’s important to visually signify where the reader has been, and not everyone handles it in the same manner.


Some will tell you that changing the color of a visited link is the most appropriate treatment. I tend to use this most often, but on a link-heavy page, finding the right color balance between visited and non-visited can sometimes alter the personality of the page.
There are scores of other creative methods for handling visited links (e.g. CollyLogic, Mike Davidson and Lisa McMillan‘s checkbox lists, as well as any number of border/background/color combinations using CSS).
Know of any noteworthy visited link treatments? What do you think works best?

52 Comments

  1. The way I treat them on my personal blog:
    text — blue, every time (no tone change ever)
    not-visited — blue dotted border-bottom
    visited — gray dotted border-bottom
    hover — blue solid border-bottom, regardless of having been visited.
    I’m, although, considering not to explicitly define color for hover, so that the solid border is blue/gray according to the link’s (not-)visited state.
    Generally, I also find changing tone (not color) a nice politics.

  2. Daryl says:

    I generally make the visited style the same look and feel as the hover.
    I’m not a big fan of the checkbox, I find changing the colours are often visual enough.

  3. Ryan says:

    I usually replace the link with an animated gif that spins and reads “Been there!”
    HTH

  4. Bernd says:

    I have decided to strike through the links (Essential Bookmarks Collection) because it seem to be logical. But the readability is not as good as before.

  5. Adrian says:

    I use a subtle change in colour to do this, largely because it’s both easiest to implement and easiest to ignore.
    I’m still out on weather visited links should be shown. Sometimes it’s useful, but not always. The problem is, that the user has no control over it. Click a link and it’s marked. ‘X’ Weeks later it’s unmarked. That’s all fine and dandy, till I click on a link, see it’s not what I want, and then click on another link. But I might want to come back to the first link later on. Except now I have a visual sign telling me “no .. don’t go there … you’ve already been there .. you don’t need to go there … it’s nothing new. Now I might not want a link marked at visited. Especially when I just glanced at it, which in my book isn’t really visited.
    So by styling them with something subtle, it’s easier to ignore the when you want to ignore and see when you want to see.
    The tick box stuff looks very groovy. Stunningly cool. But I’m just not sure it is that good an idea, being that the user has no to little control of the ticks being put in place. What if I want to ‘untick’ a box. I can’t, but my experience with tick boxes says I should be able to.
    But I do think the tick boxes and other fancy ways (I saw an implementation somewhere, where visited links where scratched out like with a pen) of showing visited links probably have their place in very specific understood instances.
    For general use I would go with subtle colour or none at all.

  6. Hunox says:

    I try to stick with original – blue/purple combo. I usually highlight all links bold and visited are not bold.

  7. Kim Siever says:

    Usually, I rely on the browser’s default colours.
    When I have a page that uses a colour scheme for the links, then I try to make the visited links lighter than the unvisited one, and I remove the text decoration.

  8. Strikethrough and checkboxes are the wrong visual treatment because they signify something other than “I’ve been there before but I can still go back if I want to”.
    Strikethroughs imply “can’t” or “don’t”, as in the thing doesn’t work or you shouldn’t do that. Also, it’s very hard to read links that have been struckthrough.
    Checkboxes imply “completed”, as if you’ve already done that and you don’t need to do it again.
    Alternatively, the right treatment should imply that it’s something that you have done, is still available to you, and you’re free to do it again if you want to.

  9. I am currently using this model:
    Link: brighter color, underline
    Hover: link color, no underline
    Active: visited color, no underline
    Visited: text color, underline
    I also use shades (like light blue/lighter blue).

  10. ACJ says:

    It much depends on the project which method I used (I used many).
    The site I’m currently working on uses a user defined color scheme, but I want the indication of visited/non-visited links to be global. Therefor I choose to underline links; remove the underline when the link is visited; and return the underline when a link (visited or not) is hovered.
    For the current design of my personal site [emphasis on personal], I provide no indication what so ever.

  11. Peter Akkies says:

    I place a tick image after every visited link. Visit http://www.peterakkies.com, click a link and see for yourself.

  12. I like changing tone to one closer to the body copy for normal links.
    Linkrolls I think can do with some more clarification, where I regularly use strikethroughs.

  13. I’ve always tended to go with a slightly desaturated version of the normal link color for visited links. They stick out less, but they’re still readable.

  14. Craig C. says:

    I usually use a lightened and desaturated version of the regular link color, so that once it’s been hit the link looks “spent” but still viable.
    Links and link states should usually be distinguished by some decoration other than color alone, to accomodate color deficiencies in people and devices. I like a solid border-bottom on unvisited links and dotted on visited, which works well with the spent effect.
    There’s a trend towards bolded links which go normal weight when visited, which is nice since we’ve become so used to “unbolding” things to indicate when it’s been read. This can look pretty crappy in a menu though, so unbolding seems to work best on inline body links.

  15. Feaverish says:

    I briefly toyed with having a dashed border completely surround links, that turned to a solid border after being visited. It looked nice on a page with only a few links, but not so nice as, say, part of a list.

  16. Dave says:

    I am not a fan of the strike-through. It clutters up the site if it is link heavy. I prefer the usually color change, or nothing at all.

  17. For me, I prefer a slight change in tone to identify a visited link. Recently though, I’ve not been too bothered and only change colour on a:hover.

  18. I’ve thought about this one as well. Right now I have my unvisited links set in color — blue, for example — and the visited links underlined. It seems to work pretty well I think. This method is only good if you keep the link color consistent throughout the page though.

  19. Björn says:

    I think to change the colour is the best way. I like to “bleach” the visited links and remove the underline. They’re slightly differentiated from the normal text. So they’re kind of deactivated but reading stays runny.

  20. foamcow says:

    Nobody ever visits my links so it’s never come up as a problem :(

  21. shane says:

    I dislike the strike-through for visited links. I feel that for a typical user, it looks as though the text has been crossed out because it is in some way invalid, erroneous or out-dated; quite simply I don’t believe that the strike-though gives the right impression.
    I prefer to use a slightly darker colour for visited links – enough to make a distinction, but no more. They should still look like links.

  22. When I do choose to use visited styling, I follow the “burn” rule in color choice. If it is blue normally, it turns into navy blue and so on.
    To a large extent, I don’t think it matters if you tell someone they have already clicked a link or been somewhere already. I have never been to a website where I could not remember if I clicked something or not, but then again, I would consider my browsing “skills” to be advanced. I think in the real world, readers are much more intelligent than we sometimes make them out to be.
    I think there is a transition into a time where it is becoming less and less neccessary to educate people on the basics, particularly on the web. Basically, we’re not as dumb as we used to be.
    But, with this in mind, I have to say that your method should depend on your target audience and where it is being used (ie. inline tag lists and other link-heavy sections).

  23. Completely agree with Fernando. The “burn rule” as he puts it, is what I tend to use in most cases but like he says, users are smarter than we sometimes give them credit for.
    I believe so long as the link is clearly identifiable then it does not really matter what colour it is. I think that the “a:link” and “a:hover” are the most important things to get right.

  24. Davezilla says:

    I think in the real world, readers are much more intelligent than we sometimes make them out to be.
    All I can say to that is, you’ve obviously not sat through many Web usability sessions. People have boundless dimensions of stupidity.
    ;^)

  25. Denny says:

    I don’t normally put much consideration into the visited link styles (although I probably should), but one thing to think about for those of you who do: colorblindness.
    It might be hard to find an appropriate color scheme to account for every type of colorblindness, but a visual indicator such as the checkboxes or tickmarks might be a good idea in this case…
    I for one am colorblind and sometimes have a hard time distiguishing between what is a link and what isn’t if the designer turns off text-decoration and doesn’t use strongly contrasting colors. So it’s safe to say that it’d be equally as hard to tell the difference between visited and unvisited links if they were a similar brightness of, say, purple and blue, and had no text decoration or visual indicators associated with them.

  26. Jake Tracey says:

    Browser defaults are usually best I find, especially for body text. For side links, strikethroughs seem to be becoming more common, and I like it.

  27. John Waller says:

    >>To a large extent, I don’t think it matters if you tell someone they have already clicked a link or been somewhere already.
    Jakob Nielsen has usability evidence to the contrary.
    In this case, I agree with his position and I usually change the colour of links consistent with the color palette of the website. No other visual treatment.

  28. Gordon says:

    yes those little checkmarks, ticks and whatnot are very clever but I hate them!
    More visual clutter is not the answer I don’t think, I go with either changing the tone or colour to indicated visited links. Links should be obvious from the rest of the text, and I tend to make them closer to the text (in shade/tone or colour) once clicked.
    Sometimes removing the underline is enough as it lowers the “punch” of the links visual impact enough.
    But please, don’t ADD more screen clutter.

  29. Colly says:

    To counter many of the comments regarding ticks, clutter or whatever, let’s please not forget that we’re in the business of design.
    If we want to keep it dull, then yes – Jacob was right, and therefore we are not allowed to evolve, experiment or enjoy ourselves.
    Keep things accessible, consider the end user, but can we please try to enjoy ourselves?!

  30. AkaXakA says:

    Have it blink.
    That’ll teach them.

  31. I think what Jakob shares with the community is great, however, everything is not needed for every user. And that was my point. This is one usability guideline that myself, and other advanced users may need. As I stated before, it depends on the target audience.

  32. I’m guilty of ignoring visited links on my site, but I really like some of the approaches mentioned here. In particular, Lisa McMillan’s method is beautiful.

  33. I just couldn’t find a visited link color I was happy with — so I have it as the same color as new links. This probably breaks some user experience rule, but I find it far more agreeable than really distracting visited links. Innovation is great, and so is experimentation… but at a certain point you have to stop and just think, “does this REALLY help people?”

  34. jlacivita says:

    One thing I try to avoid is having some difference between :link and :hover or :visited and :hover that will cause the size of the link to change.
    nothing bothers me more on a website than when all the text moves because the hover state was bold and the link or visited state wasn’t.

  35. Bobby Jack says:

    I find it very much depends on the content. For sites with large amounts of textual information, I find visited-link highlighting a useful tool. For ‘functional’ sites (e.g. a phpMyAdmin install or the site at my URL), I think it is less important and, often, undesirable. Certainly, ‘navigation’ links should rarely be visit-highlighted.
    As to method, I’m torn between old-school blue ‘n’ purple and the more modern underline / border-bottom. The former has the great advantage of convention but the severe disadvantage of poor accessibility; it also looks horrible on different background colours. However, I find the myriad of alternative colour schemes simply confusing; an underline seems to me to be much more ‘portable’ across websites.

  36. Well, of course it depends on design. However, I prefer using following “texture”:
    text, not-visited – color depends on design, mostly alternative, 1px solid #eee;
    visited — a lighter color, dotted border-bottom (again, according to design),
    hover — a darker color, 2px solid #333;

  37. What a great conversation! Thanks, Dan, for the link, and thanks everyone else for the feedback! :-) I thought I’d better add my two cents on this.
    My site is pretty minimalist except for my link lists. They are intended to be the focus so I gave them importance by doing something ‘funky’ with them. I think what makes them stand out is that they are practically the only ‘designed’ element on the page. Though to the trained eye there is more going on with typography and layout than anything else. I knew in this case it could be done because there is so little else to distract – so little “Pop” as my clients always say. In fact it’s been called boring on more than one occasion. I’m cool with that.
    This site started as a place for me to post all the cool links I found for my students, and they mentioned their irritation at having gone back to the same places over and over – the problem was to really make the visited elements stand out. The solution was to show them they’d completed already.
    This option wouldn’t work for everyone, and I’ve never used it on another site because most sites have more important focuses – the visual hierarchy just wouldn’t stand for this treatment.
    What I’ve also discovered is that I end up referred to the same place many times over and over – it’s nice for me to be able to see where I’ve already been, in kind of a to-do list fashion.
    I’ve made a short story long – the thing is that it’s always about content, intention, and the user. If you have a specific problem that can be solved in one way for one site, it may not be equally useful somewhere else. Think it through and if it works for the intended audience go for it.

  38. Dan says:

    I almost always style visited links the same way as unvisited links. Must be a carryover from the horror of the blue / magenta default combo.

  39. fronk says:

    i never style the visited links personally.

  40. Contact says:

    Darn! I thought I was the one to come up with Checkboxes for links ( http://www.crosssection.net/GenInfo/Samples.htm ) :) As with Lisa ( http://lisamcmillan.com/ ), I only use the checkboxes for a specific area, my samples list. I think checkboxes would become annoying throughout an entire site and would be very disruptive, especially inline.
    I think strikethroughs definitely make the point, but almost too strongly. I could see them used if the content warrants an emphasis on users not returning to previously viewed content and to be efficient in their reading or review. One could make a more subtle “strikethrough” effect, while possibly making the text easier to read, by creating a graphic line as a background to links. This might bring up some technical problems that I am not forseeing, but it is just an idea that came to mind.

  41. Michael says:

    Although I don’t use it on my own site, I’m a big fan of Mike Davidson’s approach. It does the job and looks good doing it.

  42. Edward says:

    Personally, I can’t understand why Google still uses the old, old, nasty method of showing what’s visited and what’s not. http://www.search.msn.com has a far better look and is more visuaully appealing to almost anybody. I actually use MSN’s search because of the layout, not because it has a better database. This shows you how crucial that combination can be. It can make or break the page.

  43. I think, on a standard webpage (light background, dark text), best works to change links’ color to silver (or something in that gamma). Especially in pages with a lot of colors, silver/light gray is like saying to the visitor: “Hey, you’ve visited this link already, see how light and unnoticeable its color is!”…
    …but all this is a matter of personal preference.
    NOTE: Do you see the actual color or this comment? Well, something like this ;-)

  44. I keep it simple – if a link has been visited, it’s light gray.
    Seems to be working out well so far.

  45. I also keep it simple with a visited link always a light gray. To me it is direct and to the point all in the color itself.

  46. masi says:

    when you have menu text links, say home, contact us, bla bla. Once visited , regardles of howyou change the color of visited link, on a next visit you want those visited links as active, in that case how do you do it?
    say
    active green
    visited red
    but on a new session ie, on next visit or on opening a new broweser you want the visited link to be seen as in active link color??

  47. Bob says:

    For a commercial web site, where I assume it is desirable to have your visitors click each and every single link over and over unitl their credit card is maxed out, it seems that all links should be the same regardless of their state.
    Personally, I take very little notice of the difference in link colors. I’ve always felt that I know where I’m going, where I’ve been, and whether or not I’d like to to go there again. In the end, it may just be a matter of style. Check marks, color change, decorations? Whatever. But does it look good?

  48. Kenneth says:

    I used to never use them, I always thought who needs them. Just recently I started applying them and I can now see how valuable they are for the user.
    The technique I’ve been using is to simply remove the underline. Simple and effective.

  49. Dustin Diaz says:

    I too generally follow the nielsen approach. Except only modified to the extent of a different shade of blue and a different shade of purple. i would, however, like to move in a newer direction like collylogic with obvious checkboxes etc…
    Funny about the collylogic site is that most of the blogroll is usually always checked as ‘been there’ – i’m sure most of us have the same experience when viewing the ‘big timers’ blogroll. I’m sure by now Dan is used to being listed with Shea, Molly, Zeldman, Bowman and the like. It’s very rare these days when go ‘ooo – simplebits, what’s that?’
    Dan, your site is PermaVisited

  50. Thierry says:

    With my personal website I accidentally — and with some experimenting — found a subtle way to show (non-)visited links. New links (only) show underline when hovering over them. Visited links are not underlined.
    I find this particularly handy when you have a lot of links on a page, or for menu’s, when color and layout stability are important.
    I created it using FrontPage. My problem now is that I cannot recreate this with CSS.
    I tried changing the order of the a:
    hover {color:DarkGray; bgcolor:transparent; text-decoration:underline; text-underline:single}
    link {text-animation:none; text-decoration:none; text-underline:none; text-decoration:none; text-line-through:none;}
    visited {text-animation:none; text-decoration:none; text-underline:none; text-decoration:none; text-line-through:none}
    Can someone give me a clue? (http://users.telenet.be/hoornaert)

  51. That is something a lot of people think of as an afterthought. I am still looking for one I like for my site.

  52. The Roaming Gnome says:

    Thierry: the major issue with that code you have is that you aren’t following standards closely enough. I should warn you that Front Page is a corrupt and plauged peice of MS software, and you shouldn’t have to use some of those parameters you listed. They are very imaginative, but they may only work in IE, which is about as standards compliant as a potato…
    For instruction on using CSS which will actually work: http://www.w3schools.com/css/
    a {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {color:DarkGray; background-color:transparent; text-decoration:underline;}
    I can’t think of a way to do what you ask using only an ‘a’ tag, but mabey someone else can. i stripped down the CSS you presented to a valid, working, readable CSS.
    PS: Use Macromedia Dreamweaver to write CSS. and as proof to the uselessness of Frontpage, I Crashed my browser because the error page generated by the W3 XHTML Validator validating a FrontPage document.