Links are a navigation component used to direct users to another section, page, website, document or file. They allow users to have access to additional information and navigate directly to the information which is relevant to them. Links must be clearly distinguished from other text and features on a page; they must be instantly recognisable as links. Most of the links we use are text links.
In-line links / underlined links
- in-line with text
- links are underlined only when they are part of a main text (integrated in content, are connected as part of a paragraph or other text)
- underlining helps identify links when they are in-line with regular text
- when hovering over the link the underline disappears
Stand alone links / not underlined links
- stand alone from other text
- links are not underlined when they are separate from the main text (disconnected from content, not part of a paragraph or other text)
- used for sections of links and navigation sections
- purpose of the link should be determined based on the text. Screen reader users often read out lists of links in isolation, so make the purpose of the link clear from the link text alone
- when hovering over the link it becomes underlined
Interaction / states
- active / no interaction: standard design pattern
- hover: changes to a different colour (blue to black), stand alone link is underlined, in-line link is not underlined
- post-interaction / visited: standard design pattern
Call to action links
The call to action is a link, it navigates users to another page or another section in the same page. It has a more distinctive visual style to show users the call to action link is more important than default hyperlinks.
Do's
- use meaningful descriptive text to indicate the purpose of the link
- use external icon to indicate a links to an external site
- make the active link area a small box around the link text
- underline links only when they are part of a main text (integrated in content, are connected as part of a paragraph or other text)
- link colour is blue; on a dark background the link colour is white
- on designs for mobile devices make phone numbers links
- create ample space between links
Don'ts
- don't use link descriptions such as "More", "Further Information", "Visit", "Watch Now", "Download" or "Click Here" or any phrasing that uses the word "link"
- don't make the active link area a large empty area around the link text
When to use
- to provide the user direct access to relevant information without adding clutter to the page
- if possible, place links at the end of a sentence, paragraph or section, so users take action after they've learned context and purpose
- use links when necessary and avoid duplicating the same links within a section or page
When not to use
- to submit or confirm an action; use a button instead