Home | Experience Design

Usability best practice, Part 3 – Embedded text links

Alex Christie

29 April 2010

In this third installment of usability tips I am focusing on embedded links or hyperlinks. The purpose is to show how to use them with usability best practice techniques.

Hyperlink styling

This section suggests ways to style the visual appearance of links.

  • Distinguish from non-link text use underline and/or colour
  • Avoid using coloured text unless it’s a link or use it with care. Particularly blue text as it still is the default link text colour
  • Do not use underlined text anywhere unless it is a link. Visually users determine underlining as links
  • When a user hovers over a link changing the hover colour is unnecessary and can be confusing but used correctly it can still work
  • Using a hover effect to distinguish something has changed is very important. For example; if your links aren’t underlined use an underline on the hover state
  • Care should be taken with this because some text styles like bolding, or a larger font size, can cause the element to re-align

Show visited links

Visited link styling is very important as they work as a visual aid to show users, quickly, the pages the have already visited. If a search query is proving hard to find users will often speculate by clicking through to many pages. By changing the visited link colour users can see, without having to re-read anything, what they have visited. If done correctly they should work on a sub-conscious level.

  • Use a more muted tone (light purple colour is the convention) to give visited links a more washed out look. This will set them back on the page from the stronger link text colour.

Figure 1: Google is a good example of where visited links are necessary.

Avoid opening new browser

Opening a new window or pop up is to be discouraged for a variety reasons the main being around accessibility. Part of the ethos of web browsing is to allow users freedom to navigate in the way they choose to and not to impose them something unexpected.

  • Screen readers find any change of browser focus disorienting putting the visually impaired at a disadvantage thus discriminatory
  • JavaScript can be turned off and is not supported by all browsers so a pop-up, for example, may be missed
  • Many users rely on using the ‘back’ button to navigate this sequence is broken making the user confused
  • The tabbed navigation metaphor is also violated which can be annoying if not requested

Avoid ‘click here’

Writing for the web is a crucial part of web design. Keeping content short, scannable and to the point makes for more efficient browsing experience. This also applies to the way links are worded; ‘click here’ is non-descriptive and doesn’t aid the user in any way.

  • State what the user will get when they click by describing the page/article clearly
  • By writing more meaningful link names SEO is enhanced

Use title tags

Title tags help users predict where a link will lead before they click it. They offer further help to users and whilst they don’t eliminate the need for proper link formatting they do offer useful supplementary information.

  • If a link is taking you to a new site title tags are a good way of informing the user what the name of that site is
  • Use them to describe what sort of information the user will get once clicked
  • They can warn of potential problems at link destination like ‘login required’
  • Keep them as short as possible no more than 60 characters
  • Not all links need title tags; a self-explanatory link needs no assistance

Figure 2: Amazon.co.uk is an example of a good use of title tagging

By following these guidelines your sites will keep the user as the focus and help them to achieve their goals. If a page has text with clearly distinguished links then it is easier to ‘scan’ thus ensuring users stay on your site.




© TAMAR 2015