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.

If I have several links, what are the best practice to demonstrate that that link has affordance. Take this example:

We have a link that only underlines on hover and has no colour.

Surely, that's not good enough as the link doesn't demonstrate any affordance? So we improve it. Assuming we can't use colour to define that it is a link (for various reasons I won't mention that aren't design led)

We have a link that is underlined as standard and has no colour.

The only thing to define that this is a link is the cursor icon upon rollover. Is this good enough to define that this is a clickable element to the user?

share|improve this question
    
This question is also very similar to this one and this one. –  Kit Grose Feb 7 at 6:07
1  
Also: There is no hover on touch devices. –  kontur Feb 7 at 11:48
1  
As you make your link-style decisions, consult with a graphic designer. As you add styles to links you also add cruft to the text block and impede readability. You'll have to work together to come to a good balance. –  Ken Mohnkern Feb 7 at 14:21

6 Answers 6

up vote 5 down vote accepted

Jakob Nielsen has a good article about how best to visualise links on the web based on his user research, that answers your question directly.

He summarises it thusly:

Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines

Your instincts are good in that both the existing behaviours you've described as in use by you on your website are considered poor form and are listed in the article.

In the case of text not having any underline, his main guideline (for which he provides two exceptions) is as follows:

There are two main cases in which you can safely eliminate underlines: navigation menus and other lists of links. However, this is true only when the page design clearly indicates the area's function. (Remember: your design might not be as obvious to outside users as it is to your own team members.) Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites

In another article on his site, he includes a chart that demonstrates the prevalence of both of your issues in the intranet sites he's reviewed (it's not obvious that you're talking about intranets, but it may be a reasonable indicator of the wider web):

Chart of link treatments across 56 intranets reviewed by Jakob Nielsen
Chart by Jakob Nielsen (Source).

share|improve this answer
    
I'd like to point out the it's very common for hyperlinks to not be underlined anymore. Case in point, ux.stackexchange.com –  Homer Jun 13 at 15:53
    
@Homer: as noted by Jakob Nielsen in the quote I pulled from the article, underlines can be safely removed from hyperlinks in certain circumstances. That having been said, I don't think ubiquity is necessarily equivalent to "best practice". –  Kit Grose Jun 15 at 13:43

For active links blue color with underline are most common. Hand pointer and underline text is useful for color blind people. You can change default blue with the color of your website theme. Only thing you need to take care links should visible enough in paragraph text.

share|improve this answer
    
Good that you pointed out problems with color perception and why it speaks for underlining. –  kontur Feb 7 at 11:50

Underlined links will surely feel comfortable to older internet users, since it used to be the standard some years ago.

However, this affordance might not work for everyone; so, in other sites like Wikipedia you can find some links that depict a small icon beside, to note that the link will get the user to an external site or similar.

More examples exist all over the web. Make sure to adopt a solution that fits your application and, most importantly, your users! :)

share|improve this answer

We have a link that only underlines on hover and has no colour.

No, thats not good enough. Marking it as a link just with a colour isn't any good either, as it won't work for colour blind people. So an accessibility fail.

We have a link that is underlined as standard and has no colour.

That sounds a little subtle. Possibly alter the colour on rollover & remove the underline for a bit more visual que that it's an active link. ekapros suggestion of an icon for external links is a best practice.

share|improve this answer
    
Interesting comment. Although I disagree with your first statement as it provides little construction, your second statement of an "icon" being present is a nice idea. Thanks –  DLM Feb 9 at 11:35

Font style is also an option. Some sites will use san serif for the body text and a seriffed font for links or you could use italicized or bold treatments. Color is used often because it is associative and selective visual variable and can be used fairly subtly without ruining an overall design theme.

share|improve this answer

I think regardless of what you decide stylistically, the one thing that always signifies that something is clickable, whether it's text, a button, an image, whatever, is the pointer (or hand) cursor:

pointer hand cursor

share|improve this answer
1  
By this measure, mystery meat navigation reasonably affords clicking, which I'm sure you'll agree it does not. This is a bit like saying "you can see if this library has a secret passage by pulling out every book—if you find a secret passage, there was a secret passage." –  Kit Grose Feb 7 at 6:14
    
Indeed cursor:hand is very important with these types of links - just the perceived "initial" interpretation of whether something is a link or not is what is most important - having this hand symbol will not be at the beginning of the users through process as to whether this is, indeed, a link or not. –  DLM Feb 9 at 11:36

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.