Clear Web Hyperlinks
Hyperlinks enable people to jump instantly from web page to web page, or web site to web site. While this is amazingly powerful, the power can also create anxiety.
To help users browse with confidence, web links should be absolutely clear and explicit.
Principles for improving link clarity
- Text hyperlinks should be clearly distinguishable from normal text.
- Any mouseover behaviour should have a highlighting effect. (see mouseovers)
- Hyperlink content should be as short as possible, yet long enough to identify either:
- Where you’ll go
- What you’ll get
- What you want to happen
- Hyperlinks with different targets should be clearly distinguishable.
- Hyperlinks should give an indication of any unanticipated consequences, e.g.:
- Links to files
- Links that open or close windows
What do you make a hyperlink?
Hyperlink content example: www.amapproved.com
A site for locating approved Aston Martins, and it’s good on the whole.
This is the search results screen.
Guess how you get from search results to see the details on a particular vehicle?
The only link is the vehicle model (in the Vehicle summary column).
The first, and biggest problem, is that you can’t distinguish the hyperlinks, breaking Principle 1.
You don’t know where to click to get more information: you have to guess.
The second problem is: The links look the same although they point to completely different targets (each one is a different used Aston Martin).
This breaks Principle 4.
Because all the links on this page have the same content (the vehicle model), it’s even less obvious that they might be the link.
If I click on “Aston Martin DB7 GT”, I would expect to get general information about the Aston Martin DB7 GT car.
This breaks Principle 3, because the link is not accurately describing what I’ll get if I click it.
What should they do?
The "thing you get" is the information about a particular car.
The thing that represents the particular car is the entire table row.
There is no other unique identifier for the car (mileage, price etc. aren’t necessarily unique).
Therefore, the whole row should be the clickable hyperlink.
(It would also be helpful if the row changed colour/tone on mouseover).
Expressing page size or file size in hyperlinks
It’s quite common to find computers putting out this kind of information to set user’s expectations when linking to a file:
Thinking about the user’s goals, what they need is to know roughly how long the download will take: will it be a few seconds, or minutes?
That’s generally as accurate as it needs to be.
What should the link say?
There’s no benefit at all in showing more than two significant figures in file sizes.
Above should be 47KB.
Also, only ever use kilobytes or megabytes for file sizes online.
(Good, useful file sizes to 2 significant figures run: 4.7KB, 47KB, 470KB, 4.7MB etc.)
Formatting web hyperlinks
If we have to differentiate text hyperlinks from other text, should this be done with colour or formatting such as underlining/emboldening?
The de facto convention has been that hyperlinks are rendered in blue with underlines, that they turn red when clicked, and that visited links are purple.
The most readable way to render most text is black on a white background, and making text hyperlinks blue (#00f) works very well on white.
It is clearly distinguishable from regular black text, while still providing enough visual contrast to be readable.
It’s appropriate to ask if differentiating by colour alone will work for people who are colourblind.
The image above is a screen capture of this page, totally desaturated.
It shows that, even without colour, there is sufficient tonal difference between black and blue to make the hyperlink clear.
The underlined version is a little bit clearer, but showing underline on hover would serve a similar purpose.
Should web hypelinks be underlined?
Underlining works okay for occasional inline links.
It makes the link stand out a little more than colour alone.
In this example, the underlining works well to distinguish article titles from the sub-title.
I think underlining becomes unhelpful when there are numerous inline links in paragraphs, in lists of links, and when there are lots of sets of links on a page.
Here are a couple of examples of collections of hyperlinks, showing the original (underlined) and the same with underlines removed.
Consistency in hyperlinks
It is important that hyperlink formats behave consistently across pages.
Obviously, where some text links are on different backgrounds, such as in navigation bars, they may need to use special colours or treatments.
On balance, it seems that the predominant convention in the industry is to keep #00f or #00c (slightly darker) blue for links, and to make links red and (optionally) underlined on hover.
I think that this provides the best balance of functionality when applied consistently to inline hyperlinks and grouped hyperlinks.
Other reading on usable links
- Article on making hyperlinks useful from e-consultancy