Improved hyperlink effect in web design and production


Hyperlinks enable people to jump instantly from page to page, or site to site. Such power can create anxiety.

Hyperlinks can make visitors jump from one page to another, or from one site to another. However, this frequent jump may cause anxiety.

To help users browse with confidence, links should be absolutely clear and explicit.
In order to facilitate users to browse the page better, hyperlinks must be absolutely concise and clear.


1. Text hyperlinks should be clearly distinguishable from normal text.
Hyperlink text must be different from ordinary content text
2. Any mouseover behaviour should have a highlighting effect.
The highlight effect must be displayed when the mouse moves over the hyperlink
3.Hyperlink content should be as short as possible, yet long enough to identify either:
The specific content of hyperlinks must be concise (short and precise):

<!–[if !supportLists]–>· <!–[endif]–>Where you’ll go [Jump address]

<!–[if !supportLists]–>· <!–[endif]–>What you’ll get [What do you want to get]

<!–[if !supportLists]–>· <!–[endif]–>What you want to happen [What effect do you want to produce]

4. Hyperlinks with different targets should be clearly distinguishable.
Hyperlinks to different targets must be clearly identifiable
5. Hyperlinks should give an indication of any unanticipated consequences, e.g.:
Explain the special circumstances that will appear after clicking the hyperlink, such as:

<!–[if !supportLists]–>· <!–[endif]–>Links to files [Link to a file]

<!–[if !supportLists]–>· <!–[endif]–>Links that open or close windows [Clicking the link will open or close the window]

What do you make a link?
Consider the purpose of making this hyperlink

Hyperlink content example:
Examples of hyperlink

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).
This case isAston Martins [Aston Martin] Car website. It can be said that its overall appearance design is classic. This is a search results display page. Now, imagine how to check the detailed introduction of the vehicle through the search results. The only hyperlink here is about“Vehicle summary column [Basic list of vehicles]”Medium“vehicle model[Vehicle model]”。

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.
First of all, the biggest problem is that you can’t distinguish between hyperlinks. It’s against the law1You don’t know where to click to get more information, so you have to think about it first

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.
The second problem is that each link uses a completely different name“Aston Martin”)But they look almost the same, which violates the above rule4; Plus, all links contain the same content vehicle model [Vehicle type])This makes hyperlinks less obvious.

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.
If I click“Aston Martin DB7 GT”This link, hope to get about“Aston Martin DB7 GT”General information of the model car. However, I found that the information finally obtained was inconsistent with the description of the link. Well, it’s against the law3

What should they do?
How can the website be improved?

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).
thing you get [The information you obtained]”It should be the information related to a car, and these information representing specific models should occupy the whole table column; At the same time, because there is no confirmation object containing specific model information (such as miles, price, etc.), the whole column of the table must be used as a clickable hyperlink object. (it will be more helpful to identify if the color change effect can be produced by moving the mouse over the hyperlink).

Expressing size in hyperlinks
Describes the size of the hyperlink object

It’s quite common to find computers putting out this kind of information to set user’s expectations when linking to a file:
When linking to a file, we usually find that the hyperlink contains a description of the size of the file, which helps users decide their wishes (i.e. whether to click the file link).
For example:PDF (46,764 bytes)
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.
Think carefully about what users’ goals are. Usually, they need to know how long it takes to download: a few seconds or a few minutes? Therefore, we should describe it as accurately as possible.

What should it be?
How should the above file size be described?

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.)
The description of the file size should preferably not exceed two significant figures. The dimensions of the above documents should be written in47KB。 Therefore, kilobytes should be used on the network as much as possible(kb)Or megabytes(mb)Describe the document. (we recommend)2The bit number description is as follows:4.7KB, 47KB, 470KB, 4.7MB(wait)

Formatting hyperlinks
Format hyperlinks

If we have to differentiate text hyperlinks from other text, should this be done with colour or formatting such as underlining/emboldening?
If we need to distinguish different text links in a text, we should use different colors for the part of the hyperlink from the ordinary text, or underline or bold the text of the hyperlink.

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 color change corresponding to the default hyperlink action is: at first, the hyperlink is blue and underlined; When clicked, it turns red; Visited hyperlinks will be displayed in 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.
The most common way to increase the readability of hyperlinks is: the overall page is black and white, and the text hyperlinks are blue(#00f)。 This can make the visual contrast of the color obvious, which is convenient to distinguish the hyperlink content from the text content and increase the readability.
Blue hyperlink in greyscale: with and without underline.
The color of hyperlinks can be gray instead of blue, with or without underline.

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.
At the same time, you should also consider that if you only rely on the change of color to distinguish the status of hyperlinks, can color blind people accept it? It’s best to ask if they can distinguish these colors. The picture above is a screenshot of the page. From the picture above, you can see that even without the color change effect of hyperlinks, hyperlinks can be clearly recognized only by using black and blue. Underlining hyperlinks will help users identify hyperlinks; Or underline when the mouse passes over the hyperlink, which can achieve the same effect.
Should hypelinks be underlined?
Do hyperlinks need to be underlined?

Underlining works okay for occasional inline links.
Built in hyperlinks that are not often used can be underlined.
It makes the link stand out a little more than colour alone.
It is better to highlight hyperlinks by using underscores on hyperlinks (as opposed to only changing the color of hyperlinks).
In this example, the underlining works well to distinguish article titles from the sub-title.
In this case, the underline can clearly distinguish the main title from the secondary 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.
If there are too many hyperlinks in paragraphs, link lists, or pages, underlining these links will not make any difference.
Here are a couple of examples of collections of hyperlinks, showing the original (underlined) and the same with underlines removed.
The following is a comparison of the effects of two groups of hyperlinks. Hyperlinks on the left contain underscores, while those on the right do not, as follows:

Notice how it’s quicker and easier to read the non-underlined blocks of text.
Please note: if you have a list of links like the one above, it will be more helpful to read quickly and easily without underlining.

In this second example, I have also adjusted the line spacing to make the related words clearer.
In the second case, I also adjusted the spacing between words to make them look clearer.


It is important that hyperlink formats behave consistently across pages.
Another important point is that the hyperlink format of all pages should be consistent.

Obviously, where some text links are on different backgrounds, such as in navigation bars, they may need to use special colours or treatments.
Obviously, when hyperlinks are in different backgrounds, such as in the navigation bar, we will use special colors and effects on them.

The above snippets are taken from the Guardian Online homepage
The above clip comes fromGuardian OnlineHome page of.

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 format of the hyperlink above looks basically the same (font color)#036, hyperlinks are basically not underlined, and the effects are different when the mouse passes over hyperlinks).

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 usability.
From the perspective of psychology, such effect treatment will make people feel uneasy; At the same time, you will have doubts about this: whether the links used are all like this (including other pages); Whether it will link to an unexpected place. I think this schizophrenic treatment will weaken users’ image of the website brand and greatly reduce the usability of the website.

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 not ‘highlighting’.
We can’t use different effects on all hyperlinks. The third case above violates the second law; Because of different color changes, super has no focus and can’t play a prominent role at all


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.
In a word, the most characteristic hyperlink color effect change is: use #00f or #00c(the color is slightly darker than the former), as the font color of the hyperlink; When the mouse passes, use red or add a slide line to highlight it.

I think that this provides the best balance of functionality when applied consistently to inline hyperlinks and grouped hyperlinks.
I think: using the same effect changes for all built-in hyperlinks and group hyperlinks can maintain the best balance in their functionality.