Underlined Links — When Is It Ok To Break From Convention?

Posted: 29 May 2014 05:30 AM PDT

Following convention leads to a more usable site. Convention presents the known and expected to visitors, which helps them orient themselves and lets them use existing knowledge and apply it to your site. If convention is so helpful, is it ok to ever break from it?

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

A recent change to Google’s search result page has me thinking about both links and convention. You may have noticed the change. Google removed underlines from all links. The underline shows on hover, but not by default. When I first saw the change, I didn’t notice the missing underlines. I could tell something was different on the page, but I thought it was a slight increase in font-size.

I’ve seen a few articles since, that discuss the change and suggest it will lead to many other sites across the web dropping the underline on links as well, potentially reducing the accessibility of links.

Why Google Can Drop Underlines

Like I said, I didn’t notice the underlines had gone away when I first saw the changed results page. Shows how observant I am. Or maybe it shows that the underlines aren’t necessary.

Google’s results still look enough like they did before. Everything is still in the same place. The text that used to be links are still links. Their color is the same. Anyone who’s used Google for any length of time (which should include nearly everyone) probably isn’t confused by the new look. Something tells me the color says link more than the underline.

It wouldn’t surprise me if many people didn’t notice, just as I didn’t. Perhaps they also sensed something different, but didn’t instantly connect the difference to the change in link appearance.

Even if the changes was more significant and did lead to some confusion, Google could probably get away with it. Many people rely on Google and would be motivated to learn the new. They likely visit Google often enough speeding up the learning. Would it still be the same on a different site that wasn’t used by as many people or as often? How about this site?

Why This Site Doesn’t Underline Links

The previous design of this site used blue, underlined links. I link out a lot from posts and in reading you’d pass by quite a few blue and underlined fragments of text. I wondered if anyone found them distracting and if they kept people from making it through posts.

I no longer underline in-content links as you know if you visit the site. Like Google, the underline appears on hover. Or perhaps I should say that like this site, Google now shows underlines on hover, given I beat them to it by a couple of years. And in fairness to designers everywhere, I was hardly the first person to drop the underline.

Instead of the underline I italicize the links. The links are still blue, though a less saturated blue that doesn’t stand out as much against the black text.

To some degree that choice was specifically made to make links less noticeable. I want you to be able to read through the content without being distracted. I didn’t want the links to disrupt the flow of your reading. I do, however, want you to be able to find the links when you want them and think there’s enough difference with the rest of the text to make that easy enough for most.

Note: Looking at the links and text now, I think the contrast in value probably isn’t enough, which is something I should look into more.

Hopefully you can both ignore and find the links based on what you want. People do seem to click them. Analytics tells me they get clicked often.

Let’s face it. You’re a web savvy audience. Why else would you have read this far into a post about web design. I’m sure I can break quite a few conventions and you’ll figure it out quickly.

Getting back to links here on the site, they’re located primarily in three places.

The main menu
The secondary menus
In-Content links

In the main navigation the links look like ordinary text. In the secondary menus, the links are blue, but again it’s a desaturated blue. Links in the main menu get an underline on hover and links in the secondary menus have their background color change on hover.

Neither the main menu or the secondary menus follow the conventions for what a link should look like. In both cases though, the menus look enough like menus. They use enough of the conventions that signal navigation bar or menu that I would think people would recognize each menu item as a link.

I’ve already discussed the in-content links, which are a desaturated blue and italicized. Underline on hover and noticeable, but not noticeable.

There’s actually a fourth place you might find links here and that’s in the images. The logo and the rss icon are links. Some images in posts are links when they’re licensed under creative commons and require attribution.

While I don’t think it happens often, I expect some people may not realize the in-content links are links. It’s ok with me. It’s not ideal, but I think what’s gained in making content readable offsets the loss some people may have not realizing links are links. I’m also thinking anyone who doesn’t figure it out, probably isn’t an ideal visitor and this site isn’t an ideal landing spot for them.

There are enough clues for those with even just a bit of web savviness to identify the links. They’re the only blue text on the site and for the most part they’re the only italicized text.

Another note: I realize on occasion I italicize some non-clickable text. It possibly sends a mixed message even though the text isn’t also blue. It’s something else I should take a look at and reconsider.

Even if you didn’t know instantly, I doubt it was much effort to figure out what is and isn’t a link here on the site. Even if finding that first link was an accident, I don’t expect it took long to find the rest.

There’s enough similarity between links and enough difference with everything else so the information learned from one link, quickly transfers to the others. Click one and you’ll know you can click the rest.

I may not be following the exact convention for links, but I am following some of it and I do my best to keep things consistent across the site. If the link is in-content, it’ll be a desaturated blue and it’ll be italicized.

