Create hyperlinks Hyperlinks
enable people to jump instantly from page to page, or site to site.
Such power can create anxiety.
To help users browse with confidence, links should be absolutely clear
hyperlinks should be clearly distinguishable from normal text.
mouseover behaviour should have a highlighting effect. (see mouseovers)
content should be as short as possible, yet long enough to identify
- Where you'll go
- What you'll get
- What you want to happen
with different targets should be clearly distinguishable.
should give an indication of any unanticipated consequences, e.g.:
- Links to files
- Links that open or close windows
What do you make a link?
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
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 "
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
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 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
What should it be?
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.)
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
Blue hyperlink in greyscale: with and
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 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.
Notice how it's quicker and easier to
read the non-underlined blocks of text.
In this second example, I have also
adjusted the line spacing to make the related words clearer.
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.
The above snippets are taken from the
While most links look similar (#036,
mainly not underlined, there are several very different styles applied
on the hover, when the mouse pointer moves over the active link.
The psychological effect is
disconcerting: you are left doubting whether all links will do similar
things (i.e. go to another page on this site), or whether you might be
taken unexpectedly somewhere else. I think that this schizophrenic
behaviour weakens the brand experience, as well as diminishing
There is no good reason to treat all
the hyperlinks differently. The third example also breaks the second principle,
because its colour change makes it weaker, less noticeable, which is
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.