What is the best way to display linked text?

Question

I always was curious about the following question:

What is the best UX way to present a text that act as information and also as a link (for example to more detailed information).

I always deliberating between the following options:

• use the old fashion way of coloring the text as blue and put underline beneath it. for example:

• just colloring the text as blue (the underline will show when hovering the text). for example:

• similar way is to keep the text in the defualt color but changing the color when hovering over the text.

• don't use any differences between the text with and without link - but use a tooltip explaining that this is a link text when hoverring the text.

• don't use a text as a link .insted use icon near the text.

I know that some of you are going to say that this is depand of the context and the object that the text is presented in. So to be more specific I'm curious about link text inside a table - what is the best way to present a link text inside a table ?

Do you know more ways of displaying a link text ?

Answer 1

Users scan text, and when they do - there shouldn't be "things in the way" such as icons, underlines or upper case letters. All these mentioned make text scanning harder and adds cognitive load to the users scanning. The most important thing to remember is to link the keyword and at the same time avoiding the use of 'here' as a text link.

• Linked text should not be underlined as it decreases readability. More to read: Accepted answer to the question When should hyperlinks be underlined?
• Inline text links should not be accompanied by an icon, because it have a tendency to draw (unwanted) attention. More to read: Accepted answer to the question When to use icons vs. icons with text vs. just text links?
• Linked text can be accompanied by an icon if, and only if, the text is considered to be a label.
• Linked text doesn't have to be default blue. Instead, use the sites accent color which stands out to the rest of the text. More to read: Accepted answer to the question Should hyperlinks be blue?
• Linked text that has been visited should be in a different color than unvisited link. More to read: The accepted answer to the question Should hyperlink text color be changed after visited
• A tooltip may be useful if it explains an acronym in full text.

That's a lot of don't do this-advice. So what should you do? Use the same font size, without using underline, italic or bold style - unless the surronding text isn't bold or italic. The only thing you should change is the link color of visited and unvisted linkes. Nothing else.

Answer 2

use the old fashion way of coloring the text as blue and put underline beneath it.

'old fashioned way' is one way to describe that.

Other ways to discribe it:

• expected way
• typical way
• obvious way

Point being, some times there's no need to reinvent the wheel.

The key thing to do when creating links is to ensure they are visibly distinct from non-linked text. The problem with using only color--especially a desaturated blue is color blindness (as well as poor screens...such as a mobile device outdoors).