Is it ok to Break with Convention?

If you want to reach the most people go for the convention. Links have been the default blue and underlined since there were links on the web. The practice of underlining text in general has gone away for the most part so as not to be confused with the convention.

Convention is the least common denominator. It’s what will work for the most people. Blue and underlined is well-ingrained in nearly everyone online. It’s not something that requires savvy.

Like anything else in graphic design, like anything else in language, there are multiple ways to communicate the same thing. Blue and underlined are not the only way one can show that a link is a link. You could bold all links for example and only use bold for links.

The further you get from the convention though, the harder it will be for the less savvy to know the link is a link. The savviness of your audience should be a great consideration in how far to veer from the standard. You should also consider the web as a whole is much more savvy than it might have been a decade ago.

If you emphasize linked text in some way so it contrasts enough with the surrounding text to be noticeably different, it likely provides enough visual cues for people to click.

People who revisit your site will have more opportunity to learn the new and likely need even less cues to figure things out. You might be breaking convention, but if you remain consistent, you’re establishing a new convention for people to learn. It might be a convention that only exists on your site, but it’s a convention nonetheless for your one site.

Again I’m not so worried about it here as I expect this site is visited by web savvier people and part of my aesthetic choice was to make the links less noticeable.

Convention helps orient people. It’s one less thing they need to learn to use a particular site. The knowledge they gained on other sites is easy transferred, assuming you follow the same conventions. The more sites that follow the same conventions, the easier for everyone.

When people talk about a design being intuitive, what they really means the design follows enough established conventions so everyone knows how to use it. It’s learned behavior though. There’s no intrinsic property of blue, underlined text that makes us want to click it. It’s something we’ve learned over time.

There is a downside to following convention and that’s that it can lack interest. It’s familiar. We’e seen it before. Ho, hum. Convention can be easy to ignore. It’s like ad blindness. We all know where the ads are, which makes them easier to ignore.

Where links are concerned the default blue might not fit your design. It’s unlikely you want all your color choices to follow from the stander blue used in links. The design of the links should fit with everything else. Constraints are good, but every site shouldn’t be constrained to work with the same blue.

It’s also possible a convention isn’t the best way to implement something. It might have been and people copied it. It might not have been and people still copied. It’s convention more because it’s common than because it’s the best solution.

Think about main navigation, which is often a horizontal list of links. It’s worked well for years, but is it the best solution for a narrow screen? That depends on how many links there are. If you have more than four or five, it doesn’t work so well on phone screens.

Responsive design is forcing us to rethink navigation. On smaller screens an off canvas pattern probably works better and I expect it’ll become the convention. A menu button or a hamburger icon will reveal the menu. It works and works well.

I won’t be surprised if it becomes convention on wide screens too. We’ll have become used to them on smaller screens and understand how they work. It’ll be easier to develop when it doesn’t have to change as much. It will probably replace other navigational patterns at some point.

Tips When Breaking Convention

Assuming you do want to break convention and try something different, I’d suggest a few things to make the learning curve less steep.

Don’t change everything. Hold on to some aspects of the convention as you change other aspects. I don’t underline links, but the links are still blue, even if a different blue. Make the new similar enough to the old to be recognizable for it.

Visual unity is important in general and for developing conventions. The sameness established convention for a particular design. Reuse in other designs establishes it beyond the one site.

If you decide that all links should be green and bold on your site and you’re consistent in only links and nothing else being bold and green, then you help people understand that on your site green and bold is a link. If enough other sites adopt the same aesthetic treatment, it becomes convention.

Think of it as a spectrum or continuum. At one end is repeating the convention exactly. At the other every characteristic of the text is different and unrecognizable as the convention. The closer to convention the more usable it will be initially. Figure out where on the continuum your audience is and how far that allows you to break from convention should you want.

I’d also suggest making sure you know the convention and understand why it’s become so. Understand why the color blue and why an underline are used to indicate a link. Did it have to be blue? Underlined? Were the choices arbitrary to any degree?

In the case of links, blue and underlined were mostly likely chosen because they contrast with the typical black or dark grey used for text in general. That suggests you can break the convention as long as you make your links stand out from the rest of the text.

Conventions are important. They do make sites easier to use and they help orient people to new surroundings. Don’t be afraid to deviate from the convention, though. Do understand why you’re breaking with it and what the convention was designed to do specifically.

The less web savvy your audience, the better you are to stick with convention. The more savvy, the more you can change with the confidence your visitors will be able to adapt quickly.

Download a free sample from my book Design Fundamentals.

The post Underlined Links — When Is It Ok To Break From Convention? appeared first on Vanseo Design.