Don't Click Here: The Art of Hyperlinking

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.

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

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.

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.

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.

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.

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?

bi would have read this far sooner if Xanadu was in the title/b 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 a href="http://programming.reddit.com/info/5zxvz/comments/"reddit/a 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?! :frowning: -)

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.

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.”

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.

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.

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”.

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.

thankyouthankyouthankyou for making a blog post about this.

@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…

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.

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.

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
:slight_smile:

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.