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
— 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
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.
are very different:
On the public
, the users are
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.
, the users are
, 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
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.
are very different:
On the public
, 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).
, employees do their
, 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
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
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.
Share :Twitter | LinkedIn | Google+ | Email