What is the best practice for link affordance?

Question

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?

Answer 1

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 by Jakob Nielsen (Source).}

Answer 2

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.

Answer 3

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! :)

Answer 4

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.

Answer 5

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.

Answer 6

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: