Not long ago, a colleague approached me with a look of sheer frustration. “Pardon me, do you happen to deal with printing tasks?” they asked. Affirmatively, I nodded, as in our co-working environment I occasionally used the shared printer, which was at the root of their vexation. “For hours, I’ve been on a wild goose chase for the correct printer driver. I’m at my wit’s end – I just can’t locate the correct software…”
“It’s quite simple,” I assured them, “just login to our office portal and download it from there. If I recall correctly, that’s how I managed it.” I began demonstrating, navigating through the portal. But their exasperation only grew: “It’s a hyperlink, isn’t it.” They had failed to spot the “Download Driver” instruction as a clickable link.
This incident sheds light on the fact that hyperlinks are the lifeline of any digital document. Without these navigational aids, the web would be reduced to a mere repository of static files. So how does one craft the quintessential hyperlink? Let’s look at the strategies.
1. Distinguishing Links from Buttons
…and recognizing that buttons aren’t substitutes for links. There’s a common misconception regarding web links. Links denote a connection between two data points, offering context and sometimes, significance. [pullquote]While buttons initiate actions, links create contextual bonds[/pullquote] Unlike buttons that trigger actions, the role of a link is to form this underlying connection.
2. Communicating Link Intent Clearly
The flexibility of the anchor element allows its utilization in myriad ways without fail. However, an ideal link communicates its purpose through clarity. We possess a range of headings but only one anchor element. In an optimal situation, we would have dedicated elements for different kinds of links: one for external resources and another for internal navigation. For now, utilizing absolute and relative paths is the nearest alternative we have for conveying semantic meaning. Furthermore, styling links via CSS can illustrate their intent – internal links should echo the site’s branding, whereas external links should be visually distinct.
3. The Importance of Visited Links
The web can be considered as a temporal space, with links acting as conduits through time, rather than physical locations. Your browser history is a sequential log of your online journey. Visited links contextualize our data navigation and, by default, highlight unexplored information. Ideally, links would be matched with the browser history to check for any updates since the last visit, but even without that, styling visited links distinctively can greatly enhance user experience by providing cues to previously traversed paths.
4a. Conventional Wisdom Suggests Blue Links
The so-called Mere Exposure Effect explains why the familiar blue of hyperlinks is appealing. Almost everyone perceives blue with ease, making it a standard color for links.
4b. When to Avoid Blue Links
The overwhelming prevalence of blue in UI design poses a challenge: if blue is a primary brand color, should links follow suit, or will that obfuscate link recognition? Designers may gravitate towards complementary hues such as orange or green to avoid such confusion, while also staying within the blue color spectrum.
5. The Case for Underlining Links
To counteract potential color blindness issues, as exemplified by the printer driver incident, underlining serves as an additional visual marker for links. Google has moved away from underlining, leveraging the inherently recognisable blue of their links. Still, for those wary of disrupting text flow, alternative approaches like applying a dotted bottom-border or highlighting with background colours can be employed.
6. Links Must Be Immediately Recognizable
Identifiable links are crucial for efficient interaction, even more so for screen reader users who rely on link scanning for finding pertinent content. Thus, links should be presented as clear signposts within your text.
7. Empowering Links with Effective Microcopy
Place links at the end of sentences or text blocks to maintain coherence and avoid disjointed reading experiences. Generic instructions like “click here” or “read more” are not only SEO disadvantages but also suggest that you’re skirting around providing substantial information. Links that are well designed should self-evident, making additional directives unnecessary.
8. Links as Enablers of Excellent UX
It’s vital that links are intuitively operational on any device. Links should adhere to common usage practices: internal links opening in the same tab, while external ones open anew. The choice must always reflect user needs, such as preserving the navigation path with the back button. Furthermore, a link should always fulfill its commitment, delivering exactly what the user expects without any surprises or disconnect.
