What are the key link types?

 

Deep dive

Links can be categorized based on:

• Destination: Anchor, internal, external

• Appearance: Text, button, icon

• Purpose: Navigation, breadcrumb, contextual, footer, hybrid, or inline (e.g., in forms)

Each type has unique functionality and appearance. Let’s break down their differences and practical use cases.

What are the key link types?

Destination

Depending on the destination i.e. where the link brings the user, there are anchor, internal, and external types of links. 

Anchor link

Anchor links, or in-page links, are hyperlinks that direct users to a specific section or location within the same page. Anchors are commonly used to navigate within longer content pages by allowing users to jump directly to relevant sections without having to scroll manually.

Source

The common use cases are: 

• Scroll-to-top features; 

• Landing pages or one-page layouts; 

• Table of contents; 

• Call-to-action elements. For example:

Source

📚 Related reading: In-Page Links for Content Navigation

Internal link

Connects one page within the same website or app to another page. Internal link design is used to navigate between different sections, pages, or content within a single domain or app. They help users explore related information and improve navigation.

Source

External link

Also known as an "outbound" is a hyperlink that points from one website or app to a different website domain or external resource. External links take users to resources, pages, or content that are hosted on a separate platform. They provide references, citations, or opportunities for users to access additional information outside the current website or app.

Source

In summary, anchor links allow users to navigate within the same page or app screen, internal links connect different pages within the same website or app, and external links direct users to content on other websites or external resources.

Appearance 

Depending on the appearance, there are text, button, and icon types. 

Text link

Directs users to a different page, section, or resource. It’s typically underlined or styled with a different color to indicate interactivity. It could be inline links within paragraphs (e.g., "Learn more about accessibility.") or standalone UI elements (e.g., "Contact Us").

Source

Button link

Combines the functionality of a link styled as a button. It’s often used for calls-to-action (CTAs) like "Sign Up" or "Learn More."

Source

Icon link

Uses icons instead of (or alongside) text for quick access to actions. It could be standalone icons (e.g., a home icon, a search icon that directs to a search page, or social media icons in footers) or combined with labels for clarity.

Source

Source

Purpose

Depending on the purpose, there are navigation, breadcrumb, contextual, footer, inline links in forms, and hybrid types of links. 

Navigation link

Provides structured pathways within the app or website. It’s usually arranged in navigation menus  (e.g., "Home | About | Services"), sidebars, or dropdowns.

Source

Breadcrumb link

Shows the user's location within a hierarchy and allows backward navigation. These are usually horizontal sequences separated by symbols (e.g. Dashboard > Projects > Project A > Reports > Financial Overview).

Source

Contextual link

Provides additional, relevant information or actions within a specific context. May be embedded in text, menus, or dropdowns (e.g., "More details" in tooltips or help sections.)

Source

Footer link

