I <3 Steve McConnell*
Coding Horror
programming and human factors
by Jeff Atwood

November 04, 2007

Don't Click Here: The Art of Hyperlinking

I've often thought there is a subtle art to the humble hyperlink, that stalwart building block of hypertext, the stuff that Ted Nelson's Xanadu dream was made of.

The word hypertext was coined by Nelson and published in a paper delivered to a national conference of the Association for Computing Machinery in 1965. Adding to his design for a nonsequential writing tool, Nelson proposed a feature called "zippered lists," in which elements in one text would be linked to related or identical elements in other texts. Nelson's two interests, screen editing and nonsequential writing, were merging. With zippered lists, links could be made between large sections, small sections, whole pages, or single paragraphs. The writer and reader could manufacture a unique document by following a set of links between discrete documents that were "zipped" together.

Many precedents for the idea of hypertext existed in literature and science. The Talmud, for instance, is a sort of hypertext, with blocks of commentary arranged in concentric rectangles around the page. So are scholarly footnotes, with their numbered links between the main body of the text and supplementary scholarship.

In July 1945, long before Nelson turned his attention to electronic information systems, Vannevar Bush published an essay titled "As We May Think" in The Atlantic Monthly, which described a hypothetical system of information storage and retrieval called "memex." Memex would allow readers to create personal indexes to documents, and to link passages from different documents together with special markers. While Bush's description was purely speculative, he gave a brilliant and influential preview of some of the features Nelson would attempt to realize in Xanadu.

The inventor's original hypertext design predicted most of the essential components of today's hypertext systems. Nonetheless, his talk to the Association for Computing Machinery had little impact. There was a brief burst of interest in this strange researcher, but although his ideas were intriguing, Nelson lacked the technical knowledge to prove that it was possible to build the system he envisioned.

I distinctly remember reading this 1995 Wired article on Ted Nelson and Xanadu when it was published. It had a profound impact on me. I've always remembered it, long after that initial read. I know it's novella long, but it's arguably the best single article I've ever read in Wired; I encourage you to read it in its entirety when you have time. It speaks volumes about the souls of computers-- and the software developers who love them.

Xanadu was vaporware long before the term even existed. You might think that Ted Nelson would be pleased that HTML and the world wide web have delivered much of the Xanadu dream, almost 40 years later. But you'd be wrong:

HTML is precisely what we were trying to prevent -- ever-breaking links, links going outward only, quotes you can't follow to their origins, no version management, no rights management.

I suspect Wikipedia may be closer to Ted's vision of Xanadu: a self-contained constellation of highly interlinked information, with provisions for identity, versioning, and rights management.

But enough about the history of the hyperlink. How can we use them effectively in the here and now? I thoroughly enjoyed Philipp Lenssen's recent link usability tips. I liked it so much, in fact, that I'm using it as a template for a visual compendium of link usability tips-- the art of hyperlinking.

  1. Ensure your links are large enough to easily click. When building links, don't run afoul of Fitt's Law. If what you're linking is small, make it bigger. If you can't make it bigger, at least fluff it up a bit with clickable borders so it's easier for people to accurately click. In the below screenshot, only the numbers are linked, which is a shame.

    Example of small, hard to click hyperlinks

  2. The first link is the most important one. The first link will garner most of the reader's attention, and the highest clickthrough rates. Choose your first link appropriately. Start with the important stuff. Don't squander your first link on a triviality.

    Example article with first link as the most relevant one

  3. Don't link everything. Using too many links will turn your text into noise. This works in two dimensions: excessive linking makes text difficult to read, and excessive linking causes deflation in the value of all your existing links. Link in moderation. Only link things important enough to warrant a link.

    Example of excessively hyperlinked text

  4. Don't radically alter link behavior. Links are the cornerstone of the web. Users have built up years of expectactions based on existing behavior in their web browsers. When you change the way hyperlinks work, you're redefining a fundamental part of the web. Is this really what you want? Is this really what your readers want?

    Example of link gadget that radically alters link behavior

  5. Don't title your link "Click Here". Don't even use the words "Click" or "Here" anywhere in your link text. Describe what the link will do for the user when they click on it.

    Example of unnecessary 'Click Here' text in a hyperlink

  6. Don't link things the user might want to select and copy. Woe upon the poor user who needs to select and copy hyperlinked text. It requires a complex ballet of very precise mouse movements to get it to work at all. Here, I'm trying to select the name "Ralph Waldo Emerson", which is part of the hyperlink. Granted, this is not a terribly common scenario-- it's probably the most subtle tip on Philipp's list. But when it happens, it's awkward and unpleasant, so do give it some consideration.

    Example of hyperlink making it difficult to select text

  7. Don't include icons on every link. If we're linking in moderation, we should be using link icons in extreme moderation. If every other link has an icon, it's noise. Only highly unusual or irregular links should include icons. I'd also argue that your text, if written properly, can easily communicate the type of link as well as an icon can, but this gets into the realm of personal preference.

    Example of link icons

  8. Don't make your content depend on links to work. Not everyone will click on your hyperlinks. Either they're too busy to click every single link you put in front of them, or maybe they're reading your article in another format where they can't click on the links: print, offline, or mobile. Either way, it's important to provide the context necessary to make your content understandable without the need to visit whatever is behind those hyperlinks. (If you're wondering what this example is about, I should warn you-- it's not worth it. For once the inanity of Digg comments was totally appropriate: "retarded blog war".)

    Example of links which provide very little context

  9. Don't hide your links. Hyperlinks should look like hyperlinks. Give them a distinct style, so they cannot be confused with any of the other text on the page. Definitely choose a unique color not used anywhere else on your page, and consider using the well-worn convention of the link underline when necessary. What's clickable here?

    Example of link text that can easily be confused

  10. Don't mix advertising and links. These look like hyperlinks, but they're actually advertising. Which type of link is which, again? And why should the user have to think about this?

    Example of special type of advertising hyperlinks

  11. Don't obfuscate your URLs. Users can preview where your link will ultimately send them by hovering their mouse over it and viewing the URL in the status bar. Avoid using redirects or URL shortening services which make the URL totally opaque. The user shouldn't have to take a leap of faith when clicking on your links.

    Example of obfuscated hyperlink

To head off any potential hate mail headed my way, these are guidelines, not rules. If you know what you're doing, you also know that rules were made to be broken in the right circumstances. The problem is that most people writing HTML don't know what they're doing. A search for "click here" is ample proof of that.

Most of this is advice on writing HTML-- which, in my estimation, is basic writing advice in today's online world. Hyperlinking should be taught alongside Strunk & White as far as I'm concerned. Knowing how to hyperlink effectively is fundamental. But as software developers, we can go farther when writing code -- we can control the text of the links we generate, too. I touched on this briefly in Don't Devalue The Address Bar, but it's worthy of an entire blog post. In the meantime, Keyvan Nayyeri's Simplify your URLs is a fantastic starting point.

[advertisement] PhotoDrop.com makes it simple to create and share online photo albums. Upload your full resolution pictures via the web site or with the free Photo DropZone utility, and you're done. No fees. No storage limits. It's the fastest and easiest way to share photos and create albums.

Posted by Jeff Atwood    View blog reactions

 

« Not All LCD Panels Are Created Equal Who Wrote This Crap? »

 

Comments

agree.

Jack on November 4, 2007 11:36 PM

Yeah, if it weren't for "intellitext" advertisements I might leave javascript enabled by default.

...with only cookies, referrer headers, gif animation, embeded sounds, and flash disabled.

Nick on November 4, 2007 11:50 PM

I read your blog regularly, which probably means I regularly find stuff in it good enough to make me come back for more.
One of the things that has started to bug me, though, is a tiny detail I wouldn't have mentioned if it hadn't been for todays post on the very subject: I think your posts very often include way too many links, most of them pointing to your previous posts. Sure, some of them are really relevant, but sometimes it feels like I'm just reading a lot of links.
So, read the following post, containing some good advice, and take notes:
http://www.codinghorror.com/blog/archives/000985.html
:-)

