Hyperlink Styling

[DoubleDee]

In the following screenshot, for a given Sub-Section, I have a "Featured Article" on the left, and on the right, a listing of other Articles displayed as hyperlinks.

Hyperlinks.png


As you can see, I styled the Article Heading on the left as black with no hyperlink line, but a blue-grey when you hover over it. (I stole this from the Washington Post!)

The Article links to the right are traditional.

Originally, I had the Featured Article Heading like a normal hyperlink, but it looked distracting at best.

I thought about making the Article Hyperlinks to the right have the same stype as on the left, but them I am deviating from how all other links on my site look, which is the normal way.

I would appreciate some advice on how to make this more useable and also aesthetically pleasing...

Thanks,


Debbie

[dresden_phoenix]

the following does NOT NEED to apply to your main nav bar. You could pick a notable hue for all your hyper links. A blue has the most 'instant' recognition but , remember there are MANY shades of blue , don't let yourself be trapped by the 'default'. Remove the underline for all links. bring it back on hovers on body-copy size text, this will serve to CONFIRM to the user that the 'notable color' is indeed a link. For links in odd places , headlines and such, depending on how obvious the link relationship needs to be, color them as you normally would or with the 'notable color' , if they are colored normally should then bring the 'notable color' on hover to confirm to the user that it is indeed a link ( you have thus avoided underlines on headlines and such.. but still communicated function)

[DoubleDee]

the following does NOT NEED to apply to your main nav bar.

You could pick a notable hue for all your hyper links.

Sure seems like a BIG LEAP...


Any recommendations?

For the example I provided, I was using color: #057ec2;.

A blue has the most 'instant' recognition but , remember there are MANY shades of blue , don't let yourself be trapped by the 'default'.

So what works better than color: #0000FF; and why?

Remove the underline for all links. bring it back on hovers on body-copy size text, this will serve to CONFIRM to the user that the 'notable color' is indeed a link.

Is a:hover supported by all browsers in all situations?

For links in odd places , headlines and such, depending on how obvious the link relationship needs to be, color them as you normally would or with the 'notable color' , if they are colored normally should then bring the 'notable color' on hover to confirm to the user that it is indeed a link ( you have thus avoided underlines on headlines and such.. but still communicated function)

Well, that is what I did do for heading in the screenshot I provided. (I just didn't match up the colors between that and regular links.)


Debbie

[dresden_phoenix]

So what works better than color: #0000FF; and why?

Well as an ART DIRECTOR who knows UX, I would pick any color complimentary to your sites base color ( this mean I am taking aesthetic liberties because I know the link hue is really not important as long as it' stands out from regular text and clear link behavior is established).

TO REITERATE:
I suggested a 'bluish hue' simply because most folks already have the idea in their mind that 'blue'= link, but I have has sites use brown ( the site base colors were earth tones and body copy was black/gray).

In short, the only reason people #0000FF=link is because it was the default 'color' since the 90s. As most users aren't art school majors with calibrated monitors... they probably would still make connection in their mind with... say ( and this is just for example , mind you) #003e72, but #003e72 could look WONDERFUL with the rest of your sites palette.


BY EXTENSION:
you could break free of blue altogether,if you wanted to. I mean if your site's bg was #00000ff, it would be stupid to insist on #0000ff ( if that seems extreme.. think of the hideous 90s site with #000 or #222 bgs #fff, and #0000ff links! people took to highlighting the "nearly invisible" links so they could read the link. The site authors could have made the link yellow..and it would have been just as obvious it was a link and would have improved usability infinitely.


So, the important part is that you DIFFERENTIATE the color from body-block copy color and keep a certain consistency ( dont pick different link colors for EACH different Hx, and P, and ULs...ect) It's not the hue that matters it's the treatment and consistency.

Is a:hover supported by all browsers in all situations?

More than any other :hover!!!! A:hover was the ORIGINAL :hover ( IE didn't even support :hover on anything else OTHER than A until v7)

[DoubleDee]

Well as an ART DIRECTOR who knows UX,

Art Director, huh??


So what I hear you saying - for non-Art Directors - is 1.) Choose a color that contrasts with the Body Text so it is clear to the user what is and is not a hyperlink, and 2.) Be consistent so that when someone sees "purple" they know it is a hyperlink.

And it sounds like you also like choosing a color that stands out from the Body Text to *cue* that there is a hyperlink, and then sock it to your users by adding the expected underline when they hover over things.

Sound about right?

Thanks,


Debbie

[dresden_phoenix]

So what I hear you saying - for non-Art Directors - is 1.) Choose a color that contrasts with the Body Text so it is clear to the user what is and is not a hyperlink,

Yes. With the added AD bonus that said color can compliment your sites/site-section color scheme.

and 2.) Be consistent so that when someone sees "purple" they know it is a hyperlink.

yup.

And it sounds like you also like choosing a color that stands out from the Body Text to *cue* that there is a hyperlink, and then sock it to your users by adding the expected underline when they hover over things.

Exactly. In fact , many times when you hear about an a:hover effect from the point of view of usability it is as confirmation that "yes this is a click able link"

[DoubleDee]

Exactly. In fact , many times when you hear about an a:hover effect from the point of view of usability it is as confirmation that "yes this is a click able link"

So, do I also hear you implying that it is better to NOT have your hyperlinks be underlined? (Is that like, "So 1995"?!)


Debbie

[dresden_phoenix]

Missed this one.

So, do I also hear you implying that it is better to NOT have your hyperlinks be underlined? (Is that like, "So 1995"?!)

Not at all. What I was saying is that the a:hover was/is there for confirmation. So it was an answer to a "why" rather than a "what".

You make your links stand out, and stand out consistently. and then :hover serves as final confirmation. ( note also, although you can style this with CSS too.. not that I would advice it .. that cursors CHANGE on links... that too is confirmation for the user that that content is a link)

Think of it this way:

1) Style text so that it stands out from other text ( other wise users would have to hunt around like if it was MYST looking for clickable items). How you style a link is not as import as the fact that it stand apart from regular text.

2) Style it similar to other links so as not to confuse the user ( user thus learns: "know one link style.. know them 'all/most' " in your site)

3) Apply a :hover style .. to confirm to the user that this text that is set apart is INDEED a link. This serves for the noobs to your site to start learning the specific style to your links , even on the odd case that you should need(?) to have other styled text that is NOT a link.

4) Final confirmation occurs with the cursor itself. After the user does this a few times around your page .. he should feel instinctively able recognize other links ( this is why consistency is so important)

[DoubleDee]

Missed this one.


Not at all. What I was saying is that the a:hover was/is there for confirmation. So it was an answer to a "why" rather than a "what".

You make your links stand out, and stand out consistently. and then :hover serves as final confirmation. ( note also, although you can style this with CSS too.. not that I would advice it .. that cursors CHANGE on links... that too is confirmation for the user that that content is a link)

Think of it this way:

1) Style text so that it stands out from other text ( other wise users would have to hunt around like if it was MYST looking for clickable items). How you style a link is not as import as the fact that it stand apart from regular text.

2) Style it similar to other links so as not to confuse the user ( user thus learns: "know one link style.. know them 'all/most' " in your site)

3) Apply a :hover style .. to confirm to the user that this text that is set apart is INDEED a link. This serves for the noobs to your site to start learning the specific style to your links , even on the odd case that you should need(?) to have other styled text that is NOT a link.

4) Final confirmation occurs with the cursor itself. After the user does this a few times around your page .. he should feel instinctively able recognize other links ( this is why consistency is so important)

Thanks for the follow up.


Debbie