Since the very dawn of the web, links have been a foundational element of the online experience. Nor has their prevalence dwindled: studies show that following links is one of the most frequent actions carried out by people browsing the web. Over the past 30 years, designers have tried different looks for the link, but one visualization dominates: the underline. The blue, underlined hyperlink is one of the most well established and widely understood conventions of the web.
Given the central role that links play in online life, it should be obvious that the visual representation of a link marker greatly impacts user experience and usability. But as devices and user habits change, is the underlined link actually hindering rather than helping user experience and usability? While it may seems simple and effective, a study from the University of Hamburg shows that underlining has a detrimental impact on readability and design.
It stands to reason that the link will remain a cornerstone of users browsing experiencewe will always need to cite references and link to cat videos. However as the web changes and growsin terms of design aesthetic, code resiliency, user experience practices, and variety of deviceswe must ask ourselves: is it time to ditch the underlined link in favor of something less 1991?
What is the underline?
What exactly is the underline and how did the convention of the underlined link arise? In the days before the web, the underline, as defined by Wikipeida, was a more or less horizontal line immediately below a portion of writing, used () to emphasize key text. This attribute as a method of emphasis still persists in the underlines digital manifestations, but with wider and not necessarily positive implications. The blog Practical Typography advises dont underline. Ever, citing the habit as an ugly hangover from typewriter days which is no longer necessary, given that we now have other methods of emphasis available.
So how did the link become synonymous with blue, underlined text? Since the web is far removed from a typed document, text no longer needed an underline to show emphasis. As such, the significance of the underline was repurposed: if clicked, underlined words redirected the user to a relevant resource. And why blue? Thats an accident of history: around the time of Tim Berners-Lees WWW browser prototype, most computers were limited to a 16 color display (if they had color at all!), and blue was the next darkest color to black. While technology improved rapidly, the hyperlinks style stayed blue and underlined.
Benefits to the underline
There are good reasons why the underline has remained so dominant in link visualization. For starters, it has brand recognition: how many other online stylistic elements have remained consistent for the past 30 years? It guarantees link visibility when scanning a text, and visually indicates which links youve already visited. These visual cues help to increase click-through (as anyone who has fallen into a Wikipedia hole knows).
Some users find the interruptive nature of underlined links useful; it allows them to more easily navigate to important or useful information on the page. Lee Munroe puts in pretty bluntly in Smashing Magazine: remember that users dont read; they scan. Youve heard that before, and its true. So, make sure your links are obvious.
Conventionally underlined links can be a functional aid to user scanning and summarizing, fulfilling Steve Krugs usability mantra Dont make me think. Underlined links also score points on the accessibility scale. Color blind or color insensitive web users have no problem identifying underlined hyperlinks, but less luck when faced with color differentiated links alone.
The negative UX impact
But those plus points dont mean the underlined link is immune from replacement or criticism, particularly when it comes to UX. In 2014, this was made apparent by the historic decision of internet giant Google to drop the underline hyperlink. Googles decision to junk the underline on its search engine result page (SERP) in favor of link color differentiation was, according to Principal Designer Jon Wiley, essential to improve readability and create an overall cleaner look. While users on a Google SERP have the necessary context to expect links, some more article heavy sites are also dropping the link. For instance, the NNGroup has dropped the underline and published an article about hyperlink stylings.