1. Link Label Text Label… Click Here… Image Image Lorem Ipsum Lorem Ipsum
A Link, which is formally called a Hyperlink, is a reference point to another webpage, document or section of a webpage. Clicking or tapping on the link takes the user from the current page to the linked page, document or picture specified by the link. Links appear as a colored or underlined word or sentence in a section of text. It can also come in the form of an image or small animation such as in a webpage banner ad. On link hover, the cursor will change from an arrow to a pointing hand.
There are two kinds of links:
Internal links, defined as links that point to another page on the same site.
External links , defined as links that point to a page on another site.
(An icon is typically used to differentiate an internal link from an external link).
Annotated Wireframe
Simple text, most commonly blue in color and underlined upon mouse hover 1
Label
Use when
Do not use when
Navigating to different locations within or out of the current system.
Navigating to different locations on the same page.
Performing an action, like Submit, Edit, Delete, etc. Instead, use a Button.
Actions affect the website’s back-end or front-end. Instead, use a Button.
Variations & Best Practices
Text Link
Text Label…
Click Here…
Don't
Simple text, blue in color
Underlined upon mouse hover
Do not use “Click Here” as the text label.
Image Link
Image
Image
Simple Image on a webpage
Visual difference upon mouse hover
Animation Link
Lorem Ipsum
Advertisement
Lorem Ipsum
Advertisement
Animation
Animation
Simple animation on a webpage
Visual difference upon mouse hover
Hotspot / Anchor link
Hotspot 2
Image
Hotspot 1
Simple image on a webpage with multiple hotspots / links to different locations.
Research Summary
A web browser usually displays a link in some distinguishing way, e.g. in a different color, font or style. The behavior and style of links can be specified using the CSS language. The appearance of a mouse cursor may change into a hand motif to indicate a link. In most web browsers, links are displayed in blue text when they have not been visited, and purple text when they have.
Models Cited
Google Search
Wikipedia
IBM Knowledge Center
Amazon.com
Related Patterns
Buttons
Basic List