How do I create link text that improves user experience and navigation?

Deep dive

Link text improves navigation, accessibility, and usability, and supports SEO. Well-crafted links create a smoother and more intuitive user experience. Let’s explore the key guidelines for making them effective. 

Clarity is king

• Avoid vague terms: Instead of "Click here," use "View Product Details," "Read More," or "Learn About Our Services."

• Be specific: "Download White Paper" is better than "Get the White Paper."

• Use action verbs: "Apply Now," "Start Free Trial," and "Submit Form."

This example highlights both effective and ineffective examples. Good examples include specific phrases like "how to post a tweet," while vague text such as "here" falls short. Some phrases, like "direct messages" or "Twitter widget," are clearer than "here" but could be improved further by incorporating action verbs.

Source

Keep link text concise but meaningful

• Aim for 3-7 words.

• Avoid single words unless they're obvious (e.g., "Homepage").

• Include enough context to stand alone.

Consider the context

• Match the surrounding text: Link text should flow naturally within the sentence.

• Anticipate user goals: What do you want the user to achieve by clicking the link?

• Use consistent language: If you're linking to the same page multiple times, use the same link text each time.

Here’s an example where the text needs to be rephrased to help users who scan the content quickly understand the context of the links.

Source

Prioritize accessibility

• Use descriptive link text for screen readers: This helps users with disabilities navigate your app or site more easily.

• Keep it concise: Long text can be difficult for screen readers to announce.

Test and iterate

• Conduct user testing: Observe how users interact with your links.

• Analyze click-through rates: Track which links are most frequently clicked.

• A/B test different options: See which versions perform better.

Rationale

• Cognitive load: Vague text increases cognitive load for users. They have to spend extra mental effort to figure out where the link leads. Clear and concise variants reduce cognitive load, making the user experience smoother and more efficient.

• Usability: Clear link text improves usability. Users can quickly scan the page and understand where they can go next. This leads to a more intuitive and enjoyable user experience. 

Consider the eye-tracking study results: the user initially scanned the first two paragraphs in an F-pattern but then shifted focus primarily to the links. These links not only facilitated navigation to additional topic-related information but also functioned as headings, providing a clear overview of each paragraph's content.

Source

• Accessibility: A descriptive hyperlink phrase is crucial for accessibility. Screen readers rely on it to provide context to users with visual impairments. A link that says "Learn More" is not very helpful for a screen reader user. A more descriptive variant, such as "Learn More About Our Sustainability Initiatives," provides valuable information.

SEO benefits

Google's search algorithms pay special attention to link text to understand page context and relationships. Well-written link text can:

• Improve crawlability;

• Enhance semantic understanding;

• Boost relevant search rankings.

Beyond just following guidelines, effective link text should tell a story. Each link is a promise to users about what they'll find when they click. By being descriptive, consistent, and user-focused, it can significantly improve the overall user experience while supporting accessibility and SEO goals.

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• What action will users take when clicking this link?

• Is the destination clear from the link text alone?

• Does this link appear within a paragraph or stand-alone?

• Are users likely to understand industry terms?

• Will the link make sense when read by a screen reader?

• Is it distinguishable from regular text for colorblind users?

• Are there multiple links nearby that could be confused with each other?

• Should file type or size be indicated (for downloads)?

• Will the link open in a new tab/window?

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

1. Over-optimization:

• Stuffing keywords into link text;

• Making every link "stand out";

• Inconsistent terminology.

2. Poor information scent:

• Generic "click here" link anchor text;

• Mismatched expectations;

• Hidden or unclear destinations.

🛠️ Useful tools 

These tools will make your job easier and more effective.

• SortSite: Analyzes link patterns and consistency across a site, identifying broken links, duplicate text, and accessibility issues.

• Screaming Frog: One of the best crawlers for technical SEO site audits.

• Dovetail: Helps organize and analyze user research data about interactions and navigation patterns.

• Optimal Workshop's Treejack: Tests navigation and link structures through tree testing, helping validate link text effectiveness

• Clarity by Microsoft - Provides heatmaps and session recordings to analyze how users interact with links.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• Writing Hyperlinks: Salient, Descriptive, Start with Keyword by Marieke McCloskey