Why two kind of links should be visually different in a site? [closed]

Question

In a site we have different kind of links, some are pure user related, some are pure navigational. Some are linked headings (which are black).

Are we going too far away from best practices? Is there a set of examples/instructions which we can follow.

Answer 1

As per my understanding your two types of link might be required if they belong to following two categories

1. Navigational Link which are like direction to go to relevant page for any info on the anchor text.
2. Header links which have relevant information on the current page and if more info, a dedicated page exists link it to that.

While in first case the user is expected to go straight away to the click link (so they should look like conventional link) in the later case the links might not be too obvious to avoid navigational clutter and let the user sink in to the info at current page and move ahead only if it interests him.

But again it all depends on what are these links for.

Answer 2

There aren't firm rules or best practices. A principle I follow is that if the result of clicking them is similar, then their appearance should reflect this (obviously, with the different elements like titles or paragraph text, they can't always look exactly the same).

Also it's wise to understand what users may have already learned: if they behave like links do on the rest of the web, then they should not only look similar to other links on your site, but also other links on the web.

Answer 3

There are no guidelines for designing links except that text links should be made visually distinct from regular non-clickable text, and that the standard way to do this is by underlining them. For usability, the user shouldn't have to hover over it in order to see that it's a link.

Aside from that, you would just apply the same common sense approach one applies to all other UI elements.

Non-linked headings are text content just like non-linked body text. So how do you distinguish them? Well, you can make the heading bigger, or heavier, or a different color or typeface. Or you could organize the heading differently using alignment, margins, horizontal rules, etc.

It's no different with linked text. But if your headings are already differently sized/positioned/etc. then there's no need to distinguish linked headings from other links.

Apply the same IA principles to links as you would everything else. Navigation links are very important, so they should be visually distinct and both aesthetically and spatially separated from the other items in the UI.

Other types of links with special purposes, like tags or download links, should also be easily distinguishable from regular links. But this could be done with a simple icon or even just by grouping the links together under an appropriate heading.