Situation critical! Where are the the links?

This month we get back to some basics of website design - making sure your carewords are seen and used optimally.

People on the web are selfish, impatient and lazy. They want to accomplish their tasks quickly and with minimal effort. They don't think, they don't read, they click.

The essence and power of the web is the hyperlink. But what if people can't find your links, are confused by your links, can't remember which links they've followed, or click on things that are not links? This makes people have to think and work too much. They become frustrated. They don't complete their task. They have a negative experience.

These types of problems should be well behind us by now. After all, it's been almost 5 years since Jakob Nielsen published his definitive set of guidelines for link representation and behaviour. Unfortunately, all too often we see these guidelines violated, creating major problems. The good news is that these problems are some of the easiest to fix.

Put your website to the Link Visibility Test outlined below. Based on our experience we think you'll be surprised by the results.

Problem 1: Can't determine what is and is not a link

During a recent test, we observed problems with a main landing page that had over 40 links in a bulleted list in the middle of the page. Because the bulleted text links looked so similar to the surrounding body text many people simply scanned the page and left, never discovering the rich content hidden beneath each non-obvious link.

Here are a few other examples from recent projects that caused visitors grief:

Problem 2: Can't determine which links have already been followed

In situations where visitors will be exploring several different parts of your website it is important for them to know where they have already been so they don't waste time going down paths they've already followed. In our testing we often find people becoming disoriented when visited links do not change colour - often going around in circles or unintentionally revisiting pages.

Being able to detect visited links also helps people who want to return to a page that they've recently visited. They can quickly scan the subset of visited links to find the one they want.

Help people out by changing the colour of visited links, especially for link lists or embedded links. This becomes increasingly important when link labels are similar or when the same link shows up on multiple pages, or even on the same page (as in the example below).

You may think this is not a big deal but try using an email system which doesn't distinguish between read and unread emails. You'll quickly understand the importance of tracking of previous interactions.

Problem 3: Can't determine the content to which a link leads

There are two important attributes of a good link. It must be obvious as something that can be clicked and the label must help the user understand what content to expect. People shouldn't have to read the surrounding paragraph to determine the meaning of a link. Remember, people don't read, they quickly scan for links and click.

Although it is becoming more rare, we still see too many examples where the link label is totally meaningless. Here a click, there a click, everywhere a click-click! Here are two examples:

Unless someone has been hiding under a rock for the last 12 years, everyone knows what to do with a link. Don't tell them to click, tell them what to expect if they click. Similarly, people would be very disappointed if they didn't get more from clicking a link so tell them what to expect. Both of these examples also fail to meet the most basic accessibility need - providing meaningful link names for people using screen readers.

Back to Top

Link visibility and usability guidelines

Borrowing on several of Jakob Nielsen's Alertbox articles, here are some updated guidelines for improving your site navigation by making it obvious, functional, and satisfying.

Your visitors should not have to scour your page with their mouse in order to find links. They should be easily visible with a quick scan.

• Choose an easily differentiated colour for all links presented outside of navigation bars
• Underline link labels if they are embedded in text or if there is any uncertainty of them being perceived as links based on colour alone
  • Navigation menus or clear listings of links usually do not require an underline
  • Underline red or green links because they may be difficult to differentiate for people with common forms of colour deficiency
  • Underline links if your target audience includes older people or those with poor eyesight
• Underline link labels on roll-over if the link label is not already underlined
• Do not use the link colour for any other text on the website
• Do not underline any text unless it is a link
• Do not alter the look of a link other than by underlining and/or changing colour

Link Visibility Test: The best way to check whether links on your website are obvious is to use a quick 15-second test. Select 5 major pages from your website and print them off in colour. Put each page in front of someone unfamiliar with your site for 15 seconds. Ask them to quickly circle every link or interactive element on the page. If some links are grouped together, they can circle them as a group.

To calculate your score:

1. Count up the total number of actual links on all test pages (include all graphical links, as they are often missed)
2. Count the total number of links which the person correctly identified
3. Subtract the total number of non-links they circled
4. Divide the resulting number by the total number of actual links

If your score is 95% or more you are doing well, 80-94% you have improvements to make. Anything under 80% and you had better revisit your link representation strategy very carefully. You certainly don't want visitors missing over 20% of your website.

Change the colour of visited links

The purpose of changing link colour is to prevent people unintentionally revisiting pages or help people get back to pages they want to revisit - both aiding navigation of the website.

• Use different colours for visited and unvisited links, especially for older visitors or people with short-term memory problems
• Visited links should be of slightly lower contrast (give more emphasis to unvisited links as in the example provided in the article above)
• Ideally, the two colours should be perceived as related (from similar portions of the spectrum - e.g. blue/purple, orange/brown)

The usefulness of each link is dependent on how well people can interpret the link label and accurately predict where that link will take them.

• Ensure all link labels are in the language of the visitor (do not use organization-centric language or unfamiliar acronyms)
• Use longer link labels (5 or more words) so they are more specific and have more of the key words for which people are scanning
• Use link titles (extra text that appears when you hover over a link) if additional text is needed to clarify a link label
  • Use link titles sparingly so the page doesn't appear overly cluttered
• Ensure the title of the destination page is the same or clearly relates to the label of the link used to get there
• Do not use generic, meaningless link labels like "Click here" or "More..."
  • Expand more to be specific (e.g. Read more news..., More events..., More policies...)

Remember, the success of your website is determined by the success with which your visitors can navigate your website and achieve their tasks. The links you provide and how well people can find / use them are core to your website's success.

Also remember that people are trained on the 99% of websites they visit which are not yours. Follow industry conventions and best-practice guidelines for basic navigation to make it easier for visitors to figure out what they can do on your website and reduce the chances of them missing valuable content or functionality. Navigation is no place to innovate!

If you need help in evaluating your website's navigation, give us a call at 613 271-3001.

Back to Top

Quote of the month

"Even with great content, a hard-to-navigate website won't get used"

Constance J. Peterson, Seven Steps to Easier Web Navigation, 2000

If you have any comments on The Insighter, or ideas on usability topics you'd like to hear about, send us an email with your comments.

We invite you to subscribe to our monthly e-newsletter.