15 Usability Guidelines for Designing Web Site Links

web-site-links-usability
Having usable web site links is an essential consideration for anyone who is developing or owns a web site. Links are a means for the user to navigate to other pages within the same web site or view related documents and external sites. Having usable links effectively means that users are more likely to achieve the objective of why they are in your web site (be it for information searching purposes or purchasing of products or services). This goal achievement will positively affect their experience, thus increasing the likelihood that they will re-visit your site and/or recommend it to their peers.


In the list below, I have compiled what I think are the 15 most important guidelines for making your web site links more usable. Most of the guidelines have been retrieved from Jakob Nielsen’s Alertbox and Usability.gov. Please note that this is a checklist and hence the guidelines are being presented in no order of importance, meaning that all of the 15 guidelines are important in order to ensure that your web site links are usable.

For your web site links to be usable, they should:

  1. Be blue: This acts as a strong visual cue to the user that the text is a link. If all the text is of the same colour, it is very difficult for the user to locate links.
  2. Be underlined: Underlining links is a standard paradigm that acts as a strong visual cue to infer clickability.
  3. Not be in all uppercase or lowercase characters: Mixed case links are more scannable and users are more accustomed to them.
  4. Not consist of generic instructions: Generic instructions such as “more”, “read more”, “click here” and “learn more” do not provide any information to users about the content they will find when they click that link. Users identify and understand links and therefore it is not necessary to tell users to click them
  5. Not start with “e-”or “internet”: Users already know that they are on a web site and hence such words add unnecessary verbiage to links and make them look similar. All of this makes it difficult for users to scan them.
  6. Not look like buttons if they are not clickable: Users perceive conventional button shapes as clickable; hence they will try to click any image that looks like a button. When users see that nothing happens, they may become confused.
  7. Not contain made up words: Such words do not elicit curiosity but rather irritate users and in some cases cause them to leave a web site. At the very least, these words lead users to try and understand what they mean. This is coupled by the fact that such words affect adversely the search engine visibility.
  8. Not have the same name: Having links with the same name confuses users, leads to unnecessary complications and clutters the interface.
  9. Open in the same window if they link to other HTML pages: Users make use of the browser’s back button to go back to where they were. When a new window opens, there is no previous page that they can go to. This causes frustration and disorientation for most users and may cause them to close the window.
  10. Not open in the same window if they link to non-web documents: Users typically press the browser’s close button when they are finished using a non-web document such as a PDF file, thus exiting the web site.
  11. Become highlighted or change colour on mouseover: This provides a good visual cue for clickability, although it should not be used on its own.
  12. Indicate whether they will take the users to a different web site: Users assume that any link will take them to a different page on the same web site. When this is not the case and they are not forewarned, users become confused and as a result, can end up leaving the web site
  13. Not contain the company name: The name of the company adds unnecessary complexity to the link text as it can make links appear similar to each other. This makes users waste time in trying to identify the difference between links.
  14. Be long enough to be understood but short enough to avoid wrapping: Short links are barely descriptive enough to provide an indication of the content that they link to. It is advised that links should be no longer than 10 words for best performance.
  15. Start with keywords: Adhering to this guideline makes link text more concise. Additionally, it is recommended that link text is similar to the page title or headings where it leads to. Such conventions make pages more identifiable.
  • Martha Valenta

    You forgot:

    16. Make the page printable.

    I had to either copy the text and paste it into a text/Word document or print this at 45% in order to attain a hard copy of this blog entry. Please consider that the User might want to share information at a meeting or print off a copy to read when he or she is away from the computer.

    • http://www.usabilitygeek.com Justin Mifsud

      Hi Martha,

      Thanks for bringing this up. The ability to format content for printing purposes is indeed a usability guideline. Whilst I do not agree with you in adding it as a number 16 to this list (since this list is solely reserved for links usability), I will add a print button so my posts can provided in a printable format.

  • Dan

    confused. All your links in the left column violate rules #1 and #2. In fact, this page has 4 link styles: left column, body, the paragraph that starts, “This entry was posted..”, and the word “Justin” in the footer. Seems to me, one of the most important rules of usability is consistency.

    • http://www.usabilitygeek.com Justin Mifsud

      Thanks for your comment Dan.

      This post is about making links in your content usable. Indeed they are all blue (#1) and underlined (#2). I have indeed enhanced the contrast of the blue of these links as (based on your comment, and that of Erin below) it was a lower contrast blue.

      With regards to the different “links” in the left column, these are not links but sub navigation elements. I will be covering navigation usability in a separate post. Like good usability practice, these are placed in the left hand of this blog since it is where users mainly look for sub navigation. Also, I have styled them differently than the other links simply because I don’t want them to be confused with content links. With regards to the links in the “entry was posted” and “Justin”, I have underlined them to show they are clickable but I did not want to distract the user by giving them as high as priority as the links in the content (which are more important since the “entry was posted” is merely a filter).

      Therefore, whilst it is true there are four styles, they have been used consistently (which like you correctly pointed out is an essential usability aspect) and in different levels of priority (which like the use of different headings to indicate priority) is also a good usability practice.

  • http://www.timeforcake.com Erin

    Hi Justin,

    Was in the middle of reading your post… but suddenly scrolled up and looked at the links in the non-numbered-list content on this page.

    Though the links they were blue, they were a very light aqua/neon/blue and were very low contrast on my brighter monitor. It wasn’t easy to read what the links said.

    I also had to put my eye about an inch from the screen before I could see whether or not the links changed color on rollover or not.

    I have great eyesight and no glasses… but had this issue on 2 of the 8 monitors here at my office. It’s of course very different from monitor to monitor, but they are rather low-contrast.

    I’m not sure if light/aqua blue links that change to a similar (?) hue on rollover are great usability/make for a great user experience, and if they match up with your recommendations in the article?

    This is of course nothing more than my two cents–I’d love to hear your feedback about these thoughts.

    Thanks Justin!

    -erin

    • http://www.usabilitygeek.com Justin Mifsud

      Hi Erin,

      Many thanks for your feedback. As you may have noticed, I have taken note of your suggestion.

      Whilst the links were blue, I had given them a slightly aqua hue so that they blend in nicely with the color scheme of this blog without breaking usability conventions. The contrast was appearing correctly on my monitor but when I tested it on other monitors especially CRTs, I have found them to be not as clear. Thus, I have altered the link color to a more web safe blue.

      I trust that this is better. However, if the links are not so visible, please do tell me.

      Thanks once again,

      Justin

  • Pingback: Is Your Website User Friendly « Websites

Related Posts

Newsletter

Subscribe to our free weekly newsletter so that you can receive useful tips and valuable resources directly into your mailbox. (No Spam)

About our Newsletter

Featured Deal

View All Current Deals