What is a link?
A link (or hyperlink) is a tool that allows for easy navigation to another web page by a simple click, making browsing the internet more convenient and faster.
There are various types of links:
1. URL: A link that uses the full address of the web page to which it directs, for example: https://www.wedoseo.co.il/en/home
2. Textual link (also called “text link” or “hyperlink”): A segment of text on a site’s page that is cliackable and refers to another page on the same site or a different site, for example, a link to a page about Local SEO.
3. Email address link: A clickable email address that clicking on it opens a mail box to send an email.
As we are discussing Usability, and particularly the basic rules that contribute to the usability of websites, the following section will focus on textual links with an emphasis on important visualization guidelines.
What are the best practices for textual links' usability?
Link color
- Use a font color that is different from the rest of the text on the page, with blue being the conventional color.
- If we choose blue for the link color, we should not use blue for any text that is not a link.
- Even if we do not choose blue as the link color, it is preferable not to use blue for text that is not a link as blue text color is still most commonly associated with textual links.
Underline textual links
- It is advisable but not mandatory to underline the link.
- Two cases where there is no obligation to use underlining are links in navigation menus and the display of a list of links. However, if the link color is non-standard (such as red) or if website accessibility and the content it contains, including the links, are important to us, and we want every visitor to the site – including those with poor vision – to recognize that it is a link, it is important to stick with underlining.
- To avoid confusion, it is important not to use underlining for text that is not a link.
Use different color for a already visited link
- The explanation is simple: Using different colors allows the user to understand that they have already visited the page the link directs to and prevents them from repeating actions they have already taken.
-
- The color of a link that has not been clicked should be brighter than the color of a link that has already been clicked.
- Both colors should be a variation of the same color, like blue and violet (unlike orange and green, which make it difficult for the user to understand which color belongs to which link – one that has been clicked or one that has not).
- Shades of blue provide the strongest recognition signal for textual links.
Special visualization when the cursor hovers over the link
There is no need for special visualization when a visitor on the site stands or hovers with the mouse cursor over a textual link, as it may create a sense of disorder and overload.
However, if the link is not emphasized with an underline (but only in color) – an underline can be displayed when the cursor hovers over the link for further clarification that it is a textual link and not plain text.
Textual link size
Do not use a font size that is too small, unless it involves links of simple importance (such as links in the footer – located at the bottom of the page and constituting an additional mention of links already existing on the page in a more prominent location).
