The first widespread use of CSS had everything to do with links. It wasn’t long before it seemed like a standard to overwrite the “ugly” default styling of links with colorful, non-underlined, stateless link styles. Now in 2010, old habits are still hard to break. It remains unusually hard to convince designers, developers, and clients that visited link styles exist for good reason.
The state of the web has changed considerably since people first started overriding default link styles. We have fluid layouts, frameworks, progressive enhancement, AJAX, accessibility standards, cloud applications, and the rumored death of flash in favor of standards-based development, but for some reason many websites still fail to give their users a way to see which links they’ve visited already. As usual, the devil is in the details.
A Webpage Is Just an Interface
We know that visited links can show us where we’ve been, but in the context of the page, it can also show us where we haven’t been (yes, this is important). Consider the success of reader applications like Google Reader. It gives the user a list of posts to read from RSS feeds, and allows the user to mark things as “read”, taking them off the main page of the application.
The interesting thing is that we have a mechanism for doing this on any webpage with just one CSS selector. While the web has benefited greatly from translating print design best practices to interaction design, we often forget the nature of the web as being an interactive medium (and we forget why our users visit websites in the first place). A website is just a human-computer interface for delivering content. The more that people realize this, the less we’ll all fret over each little pixel and underline.
Example: Visited Links as a Visual Checklist on nytimes.com
Using The New York Times website as an example, we can add a really simple CSS rule or two that leverages visited links to create a sort of “visual checklist” for what I have or haven’t read. Here’s a segment of their website, without any of the links visited:
The New York Times was smart enough to add a visited link style, although it’s subtle (most likely to preserve design consistency):
If we shift our thinking from visual design to interface design, this may not be the easiest way to discern visited from non-visited links. I’ll start by adding a simple CSS rule to clearly mark the link as visited:
a:visited {
background: pink;
font-weight: normal;
color: #000;
opacity: 0.3;
}
This is better, but the associated image is taking up space when we don’t really need it. Because images are often wrapped in links, we can again make use of the visited pseudo selector for images as well:
a:visited img { display: none; }
Note that in the above example, the next headline is brought into view. While I would argue that There is No Fold, bringing unseen content into view while fading seen content into the background noise is certainly a good thing.
Read All Over
It may seem trivial at a single link level, but the effect can be significant on a page full of headlines, links, and images. Here’s the before and after on the home page:
Before:
After:
But It’s So Ugly!
Ok, so my example may not be beautiful, but from an interaction standpoint I think it merits some exploration. Imagine that if this idea gains popularity, we’d see some design conventions eventually emerge just as we have with so many other things over the last 10 years. I don’t expect they would involve a pink background, but sometimes designers can surprise us.
