It has become fashionable in recent times to remove underlines from links on home pages and lists of repeating summary content.

You see this pattern on the home pages of almost every news site on the planet. One assumes this has been done in the name of aesthetics, but my guess is that in many cases little thought was put into the user experience.

Google did it, to much fanfare. “The link underline is dead!”,  some proclaimed.

The important question is, should we do the same? The answer is, it is complicated, but well researched.

In his excellent book Don’t Make Me Think Steve Krug wrote about designing websites so that users do not have to stop and think what to do. If a site visitor has to ‘think’ it interrupts their flow and creates a bad experience. In extreme cases they abandon the site or the task they were doing.

There are two levels of ‘thinking’ in this context.

The first is unconscious. Users may find it slow to move around a site, tasks take longer than they should, they have to re-read pages to work out what to do. There is a general feeling of frustration, but they do not know why. They may not even be aware of the feeling.

The second is conscious. This occurs when the user experience is so bad that they recognise their own frustration, and the reason for it. They think, “this website sucks”.

I’d wager that most people have encountered this feeling when using online booking forms.

That feeling even has a name – ego depletion. When the cost of thinking goes up, energy consumption increases, and you start to become ‘aware’ of a problem.

I strongly recommend you read this article on managing ego depletion. Read it now before continuing here.

It has been known for years that faster websites are perceived as being more credible. It is also known that a slow website reduces revenue.  Colour, typeface and whitespace also impact the user’s perception of the content and the time it takes to consume content.  There are a whole package of factors that must be understood and managed when designing a website.

So, returning to the subject of links, the Baymard Institute has researched link underling and found the following:

“If you see an underlined word or sentence in a text online, you immediately conclude that it’s a link.”

Nielson Normal Group also have advice on links:

To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn’t have to guess or scrub the page to find out where they can click.

Google did it because they have a fixed layout, the site only does only one thing, they have clear colour differentiation between links and other text (and only link the headline), and they were able to extensively test the impact of the change before doing it. Not everyone agreed, though. 

But links are so ugly, I hear you cry, especially on large type or when they are lots of them grouped together.

I agree, and there are solutions to both these problems.

The first is to adopt customised link underlines. Medium has done it, and many others have followed suit. Others are experimenting with different styles. Wired uses quite bold inline links in body copy. The link underline is back!

Custom underlines allow you to control the position, size and colour of the link. You can retain link underlines but make them more subtle. Radio NZ does it too. If you want to know more about this technique I’d recommend two articles. This one shows a basic implementation, while this goes into much more detail and provides a method to make it automatic.

The second is to use a faux link overlay. This allows you to have one visible link on the headline, and an overlay that makes the headline, image and summary area clickable. This technique is used quite widely by the BBC where they have applied a few tweaks to make it more accessible.

It avoids the very common pattern where headline, image, summary text and sometime even a ‘more’ link have the same link, forcing removal of all underlines.

One side note. Adding an underline on hover does not count anymore. There is no hover on touchscreen devices, and for many sites these now make up 50% or more of visitors.

There is one downside to having clearly defined navigation pathways: time on page takes a dip because people can quickly identify actionable links on a page. And they click on them. If you combine that with a clear uncluttered layout the effect may be even more marked; people can quickly see if this content is what they want, and if it is not they click on the something else. Some might even say that this is what a good user experience is!

I’d suggest that on mobile devices clear layout and clearly defined pathways are even more important. Size (and time) is at a premium on these devices.

So there it is. You can have links that don’t look ugly and so ensure that everyone has a good experience of your site. And that’s the business we are in.