Design Stories: Sorted link-lists using “ambient signifiers”
Regardless of whether you use BBC News, CNN, , Yahoo News, or some other page as your primary news portal, you’re constantly faced with the same type of solution. These pages contain lists of links, sorted by time, relevance, popularity, or some other criteria. And this is a good thing, because it makes information relatively easy to find.
That said, even the most basic and standardized designs can be improved. So recently, when I needed to add such a list of links to a home page for a new application, I decided to take a fresh look at the standards yet again.
I started with the usual suspect. I created a simple list of links.

For this design to really be complete, it needed to communicate to users that the order of the links was determined by the order in which the articles were posted. To do this, I could have included a bit of instructive text that said something like, “Sorted from newest to oldest”. Or I could simply have numbered them from one to five and called it a day. I could also have stuck a small “New!” icon next to the topmost link to imply the order. But having recently read the Boxes and Arrows article, “The design behind the design”, by Ross Howard, I felt inspired to try something a little different.
See, it’s always bothered me that the web has no sense of age. An article I wrote two years ago, for example, can very easily come up as a top search result today. Hence, I get email occasionally from people who have questions about something I haven’t thought about in two years. Their question is fresh. My answer, however, might be a little rusty. But if the web showed signs of age, the user reading the two-year-old article would clearly see that the article was old, and might therefore seek more updated information elsewhere, or at the very least, adjust his question while writing to me. (There are many other reasons that indicating age could be helpful to web users, but I’ll save that for a different post.)
So to communicate the meaning of the sort order in this case, I decided to try to communicate the age of each link. I started by changing the font size for each link based on its popularity. The link for the most recent article used the largest font, and the font size decreased with each link as the articles aged.

This alone changed things quite a bit. The larger font not only stood out more in terms of size, but also in richness of color. The larger font appeared darker and heavier, which made it stand out even more. Hmm.
This reminded me of something I saw in Google Reader. Jeffrey Veen recently wrote about some design work he’s done for Reader, and upon checking it out, I noticed a tag cloud unlike the others I’ve seen around town. This one used color changes as well as font size changes. It looked like this.

It included instructive text that said, “The more items a tag has, the bigger it appears. The more of those items you have read, the darker it is.”
I thought this was a bit convoluted for instructive text, but I also thought the dual-purpose tag cloud was a great idea. So I rolled with it.
Modifying my link list, I changed the color of each link to from from dark to light as the list descended from newest to oldest.

Yes, this meant the developers would have to write some more code, but in this case, they liked the format of the list so much that they didn’t care. (In other words, I got lucky.)
Is this use of ambient signifiers going to make a big difference on the resulting web page? Probably not. Will some people be annoyed by the tiny font used for the last link in the list? Possibly, but I can always adjust how much the font size decreases so this doesn’t happen. Am I saying you should immediately run out and do this on your own page? No.
The point is that ambient signifiers are a great idea, and almost completely untapped on the web. So take a look around and see what you can come up with. How can you use ambient signifiers to make a page more understandable or a task flow more intuitive?
Want to see another idea? Consider the recent Boxes and Arrows redesign that brought a tag cloud to the forefront of their persistent navigation.

Have fun!
Update from Etre: “Dao Gottwald ’s “Aging Tabs” Firefox add-on makes unused tabs fade with age - thereby making it easier to identify those pertaining to the current task.”
Posted by Robert on January 17th, 2007
4 comments

Shaun Inman ran with the idea of age for his latest redesign, as well. As you go back in time, the color of the entire page fades to white. Going back to 2001 renders the page nearly unreadable. Even comments fade the later you post one–you see, at a glance, how late someone is to the party.
Admittedly, the unreadable aspect of the older posts isn’t cool. But maybe it’s by design. After all, something Shaun wrote five-six years ago definitely wouldn’t be fresh in his head.
Posted on January 18th, 2007

The use of graphic coding of text is indeed a highly useful but underused technique, particularly for frequently used applications. However, I’m skeptical of its utility on general web sites for the public when we can’t even agree on what links should look like. I’ve noticed that some users are confused by any variability of links appearance within a web site. They look for one color and style for a given site, so if a link differs in anyway –even just the use of bold text –the user no longer sees it as a link. I wouldn’t try this without testing to be sure it doesn’t result in some users ignoring links in certain configurations (e.g., a bunch of new links and one old one).

We ended up removing it from B&A– the fact is, there are almost the same number of stories in each category– the navigation is what we are about, and unlike a tag cloud, stories are pretty evenly distributed. Plus it is a rendering nightmare. In the end we killed it. Perhaps someday that’ll change.