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 recognizable as links. Most of the links we use are text links.
default link underlined with icon being optional
- 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
Standalone link not underlined with icon being optional
- 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
Call to action link with icon being optional
A promotional weblink where users can take action to find more information in the next page.
Do's
- ensure the link is aptly named so the user is correctly guided to the desired information
- the link text must be concise to describe its purpose and destination.
- ample spacing between links is essential for effective use on mobile devices
Don'ts
- if the link text is ambiguous
- if user cannot determine it's interactivity
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