Summary: Lists of links are an intermediate case between content-embedded links and menu items. Showing listed links in blue or in the site's main link color is the recommended design - and the one most intranets follow.
A reader sent me the following question:
I've a question that has been causing some "healthy" debate at my company. It's around the color and style of links on our pages and as to what is either acceptable, best practice, or the official way of doing things.
Half the team is saying that all links on any page should be blue and underlined, some say just blue, and others say that as long as they are in a clearly labeled "list of links" then black is fine!!
- Where there is a link within a body of text or the title of a news story the link appears blue — therefore standing out as a clear link.
- We also have WebParts on our site that are lists of links . These are clearly titled "Useful Links" — and the links in them are black .
I've done some research on many big internet sites, BBC, Sky etc., and there doesn't seem to be consistency there. Are there any guidelines for the style of links, particularly those in lists?
Web Design vs. Intranet Design
Existing guidelines already tell us how to present regular links ; these guidelines also say that link lists can work well without underlining the links. But what about the color of links in lists?
Of course, as a usability specialist, my first answer could be: go ahead and test this design with your own users . The design that provides the best usability is always contextual and determined by two factors: your users and their tasks.
Comparing these two factors in context shows why it's often a bad idea to determine your intranet design by looking at major websites.
First, the users are very different:
- On the public Web , the users are anybody who happens to come by. This is particularly true for the biggest and most famous websites, which must target a broad consumer audience to meet their traffic numbers. In fact, this bias toward the general public is one reason there are separate usability guidelines for B2B sites , which target a much narrower set of business experts.
- On your intranet , the users are your employees , a carefully vetted group of people who know more about your business than the general public and care more about your company (because they work there). Our testing shows, however, that it's a mistake to believe that employees know everything about the business or the company. Intranet designs often fail when they presume too much knowledge. Still, there's a big difference between employees and casual browsers who enter a website from search engines and typically leave within two minutes.
Second, the tasks are very different:
- On the public Web , potential customers compare your company to others they've found on the same SERP, trying to decide where to do business (or simply whom to contact for follow-up information on B2B sites that don't close the sale on the site itself).
- On intranets , employees do their jobs , using mission-critical applications and searching for either established company policy (say, the HR pages with maternity-leave rules) or information that's important to their current project (say, looking up a client's past purchase history).
The difference between random bozos on the Web and highly paid business professionals on your intranet is one reason that community features often work better within enterprise systems than on websites.
Given the differences in users and tasks, it's better to test your intranet than to draw lessons from even the biggest and most famous public websites.
Existing Intranet Guidelines
I realize that readers don't like it when I recommend that they test their own designs; people prefer to be told what works. So, let's try to find out as much as we can from existing research.
First, we have data from our tests of 27 company intranets . One of the resulting reports contains the usability guidelines for intranet navigation . As guideline #42 makes clear, it's essential to ensure a strong visual indication of where users can click . The report offers many screenshots of intranet designs that caused employees to miss features because they violated the guideline and didn't look clickable.
Given this first dip into the data, I'm tempted to recommend that you choose the color blue for list links. But, because no guideline states exactly that, we'll look deeper. The guideline simply says that clickability should be notable, and a heading might be enough to ensure this.
For more detail, let's look at our study of intranet information architecture (IA) , which includes detailed screenshots of 56 intranet navigation designs. The following pie chart shows how the 56 intranets colored their link lists :
Only 7% of the intranets show lists of links without any visual treatment of the links themselves. A few intranets use subtle treatments — either black, underlined text or a link color that's only slightly different from the body text. More than 75% of the intranets use a consistent link color (typically blue), whether the links are in-line or part of a designated list.
This analysis is a strong argument in favor of using a distinct color for links in lists .
On the other hand, links in lists don't have to be underlined like individual links: In a big list, underlining can decrease readability and — depending on spacing and typeface — it can be cluttered and ugly.
(For good measure, let me mention that most intranets didn't color or underline the menu items in their main navigation bars . This is fine; a navbar is clearly an actionable area if it's conventionally designed — for example, as a designated stripe down the left with a contrasting background color.)
Finally, let's return to our questioner and a screenshot from his intranet:
The question at hand is whether the items under "Links for You" look sufficiently like links. According to our guideline from user testing, such a distinction is essential. Further, our statistics say that such links typically need color.
Here, the word "Links" in the heading and the small triangle that points to each link are probably sufficient to signal to users that these items are links if they were to consider this list closely.
However, that's not the same as saying that the black color is optimal. Users don't carefully read every item on a page . If users were to ponder, say, "My Alerts," they'd probably conclude that the item was clickable. But people who are quickly glancing around a page looking for the actionable areas might easily overlook this list of links.
Assuming you pick a high-contrast link color with good legibility, using colored links will enhance overall usability, even when links appear in a designated list.