Crimes Against Hypertext

[Josh]

It's time to out these outlaws, so here is my rogues gallery of hypertext -- all of them wanted criminals for crimes against usability!

[b]The Tautology[/b]

The tautology link is not a new innovation, but it may appear suddenly, without warning, in a block of hypertext. You may have seen hypertext that looks like this:

[code]You can find two great
examples <a href="/">here</a>
and <a href="/">here</a>.
<a href="/">Click here</a>
for another one![/code]

A hyperlink implies a destination that is reachable by clicking the link; the tautology link only serves to state the obvious!

[b]The Leisure-suit[/b]

The leisure-suit link just points vaguely. You're on your own if you want to follow it. Here's an example:
[code]In fact, you can <a href="/">find</a>
<a href="/">so</a> <a
href="/">many</a>
<a href="/">examples</a> of poor
linking you may think the world no
longer cares.[/code]

Too lazy to write meaningful hypertext? Just link a whole bunch of words and let the user deal with it.

[b]The Middle-man[/b]

Some authors prefer to contract their hypertext out to a middle man. There's a place for URL shortening services, sites like Twitter, for example, but there's no excuse for using them in your hypertext. In the absence of any other context the user can fall back to examining the URL of a link. Taking that away by using a URL shortening service is the equivalent of sending them down the river without a paddle.

[b]The Interference[/b]

You often see this in web sites like Wikipedia and Everything2 -- words that are linked to information that has little relevance to the surrounding text. For example:

[code]We all know that hyperlinks are the
<a href="/a_page_about_glue">glue</a>
that holds the Web together.[/code]

[b]The Departed[/b]

Against the departed, hypertext never has a chance. Have you noticed that many mainstream news media web sites refer to other web sites without providing links in the article body text? Call that hypertext? It's a massacre!

[b]The Stalker[/b]

You’ll only see a stalker link when you're right on top of it! This one is becoming less common, but you still see examples occasionally. The stalker link is so similar in appearance to the surrounding text, you’d never even know it's there.

[b]The Telemarketer[/b]

The scourge of hypertext, the telemarketer link includes a hovering box displaying a thumbnail preview of the target web page. What possible use is there for a small blurry thumbnail of the link target that pops-up and obscures the surrounding text? And what about those double-underlined advertising links? Users should never have to experience those. +

[u][b] The Good Hyperlink[/b][/u]

Poor quality hypertext is a usability disaster causing annoyance, confusion, and anxiety. Users expect links, and that the links will be relevant and useful. A good hyperlink is relevant to the surrounding text and provides enough information for the user to make an informed decision about whether to leave the current page they’re on and follow.

Here's an example of a useful hyperlink:

[code]For excellent examples of finely
crafted hypertext look no further than
<a href="http://kottke.org/">kottke.org,
the online home of Jason Kottke</a>.[/code]

The linked text must have relevance, as it's the first hint the user will receive as to the nature of the link. The test of good link text is whether it can stand alone on a page, outside of the hypertext of which it's a part of, and still make sense.

Links must also be styled differently to the surrounding text. They can be another color than blue, as long as it’s different to the normal text, and that all the links in the page are the same color, so they'll be clearly visible.

A title attribute is optional, but should be used independently from providing a context because the tool tip only appears when using the mouse. If the link text is sufficient, it’s unnecessary anyway.

Well-crafted hypertext is simple to read and use, and frankly, simple to create!

For more information about this and other great design tips, visit [url=\"http://www.sitepoint.com/\"]SitePoint and subscribe to their Tech Times newsletter[/url]!