An Article

Designing Links: Tips for Implementing a Fundamental Piece of the Web

Ben Stankich By Ben Stankich // 12.23.2020

Links are one of the core interactions of the web. Along with reading, scrolling, and typing, they are ingrained into the way we use every website. Think about it: how did you get to this article? By clicking a link. And how did you get to the page before that? Indeed, these links connect the web as we know it.

Not only do we use links to navigate the Internet at large, but also within individual websites. Yet, when building and implementing design systems, website link design rarely gets the same attention as snazzy animations, card visuals, and typeface selection. Broken patterns have emerged (think of all the “Click Here!” links you’ve seen or all the pages that have been opened in another tab). A good design system should consider the link element’s unique properties and define an approach for clear and consistent interactions.

What’s in a link?

Perhaps the bad practices surrounding the link have stemmed from its flexibility. From text (from a single letter to multiple paragraphs), to images (raster, vector graphics, logos), to icons, and even your favorite CSS-only shape — nearly every element, or groups of any combination of elements, can be linked.

If almost anything can be a link, what patterns should be used to let users know what is and isn’t a link? How are those patterns affected when users have different input devices (touch, mouse, keyboard, screenreader)? To answer these questions, let’s start at the beginning.

In HTML, every link is denoted by the anchor tag <a>. Browsers come with a standard user agent stylesheet that make links blue and underlined. Since all browsers use this same pattern, users are conditioned to know that this style denotes a link. Rather than deviating from this paradigm, we can leverage it to help users navigate our sites.

Create a system (within a system)

When it comes to visual design, aim for consistency among links and among all interactive elements (such as buttons and inputs). On the individual level, consider the context the link is within.

There will inevitably be different styles of links because links can play a variety of roles. These usually include general navigation, moving users along a process, linking to supplementary information, or a big call-to-action. A link’s placement within layout, content hierarchy, and even neighboring colors will further contribute to how that link looks and functions.

Basic styles: color and underline

Now for specifics. Let’s first consider the baseline link people are familiar with: a bright color that distinguishes itself from other elements. This is a good pattern to follow.

Choose a high contrast color to reserve for use with interactive elements. Choosing such a visually distinct color guides users to associating that color with something they can interact with. For links, use high contrast colors for all states: default, hover/focus, even the under-utilized visited state. (Going forward, I’ll use hover states to refer to focus states as well, since these are often styled together.)

Using a single color for interactive elements

While color helps users know a given element is interactive, using the tried-and-true pattern of underlining links will reinforce that it is also a link. This baseline adds further clarity regardless of context.

If you choose to underline links, do this exclusively on links. It doesn’t help to set links apart if other elements get the same treatment. Secondly, either apply underlines to a majority of links or use it sparingly. Links should look consistent, so users aren’t kept guessing.

Focus on the default state

We designers love to build hover states, adding visual interest for users to discover. It’s important to remember these styles are only visible to some users: those using a mouse or trackpad. These days, touch devices make up the majority of web usage, and hover styles are not visible to their users. We can’t rely on mouse-based interactions to indicate what is or isn’t a link. Thus it’s important to make links obvious by default.

In other words, hover styles should be supplemental to the default styles that work across all device interactions. Their goal is to reinforce that an element can be clicked/tapped/triggered as a user interacts with it. They enhance what is standard.

One way to test if a link’s design is obvious prior to interaction: Look at a screenshot or design mockup of the page. Can you tell what is a link? If not, you may be relying too much on supplemental states.

The more links there are, the less they should stand out

Not only do we need to take into account the devices users use to interact with links, but we also need to consider the context of the link itself. Websites often contain sections densely populated with links: navigation, menus, even tables or lists. Typically, links should stand out from the surrounding content; but if the surrounding content is mostly links, we need a deeper ruleset.

Time to create a new link style. Instead of a long list of brightly colored links, consider using the default text color and underlining to indicate the link. Or instead of underlining every link in a list, rely on color contrast to set them apart.

