What link format works best for an enterprise app?

Deep dive

The optimal link format for an enterprise app depends on the app's purpose, user base, and overall design aesthetic. However, there are a few general guidelines to follow:

• Clarity and consistency: Ensure a hypertext is clear, concise, and consistent throughout the app. Avoid ambiguous phrases and use action-oriented language.

• Visual prominence: Make links visually distinct. Use color, underlining, or a combination of both to draw the user's attention.

• Contextual relevance: The link format should fit seamlessly within the overall design of the app. Consider the surrounding elements, such as typography, color scheme, and spacing.

• Accessibility: Prioritize accessibility by using sufficient color contrast and avoiding relying solely on color.

Common formats 

Here are some specific link formats in UI to consider:

1.Text links:

Pros: Simple, straightforward, and widely understood.

Cons: Can be less visually prominent, especially in dense text.

2.Button links:

Pros: Visually prominent, can convey a strong call to action.

Cons: May clutter the interface if overused.

Source

3.Icon links:

Pros: Compact, visually appealing, and can be easily understood.

Cons: Requires clear and consistent iconography.

Source

When choosing a link format, consider the following questions:

• What is the primary action you want users to take?

• How important is the link in the overall user flow?

• What is the overall aesthetic of the app?

• What are the accessibility peculiarities of different formats?

📚 Related reading: What are the key link types?

Should links always be underlined?

What are the benefits of underlined links?

1. Clear identification:

• Traditional cue: Users associate underlined text with links due to long-standing design patterns. This quick recognition speeds up interaction.

• Accessibility: Underlines, especially paired with color changes, make links more noticeable for users with visual impairments or color blindness.

2. Enhanced readability:

• Guided reading: Underlines act as visual anchors, helping users scan and identify key links in dense text.

• Clear call-to-action: They emphasize clickable elements, drawing attention to actions or important content.

What negative impact can underlined links have on the user experience?

1. Visual clutter:

• Overwhelming design: Excessive underlining can create a visually noisy and distracting interface.

• Reduced readability: Too many underlines break the reading flow, as the user's eye is constantly drawn to potential click targets.

2. Outdated aesthetic:

• Digital evolution: Modern design trends often favor minimalist approaches that prioritize clean and uncluttered interfaces. Underlining can sometimes feel outdated or overly formal.

The decision by Google in 2014 to remove underlined hyperlinks on its search engine results page (SERP) highlights this shift. According to Principal Designer Jon Wiley, this change aimed to "improve readability and create an overall cleaner look." 

Strike the right balance

To maximize the benefits of underlines while minimizing their drawbacks, consider these strategies:

1. Underline only the most important links, such as primary calls to action.

2. Use underlining sparingly and in contexts where it significantly improves user experience.

3. Conduct A/B testing. Experiment with different styles, including underlined and non-underlined options, to determine the most effective approach for your specific audience and context.

4. Consider alternative visual cues. 

How to improve link formatting? 

Color can be an alternative to underlining. It could be: 

• Subtle color shifts: Use a slightly darker or lighter shade of the base color.

• Hover effects: Change the color on hover to draw attention.

• Brand color: Incorporate your brand color to reinforce your brand identity.

☝️ Remember: Links should maintain a contrast ratio of at least 3:1 against black text and 4.5:1 against a white background to ensure accessibility for all users.

Additional recommendations 

Whatever the format, some best practices work for all of them:

• Don’t underline anything that’s not a link—it’s confusing.

• Use different colors for visited and unvisited links.

• Ensure accessibility by using semantic HTML for links.

• Write clear, specific hypertext that describes the destination—skip vague terms like "click here."

• Keep the text short, around 3–5 words.

• Use a consistent style to make your site look polished.

❓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.

• Who is our primary audience? Are they familiar with traditional link cues?

• Are our pages content-heavy? How will underlining affect readability?

• Are our links accessible to users with visual impairments?

• Are color contrasts and underlining sufficient for accessibility?

• How does underlining affect the overall aesthetic of our design?

• Is there a cleaner or more modern way to indicate links?

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

• Overuse of underlined text where no links exist can confuse users, increasing frustration and cognitive load.

• Using only color to differentiate links can make them harder to identify for users with color vision deficiencies.

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

• Is the Underlined Link Hurting Readability? by Cassandra Naji

📚 Keep exploring 

Never stop growing. Explore resources on link format in the interface, thoughtfully handpicked by Cieden’s designers.

• Links by Imperavi 

• How To Use Underlined Text To Improve User Experience by Nick Babich

• Links in body text should be underlined by Mat Janson Blanchet