H. Eriksson on November 5, 2007 12:03 AM

Aye, it'll be a happy day when we no longer have to try and guess where URLs such as http://www.codinghorror.com/mtype/mt-comments-renamed.cgi?__mode=red&id=37119 are pointing (for extra credit, find which other guideline is broken when Javascript is disabled).

But it's a good set of guidelines.

Jivlain on November 5, 2007 12:08 AM

@ H. Eriksson.

My short reply: Hell no!

Long reply:
I disagree. I find his linking very useful, and well put together. I often go on happy digressions into the linked information, information that I wouldn't otherwise investigate were it not for his linking it.
And it's [nearly] always relevant.

If he didn't link his sources, it would be appropriate to start waving the well known "[citation needed]" flag.

Kal_Torak on November 5, 2007 12:11 AM

"Click here" is a major pet peeve of mine.. unfortunately, the people in charge of making decisions at my work think our users are retarded, so we still use it here and there.

"_Click here_ to download the PDF" is so much worse than "_Download the PDF_" It adds unnecessary clutter.

Plus the use of the word "click" means nothing to people using screen readers... they don't have a mouse.

Sean on November 5, 2007 12:12 AM

Just thought I'd throw this one out there -
http://www.copyblogger.com/click-here/

Not that I like using "click here" or anything.

Steve on November 5, 2007 12:19 AM

@ Kal_Torak

The problem occures when you are constantly being pulled away from the current post you are reading, that I can agree with Eriksson -
that is annoying, no matter how relevant the links are. Imagine reading a post, clicking on some links, and all of a sudden you've read like five blog posts. It would be nice to sometimes read only one blog post at a time.

But nevertheless, you can't expect people to be familiar with his entire blog archive.

L. A. Karlsen on November 5, 2007 12:38 AM

The top 2 hits on Google for "Click Here" say it all

Adobe Shockwave Download Center
www.adobe.com/shockwave/download/

Internet Explorer 6 Service Pack 1
www.microsoft.com/downloads/details/

Jaster on November 5, 2007 12:59 AM

Re the links, I think this is where tabbed browsing comes in.

There are two types of links in blogs like Jeff's.

1. Links to articles that provide background for the current topic, which I want to read immediately before proceeding with the main article.

2. Links to articles that are related, but can wait until I've finished the main article.

I open type 1 links in a new tab with focus, and type 2 links in a new tab without focus. This results in a good mix of getting background without interrupting the 'flow'.

Pat Galea on November 5, 2007 01:01 AM

@Steve, Right on! Using "click here" is intuitive and it speaks to people in a clear way. No harm in that. And why does it even matter if it clutters something like search results?

Seriously, people, come on. For me to stop using it, I'll need a better reason than that.

Jazz on November 5, 2007 01:04 AM

Steve:

The w3c disagrees.
http://www.w3.org/QA/Tips/noClickHere

Sean on November 5, 2007 01:10 AM

In a column a while back in SD Times (want a link?), I suggested that an improvement we really need to make soon in our articles is that hovering over a link causes an alt-text box to pop up and tell us what the link's heading is. This permits us to have some idea of what we'll see before we click. I especially want to see this enhancement in blogs, where, as you say, there are far too many links.

Andrew Binstock on November 5, 2007 01:11 AM

Jeff, you may be interested to find out that Vannevar Bush was scooped by one Paul Otlet by 11 years:
http://www.kottke.org/07/09/glut-mastering-information-through-the-ages

Aristotle Pagaltzis on November 5, 2007 01:15 AM

Jeff Wrote: "Users can preview where your link will ultimately send them by hovering their mouse over it and viewing the URL in the status bar."

Hehe, what kind of backward browser puts link destinations in the status bar? This is 2007, man, use Opera and put the link destination in tooltips! (There's also a Firefox extension to do this, but it can be a little unstable).

@Andrew Binstock: I agree, I try to add the title= attribute when I put in anchor tags.

John Ferguson on November 5, 2007 01:42 AM

"But as software developers, we can go farther when writing code -- we can control the text of the links we generate, too."

I think you mean 'further'.

:)

JC Mann on November 5, 2007 02:09 AM

For #11, try http://www.decenturl.com

Jonas on November 5, 2007 02:50 AM

what about applying CSS on links ?
some links look more like buttons or underlined text

Anand on November 5, 2007 02:50 AM

#4 makes using connect.microsoft.com a pain:
http://connect.microsoft.com/feedback/default.aspx?SiteID=210

if you try to browse and click feedback, the preview overlaps the link and makes following the link a daunting task.

qwert on November 5, 2007 03:26 AM

Jeff, that is a useful article... in reference to the first section have you seen Douglas Adams' Hyperland? : http://video.google.co.uk/videoplay?docid=7190175107515525470 it is such a good visualisation of a future web and what it might become. A vision we are barely scraping at the moment. Even with all the web 2.0 back slapping. (which I whine about here : http://buzzsort.wordpress.com/2006/09/08/on-internet-10-web20-30-40%e2%80%a6/ )

David Murphy on November 5, 2007 03:31 AM

Seriously, if you don't write "Click Here" you will always get complaints from people saying they don't find the link.

I'm sorry to say that some users are in fact stupid (or just dont care to look) so the "Click here" is needed in a lot of places.

The w3c tips are classic examples of what not to do if you in fact want the users to find the links.

PL on November 5, 2007 03:41 AM

I hate tooltips, because they constantly pop up when I didn't mean to get them to appear. When I am browsing something or working with Visual Studio, I am also moving mouse pointer around ready to click some link or inserting text cursor somewhere. It is highly frustrating to get many times tooltips that are even not necessary. Obviously I am supposed to stop moving the pointer or first navigating the pointer into some safe spot on the screen that does not open up small, big, nor huge tooltips, instant menus, nor commercials.

Links to additional material are handy. But when I am reading some text, I wouldn't want to wait for the point of the text until I

1) move mouse pointer over the link
2) click the link
3) wait the page to reload
4) orientate for reading the new page.
5) And then to move the pointer over back-button
6) click the back-button
7) wait the main post page to reload
8) orientate for reading the main post again.

It would be much nicer to get the main ideas of the referenced posts repeated in short in the main post and have the additional links as references than to get only "I _told_ you".

Don on November 5, 2007 03:46 AM

PL, I am willing to be that the only people who've complained about not being able to find links without "click here" are your clients.

I am interested to know how many genuine users have taken the time out to write to you informing you that they could not find the links on one of your websites.

For me, there is no point even trying to explain "Click Here" any more - anyone who uses it flips to bozo bit AFAIC.

Noah Slater on November 5, 2007 03:55 AM

Another practice that should get a mention is linking to documents that are not HTML. Specifically, PDFs. When I go a-clicking I expect my travels to be fast. However hiding files that will need my browser to take some time to load up it's viewer is incredibly annoying.

"Click here for PDF" is much perferrable than finding out that the link I just clicked will require several seconds of load time, PLUS will be an internet dead-end.

JPicasso on November 5, 2007 04:01 AM

Hell yeah, good tips.

I fell for the Snapshots eye-candy trick though, and used it in my blog.
I turned it off a few weeks later however since I managed to piss myself off with it as every link started to spawn one of those bloody preview popups.
We all make mistakes I guess.

n3wjack on November 5, 2007 04:16 AM

One more thing on #7 - the mailto: links should *always* look (or read) different. I find it quite annoying when three names are hyperlinked and two are home pages but the third is a mailto link. Especially when you're not on your usual computer and a mailto link means booting up Outlook Express and asking to set up a new account...

Krenn on November 5, 2007 04:18 AM

Quote: agree. Will definitely take into consideration when designing pages.

Dion Moult on November 5, 2007 04:18 AM

