Justinmind

BLOG

Expand your prototyping knowledge

The underline at the intersection of UX design and usability

The underline at the intersection of UX design and usability


The underline is one of the oldest, simplest and most widely understood conventions of the web. In this post we’ll analyze the potential of the underline, and how it can strongly influence – in a positive or negative way – User Experience and usability in your website.

Tim Berners-Lee back in 1991 said that for the reader ‘the WWW consists of documents, and links’. Various studies have indeed shown that following links is the most frequent action when using a web browser.

Despite its simplicity, the underline has great potential as it improves the usability of websites by grabbing the user’s attention. Simple as that? Not exactly. The web evolved, got more and more complicated, and its grassroots didn’t remain untouched for long. With the expansion of Internet devices and hype about user experience (UX) design – which adds so much more to ‘bare’ usability – even such a fundamental of the web started to shake.

What is the Underline?

So let’s start with the basics: what is the underline? It is a “more or less horizontal line immediately below a portion of writing”, according to Wikipedia, “used […] to emphasize key text” in handwritten or typewritten texts. As for web pages, an underline typically distinguishes hyperlinks, “but both users and websites can change these settings to make some or all hyperlinks appear differently”.

underline-description

When we talk about typography in printed documents, we all pretty much know that a major rule of thumb is don’t underline.

underline-bad-habits

But the web is a different communication channel and, as such, therefore portrays the underline in a different way. Across the web, a line under words indicates that if you click on them, you will be taken to a corresponding resource. Historically, it has been associated with the color blue, for a purely technical reason: it was easy to implement as blue was the darkest of the colors available.


Download Justinmind today to supercharge your prototyping process!

DOWNLOAD FREE


The crisis of the underline

However, things on the web move really fast and everything is constantly changing. Last year, an internet giant removed underlines on hyperlinks in search results. Jon Wiley, Principal Designer at Google Search, announced this change without making it feel as historic as it was, letting it pass as just another way to “improve readability and create an overall cleaner look”.

The rise of minimalism in UX design did the rest. Big white spaces and clean pages that didn’t allow for the underline below the relevant words. Therefore, the use of the underline on the web started to drop, much to the disdain of usability experts.

google-underline-system

Should we all say goodbye to the underline? Not just yet. We’re talking about the giant of the web, the most visited website in the world. It generally takes few days for people to adjust to any change Google makes to its UI. The users have a clear understanding of what a link is in Google results and, above all, they expect to see links on a results page, whatever way they are marked.

We would all agree that we cannot say the same of a more or less average website page. While some links may be appear clear from the context, like navigational links and links within text, they must be displayed so that users can differentiate them from the rest of the text. If users don’t get the visual cue, they’re likely to miss out on information. What’s the best solution then? Well,  they say that the best is the enemy of the good, and as always, balance is key. And the underline is a good enough resource to serve the purpose of both UX design and usability.

The underline as a good usability resource

First of all, links shouldn’t be abused. Web users don’t always read, often skimming and only reading boldface and underlined links. This means that the underline often assumes both the functions of highlighting and hyperlinking. This is why we cannot fill a text with links. It’s unsightly from an aesthetic point of view, and it’s useless from a readability standpoint. The results of an interesting study confirm that underlined links negatively affect readability, the main reason being that some characters that physically drop below the underline – such as p,g,j,and q — are getting affected by the underline CSS property value. Surely nobody wants a text full of underlines?! They disrupt the flow of the text, and put emphasis on words or sentences either unnecessarily.

Our advice: use them with care, kindness and understanding (common sense). Think about how they’re spread out within the text, and how long they are. Nielsen gives us useful advice on how to use the underline, and it’s definitely worth a read. Among other things, he recommends that link markers should be between 3 and 5 words long. This, however, limits the expressiveness of links. So, if your content needs to be expressed with a longer link, use it, just don’t exceed it. Without shifting the focus to content strategies and the essential link between content and design–which should never be ignored, mind–we’ll just say: always do what’s best for your users, even if it means to “breaking the rules”. If you think the underline looks pretty ugly and won’t aid the overall user experience, you have some nice design solutions to explore. Consider bottom padding to increase space and avoid descenders dropping below the underline. You can make it dashed, dotted, with a lighter color, or using CSS borders, instead of proper underlines. And you can have a look at Eager’s SmartUnderline too, for further solutions and advice.

underline-or-not-underline

Dropping the underline: how to do it.

If your UX design principles just don’t work with the underline, then don’t use it–but don’t forget its main purpose, i.e. to inform the user of a link in the text. How do you do this without the underline, and keep the website user-friendly and accessible to everyone? As Nielsen says, assuming the link text is colored, it’s not always absolutely necessary to underline it”. On the other hand, giving links a different color with no underline could make it harder to tell the difference between text and links. The rule is simple: to display links make them obvious. The WCAG says you “cannot rely only on one color to convey information”. And, if you drop the underline in favor of color, using blue is not essential, but contrast is. Colors should provide 3:1 contrast with black words and 4:5:1 contrast with a white background. As we mentioned above, blue color has been traditionally associated to links. But this doesn’t always apply. For sure it is best to avoid green and red, which would reduce the accessibility of texts for people affected by color blindness. But have a look at how The Guardian display links before choosing to just use blue.

underline-best-pactices

Another important consideration is with regard to mobile devices and other touch-based UIs, where it’s even more important to correctly visualize links. Let’s think about two different links side by side: it could be hard to differentiate them on a computer screen, but users can still hover on the link to confirm, and recognize the style change after hovering. However, if they are using a mobile device, which lacks hover functionality, they are more likely to miss them. So, is it really worth ditching the underline? The fact that they can lower readability and could be (but are not necessarily) unattractive, is probably outweighed by the positive effect on usability.

So that’s our food for thought. Regardless of what your own priorities are, don’t forget that easy navigation is always one of the main objectives of web design, if not the most important. The power of the underline is difficult replace when it comes down to it. If you are ditching it, take some time to reflect on what we’ve said in this post to turn your website into the powerful communication tool it could be.

download-justinmind-prototyping-tool-banner-1

Daniela Castrataro

About the Author

Daniela is Content Editor at JustInMind

One Comment

  1. Graphic Design Multimedia Web Design » The underline at the intersection of UX design and usability – Justinmind | Your DCTC News Source : Dakota County Technical College Says :

    September 6, 2015 at 6:49 am

    […] via The underline at the intersection of UX design and usability – Justinmind. […]