Forum Moderators: open

Message Too Old, No Replies

Link Colors - Usability Issues with Visited Links

How do you handle your link colors?

         

Nick_W

7:11 pm on Jul 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi all,

How do you feel about leaving the visited color of your links to the browser default?

In the past I've always specified visited links as the same color blue as normal links because it looks better but, in the redesign of a new site I've not got to writing the CSS for my link colors/actions yet and have gotten quite into the idea of leaving them as the ugly purple they tend to be by defaut.

We know that navigating, and more importantly, navigating with intuitive ease is essential for a website if you want your users to browse more than a couple of pages right? So, how much does the visited link color play in this?

Has anyone done any split testing on this, or have anything useful to share on the subject?

Opinions sought, and welcomed.

Nick

NickH

7:50 pm on Jul 31, 2003 (gmt 0)

10+ Year Member



I like to be able to tell I've visited a link, even if a few days ago, by the color. I agree the default purple is ugly; I change it to red in browser options!

Hence, on my site, I just let link colors default.

Nick

pageoneresults

8:06 pm on Jul 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Nick_W, I've been wrestling with this one myself. These past few weeks have been information overload for me as I've been studying very carefully the WCAG Guidelines and it is recommended that you provide visual clues for visited links.

I've always made my a:link and a:visited links the same color. I think way back in the beginning of my design career, I was getting tired of clearing my history so I could see what the site really looked like in all of its glory.

I just switched one site I manage over to providing visual clues for visited links. Based on my research so far, you need to provide enough contrast between a:link and a:visited so that users know they've visited that resource.

I'm not real thrilled using a:link{color:#00a} and a:visited{color:#609} as those colors do not work well with many designs. As I move forward with my research into WCAG Triple-A status, I find more and more of those sites using the default browser colors for link attributes. In some instances, the effect is downright ugly.

tedster

8:44 pm on Jul 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I try to follow this guideline - that a visited link should look "used" or "spent" somehow. That is, what ever color I choose in the css rule, it should not make the link more prominent, but less prominent.

It helps to view your color choices in grayscale to make sure that even people who don't see well in color will still see a difference - that is, don't just vary the Hue. But the principle is to use some visual cue that makes the link less attention grabbing.

It is possible to do this in most cases without doing extreme violence to the aestheics of a site's palette. It's a lot easier if the graphics designer has it in mind from the beginning.

Nick_W

8:48 pm on Jul 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




I think way back in the beginning of my design career, I was getting tired of clearing my history so I could see what the site really looked like in all of its glory.

I'm almost positive that that's where my habbit came from! - Interesting points guys...

Nick

moltar

8:48 pm on Jul 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Usually I use the same color for links and visited links in main menu items. And in content I use different colors for links and visited links. Usually try to keep it close to orignal colors: blue and red.

pageoneresults

9:02 pm on Jul 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm also finding that through the use of CSS and being able to show the Active Page link has been of great benefit and receives a lot of praise from those who have seen it. It has added one more level of usability to my CSS menus. And of course a little more bloat to my style sheet since I have to assign unique ids to each page and link.

I like tedsters theory, as long as there is some sort of contrast between link, visited, hover and active, what more could the visitor ask for? ;)

Nick_W

6:27 am on Aug 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>active page

eh? - Example p1r? ;-)

Nick

pageoneresults

6:38 am on Aug 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Oh, you know, the one we used on the Vertical CSS Menu [webmasterworld.com] (Tip from keimano tokoyami [webmasterworld.com]) not long ago...

#bindex a#index, #barticles a#articles, #bblogs a#blogs, {
font-variant:small-caps;
color:#000;
background:#eee;
}

And then in the <body> of each page...

<body id="bindex">
<body id="barticles">
<body id="bblogs">

And then in the link for that page...

<a href="/" id="index">
<a href="/articles/" id="articles">
<a href="/blogs/" id="blogs">

That will then highlight the link of the page that you are visiting. It lets the visitor know which page they are on.

[edited by: pageoneresults at 6:49 am (utc) on Aug. 1, 2003]

Nick_W

6:41 am on Aug 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ahhhh... yes, I'm with you. I can imagine your CSS get's quite fat on a diet like that though huh? ;)

I've always used a bit of PHP to work in a class="active" on the right anchor...

Nick

pageoneresults

6:48 am on Aug 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I've always used a bit of PHP...

Unfortunately I need a bit of ASP if anyone out there has some. ;)

I've been able to trim fat out elsewhere and redistribute it where it is needed. I like the functionality of the CSS and it is blazing fast. There are no delays whatsoever in rollover or active states. It could get a little unwieldy on a larger scale site although I'm managing about 50 links right now with one style sheet and it performs just fine.

Nick_W

6:52 am on Aug 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>>performs just fine

Yeah. We have to keep this in context: Imagine the table based/JS/gif rollover equivalent ;)

Nick

DrDoc

2:46 pm on Aug 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



a visited link should look "used" or "spent" somehow

Ehm... delete the link? ;)

SuzyUK

3:16 pm on Aug 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What I've seen a bit of lately and I don't like is the use of line-through to indicate a visited link

It kinda looks like the page is saying you're not allowed to go there anymore..

Suzy

antoshka

8:47 pm on Aug 1, 2003 (gmt 0)



usually, i use CSS to set one color for all states of a link and then overwrite the 'hover' with another color. this approach works for me well!

[edited by: engine at 9:12 pm (utc) on Aug. 1, 2003]
[edit reason] No sigs, thanks. See TOS [webmasterworld.com] [/edit]