Link
A link is a text element (or sometimes an icon) that navigates users to another page, section, or external resource when clicked or tapped. Links typically appear inline within content or as part of navigation menus. They help users discover additional information or move between sections of a product or website.
Usage
Navigation & Discovery: Links enable users to explore additional pages or resources, helping them find relevant information.
Cross-Referencing: Inline links direct users to definitions, citations, or more detailed explanations without cluttering the main text.
Contextual Actions: Links within menus or lists guide users to specific product features, settings, or external services.
Use cases
Hyperlinks in paragraphs, blog posts, or documentation
Navigation links in a website’s header or footer
Inline references to related articles, external websites, or documentation
Not to be confused with
Best practices
Use Descriptive Link Text
Avoid “Click here” or “Read more” as they provide little context.
Instead, embed the descriptive text in the link (e.g., “Read our detailed documentation on forms”).
Maintain Visual Consistency
Commonly, links are underlined and/or displayed in a specific color.
Ensure a clear hover/focus state to indicate interactivity.
Prioritize Accessibility
Ensure color contrast is sufficient for users with low vision (links should stand out against normal text).
Keyboard users should be able to tab to links, and screen readers must interpret link text accurately.
Avoid ambiguous link text—screen readers often list links out of context, so the text must make sense on its own.
Open External Links Wisely
Users generally expect links to open in the same tab.
If opening a new tab is necessary (e.g., external sites), consider providing an indication or using an icon.
Avoid Overlinking
Too many links in a small area can overwhelm users and dilute content clarity.
Prioritize links that genuinely help users navigate or learn more about a topic.
Placement & Spacing
Place links logically near relevant content.
Ensure enough spacing or visual distinction so links are easy to tap on touch devices.
Use HTTP or Routing Appropriately
For internal navigation within a single-page app, leverage client-side routing (if available).
Reserve full page reloads or external links for content that isn’t part of the same application.
The link’s text should be descriptive rather than generic (“Read more” or “Click here”). Whenever possible, make the linked text convey the target’s content (e.g., “See our Pricing Options” instead of “Click here for pricing”).
Summary
A link provides a straightforward way to navigate between content or resources, forming the backbone of web navigation. By using descriptive text, clear visual cues, and proper accessibility features, links help users explore and engage with your product seamlessly. Consistent styling, minimal clutter, and logical placement ensure an efficient and intuitive linking strategy that enhances overall usability.