Links in the navigation are obvious even without link styling

Remember that there are many UX patterns at play. Navigation and footers have distinct placement and usage, so users intuitively understand they contain links, even if the link design varies. Further, use hover/focus styles to reinforce interactivity on many devices.

Linking a group of elements

Text is one thing. However, many links are made up of multiple elements that together work to convey more information than text alone. It may be an icon/label combo, a product or article (title, image, description), or any number of things. How are these groups styled and how do they behave when you interacted with them?

First, resist the inclination to wrap all these elements in an anchor tag and call it a day. When an entire section becomes a link, users may lose the ability to interact with its contents in meaningful ways, such as selecting text, proper screenreader support, or providing related links.

A more nuanced approach is selective linking. For example, when linking to an article, consider linking only what the user is likely to click on, such as the title or main image. The entire section (excerpt, author, date, etc.) doesn’t have to be linked. This approach doesn’t have strict rules, but is guided by being mindful of what is linked when grouping elements together.

Linking a group of many elements should be done carefully

Many content pieces benefit from being paired together, such as a blog author’s name and photo, or a product image and its title. When multiple elements form a link, pair their hover styles as well to create a single interaction. Even if related elements separately link to the same page, you can coordinate their hover styles.

A word of warning: when pairing hover states across multiple links, be sure to only apply hover styles where a click or tap will trigger the link. At the same time, be aware of group links that have lots of whitespace, since whitespace isn’t expected to be interacted with. A group link’s design is often improved by styling a container around it to help define the link’s boundaries.

Finding the optimal click target size

Remember to have appropriately sized click targets. If a user clicks just outside an icon, it’s highly likely they were trying to click on the icon. Increasing the size of click targets for small links ensures that users don’t need extreme precision to carry out actions.

There’s certainly a sweet spot for click target size: big enough to make clicking/tapping easy, yet small enough to avoid accidental clicks. That last bit is important. There’s been a big push in the design community towards larger click targets, but there’s a downside to being too big.

The Goldilocks principle

On mobile, click targets commonly take up the entire screen. Whether the screen is filled by an ad, image, or group link, it can be hard to find a place to scroll without accidentally triggering a tap. Layout shift only compounds the issue, and is more annoying on devices with smaller screens (and more likely on mobile internet connections). Careful creation of link boundaries can help reduce these issues.

Transparency: let’s be honest

Finally we arrive at the beloved topic of transparency. For years, there’s been a trend to throw 50% opacity on all links when hovered. Granted, opacity is a visually interesting and highly performant property to utilize, and it has a uniform effect on all elements. But making an element transparent makes it appear less interactive, not more.

In UI design, a button is often made transparent to signify that it is disabled or inactive. It retains its place in the layout, but its styling is saying, “Don’t click here; I won’t do anything.” Applying this pattern of transparency to active links that we want users to click on is dangerous.

Can you tell the disabled style from the 50% opacity hovered style?

Wielding opacity as part of the designer’s toolkit is still on the table, but the aforementioned trend is not a good experience. For supplementary styling, change color or opacity, but not both.

Opacity is just a color change in disguise: a function of the element’s color and the color behind it. And when it comes to color, it’s important to be aware of the potential for low contrast scenarios that may arise. It’s easy to track contrast across single-color text with reduced transparency, but much harder for other elements, like images.

Creating a consistent experience

The important thing to remember in all these options is uniform application. If you alter a property on hover, alter it in the same way across all instances (e.g. always go to a darker color, grow an element to a larger size, move it up, etc.). Don’t change in the opposing direction without a good reason.

That brings us back to the guiding principle behind link design: consistency. Take cues from well-established patterns that have been around the block, and create your own patterns, applying them thoughtfully across your design.


Next Up

What Does a Web App Cost? It’s a Conversation, Not a Negotiation

Nick Walsh By Nick Walsh // 12.10.2020

Rather than view your software development budget as a negotiation, think of it as a detailed conversation. Find out how both parties can streamline this process.