Wwohn.com : The 15 rules of quality hyperlinks

We all know that our visitors will not stay on our websites forever. However, we all hope that they will remember us and return to the great content we provide. Nevertheless, we should take an effort to improve user experience but also to minimize nuisance and negative user experiences.

One of the areas of improvement is the exit by hyperlink. What rules should we follow to improve the quality of our hyperlinks?

Hyperlink html rules

Make clear where the hyperlink is headed
Do not use anchor text such as “he wrote”, “says”, “here”, etc. These directions are meaningless.
Use the “title tag“
If the user moves the mouse over the link without clicking it, a tooltip pops up. Keep the content short since the tooltip only shows for a few seconds. If the hyperlink is already clear, do not use the title tag and let the hyperlink speak for itself.
A hyperlink should look like one
The blue underlined hyperlink is clear to us all. You could deviate and only use the blue color or the underline. If you really deviate make sure that your hyperlinks remain recognizable.
Never use shade effects or light grey
Did you ever look for an option in a Windows program such as Word to finally discover the option but find it grey and unclickable? That’s why you should not use that color or shade effect on your hyperlinks. Your visitor might think that the hyperlink is not available.
Inform users if they have already visited the hyperlink
Show the user whether they already visited the website, especially if you have multiple hyperlinks to the same URL. Use the tags a:visited, a:hover and a:active in your css (read more about css hyperlink styles).
Remove broken hyperlinks
If hyperlinks are broken do not show them. Regularly click all your hyperlinks to see where they are going. Not only can they be broken, over time they can also direct to a different page than you intended.
Announce downloads
If you direct the visitor to a special page with a download such as a PDF or a page for which additional software is required let them know in advance. Not everybody likes large downloads. Also, inexperienced users may perceive the download alert as malware.
Limit the amount of hyperlinks in one line
If you have many hyperlinks in one line, make it a bulleted list. Having one big bunch of hyperlinks deteriorates the visibility of the individual hyperlinks, regardless of the use of specific styles for hyperlinks.
Keep hyperlink anchor text short
If the hyperlink is very long it does not stand out on your page, instead it looks like another paragraph in your web page.
Do not open hyperlinks in a new page
Actually, this is an ongoing long term discussion mentioned as early as 1999 on Jakob Nielsen’s item on the top ten design mistakes of 1999. Inexperienced users will never find your website again after their “back” button mysteriously changed to grey. Experienced users will forgive you and will put up with webpages opening in the same screen.
Think about the visually impaired
Make clearly sized hyperlinks. Also, visually impaired people may use text readers. If this text reader summarizes the hyperlinks on a page, make sure it does not says “click here” 10 times in a row. Use meaningful anchor texts.
Prevent user disorientation
If a user clicks on a hyperlink that provides a different screen than expected, the user may get disorientated or even irritated. You do not want to leave your visitors with that feeling. Another reason to use meaningful anchor texts.
Use hyperlink to HTML elements if provided
This is useful for long target pages such as a glossary. You can provide several HTML elements with an id, for example <h2 id=”word”>. You can then link to this h2 element with <a href=”#word”… or external with <a href=”http://www.domain.com/page.html#word….
Make the whole button clickable
If you use buttons as hyperlinks, make the entire button clickable. The same applies to pictures and images although I can imagine if you only make a distinct area in a picture clickable.
Do not underline other text that is not a hyperlink
If a text is underlined, people will click it. For the same reason, do not use your link color for other text. You can test this with a program like crazyegg.com that shows where your visitors are clicking and evenly important, where not.