Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Is it good practice to make visited links different color from not visited links? Many browsers make visited links violet.

Or is it good to remove underline from visited links if not visited is underlined?

Or is there other better techniques?

share|improve this question

4 Answers 4

It is better to have the color of the visited links different than the non-visited links. User actually believes on/requires Recognition rather than recall : one of the Human Computer Interaction principle.

If the color is different then it will be easier for the user to recognize which links he referred/visited so that he will not visit those links again if they are of no use.

Alternatively he can also use the links to visit if the links are useful as they will be recognized by different color.

share|improve this answer
    
+1; "Recognition rather than recall" - that was good one, I'll try to remember this principle :) –  webvitaly Jun 26 '13 at 20:43
    
Now say that three times without stuttering! Thanks for sharing! –  Majo0od Jan 21 at 23:36

It is indeed good practice to make visited links a different color. This helps a user to easily identify a visited link and identify if he need to go to the link or not. Sometimes he maybe looking to visit a new link when searching for something or sometimes, he need to revisit a link. So if there is a lot of links to choose from, then changing color of visited links is a very good idea.

Another attractive way would be to give images (like bulleting) and when a link is visited, you can change the image color. Its more attractive but the first method is simpler. You can give any color to visited or non-visited links but its better to keep it violet and blue since its a standard and new users wont get confused.

share|improve this answer

It's good practice to let users know where they've been, and by default this link is violet. But more importantly this link need to be different from unvisited links, and making it clear to the user which is which. Underlines on text have consequenses on readability, so don't use that - ever.

A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.

Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.

These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly

Reference: Top 10 Mistakes in Web Design (2011)

Underlining

But if you want to use underlining to adress daltonians (achromate) users, it could be possible. The problem is that you can't remove the underline in visited links, since they wouldn't be noticed by those users. Maybe you can change from solid (_) to dotted (...) underlining? But to my knowledge there isn't a convention for this.

The main thing is still to diffentiate unvisited to visited links in a way users understand them.

share|improve this answer
    
There are many people who are daltonians (achromate) and they can not distinguish black text and blue link. So that is why it is important sometimes to have underlined links. Mark Zuckerberg is daltonian too by the way. –  webvitaly Jun 26 '13 at 9:18
1  
@webvitaly Now that explains the User Experience of Facebook :) Sorry, couldn't help myself. But your right, this is a factor, which you can address with underlining. Problem is that you can't remove the underline in visited. Maybe change from solid (___) to dotted (...) underlining, but to my knowledge there isn't a convention for this. –  Benny Skogberg MCSA Jun 26 '13 at 9:23

Take a look at the The Definitive Guide To Styling Web Links article on Smashing Magazine.

There are tons of great suggestions and best practices there.

I went ahead and pulled out some of them to display here.


INTRODUCTION

Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas put it, “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”. So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we pause to read a bit, but inevitably we end up clicking a link of some sort.

STYLING LINKS

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.

ENSURE CONTRAST

If you decide to make links blue, then make sure no other text (including headings) is blue, because users will expect it to be a link, too.

Also, don’t underline text that isn’t linked because users expect underlined text to be a link. And keep in mind users with poor sight. Red won’t stand out to someone who is color blind, so consider underlining or bolding links, in addition to changing the color.

DON'T FORGET ABOUT LINKS

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.

Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.

HOVER STATE

Offering feedback to users that they’re hovering over a link is good practice. The best way to do this is to change the background color, change the text color or remove the underline.

a:hover { text-decoration:none; text-shadow: 0 0 2px #999; }

The mouse pointer usually turns from an arrow into a hand when the user hovers over a link. But this functionality is sometimes lost; for example, in IE when the link contains a span element, or on “Submit” buttons. Fix this by adding the cursor type via CSS.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.