Offers secondary navigation to less prominent pages or resources. It’s usually grouped together in a footer, often in small font size (e.g., "Privacy Policy" or "Terms of Service”).

Source

Inline link in a form

Provides helpful resources or actions within forms. It usually has minimal styling, is often integrated into instructions or error messages (e.g., "Forgot password?" on login pages or "Create an account" below a sign-in form.)

Source

Source

Hybrid link

Combines navigation with an interactive action. Is often integrated with dropdowns, modals, or other UI components. It could be UI elements that open modals (e.g., "Preview" opens a modal instead of a new page) or those in dropdown menus that lead to new pages or sections.

Source

When to use anchor links and when to avoid them? 

Anchor links have several advantages:

• Facilitate navigation: They allow users to jump directly to relevant sections without extensive scrolling, saving time and effort.

• Enhance content structure: Serving as a table of contents, they provide an overview of the page's content, helping users form a mental model of the information.

• Improve user engagement: By providing direct access to specific content, they can increase discoverability and encourage users to interact more deeply with the material.

There are three common use cases:

• Tables of contents: In lengthy articles or guides, they act as a table of contents, allowing users to navigate directly to sections of interest.

• Back-to-top features: It enables users to return to the top of the page swiftly, which is especially useful on long pages where scrolling back manually can be cumbersome.

• Indexes and FAQs: Alphabetical indexes or lists of FAQs can use anchor link design to help users find specific information quickly without unnecessary scrolling.

Source

Anchor link UI design can be also used on landing pages, in one-page layouts, or in call-to-action elements.

Does screen size affect usage patterns?

• Desktop screens: On larger screens, content is more visible, and users can scroll through sections more easily, potentially reducing the necessity for anchors.

• Mobile devices: Smaller screens display less content at once, making anchors more valuable by allowing users to jump directly to desired sections without excessive scrolling.

Best practices for using anchor links

Consider these guidelines:

1. Assess content length

• Evaluate necessity: Anchors are most beneficial on pages with substantial content. For shorter pages, they may be unnecessary and could clutter the interface.

• Content optimization: Before adding them, consider if the content can be shortened or reorganized to enhance readability, potentially eliminating the need for in-page links.

2. Create descriptive headings 

• Clear headings: Use descriptive and concise headings for each section to guide users effectively.

• Consistent link text: Ensure that the anchor link text matches the corresponding section heading to confirm to users that they've reached the correct location.

3. Distinguish in-page links

• Visual Indicators: Differentiate anchors from standard hyperlinks through visual cues or labels such as "On this page" to clarify their function.

• Accessibility considerations: Provide context to assist users with disabilities, ensuring that screen readers can accurately convey the link's purpose.

4. Provide feedback after navigation

• Visible targets: When an anchor link is clicked, ensure the destination heading is visible and not obscured by fixed elements like sticky headers. Displaying a bit of preceding content can help users orient themselves.

• Consistent experience: Test your design across various devices and screen sizes to maintain a reliable and predictable user experience.

5. Optimize their placement

• Strategic positioning: Place anchors where they are easily accessible, such as at the beginning of the content or in a sticky sidebar, to facilitate effortless navigation.

• Avoid misleading placement: Do not position anchors in areas typically reserved for primary navigation to prevent user confusion.

Why can anchor links be confusing to users?

Users generally expect hyperlinks to lead to new pages. Anchors, which navigate within the same page, can disrupt this expectation, potentially causing disorientation. Without clear indicators, users might not realize they've moved to a different section.

So, should I use anchor links?

Anchors, when used thoughtfully, streamline navigation through long content, enhancing user experience. Evaluate their necessity carefully and differentiate them from standard links. Usability testing can validate their effectiveness, guiding data-driven decisions.

Should links open in a new tab or the same tab?

While the choice depends on the context, opening new pages in the same tab is generally the best practice for usability, accessibility, and user control.

Reasons to open links in the same tab

1. Mobile-first experience

With over half of global web traffic coming from mobile devices, navigating between tabs on small screens can be challenging. When new pages open in the same tab:

• Users can rely on the "Back" button to return to the previous page without confusion.

• It reduces the risk of users losing their place or struggling to manage multiple tabs.

2. Accessibility benefits

Opening new pages in a new tab can create barriers for users with disabilities:

• Older screen readers may not notify users that a new tab has been opened.

• Users with cognitive disabilities may struggle to understand why the "Back" button isn’t working in a new tab.

3. User control

When new pages open in the same tab, users retain control over how they navigate:

• Those who prefer new tabs can always right-click or long-press to open a link in a new tab.

• Forcing links to open in a new tab removes the user’s choice and can lead to frustration.

Exceptions to the rule

There are specific cases where opening new pages in a new tab is recommended:

• Avoiding process interruptions: If users are filling out a form, watching a video, or performing a similar task, opening a new tab ensures they won’t lose progress.

• External resources: When directing to third-party content, opening a new tab can prevent users from unintentionally navigating away from your site.

Consistency matters

Consistency in link behavior is critical for a smooth user experience. Users should not be surprised by unexpected navigation patterns. Adopting a consistent approach helps build trust and ensures users know what to expect when interacting with your site.

Do icons in external links improve usability?

Icons in external link design might seem helpful at first glance, but a closer look suggests they may not actually enhance usability. 

Based on GOV.UK's experience and decision to remove the external link icon, here are the key findings:

1. While it’s occasionally useful to notify users of an external link—such as during a task where users may want to stay on the same platform—there’s no need to flag every external resource. Otherwise, you can clutter the interface and distract users unnecessarily.

2. If it’s crucial to inform users that a link leads to an external site, words work better than icons. Adding a clear hypertext (e.g., "Visit [External Site]") communicates the information more effectively than relying on an ambiguous symbol.

3. The external link icon is not universally recognized and is often confused with the "opens in a new window" icon, which depicts overlapping boxes. Some websites even use the external link icon to indicate new windows, creating inconsistency and confusion.

In summary, the GOV.UK case study demonstrates that external link icons often do not improve usability. Instead, they can create confusion and clutter. When it’s important to highlight that you are directing a user to an external resource, using descriptive text is a clearer and more effective approach. This ensures users understand the context of external resources without unnecessary visual complexity.

What are the differences between links and buttons?

While these UI elements can appear similar, they serve distinct purposes in user interface design.

Purpose and functionality

1. Buttons

• Action-oriented: Buttons are designed to trigger actions that affect the front-end or back-end of a website or app. Examples include submitting forms, opening modals, or performing a specific function.

• Interactive changes: They often result in immediate changes on the page or initiate tasks.

• Examples: “Log in,” “Send,” or “Submit.”

2. Links

• Navigation-oriented: Links are used to navigate between pages or redirect users to external sites or documents.

• No immediate changes: They do not perform actions that modify the page’s content or data.

• Examples: “About the new look,” or “Don’t have an account? Sign up.”

Design and visual differentiation

To prevent usability issues, these UI elements should be visually distinct:

• Links: Typically styled as underlined text, they guide users to a new page or resource.

• Buttons: Styled with background colors, borders, or shadows to indicate their interactive and action-based nature.

Source

Accessibility considerations

Styling links as links and buttons as buttons ensures users, including those with disabilities, can easily distinguish their functions. For instance, a CTA button that only navigates to another page should be styled as a link for clarity and consistency.

Color considerations

Color plays a significant role in button usability:

• Positive actions (e.g., "Submit") are often indicated using blue or green.

• Destructive actions (e.g., "Delete") are highlighted in red.

• High-contrast colors, like a red button on a green background, help draw attention to key actions and increase conversions.

📚 Related reading: How to design accessible buttons?

Why do users struggle to navigate websites and apps without clear link types and hierarchy?

1. Lack of visual differentiation between links and other elements

When links are not visually distinct (e.g., not underlined, lacking contrasting colors), users struggle to recognize clickable elements. This can lead to confusion and missed opportunities to navigate to relevant information or perform desired actions.

2. Ambiguous link types and purposes

Without clear differentiation between links and buttons, users may become uncertain about what will happen when they click – whether they will trigger an action or navigate to another page or resource. 

3. No logical link hierarchy

A well-structured link hierarchy in design ensures that:

• Primary UI elements: Highlight critical actions or destinations.

• Secondary UI elements: Offer additional, less essential options.

Without this structure, users may struggle to prioritize navigation options, leading to decision fatigue and frustration.

4. Poorly defined link context

Links without descriptive text (e.g., “Click here” instead of “Learn more about accessibility”) lack context, making it difficult for users to predict their destination. This is particularly problematic for users relying on assistive technologies like screen readers, which rely on descriptive hypertext to provide meaningful navigation.

5. Cognitive overload

A website with unclear link types or hierarchy forces users to analyze every option, increasing their cognitive load. Instead of navigating smoothly, they expend mental effort deciphering the structure, leading to fatigue and disengagement.

❓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 is the purpose of this UI link (navigation, action, providing information)?

• Where does it take users (internal page, anchor, or external resource)?

• Should it be styled as text, a button, or an icon based on its purpose and hierarchy?

• Is it placed where users naturally expect to find it?

• Is the link text descriptive and meaningful, especially for users relying on assistive technologies?

• Does it provide sufficient visual and textual indicators (e.g., underlining, color contrast) for all users to recognize it as interactive?

• Does it provide feedback when clicked (e.g., visual changes, confirmation of navigation)?

• Have I tested the usability across various devices, screen sizes, and assistive technologies?

• Does the style and behavior match the overall design system and patterns used elsewhere in the product?

• Are the interactions predictable and consistent with user expectations?

⚠️ 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.

• Failing to make links distinct from regular text (e.g., no underline, insufficient color contrast).

• Using vague or non-descriptive phrases like "Click here" or "Learn more" instead of clear, context-rich text that informs users about the destination.

• Including too many links on a single page or in close proximity.

• Sometimes opening new pages in the same tab and other times in a new tab without clear reasoning.

• Using button styles for navigation links instead of actions (or vice versa).

• Missing descriptive alt text for icon links, insufficient keyboard navigation support, or improper focus states.

🤝 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!

• Linking to a new tab vs. same tab

• Buttons & Links: The Basics

📚 Keep exploring 

Never stop growing. Explore resources on link UI, thoughtfully handpicked by Cieden’s designers.

• Anchors OK? Re-Assessing In-Page Links

• In-Page Links for Content Navigation

• Guidelines on designing better hyperlinks