Link text usability
Some notes on links within html text (as opposed to navigation bars).
The first fundamental issue is emphasis. Any use of color, underlining, or bold adds emphasis, and thereby subtracts emphasis from the rest of the text.
On the web, people are more likely to scan, rather than read. Therefore, emphasized text is particularly likely to attract attention away from the rest of the text.
This says the text of a link should meaningfully identify what you will see if you click on the link.
A bad example:
There is an article about blah, blah....
A better example:
The New York Times has an article on Blah, blah.
Still not great:
Tom's is running an article reviewing blah blah.
Better:
Tom's reviews blah blah.
Link types
There are really three different types of links that html doesn't help the user distinguish between: in-page, in-site, external. Good usability would let the user know ahead of time what they will get. Pop-up windows add yet another dimension that isn't evident in looking at an html link.
One way to handle this is just never use in-page links, and for external links, add the domain in brackets afterward, perhaps as a link itself. If you never use pop-up links, it's not a problem. You could at least be consistent that all external links pop up a new window, while all internal links stay in the same window.
Example: blah, blah [domain.com].
Reduced emphasis
Computer games don't always make it obvious what you can click on. Often, lots of things are clickable. I think this would be a good approach to balance the emphasis that links give, and the desire to provide lots of links: make more than one class of links, one that works as we're used to, and one that doesn't draw attention to itself, or draws less attention to itself.
For example, if you say "See the New York Times article on blah, blah". You want to emphasize "blah, blah". It's also useful to provide a link to nytimes.com, but adding emphasis would be a distraction. You could have a class of link that is the same color as the regular text, and either isn't underlined, or has a dotted underline. There is no harm if someone doesn't notice that the link is there. There is only the small pleasure of discovering a useful-but-unobtrusive feature. If – and this is a big if – someone uses your site often enough, they'll remember that you provide links to companies you mention.
Alas, I don't really recommend links that are completely unmarked. Non-novice users are likely to have more than one window open at a time, and one way to switch between windows is to click in the window. Clicking in a browser window, you want to be sure you don't click on a link. If links aren't visually detectable, you will be surprised to find that you are thrown off to a different site.
As for pop up windows, how about: blah, blah [new window]. You could also use the title attribute to have a tool-tip message pop-up when the mouse hovers over the link.
Choosing colors
Many sites will choose link colors based on colors used in the logo. If you do this, be sure to pick logo colors that will be readable in links.
One fundamental feature of html is that links a user has looked at before can be a different color from links the user hasn't seen. This is handled by the browser, not the website, though the website can usually choose the colors.
The original colors used by Netscape were bright blue for unvisited links, and a dark purple for visited links. The blue is an unsophisticated choice; the purple is not always easy to distinguish from black text.
Another issue is emphasis, again. The brighter color should be used for the kind of link you think users will see less of. For example, if your pages have hundreds of links and you think any user will only visit a few of them, the visited link color should have greater emphasis than the regular link color. But if you expect most of your users to visit most of your links, then the links they haven't seen yet should stand out.
While I think that is good advice in principle, in practice most people use websites that subtract emphasis from visited links, and so it is an easier choice to do the same on your website.
Fortunately, people are capable of learning, and so you can consider doing things that weren't standard practice in 1996.
“Decoration”
For example, you can make links that aren't underlined. If people see a different color of text, they are likely to think it is a link. The stylesheet "hover" property can change the color when someone points at a link. My personal favorite approach is to add an underline on hover, to reassure people that it is a link. Where you think there could be readability problems with the link color, you could make the hover color easier to read. Of course if you make the link color one that color blind people can't see, they won't know that there's a link there. But you could user higher contrast colors on hover.
Using a different color for visited links is one of the easiest and best usability devices for websites. Even if you use an icon as a link, it is helpful to make a link out of any associated text, in order to take advantage of the visited link feature.
The active link and hover properties are a cheap way to add a sense of interactivity to a page. Rollovers and animations can be expensive to download or distracting, but a small change for 'hover' is entirely appropriate.
Underlining links was certainly the standard from early on, but it reduces the readability of the text, if you underline more than a few words.
If you have long text links, consider putting them on a separate line so there's less confusion if they wrap. Also consider not underlining if you typically have long links.
Additional information
One of the joys of interactivity is that you can layer in a little more information: rollovers, tooltips, various layering schemes....
An early Javascript hack was to put text into the status bar when the mouse hovered over a link. This is typically a value-subtracting trick, in that the status bar typically displays the url, and seeing the url may help the user decide whether to click on the link, and may help them predict what they will get. The status bar would show them, for example, if the link is to a different website. Some urls are even short and meaningful enough that seeing the url could add significant useful information.
The w3c is using a bastard sort of link that indicates only that there is a definition tooltip that displays if you hover over the word. They even change the cursor. Ug.
After Microsoft “innovated” what they called smart tags, a number of websites did their own home-grown version. As with anything Microsoft, it's named the opposite of what it does: smart tags are really very dumb. They scan for words, and make a link when they see the word. At Infoworld, for example, there was an article about people switching from MS to Linux. The dumb smart tag software saw the word “switch” and linked it to the definition of the networking hardware. It saw the word "switched" and linked to the definition of a switched network. Even stupider, it inserts the links every time the word is used. Infoworld articles now have extreme overemphasis of arbitrary words, sometimes with wrong definitions.
One suggestion is to allow for anti-keywords. The author of the article could have put "switch" and "switched" in a list of words not to insert definitions for. (For this to be useful, authors would need to see a real preview of the final published document.) A second suggestion is to tone down the emphasis: don't use color, don't use solid underline. A third suggestion is only to make a link out of the first use of a word, if you must overemphasize. A fundamentally better approach is to list glossary words in a sidebar, or at the bottom of the page. Then you could scan the entire list at once. Regular readers of the site would know to look at the sidebar if they don't understand a word.
Copyright © 1998-2011 J. R. Boynton