To underline or not

[chrisJumbo]

On our page, we differentiate the links by using different colors. Blue if you haven't visited and Red if you have. The linkable text isn't underlined unless you move your mouse over the link.

What are people's opinions on whether to always use underlines? I liked not having underlines because it seemed to mess up the flow of the page. But, I'm curious how many new visitors may not realize there are clickable areas on our site.

cd :O)

[vwebworld]

The important thing is that the links can be identified as links... using a different color and usually a mouseover effect.

You certainly do not have to have the same mouseover effect for all links either.
For example, a golf lesson website I just completed has underlined links in the body of the page but the menu links are not underlined (underlined as a mouseover).

~Roland

[crankydave]

I don't have any hard data but my observations and conversations with several folks seem to indicate that visitors like to see the underline.

It easily identifies the links at a glance and for whatever reason many come to expect to a link be underlined.

I don't know of any surveys that have been done, but if I were to hazzard a guess, I'll bet if you asked a large group how they can tell what's a link, the majority would say it's underlined.

Dave

[kgun]

Originally Posted by crankydave

I don't have any hard data but my observations and conversations with several folks seem to indicate that visitors like to see the underline.

It easily identifies the links at a glance and for whatever reason many come to expect to a link be underlined.

Agree. For that reason I have started not to underline, but bold important text.

And if you can, do not use the same colour on ordinary text that you use on links.

Consistency across the site is also very important in my view.

[crankydave]

Found this...

Design Guidelines for Visualizing Links (Jakob Nielsen's Alertbox)

Older info but makes some really good points.

Dave

[Dubbya]

Originally Posted by crankydave

folks seem to indicate that visitors like to see the underline.

I'm with ya CrankyDave, I second that emotion. For the visual clue, I'll usually underline them, then remove the underline on hover.

Wanna know why? Read "Don't make me think" by Steve Krug and be sure to check out Usability Expert Jacob Nielsen's recommendations at Design Guidelines for Visualizing Links (Jakob Nielsen's Alertbox)

That's my .02

[qh4dotcom]

I always use underlines when I create a link I want people to click on...and I always use the color blue.

[Matteo]

As Long as it is as obvious as a brick in the head, it doesn't matter if you underline. Just so long as the people know where to go and how to get there.

[jeffposaka]

Underline the text links. And don't underline non-links. It is good usability because it is what people expect.

[DrTandem1]

Yes, underlined text intuitively invites a visitor to click on it. More importantly, do not underline text that is not a link.

Sometimes, the placement of text that are links such as headings in the top-right corner of a page are obviously links for navigation. They may not need the underline in their idle state, but they should change with a mouse-over with color and/or an underline.

I have never been a fan of the "visited" link state. I tend to leave a link, visited or not, looking like a fresh link.

[crankydave]

Originally Posted by DrTandem1

I have never been a fan of the "visited" link state. I tend to leave a link, visited or not, looking like a fresh link.

This is what I was doing. I preferred the nice clean look of links being the same color.

But after reading the info linked above and doing some thinking, I've changed my mind... for now. I can't tell you how many times I've searched for something and couldn't remember exactly what site I navigated to. That link changing colors allows me to see exactly where I was.

Dave

[DrTandem1]

True. I guess I should have qualified that a bit more. I don't like the visited state to go dull or stop looking like a link, because then I have an even harder time finding it again.

[crankydave]

Originally Posted by DrTandem1

True. I guess I should have qualified that a bit more. I don't like the visited state to go dull or stop looking like a link, because then I have an even harder time finding it again.

That's the part I'm toying with. For now, I think I'll take my cue from the SE's.

Dave

[ArticleMaster]

I say that depends on the target visitor to the web site. Some of my web design clients' customers need to see an underlined link (although I don't use good 'ole blue), and some clients' customers are web savvy enough to know the bold or differently colored text is a link.

Two things never to do regardless of what your links look like, keep them consistent throughout the entire site and don't underline text that is not a link.

[noel_x99]

