In the very early days of the Internet, links were a basic interaction element. And it’s still very popular: studies show that linking is one of the most popular things people do online. Over the past 30 years, designers have tried all kinds of links, but one thing hasn’t changed: underlining. That blue underlined hyperlink is one of the clearest and best understood habits on the Internet.

The World Wide Web contains documents and links.” – Tim Berners-Lee, 1991

On December 25, 1990, Tim Berners-Lee, the inventor of the World Wide Web, successfully used the Internet to implement the first communication between an HTTP client and a server. From Tim Berners-Lee wikipedia

Links play a central role in the Internet, so the visual representation of link tags should have a significant impact on user experience and usage. But as devices and user habits change, do underlined links hinder rather than help user experience and ease of use? So far it seems simple and effective, but a study from the University of Hamburg in Germany shows that underlining can also have a detrimental effect on readability and design.

Cat videos are supposed to keep the basis of users’ browsing habits — we always need to introduce references or connect to other Internet resources. Then as the Internet changes and evolves — in terms of design aesthetics, code elasticity, user experience habits, and a wide variety of devices — ask yourself: Should we be getting rid of underlined links now compared to 1991?

What’s the underscore?

What exactly is underlining, and how did the underlining convention come about? The most recent explanation on the web, as defined by Wikipedia, is “a more or less horizontal line below the text, using (…) Used to emphasize key words “. This attribute still exists in the numeric representation of underscores as a means of emphasis, but has a broader and not necessarily positive meaning. blogTypesetting guidelinesSuggested in”Do not use underscores. Never.”. The old habit of using links in the printer era is no longer needed because we now have other methods of emphasis available.

Underlining was a boring habit in the printer era, when printers did not have bold or italic styles. So the only way to emphasize the text is to press Enter and underline the text. This is just a workaround for a technological flaw in the printer era.

So how do links become synonymous with blue underlined text? As the web moves away from typed documents, text no longer needs to be underlined. As a result, the meaning of underlining is redefined: if clicked, the underlined word redirects the user to the relevant resource. Why blue? It’s an accident of history: in the days of Tim Berners-Lee’s prototype WWW browser, most computers were limited to 16-color displays (if they had any), and blue was the closest thing to black. Despite rapid advances in technology, hyperlinks remain blue and underlined.

Translator’s note: This image is only used to show the effect of the underline, Google search similar to English text. The context is not correct, so it is not possible to parse out 233 escape 🙂

Benefits of underlining

There are many good reasons why underlining remains the dominant visual aspect of links. For starters, it’s very recognizable: how many interactive elements have remained in the same style over the past 30 years? It draws attention to links as you browse through text and visually prompts links you’ve already visited. These visual cues help drive clicks (as anyone who has stepped into a Wikipedia pit knows)

Some users find the underlined link break browsing feature useful; This makes it easier for them to find important or useful information on the page. Lee Munroe confesses in Smashing magazine: “Remember, users never really read, they just browse. You’ve probably heard it before. It’s true. So make your links more visible.”

Common underlined links can be useful for browsing or summarizing, following Steve Krug’s famous phrase, “Don’t make me think.” Underlined links also work for accessibility. Color-blind or color-impaired Internet users can easily identify underlined hyperlinks, but cannot face color-coded links alone.

Negative user experience impact

But that doesn’t make underlined links immune to substitution or ridicule, especially with the advent of UX. In 2014, Internet giant Google made the historic decision to stop using underlined links. According to lead designer Jon Wiley, Google’s move to abandon underlining in its search engine (SERP) in favor of link color differentiation was essential to “improve readability and create an overall clean look.” Even if users have the necessary scenarios to link to using Google’s SERP, some large reading sites are slowly dropping links. NNGroup, for example, has abandoned underlining and published an article on hyperlink styles.

Google’s mention of improved readability means that ease of use and the overall experience are negatively affected by underlined links. According to a 2003 Hamburg University study, underlining did score lowest on readability and global content comprehension in various link visual effects tests. The linked text is less readable and harder to identify the linked text. The paper noted that while “link markup is a compromise design,” underlining seems to be the deadliest compromise design for readability.

Of course, underlining is a compromise in terms of interface aesthetics and visual design. According to Awwwards or Creative Bloq, underlining is rarely used among the many “great minimalist websites”. How can we avoid this kind of compromise design?

Link alternatives and improvements

When designing hyperlinks for websites, designers have the opportunity to improve on existing conventions or try other alternatives. One solution that won’t stray too far from existing standards is to improve the shade of blue. However, if a designer wants something more extreme, the alternatives to consider are displaying links on demand or changing colors, both of which performed well in the Hamburg study.

Link color

When deciding on link colors, designers must consider color contrast and be aware of color-blind users. To accommodate all users, links should have a 3:1 contrast with black text and a 4:5:1 contrast with white background. Fortunately, there are a number of tools (including Adobe Illustrator’s built-in views) that can replicate some of the colorblind forms. Replicate some forms of color blindness. This is very important when a designer decides that a design meets standards. Webaim, an organization dedicated to helping designers design websites for everyone, suggests that if links are not underlined, they should have at least some “non-color indicators” so that users can identify links, even if they are visually impaired.

As Jakob Nielsen says, “Assuming that linked text is colored, it doesn’t necessarily need to be underlined”, Assuming the link text is colored, It’s not always absolutely necessary to underline it, but it is always necessary to emphasize links in some way.

Display links on demand (also known as Hover)

To show or hide links requires the user to hover the mouse over the text to see the associated styles. While this makes the site look simpler, it also introduces some significant drawbacks. Without blue text colors or underscores, users are forced to look for links, resulting in less link interaction. Another problem with touch-screen devices is that mobile users can’t hover and won’t thank you for hiding them. As Hoa Loranger advises in her NNGroup article, “Never let the user rely on ‘mouseover’ to determine whether text is clickable. People don’t spend a lot of time and energy looking for links.

Color overlay (also known as link decoration)

Based on Hoa recommendations, it is necessary to display the presence of links. But does it have to be the standard blue, underlined link? Andy Rutledge discusses some niche alternatives to underlining, such as “various border types/positions/configurations, background colors/images, and even less desirable decorations like line-throughs.” While these can yield interesting results and can be adapted to certain brand identities, designers must consider the readability implications of this choice.

The last

There is no need to follow the conventions of using underscores to design links – after all, underscores have their flaws and interaction slots – but links need to be prioritises for visual and interactive purposes. It is important to consider the design and ease of use of links in your site. No matter which approach you choose, there are some golden rules that apply to all user experience friendly link visual design.

  • Do not use underscores unless they are links

  • Use different colors to distinguish between visited and unvisited links

  • By writing semantic HTML to achieve links

  • Write a prompt for the link that tells the user to jump to it (something like “click here” to avoid misunderstanding)

  • Keep links short, 3-5 words

  • Maintain overall style consistency and integrity throughout the site

  • Never have more than 100 links on any page, Matt Cutts explains why