I agree with everything except the "Click here" argument. It's pretty obvious that you're a power user, and of course your readers are as well. I don't want to see "Click here" links either, but we are also the people who look at the status bar when we hover over links.

There are a lot of users who are clicking blindly on "Click here", "Search", "Go", etc. and using the back button like crazy when they fail to find what they're looking for. Using "Click here" in moderation can help these people navigate your site more easily.

Brian on November 5, 2007 04:20 AM

I think one the thing you SHOULD do is to include the size of the thing you're linking to a resource that is more than a few 100K in size, to give people a heads-up. Do they REALLY want to burn 20MB downloading a video of me watering my lawn? I often do it in square brakets after the URL.

JosephCooney on November 5, 2007 04:22 AM

Add another vote in favor of "Click Here". I did get real users asking me how to get to a page until I put "Click Here" in the link. Not everybody has been using the web for years like those who are reading this blog.

Roger on November 5, 2007 04:41 AM

@Noah Slater
Really ? I'm guessing your one of those people that can't handle mondays without lashing out at someone.

I'm not even going to comment it further, go back to bed.

PL on November 5, 2007 04:44 AM

Jeff, why does the "Read older entries »" hyperlink at the bottom of the blog only point to the next and only the next oldest blog entry that is not shown. Should it not continue to list all the older blog entries in the same manner as the first (front) page?

Joel on November 5, 2007 04:51 AM

The negative comments about "click here" seem to show just one thing: that anybody with a more or less perfectionist mindset spending a lot of their time on one topic will invariably develop deep-seated beliefs on everything about their topic. That "Click here" adds clutter can only be an argument for a web-developing minimalist - all normal users don't care, they're just happy that they recognize the link as a link (and do note that "Click here" does exactly that: it makes the link stand out as a link).
I agree on pretty much all the other pointers though.

Blue skies
Fake

Fake51 on November 5, 2007 04:58 AM

Add me to the list of "Click here" supporters....

I've added links to sites that are obviously links to other documents or pages without the descriptive "Click here"....and have received nothing but grief about "where is the link?" kinds of comments.

As has been stated by others, it would be nice if we didn't have to include them, but just like we need to be concerned with accessibility, we need to constantly be concerned with addressing users that are less than "web-savvy"

But another very nice post Jeff.

Mike Shaffer on November 5, 2007 05:10 AM

@Fake51:
> all normal users don't care

I agree.

Sometimes we can't distinguish between the *bad way* to do something, or the way *I hate*.

For example, some people likes always maximizing windows, even having 1 line of text on them, and when asked they say "I am happy this way, so I'm not disturbed with my desktop icons". Other say, "Look! You are wasting your screen with useless white pixels, instead of filling them with useful information, as other windows, or whatever". The latter was my thought until I found many intelligent people who preferred the former. I didn't understand, but I learned to accept their freedom.

I think we can't take our opinion and try to convert it in a law, just because we love or hate some way of doing.

Those who write laws and say what is good and bad, do they sincerely know when the law is result of an important need or just their own habit/dislike?

oscar on November 5, 2007 05:44 AM

I'd also add to the list:

Use the title attribute of an anchor so that it is clear to what you are linking to. Usually the site title and article title are enough, but if you haven't stated the article content in your document, then provide a sentence or two as well.

Ben on November 5, 2007 06:02 AM

> Don't link things the user might want to select and copy. [...] Granted, this is not a terribly common scenario [...]

As an ebay seller I am constantly having to select linked text to copy my buyer's email addresses into my mail client so I can search for emails from them. And it's a bloody pain!

I have to say I actually think it's the browser that's at fault here for not making linked text easily selectable. Nevertheless ebay's UI is a nightmare in just about every aspect.

Daniel on November 5, 2007 06:08 AM

As far as the click here debate goes do people think you should link from the verb or the noun if you're not in the link from the "Click here" camp? So for the example in the article should the phrase be:

"Download" our prohibited items brochure

or

Download our "prohibited items brochure"?

Marc Sutton on November 5, 2007 06:17 AM

Very interesting article and discussion.

Do you have any thoughts on hyperwords, which allows you to interact with all the words on the web? Not only the hand-linked ones?

NOT a replacement for hyperlinks, but complementary. Any thoughts, comments? http:/www.hyperwords.net

Frode Hegland on November 5, 2007 06:17 AM

#4. Why, why, why do people insist on using that "snapshot" plugin? It's a terrible, horrible thing that should disappear forever.

Travis on November 5, 2007 06:18 AM

On the real web 2007, hyperlinks are made for the benefit of search engines as much as for end users. Between (1) making sides spiderable, (2) pagerank, and (3) the inclusion of link anchor text in document vectors, web creators care a lot about how hyperlinks interact with search engines.

This is probably a bad thing. Engadget is part of a network of sites that link to each other, but link as little as possible to the outside. Wikis and blogs like this one are targeted by link spammers, so they use the "nofollow" attributes. The war for search engine ranking makes me less likely to link to competitive sites, even if they've got worthwhile content that my users would like see.

As for blending hyperlinks and advertising, I must admit that that is one of the most effective ways to monetize your site. Owners of sites with as little as PR4 can make $10-$100 a month or more selling links. Often that's better that you're going to do with adsense or other advertising networks. Does it make the web worse? Yes. Yet, it costs money to keep web sites going and it costs money to make content, and unfortunately the means available for monetizing sites don't work well for many people.

For instance, it's not hard to make enough money with adsense to pay the expenses of hosting a website (let's say $20 a month.) To pay the wages of a content producer, you need more like $2000 a month -- that's a factor of 100.

That's a pretty big gap, and it gets filled with garbage: splogs, MFAs, lolcats and other worthless content that's cheap to produce.

Sailor Moon on November 5, 2007 06:24 AM

It may be a matter of personal preference, but I think all supplemental links should open in a new window. For instance, the links in your blog entries open in the same window, which is very frustrating if I'm still reading the blog and I want to open the link without interrupting. My only other options are to open it, read the supplemental, then return to your blog and try to pick up where I left off, or wait until I'm done with the blog and go searching for the link I wanted to open.

Sure, I can right-click and select "Open in new window" or I can just center-click as I have been for the last 5 years with Firefox, but that's expecting far too much from the average user. I still know a lot of users who think they have to double-click a link to make it work.

Mattkins on November 5, 2007 07:03 AM

"Click here" isn't bad unto itself. The biggest problem with "click here" has to do with poor wording. When people use "click here" on their web page, they usually have poor wording:

*Click here* to download version 2.0.

What is important in the above sentence is "version 2.0", but it plays second fiddle to the "click here".

I also don't like "mailto:" links. Not only do they start up your email program (if it isn't already started), but I might not even want to use that email program. For example, I use Gmail and a client based mail system. Many times, I want to email the person back via Gmail. Unfortunately, I can't easily get the email address with a "mailto:" link.

Whenever I have a "mailto" link, I put the email address, and then put the link on the email address. That way, the user knows it is a mailto link, and has the option to use an alternate emailer than their default.

David on November 5, 2007 07:08 AM

Here is an excellent example of making links behave improperly:
http://www.blake8086.com/blog/2007/10/24/facebook-platform-help-or-the-worst-possible-way-to-do-links/

And here is a Microsoft example of making the tiniest links inside the biggest expanse of clickable space possible:
http://www.blake8086.com/blog/2007/10/19/ignoring-clicks/

Blake on November 5, 2007 07:19 AM

Uh, you don't cite any basis for many of your recommendations. Actual research and data contradicts your anti "click here" recommendation, for example. You get more click throughs with a clear action message than an unclear link title such as "continue on...", as used in some blog engines currently.

Doug on November 5, 2007 07:20 AM

Jeff,

Today's post was excellent. #5 annoys the hell out of me each and every time I see it.

The only comment I have is on #9 - Don't hide your links. I noticed on your Twitter page (http://twitter.com/codinghorror), your links styled almost identically to normal text.