I use "good ole blue" all the time after reading Jakob Nielsen. I sometimes change the color of blue depending on the site design. And though visually, I think the page looks better without underlined blue text, "looking pretty" is seldom the goal of the web page.

I always underline links - except in menus.

I don't see a reason to break away from "web standards". You can still make pages that look good and still act the way that people expect them to act. How I explain it to customers is that all cars have gas pedals on the right and brakes on the left. People expect the standard and a car that doesn't follow that standard would be hard to drive.

Don't make me think!

[kgun]

Very interesting discussion, since this is about design, usability and visibility.

• Here is a simple CSS styling that I like.

body {
background-color: #F0F0EC;
}
#navigation {
width: 100%;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}

• Here is another, more complex Adobe (former Macromedia) Dreamweaver template that I like. I have bolded the link schemes to make it easier for comments:

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}

************************************************** **************

#utility a{
color: #ffffff;
}
#utility a:hover{
text-decoration: underline;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}

************************************************** ************************

a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}
a.glink:hover{
background-image: url("glblnav_selected.gif");
text-decoration: none;
}
.skipLinks {display: none;}

************************************************** ************

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}
.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}
.subglobalNav a:hover{
color: #cccccc;
}

************************************************** ************

#search{
position: absolute;
top: 2px;
right: 0px;
z-index: 101;
}
#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}
#search a:hover{
margin: 0px;
}

************************************************** **************************

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}
#breadCrumb a{
color: #AAAAAA;
}
#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}

************************************************** ************************

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}
.story a.capsule:hover{
text-decoration: underline;
}
td.storyLeft{
padding-right: 12px;
}

************************************************** *************************

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("bg_nav.jpg");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}
#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;


Any comments?

[marcel]

Do some A/B split testing. I am sure you will dicover that underlined links do a better job at making your users behave the way you want them to.

[Innomax]

One more way to indicate hyperlinks is bullet..a bullet icon could easily represent any text adjucent to it as a hyperlink and also to give it more prominence, you can give hover effect.

Thanks
Innomax
Internet Marketing,Online Marketing Services,Web Design & Development,Web Marketing,SEO Services- InnoMax - www.inno-max.com

[Mads Dam]

It doesn't matter what you do to a link, as long as it can easily be recognized as a link.

Physically clicking a link means that you go to a new page, or position.
But mentally links mean more of the same. Here's some examples:

Click on the title of a text, and get the whole article...

Click on the image, and enlarge it, or zoom in...

Click on the highlighted word, and the dictionary explains...

Click on the songtitle, and the song plays...

Click on the still image, and video begins...

Notice that only the first link-type insists upon a physical page change,
the rest can be achieved with javascript, css, hover-effects etc...

[crankydave]

Originally Posted by Mads Dam

It doesn't matter what you do to a link, as long as it can easily be recognized as a link.

Easily recognizable by whom?

By whom can partially be dictated by your clientelle. Over the weekend I made some color changes. I have since received a handful of emails from regular visitors thanking me for the change. They knew where the links were but can now "see" them better. In this instance, it mattered.

kgun... I think you touched on something important earlier and that was consistancy. Out of curiosity, is the only place you use bolding links?

Dave

[kgun]

Originally Posted by crankydave

kgun... I think you touched on something important earlier and that was consistancy. Out of curiosity, is the only place you use bolding links?

Dave

Not bolding links. Bolding ordinary text on the web where it would be natural to underline it in a paper document.

My points can be summarised like this:

• Reserve underlining on web pages for links.
• Use different colours for different states of the link. If possible, avoid these colours other places on the page / site.
• Be consistent accrosse the site.
• Use bolding, italic or colour for important text, text that would have been underlined in ordinary paper documents as we know them from the preceeding centuries. (Note, I think Microsoft reward people for not using paper. It saves the rain forest).
• Keep styling in separate site-wide styleshets that is easy to modify.
• Overall principle: Make it simple, as simple as possible, but no simpler.

[crankydave]

ahhhhh... My mistake. I misread your post.

All good points.

Dave