All Links Are Not Created Equal: How to Make Online Lists Easier to Read
This chapter is from the book
This chapter is from the book
This chapter is from the book
No matter what news portal you use—whether it’s BBC News, CNN, Yahoo, or some other page entirely—you face 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. Recently, while creating a list of links, I saw an opportunity to do just that.
In this particular case, the goal was to create a list of headline links for the home page of a corporate intranet that let call-center employees know about current issues. The links needed to appear in chronological order, like a news portal, but only five headlines needed to be shown at any one time.
I started with the usual suspect. I created a simple list of links.
)
The next step was to determine how to communicate to users that the order of the links reflected the order in which the articles were posted. In this call center, the newest issue was always the most important.
To do this, I could have included a bit of instructive text that said something like, “Sorted from newest to oldest,” but this would require more reading than most people bother to do in a Web application.
Instead, I numbered the headlines from one to five and considered calling it a day.
)
Numbering the items was probably sufficient to communicate the order of the links. But it bothered me that these lists were still flat. Even though each item was numbered, each item still looked exactly like all the other items.
In this call center, the newest issue listed was usually incredibly important. It usually meant something happened elsewhere in the company that needed to be communicated to customers pronto. These headlines could be about service outages, temporary billing-system failures, or other things that required call-center employees to have up-to-the-minute information.
How was a flat list of links, where every link looked just like the other, going to communicate the importance of the No. 1 item?
Having recently read an article on Boxes and Arrows, called “Ambient Signifiers,” by Ross Howard, I felt inspired to try something out.
Using Ambient Signifiers As Navigational Clues
In the article, Howard explained that each station along the Japanese commuter-train route has its own chime melody associated with it (in addition to signs). The idea is that commuters who frequently take the same route—to and from work, for example—become bored and start reading books and newspapers or working on their laptops, but will learn to recognize the melody played at the station prior to their stop and begin preparing to get off the train.
Howard called these chimes ambient signifiers. Along with other ambient features of the commute, such as tunnels, the appearance of each station, and so on, these melodies help commuters build a mental map of their commute and avoid missing their stop.
The idea of ambient signifiers intrigued me because it meant that users could accomplish a task on a site almost subconsciously, and on this corporate intranet, the ability to find the right information that easily would be extremely helpful. So I tried applying the concept of ambient signifiers to my list of links.
I scrapped the numbering system and changed the font size for each link based on its age. I used the largest font for the link to the most recent article, and incrementally smaller font sizes for each link to articles as they got older and less important.
)
This alone changed things quite a bit. The larger font stood out more than the smaller ones, making it relatively obvious that the first link in the list was more important than the others. Also, the larger font appeared darker and heavier, which made it stand out even more.
Showing signs of age on the Web
As I worked, I remembered something designer Brendan Dawes talked about in his book, Analog In, Digital Out. Dawes waxed nostalgic about an old brochure he’d come across for his first computer that had at some point acquired a tea stain, and talked about the lack of a sense of age in the digital realm. Digital files cannot acquire tea stains. And while this creates a major advantage for digital files over physical objects—they maintain their quality even years after being created—it also means the sense of nostalgia one can get over tea-stained physical objects is lost in the digital world.
This idea sent my little brain reeling, of course, because wow—just imagine all the design tricks you could use to imply age on a Web page!
It has actually always bothered me that the Web shows no sense of age—I just hadn’t articulated the gnawing feeling that old things needed to somehow appear old. Yes, many Web pages display dates to indicate when they were originally posted, but since this is usually the only indication of age, it can easily be missed. And many Web pages have no date at all—nothing whatsoever to indicate age.
An article I wrote three years ago, for example, can very easily come up as a top search result today. And if no date accompanies the article, what’s to stop someone from thinking it was just posted yesterday?
Hence, I get email occasionally from people who have questions about something I haven’t thought about in three years. The question is fresh. My answer, however, might be a little rusty.
If the Web showed signs of age, however, the user reading the three-year-old article could clearly see that the article was old, and might therefore seek more updated information elsewhere, or at the very least, adjust his question to me.
Taking Brendan’s idea to heart, I decided to take my link-list design a step further and try to communicate the age of each link. After all, in this case, newer meant more important.
But how do you make a link look old?
Google Reader had an answer for this one. A new version of the application happened to launch around the same time that I was working on this link list, and I had noticed a tag cloud in Reader that had a little extra depth than most (more on tag clouds in the next chapter). This one used color as well as font size to indicate the relative popularity of a link.
)
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 wordy for instructive text, but I also thought the dual-indicators (size and color) were a great idea. So I rolled with it.
Modifying my link list, I changed the color of the links from dark to light as the list descended from newest to oldest.
)
This final adjustment created the sense that the links faded from new to old, and thus it became quite clear that the first link was the most important and that the links decreased in importance from there on.
Perfect. It was exactly what I had no idea I wanted.
Would this use of ambient signifiers make a major difference on the resulting Web page? Probably not. Would some people be annoyed by the tiny font used for the last link in the list? Possibly, but the font sizes could be adjusted so that this didn’t happen. Am I saying you should immediately run out and do this on your own page?
Only if it makes sense.
The notion of ambient signifiers is almost completely untapped on the Web, and there are likely myriad ways it can be applied. So take a look around and see if the idea can be used to improve something in your own design. If you can help a user find the information he wants, in the moment he wants it, you’re on to something.
Don’t force it, but keep your eye out for opportunities. And keep your other eye out for inspiring ideas, even when they appear completely irrelevant to whatever you’re working on. You never know when one of them will spark an idea for something new or an improvement over an old standard.
In this case, I was able to do something I think genuinely improved upon an old idea, but the point was really just to help users get oriented. Anything you can do to create clear pathways helps users. They should be able to glance around the page and automatically understand the meaning of the link order. It should be intuitive, not something that requires thought and examination.