It's just something I noticed that seems applicable.


Oh a side note, excellent blog! I'm a first time commenter, long time reader.

Larry Marburger on November 5, 2007 07:26 AM

Holy crap, I made it onto an Atwood post!! I think I need to change my pants!

All of the laundry dealings aside, I wanted to mention that in my defense, I'm pretty sure the blog engine I'm using is causing part of that linkage.

Justice on November 5, 2007 07:29 AM

Regarding preview windows (#4), we may have a situation similar to "click here" (#5)-- something that experienced users and developers abhor, but that most surfers actually appreciate. I don't really want to believe it either, but see Anil Dash's comments at http://community.livejournal.com/no_lj_ads/70965.html?thread=1515829#t1515829 .

Eric Meyer on November 5, 2007 07:39 AM

Jeff,

My posse suggests that you submit a patch to Dasblog to fix this issue!!

THE GAUNTLET IS THROWN

Justice on November 5, 2007 07:47 AM

I never use 'click here' because I figure it's less effort for a sighted person to find the actual link than for a blind person to figure out what the 'click here' is for.

Rich Wilson on November 5, 2007 07:58 AM

4. Don't radically alter link behavior.
10. Don't mix advertising and links.

Tom's Hardware. This means you! I hate it when they do that. I know I should switch to another site, but reading it from RSS is just too darned convenient.

Mike Johnson on November 5, 2007 08:08 AM

What do you think about target="_blank" link behavior? It was removed from XHTML standard, but I think it serves it's purpose. I hate clicking on a link half way through a post that takes me away from it. Just wanted to hear what the general consensus was on links that open up in new windows (or in my case using Firefox, new tabs).

Marcin on November 5, 2007 08:21 AM

In a perfect world, we wouldn't need "Click here." However, there are a lot of people on the web who haven't been doing it for a long time and honestly need help knowing where to click. It doesn't always look the best and I personally would rather not have it, but I believe that in terms of usability it is necessary.

Matt on November 5, 2007 08:30 AM

Going to have to disagree here. I changed a few important links on a site I maintain to "click here" types, and phone calls have gone down. Downloading a PDF is exactly what is happening here. If you just say "download the PDF" they wonder "how?" I changed it, problem went away. Not all sites cater to the web-savvy. I should think that the people needing the accessible version of my site (and I made darn sure it was fully usable to them) will understand when they have to make a small sacrifice to help out another group of people.

On the other topic, maybe when we get a real web application framework that everyone uses, we can bring target="_blank" back to xhtml. I've just reversed my stance on total HTML strict compliance and have gone back to new windows for things like PDFs.

Erik on November 5, 2007 08:37 AM

dont do this, dont do that ! looks so catholic/religious.
what about free will? :D
anyone has to learn by he's own

no1 on November 5, 2007 08:44 AM

re: "Click Here"

You might disagree with Jeff, but Jakob Nielsen doesn't:

http://www.useit.com/alertbox/designmistakes.html

...which he also discusses in depth in his book "Prioritizing Web Usability".

Contrary to what many here are saying, people do know how to find links if they're properly identified. Saying, "Click here worked for me!" might be glossing over the problem that your link colour is too close to normal text for example.

Is there some other published research to the contrary? If so, please link it. Otherwise, I'm sticking with Nielsen (and Jeff).

Regarding opening links in a new window:

- Only a good idea for things like attachments (re: Erik's post above on PDFs). Window management is the purest form of excise - don't force more windows on people. Yes I know Firefox and Safari make new tabs, but the world uses IE6/7.

- A lot of people do it in the misguided notion that it will keep people on their site. It doesn't. Don't do it.

Great posts Jeff, keep 'em coming!

Rob S. on November 5, 2007 09:32 AM

Very nice guidelines. I've followed a couple over the years and will work to incorporate the others as well as they all seem very useful.

One note on your own hyperlink usage as it relates to number 3 (as well as other "pot calling the kettle black" comments), I don't find it to be overly excessive. Furthermore, I find it very useful to have some "background" or further reading on the topic linked. Many of the links I've visited from your various articles have provided me with very useful information that was beyond the scope of the original article. Finally, if I want to view that which is linked, I throw it into a new tab and continue reading the current page; that way I can view the information later and still continue on with the post at hand.

So, kudos for the insights into hyperlink history, the useful guidelines, and overall for a great and informative blog. And please continue adding hyperlinks to your articles.

Michael Todd on November 5, 2007 09:34 AM

I agree with most of your guidelines, except the "Click Here" removal. I would love to remove it from some of the sites I work on, however whenever I do, my clients contact me that they are bombarded by emails from people not able to figure out what to do anymore. Sounds silly I know, but I see I am not alone from other comments here.

Matt Ridley on November 5, 2007 10:01 AM

I'll add one - don't use Javascript-based links unless REALLY necessary, as they don't work well for people who like to open links in a new tab. Drives me nuts.

Kevin Dente on November 5, 2007 10:09 AM

sorry if someone else has pointed this out, but your blog violates #10 of your rules: Don't mix advertising and links. The ads below each post are the same font and the links look the same and are visually indistinguishable from your blog post text save the slight indentation on either side.

Good post.

Paul Irwin on November 5, 2007 10:10 AM

Hey, kids, explain to me how these ostensibly real users who simply give up if a link does not include the text “click here” *actually use the Web*, since most hyperlinks demonstrably do not include that text.

These people are simply going to have to learn absolutely the most basic task of Web browsing: Selecting (not necessarily “clicking”) a link. It’s up to them to learn this essential skill. It isn’t up to us to write shitty pages that make them feel better.

Joe Clark on November 5, 2007 10:17 AM

I'm a recent convert to the pro "click here" camp. In the blast emailing I do for clients, I've found that click through rates improve by a statistically significant amount when we use "click here to blah blah blah" as opposed to "blah blah blah" by itself.

Kyle Stoneman on November 5, 2007 10:23 AM

QUOTE:
"HTML is precisely what we were trying to prevent -- ever-breaking links, links going outward only, quotes you can't follow to their origins, no version management, no rights management."

I must say, I'm kind of glad that Ted Nelson's vision never got realized. If links were to automatically go two ways, think about a million spam sites forcing you to host links to them just by linking to you. Or if you link to one document and somebody moves it to a slower mirror. Or every single time you used the phrase "there's one born every minute" it would force you to link to the PTBarnum domain, currently owned by a spam-happy domain squatter.

There's a heck of a gap between our rosy vision and what actually happens in practice.

But I rabidly agree with #4. ANY pop-up, no matter by hover or click, is an instant refresh though adblock and view;no-style option. In fact, POP-UPs are EVIL, everybody! I don't care if they stop global warming and cure cancer; do not use the dripping-with-evil pop-up spawn of Satan! (extra bangs for added drama: !!!!!)

Penguin Pete on November 5, 2007 10:24 AM

Maybe "Click Here" is one of those "yes, but this one goes to eleven" things. You only use it when you really, really, *really* need people to click that particular link.

I still don't agree, and the only actual data supporting the efficacy of Click Here is that copyblogger example-- which was gathered from email newsletters, not web pages.

http://www.copyblogger.com/click-here/

Jeff Atwood on November 5, 2007 10:25 AM

#4 is simply awfull
They are the new "pop-up" windows.

When I use the page down button, mouse wheel, or arrow key to scroll, I want to continue reading the main text. These pop ups force me to find my mouse pointer and place it someplace, where I hopefully won't experience any more pop ups. Heaven forbid I should move my mouse around much or I am bound to step on more of these hidden land mines.

gruckiii on November 5, 2007 10:27 AM

Thanks for the list. Very useful.
I do have a question for you and the other readers. You touched on it in number 9. Don't hide the links. I agree with what you say here, but I recently had a disagreement with a coworker who was reviewing my application and made the statement that EVERY LINK on EVERY PAGE should have an underline. I disagreed and was shot down. I was not complaining about the work. It was only a few lines in the css file to impliment. However, if you look and Amazon, Microsoft, Apple, and other big name web sites that have millions of uses, they do not follow any rule that says EVERY LINK on EVERY PAGE should always have an underline. I was already using an underline on the hover over event, and changing the background color for the cell. They felt that was not enough, and was inconsistant. Thay said, that if you underline one link on the site, you should underline every link all the time.

So I guess my real question is what do you think of the rule that some want to make that "EVERY LINK on EVERY PAGE should have an underline"?

.Net BOB on November 5, 2007 10:31 AM

Unfortunately, you live in a world of developers and power-users, as does everyone writing a blog pointed at web developers. Us actual web developers that have non-geek target audiences have to live by a different set of guidelines.

Like me, for example.

I work for a large healthcare company as the sole web developer. My audience isn't a willing one. We provide incentives to use our website instead of calling us, so the doctor's mandate that their secretaries use our website. The secretary persona, "Betty Sue" as we like to call her, would rather call. Heck, Betty Sue would rather write things down on paper then EVER user a computer. She hates computers and they hate her.

Betty Sue may be old or young, bright or dim. She could be male or female, friendly or grumpy. But in all cases, Betty Sue hates computers and gets visibly uncomfortable when someone says "internet." The only thing she likes and (barely) understands is email.

Take it from someone that deals with scores of emails from Betty Sue people every week: Use "Click Here" so they will stop complaining about "WHERE THE LINK TO IT I DONT SEE IT ON YOUR NET PLEASE".

Also, if a deadline is coming up quick, use tables for layout. I'm sure some of you have weeks to study CSS and learn its ridiculous quirks so you can make a 3-column layout with a fluid center column in your sleep. For the rest of us, there's a big table that also happens to render well in IE, FireFox and Opera.

It just goes to show that you, Jeff, along with your fellow heads-in-the-clouds bloggers, have lost touch with the rest of the world of developers in the slave pens and the real-world users.

Rick Scott on November 5, 2007 10:31 AM

@Justice - I'm pretty sure if you go to your blog configuration settings you can turn off click-through tracking. That will "fix" your hyperlinks.

Of course you can fire back at Jeff (who is not using DasBlog)... when I hover over your linked Name in your comment I see some URL that points to codinghorror.com, but when I click I go to your home page.

Joshua Flanagan on November 5, 2007 10:31 AM

Totally agree. I hate the site with annoying popups and hidden links. Too many hyperlinks diminish the value of the page content. Nice post.

zparacha on November 5, 2007 11:14 AM

>>I still don't agree, and the only actual data supporting the efficacy of Click Here is that copyblogger example-- which was gathered from email newsletters, not web pages.

Jeff, can you provide one logical argument that indicates why copy contained in an email differs from copy on a web page? I'd say you can't. Including "click" in anchor text boosts response (as Marketing Sherpa tested) because it tells less-web-savvy people (and even Sherpa's more sophisticated crowd) exactly what to do. A link is a link wherever it appears... and people click more when click appears.

And if you can come up with something that I haven't thought of in the last 10 years, what if the email is web-based (like most email is these days)? Does that change your answer? Why or why not?

Regardless of the sophistication of the audience, "click" is psychologically suggestive of the desired action. You may like to believe that basic human psychology doesn't apply to you, but most people aren't writing for you.

Brian Clark on November 5, 2007 11:27 AM

[Roger] I did get real users asking me how to get to a page until I put "Click Here" in the link. Not everybody has been using the web for years like those who are reading this blog.

Do you have little stickers on all the doors in your house saying 'push here to gain access to the room on the other side'? How about in a large office block - let's remove all those handy signs on the doors, and just have hundreds of identical signs saying 'Office door', I'm sure that will help people find their way around.

OK, so those are bad analagies but, if people don't understand cliackable links, how did they manage to open their browser in the first place, or navigate to your site?

Matthew Keane on November 5, 2007 11:28 AM

See also:
Cool URIs Don't Change
http://www.w3.org/Provider/Style/URI

Cool URIs for the Semantic Web
http://www.dfki.uni-kl.de/~sauermann/2006/11/cooluris/

How to Publish Linked Data on the Web
http://sites.wiwiss.fu-berlin.de/suhl/bizer/pub/LinkedDataTutorial/

Evolving the Link
http://dsonline.computer.org/portal/pages/dsonline/2007/06/w3web.html

Danny on November 5, 2007 11:32 AM

Oops, missed one:

http://en.wikipedia.org/wiki/Linked_Data

Danny on November 5, 2007 11:33 AM

re: 3. Don't link everything. Anybody else noticed that some of the news/commentary sites are now generating automatic links from "hot words"? Salon.com is a really great site, but every few words one is hyperlinked to http://salon.com/topics/the_hyperlinked_word, and it's a royal pain in the...

A. Lloyd Flanagan on November 5, 2007 11:34 AM

Sorry, don't quite see the harm in "click here." And when dealing with an audience that is not always very computer savvy (which is a very broad one—I am an academic and deal with academics daily, no more than one in ten has anything of what I would consider real competance with basic computer functions), something as dumb and direct as "click here" is less likely to trigger confusion that contextually hiding the link in a paragraph. My clients are less concerned about aesthetic purity than they are in things being straightforward. "Click here for X" is, I think, more straightforward than having just "X" and a link that they must hover over to see if it's the page or file they are looking for.

As an aside, I think icons for every little stupid link is dumb, but icons denoting unusual filetypes can be useful. PDFs I like to see specially called out since they can be quite a strain on the browser and the bandwidth (which is Adobe Reader's fault more than anything else, but alas). Icons are not the only way to do this (I usually just write, "PDF file, X MB" next to any such links to people know what they are getting), but I think just relying on hovering is not always great.

And lastly -- obviously ad-links are bad form but nobody puts them up thinking they are good form, do they?

Shmork on November 5, 2007 11:34 AM

One more thing -- Remember that the status bar on web browsers is disabled on many popular ones by default. I've no idea why that would be the case, but I've often had to enable it on the computers of the web-unsavvy.

Surfing the web without being able to see what is underneath a hyperlink is like that scene in _Indiana Jones and the Temple of Doom_ where he is thrusting his hands into all of those cubby holes full of bugs and things like that.

Shmork on November 5, 2007 11:36 AM

@Matthew Keane: Excellent question. The answer is to contain the action and the content in the link. Dumb users LOVE long links!

Using curly braces instead of lt/gt signs:

{a href='whatever.pdf'}CLICK HERE to download the TTR report (PDF){/a}

Dumb users will see "CLICK HERE" and "TTR report" and click there. Average users will recognize (PDF) and right-click to save it to their desktop. Smart users will complain about "CLICK HERE". But in all cases, every single person FOUND the TTR report!

If the world was full of walls that looked exactly like doors, and you never really knew what universe you would walk into when you crossed the threshold, you better believe every door would be labeled with the most brain-dead instructions possible.

We already label our doors push/pull and even the smartest of us get that wrong sometimes o_O;

Rick Scott on November 5, 2007 11:41 AM

John Ferguson wrote:

Hehe, what kind of backward browser puts link destinations in the status bar? This is 2007, man, use Opera and put the link destination in tooltips!


So, anyone still relying on that info in the status bar is now backward and (dare I say it) retarded? It's been common practice for a long time now, and with every link I hover, I look down at the - YES INDEED - status bar for a clue where it leads. And YES, I'm using Firefox. This may be 2007, but that doesn't mean we're all forced to use Opera, just because some backward wannabe-tyrant like John Ferguson says so.

Ted Menks on November 5, 2007 12:08 PM

Brian: it's simple, users aren't expecting to click on links in an email. They read an email, they don't interact with it.

Sean on November 5, 2007 12:28 PM

I don't see how anyone is making persuasive arguments for using "click here". If removing the words "click here" increases the number of disgruntled customers so much, it is infinitely more likely that the way the page is laid out, or the style of the link being too close to the style of the text, is the real culprit. The poster above me mentioned "all walls looking exactly like doors". That is the problem here: why assume everything should be the same. "Click here" is the lazy web designer's way out of creating efficient yet diverse pages.

Steve on November 5, 2007 12:45 PM

When our clients say they want "click here" then they get click-here-s. When our clients say they want >> for links, then they get >>s. When our customer decides that they want itty bitty icons on the download page for each type: xls, doc, pdf; well then, that's what they get. What *I* think is good is irrelevant as that doesn't pay the bills - making the customer happy (no matter how wrong they are) pays the bills.

Thanks for the link to the Project Xanadu article. I know folks who have that sort of pathological inability to get something to market that seems to coincide with "I'm right no matter what" attitude. I can imagine the mess things make with the inability to make copies when Xanadu collides with DMCA. Imagine the mess you'll get if you can't post "Bob says X" and instead have to post "Bob says {tumber}" and Bob uses a take-down notice to destroy the originals that folks may only link to, and not actually quote or copy.

My favorite Wired article was the one titled "Mother Earth Mother Board" and at one time I actually had the print copy of that magazine. The photos were spectacular as well.
http://www.wired.com/wired/archive/4.12/ffglass_pr.html

Peter on November 5, 2007 12:50 PM

I agree with all of this, but surely a lot of this is needed by sites who advertise? If they didn't do some of this; then they wouldn't make any money. We can vote with our feet, so to speak.

Ian on November 5, 2007 12:53 PM

Hey Now Jeff,
I like your post & feel they are good guidelines. As for #4 I think the link will adjust in the future. For example many users use Add-ons such as cool iris which enable a user to view a thumbnail of the link with out clicking it. I personally find this a useful add-on. In the future will this be the common behavior of links & the expectation of the user?
Coding Horror Fan,
Catto

Catto on November 5, 2007 12:58 PM

"So, anyone still relying on that info in the status bar is now backward and (dare I say it) retarded?"

Is this a blog about good practices in the real world, or one about where computer programmers expect everybody to have the same purposes with the same clients running the same machines? I mean, get a clue already! Enough with the nerd fascism!

Shmork on November 5, 2007 01:07 PM

"Click here" may improve the findability of your links, but you may be confusing the reason why (if it really truly does, which we've only seen anecdotal evidence to support so far). It will take a hell of lot more to sway me to go against usability advice from Nielsen and others.

For example:

"Download Report" vs. "Click Here to Download Report"

By adding "Click here" you've increased the size of the link and the % of screen space in contrasting colour (assuming link colour is different than text colour) by over 100%. The perceptual variables of size and colour have increased which are the likely causes for increased findability, and the word "Click here" may not mean anything at all.

"Download 2007 Financial Report" for example would be even more useful.

Rob S. on November 5, 2007 01:15 PM

One other possible rule.... Don't have "hidden" click behavior in your website outside of using hyperlinks.

E.g., the New York Times website has great content, but an infuriating design: if you double-click anywhere on a webpage, it will pop up a new "reference" window that shows dictionary and thesaurus information for the word you clicked on (even though the word was not hyperlinked). This is wrong on so many levels:

1. I didn't want or ask for "reference" information. If I did, I would know where to find it.

2. The word is not hyperlinked, so there's no indication that clicking on it will generate a popup.

3. It does this for each and every word, no matter how inane. Need a dictionary definition of "a"? Here it is!

4. It is maddeningly inaccurate. If you click in whitespace, such as around the page border, it will open up a "reference" popup for an essentially random word or concept.

A related problem is with websites that block default right-click context menus in a vain attempt to prevent you from copying-and-pasting content (usually with an angry message "Right Click Prohibited!"), but that's another story.

Robert on November 5, 2007 02:43 PM

Spend enough time on social bookmarking sites and you'll quickly realize that most sites can't correctly handle how to save URLs. What to do with named anchors, query parameters, long urls... lots of very popular sites break in interesting ways.

http://internetducttape.com/2007/02/28/how-to-save-urls/

engtech on November 5, 2007 03:08 PM

I was going to complain about the horrors of the Times website, but I see Robert beat me to it.

And I heartily second it, and stupid right-click-disable scripts.

(Dear website author: Your script keeps me from opening links in a new window, thus keeping yours open and on screen being read, and also does not stop me downloading your precious images. Thank you.)

Sigivald on November 5, 2007 03:29 PM

"it's important to provide the context necessary to make your content understandable without the need to visit whatever is behind those hyperlinks"

I agree; in #1, I should not have had to click on "Fitt's Law" to find out what that was. ;-)

Martin Cooper on November 5, 2007 03:31 PM

Back in the olden days -- the heady boom times of 1998 -- there lived a website full of wonderful content, set in narrow columns, stuffed with laugh-out-loud snark. It was called Suck.com, and it was good.

They had this nifty technique for commenting sidelong on what they were talking about: they would hyperlink certain phrases, with the resulting page often being a devastating commentary on what the thing that was made a link.

I miss those guys.

Atario on November 5, 2007 03:46 PM

>>Brian: it's simple, users aren't expecting to click on links in an email. They read an email, they don't interact with it.

You're kidding, right?

Brian Clark on November 5, 2007 04:17 PM

Nice write up Jeff.

I'd like to second (or third) what other have said though -- the urls for commenters names at your blog, e.g. "http://www.codinghorror.com/mtype/mt-comments-renamed.cgi?__mode=red&id=37286" -- are too disjointed.

Sometimes i see a name and just want to wave over it to see if it's the person i think it is -- e.g. "Eric... I wonder if that's Mr Sink? Oh I can't tell without clicking through... I won't bother"

I've always agreed with the "don't use 'Click Here'" advice -- but the responses here are interesting and perhaps point to a minialist's bias... is there any study around the topic?

And there's no harm in linking to your own back catalogue. I see it as an Atwood trademark, but it's well deserved, as the material you link to is so appropriate and clever -- even if it is your own.

Take care
lb


secretGeek on November 5, 2007 04:32 PM

From Peter:
"What *I* think is good is irrelevant as that doesn't pay the bills - making the customer happy (no matter how wrong they are) pays the bills."

At the end of the day, yes, if your client isn't happy, then you're not going to get paid, but remember that you are (or at least should be) the expert in the field of web design, and you read blogs like this and know what does and doesn't work. If there is sufficient reason to go against what the client is directly asking for, then you should educate them to show why an alternate method would be better. If you just blindly do everything they say, then they will end up with a website which does not produce sales, and guess who gets blamed for that? Of course, it's never as simple as that, and sometimes you eventually do have to just do what a picky client says, but you have to try first.

One thing mentioned a few times in the anti-Click Here case is that it doesn't apply to people with screen readers because they don't actually click on it. Now, really? That's like saying that you shouldn't write "Read this article" because they don't read it, they listen to it. If someone can't translate "click here" to "do whatever it is you do to follow a link"... (Though, I think I might be getting this wrong - I'm unfamiliar with how screen readers work, and suspect that they just read out the linked text, maybe?)

nickf on November 5, 2007 05:58 PM

Great article for beginners and experts. Bookmarked and will reference in future website builds. Thanks!

Eric Atkins on November 5, 2007 06:49 PM

I think if you wanted a user to download a file, just have a huge image saying DOWNLOAD.

nuff said.

Danny Rodriguez on November 5, 2007 08:27 PM

@Jeff

I think the comments section on your blog has lost it's meaning. Too many comments. And from what I can tell, you're too busy researching topics to "authoritate" on that you don't even have time to read/comment yourself. Let alone anyone else. I don't think anyone is reading the comment thread; just throwing logs on the fire.

Plus, you're playing it too safe these days. Guess the ad rev must be too good to screw up? Where's your piss and vinegar these days boy? Huh?

VBMan on November 5, 2007 09:45 PM

nickf: no, the problem is that people with screen readers don't get links in context.

They listen to the content of the page, and then they can choose to listen to all the links on the page in sequence... choosing after each one is read whether to follow the link or not. So they get "click here" pause "click here" pause "click here".

Sean on November 5, 2007 09:51 PM

Point #6 is really funny because your page is so badly written and so full of HTML errors (Failed validation, 83 Errors) that you're unable to actually select anything in various browsers. Maybe you should learn proper HTML before trying to advise others.

Klaue on November 6, 2007 12:09 AM

Jeff,

I'd like to give my thanks for your work here at Coding Horror. Not only do you publish posts about seemingly random topics that always teach me something, but the information you link to is almost always as interesting or more interesting (sorry!) than your posts. For instance, take the Wired article you linked to. It was amazing. I'm interesting in finding a copy of _Computer Lib_, even.

After being "on the internet" for as long as I have, I tend to get the feeling every so often that I've pretty much read everything of profound interest on it. I might not know everything, but I basically know _of_ everything. Coding Horror happily proves this wrong on a fairly regular basis. I think, like you, that short story (I'm remiss to call it a simple article) will stick with me for years to come.


Thanks Again.

Tom on November 6, 2007 12:35 AM

Skimming through the comments I couldn't find the biggest argument against click here:
When skimming through a document I often just look at links as they are a central part of a document. If I find a "click here" link I first have to read its context (say, one sentence before the link) to know what its about. Plus: Often I know that I found that link on that site. Then, having descriptive links greatly shortens the searching for the link.

Philipp Keller on November 6, 2007 01:27 AM

Usable or not, I really detest the 'Click here to bla bla' links. Why? Because a hyperlink should be clicked on. There is no other action for a hyperlink other than to be clicked on. It superfluous information.

You don't see 'push here to play', 'push here to eject' on your dvd player. It's a button, you know you need to push on the button to make it happen.
You don't see 'push here to ring the doorbell'. The doorbell button needs pushing.

A hyperlink may be a virtual thing, but the principle is the same; it is a button requiring an action to get a reaction.

A hyperlink needs clicking, don't tell a user to click, he/she should already know. If not; your links are not styled right.

If we really wanna tell the user exactly what to do;

_grab your mouse and move it so the mouse pointer - the arrowie thingie - hovers - that means occupies a space on top - over this piece of text and push the primary button on the mouse to Download the PDF_

For all other ppl _Download the PDF_ should suffice.

If not; buy "Internet for Dummies"

Just my two cents :)

Remon on November 6, 2007 02:03 AM

Rick - doors shouldn't have to be labelled. Labelled doors are bad design, simply put.

A door that can be pushed should have a plate on it - if it has no handle it can't be pulled. A door can be pulled should have a handle on it. The text labels above are needless - unless you associated a handle with pushing a door.

Ben on November 6, 2007 02:07 AM

The first guideline is the most violated, especially on forums (of all types). I don't understand why such important links (navigating to the next page of replies) get such little screen real estate.

bp on November 6, 2007 03:03 AM

Along with using solid anchor text on your hyperlinks, it's well worth the tiny extra effort to always use the TITLE attribute in your link code. It provides a little added info (in the form of a tooltip on most browsers) for the reader to help them decide whether the link is worth clicking.

And I like to think that little extra info also gives the search engines potentially more to chew on...

Rob O. on November 6, 2007 03:18 AM

Sean: Thanks for the clarification. That really does make a lot more sense.

ps: why do I have to type the same captcha "orange" every single time?!

nickf on November 6, 2007 04:01 AM

.Net Bob: "So I guess my real question is what do you think of the rule that some want to make that "EVERY LINK on EVERY PAGE should have an underline"?"

They should be underlined, as that's what people are accustomed to seeing.

The site you described is actually awful, though. Even if you decide to ignore convention, you should at least be consistent. If you underline a single link, every other link should be underlined asell; having some underlined and some not is terribly confusing, even for experienced users. "Do I click here? Or is it there? There should be a link here... Oh, wait! There might be... No, I guess not." Terrible design. You owe lunch to whoever noticed and made you fix things. :-)

KenW on November 6, 2007 07:17 AM

It's sad to see how many people just plain don't get the web when they argue in favor of using 'click here' for text hyperlinks. :(

DanC on November 6, 2007 07:27 AM

Its sad to see someone that just assumes everyone "knows the web".

And all of the arguments railing against "Click Here" make a 100% wrong assumption: that "Click Here" is the entire hyperlink. It isn't (or if it is, that's bad).

Instead, use an entire sentence and make the ENTIRE SENTENCE a hyperlink: "CLICK HERE to download your management reports and personal horoscope", not "CLICK HERE" to download your management reports and personal horoscope.

Wanna scan the page for the links? Got you covered, you aren't going to miss the bright-blue sentence among the sea of black-on-white text.

Wanna know what a link is before clicking it? Contained within the link itself.

Screenreaders? They LOVE entire sentences in links.

Dumb users that still haven't figured out the internet? No questions about what they have to do to get the reports you need.

It solves all the problems and the only drawback is that out-of-touch web masters will scoff.

Rick Scott on November 6, 2007 08:51 AM

This is one of the most important aspects of any web site or blog. You have covered the main points. Jakob Nielsen also discusses these issues.

Link text must be info-rich like your example "Net neutrality", rather than "click here" or "this post", which are very common. Why do people persist in link "this post" rather than link "net neutrality" as in this sentence:

This post has a great explanation of net neutrality.

The words "net neutrality" should be the link, not "this post", and another reason is because link text is usually blue and underlined, so it stands out from other text, and web users skim and scan, they don't necessarily read in an orderly, linear manner as they might with a newspaper or book.

Follow me on Twitter for more mediocre web insights. :^)

http://twitter.com/vaspers

vaspers the grate aka steven e. streight on November 6, 2007 09:28 AM

I like most of your thoughts, EXCEPT the "click here" philosophy.

The default option on a web page is to read and otherwise, 'do nothing'. Most people go with the default option most of the time. "Click Here" is an instruction, a call to action. It tells people 'do this'. It implies a change to the default behavior.

Links being obvious by being 'bold' and/or 'underlined' or generally obvious as your article states sound great, but obvious to whom? We're so inundated by colored links that only define words or throw up marketing bobbles that even when we land on a 'well designed' web page we can't be Sure that it's well designed.

"Click Here" isn't elegant or pretty as windshield wipers aren't elegant or pretty, but they both help to clear things up.

Donovan on November 6, 2007 10:01 AM

KenW,

First of all, I disagree that Amazon, Microsoft, eBay, and Apple are terrible sites. Specially since Amazon and eBay have millions of users daily and I am sure some of them are not too bright. If their sites were confusing to the users they would loss business. I guess you would say Jeff’s blog is a poorly designed site too because not every link is underlined.

One of my favorite books is "Don't Make Me Think" by Steve Krug. In my opinion, the best book on Web Design and Usability. This is a “must read” for any web developer.
Steve goes back again and again to Amazon to explain why they are a great example of usability. Sometimes we need to break with OLD consistence practices to make a more usable site.

Don’t get me wrong, I'm all for consistence within a web site. Five years ago, I would not have questioned the usefulness of underlines on links. Yes, normal state, on hover, etc… ALWAYS use an underline on a link. However, web standards are changing constantly. There are advancements coming because the web culture is growing and changing. Developers need to keep up, or their sites will look as old and Windows 3.1.

It seems to me that an accepted practice for several years has been the design where "Navigation" links are expected to be on the top and/or left of the page. Often these links are encircled in someway to make them standout as "Navigation". They standout, and users have come to expect this on a page. Because the user knows they are there, the web developer does not need to make them look like every other link on the page. When you hover over them they change appearance. They may have an underline on hover over, the background color may change, and the mouse pointer changes. I like to do all of these. I was already doing all of these in my application. And I should say the site had ALREADY BEEN USED by 20 users with ZERO complaints about the navigation links. I know 20 is a small test group, but this application is intended of school professionals. They just did not need an underline to know they could click on it. Since there were no complaints, I believe it was obvious to the users that the words in the box labeled MENU were links. In the end, I added the lines in the CSS file to make the links in my menu have underlines ALWAYS because our manager wanted to error on the side of OLD link conventions. I really could not believe he and my coworker were making such a big deal out of it.

When my users are using the site, which by the way is a dynamic data entry, review, and collaboration web site meant for teachers, I want their eyes drawn to the content of the page, and not to the navigation stuff that appears on ever single page.

My real beef is against the mind set that this way is always the right way to do something.


.Net BOB on November 6, 2007 11:12 AM

When you mentioned that there was a tradition of hyperlinking within text I was expecting you to mention those youth books that allowed one to create one's own adventure.

David Mackey on November 6, 2007 07:16 PM

vaspars: "This post has a great explanation of net neutrality."

I can think of two reasons people use "this post" as a hyperlink instead of "net neutrality:"

1. "This post" is the subject of the sentence. (See: http://en.wikipedia.org/wiki/Subject_Verb_Object )
2. In "this post," "this" no longer has a context when the link is moved.

It's like me saying, "This tire is flat."

What tire? A tire on my car? If so, which tire on my car?

Powerlord on November 7, 2007 01:25 AM

I want to say that I hate it when links automatically open in a new window ("_blank" behavior). I am annoyed by the mess of tabs or pop-up windows that I get from clicking on links, and I also like to use the back button to return to where I came from. I think that sometimes I know what I want more than the person who designed the web page. Making all your links act the same is better at giving the user what (s)he wants.

If you code your links to open in the same window, and the user wants a different window or tab, he can have that easily ("open in new window/tab") command. However, if your links are coded to open in a new window, and the user wants the same window, there is no easy and practical way to do that.

I think that keeping the user in control is the best way to keep people on your site, although I don't have any facts to back that up. I don't believe the argument that opening links in a new window will keep users on your site. I will not stay on your site because you use silly tricks to trap me, any more than I would buy more from a store that locks customers inside to try to increase its sales. Also, a lot of newbies may not notice that a new window has opened, and even if they want to stay on your site, they may unsuccessfully try to return using the back button.

I also think that inconsistent and unpredictable behavior is confusing to a lot of users. Why do some links open in the same window, and others open in new windows? I know a lot of people who are confused, and even afraid to use computers because of inconsistent behavior -- one wrong move and they may accidentally break something.

Elias on November 7, 2007 09:34 AM

i would have read this far sooner if Xanadu was in the title because having read about Xanadu, i already knew what this post was going to discuss. but if it has background, i'll read it anyways.

i was very curious why a twelve year old Wired article the size of War and Peace made it on reddit and you have provided me with some explanation. that noted, for screen reading, i far prefer the non-print format, something to block the page down from this massive text.

sorry to say but after the intro the rest was just common manners, not particularly interesting aside from actually watching someone tell SnapShot to go shove it. we need real solutions!: all links should open to a draggable div in your page to an inline frame! oh xhtml, why do you lack the iframe so?! :( -)

rektide on November 7, 2007 02:17 PM

Who am I going to believe, a theoretical statement or my lying eyes? My last site didn't do any out of the ordinary styling, links all had their underlines. There's only three pages in the whole application, the whole point is to download one PDF from a link. The difference here is that my user demographic are not regular computer users. They just need a big button with arrows. I don't mean that perjoratively, they just don't know the language of the Web.

As for the PDF thing, well I used to think like that for years, but my zealotry didn't buy me anything. I made the PDF go into a new frame and my usability improved. Less trouble for me, happy users, that's my job, not conforming to a standard that was never originally developed for application delivery and does it quite badly.

"If you code your links to open in the same window, and the user wants a different window or tab, he can have that easily ("open in new window/tab") command. However, if your links are coded to open in a new window, and the user wants the same window, there is no easy and practical way to do that."

If you asked some of my users what browser they were using, most would probably say "Dell."

Erik on November 12, 2007 08:04 AM

My greatest peeve with hyperlinks these days is that do exactly what they were intended to do: take the reader to another page/section. I prefer that links open in a new window and come to the forefront for viewing. The default behavior of taking the reader to another page, then having to click the Back button to return to the previous document and having to wait for the reload is disruptive and annoying.

The page designer can tell the browser to open the link in a new window with the target="_blank" attribute on the link tag, but why is the designer making this decision? Isn't it ultimately my decision how I want to consume the content, especially if it's simple text? I'm tired of having to Ctrl-Click/Shift-Click (not even standard key combos) every link. This should be a browser behavior preference.

I used to have an add-on loaded in Firefox that inserted a small icon next to hyperlinks that indicated whether the link would open to a new window or not, but I can't find it on the Firefox Addons site.

Craig Boland on November 13, 2007 08:02 AM

That's right. Why can't we just keep using hyperlinks as they were created? I just don't defend to use the default colors for links, which are very ugly. But those icons before the links are really unnecessary.

Thássius on November 13, 2007 04:14 PM

For example, the author of this blog uses a kind of redirection for the commenters urls. That's not necessary at all.

Thássius on November 13, 2007 04:16 PM

I have to disagree with the "Click here" comments.
I agree, it shouldnt be that you have to literally make your link say "click here" but you do. Do you know why?
People are idiots. If I didnt do IQ testing or work in a computer lab part of the time, I wouldnt believe how stupid people regularly are. These are people who use the internet, too. If it says "Download" but not "click here to download" they will take 10-15 minutes before they learn every time. They wont remember that Download means "click here to download, moron", next time, they'll still search for "click here".

Michael on November 13, 2007 11:28 PM

I run into #6 all the time. I want to email someone a blog post, so I copy/paste the URL into the body of the email. Then I want to use the post title as the email subject line. But this is difficult, because the subject line is a link to the blog post.

slapout on November 14, 2007 01:51 PM

thankyouthankyouthankyou for making a blog post about this.

Nicolas on November 17, 2007 12:13 PM

@Robert

...the New York Times website has great content, but an infuriating design: if you double-click anywhere on a webpage, it will pop up a new "reference" window that shows dictionary and thesaurus information for the word you clicked on...

thankfully, this is an IE-only "misbehavior", but what a pain in the ass... somebody in the Times' web department should be shot, buried, dug up, and shot again...

Mike on November 26, 2007 08:56 AM

One big thing is being missed here and that is "Click Here" destroys the accessibility of a website. When a blind person uses a screen reader to scan a page for links all they will hear is a long list of click here's with absolutely no valuable information.

Mark on November 26, 2007 10:08 AM

thank you for very very useful information.
---
ersineser, website tasarim ve dizayn at istanbul Turkiye

website tasarim ve dizayn on March 3, 2008 07:57 PM

very good information. thank you.
---
ata okul oncesi egitim araclari, oyuncak ve egitim setleri.

okul oncesi egitim araclari on March 3, 2008 07:58 PM

Re: "Click Here" -- I worked for years on the web and email properties for a Major Consumer Hardware Company, who had Omniture and other click-tracking software running on most of their sites. The awful truth I came to realize is that, unfortunately, people click on "Click here" waaaaay more than they click on links that describe what they're clicking on. The same results were repeated for click-tracking from emails.

This was true not only for the fluffy marketing stuff but also on the tech support/vendor/developer stuff as well -- so it's not just the "idiots." EVERYONE is more likely to click on "click here" than the alternative. Including US.

On generous days, I theorized that busy people are scanning your text for the words "click here." on ungenerous days, I theorized that people are mindless sheep who will more reliably do what you tell them if you phrase it as a really terse command.

I personally hate links that read "click here" but when I really REALLY want people to click on something I use the magic words "click here." The hell of it is, it works.

Paul Souders on March 10, 2008 05:03 PM







(hear it spoken)


(no HTML)




Content (c) 2008 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved.