Everyone, Style Your Visited Links!

It’s not just our beloved Stylegala who failed to style their visited links. It’s something that we come accross quite often, unfortunately. Too often, in my mind. So, why is this so important, you ask?

Putting Yourself in Your Visitors Shoes

It all boils down to confusing your visitor, which no-one wants to happen. When you visit a site, any site, you want to navigate with ease and find what you’re looking for quickly. One of the most important ways to do so is to differenciate visited from unvisited links. You need to put yourself in your visitors shoes and anticipate their wishes and needs. And it’s not just visited links–any link must be styled in a way that is easy to recognize.

Someone visits your site. He immediately wants to know his options, which places he can visit. You provide links and form a menu, a navigation. Your visitor also wants to know where he currently is on the site. You provide descriptive headers, some menu highlighting and so on. Your visitor also wants to know where he has been. You need to style your visited links in order for them to be able to know that.

If you don’t style your visited links, the user, experienced or not, will sooner or later start to click on links he visited before and spin around in circles. He’ll become irritated and could soon leave your site. Now, you don’t want that to happen, do you now? Didn’t think so.

How to do it

Browsers are pretty smart by default. If you don’t style your links at all, you see a pretty good example of what you need to do. The links are blue, visited links are purple, all underlined. It makes sense; the blue stands out more and is logically the “fresh” link, a link you haven’t clicked on yet. Mission accomplished!

Of course, the default style is boring and may not suit your color scheme, so you want to add some spice and play around with colors, font-weight, text-decoration and borders, etc.. You may also use a line-through, ticks (as this site currently does), and so on. As long as you keep in mind the user needs and expectations and usability, and style accordingly, you’re fine.

Web Accessibility Issue

There’s one more issue that needs to be covered, if only in a couple of sentences. From the accessibility point of view, visited links styling is an important matter which needs more attention. Help your disabled (color-blind) users and provide underlined links. Sometimes coloring them only just isn’t enough. Don’t confuse them (or anyone else, fot that matter) by underlining parts of text that are not links unless you have a good reason to do that.

In a Nutshell

  • Hyperlinks must be easy to spot
  • Make a distinct difference between visited and unvisited links
  • Style them sensibly and logically. Visited links should be less obvious (darker, for instance)
  • Underline all your links

Next Post:
Previous Post: