November 4, 2007
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.
- 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.
- 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.
- 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.
- 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?
- 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.
- 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.
- 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.
- 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".)
- 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?
- 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?
- 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.
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.
Posted by Jeff Atwood
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. :^)
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.
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.
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.
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?! :( -)
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.
For example, the author of this blog uses a kind of redirection for the commenters urls. That's not necessary at all.
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.
...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.
thank you for very very useful information.
ersineser, website tasarim ve dizayn at istanbul Turkiye
very good information. thank you.
ata okul oncesi egitim araclari, oyuncak ve egitim setleri.
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.
haha shouldnt of pressed it i warned you
now youre gonnu be trapped for 10 munits
thets play a game while ur trapped were gonnu do numbers in 1ns to 20 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
shall we keep going 21 22 23 24 25 26 27 28 29 30
i think thats anuth now
now something scary is gonnu happen if you nod youre head 16 times this it true you will get hornted for life and if u hit some 1 and 16 months later you will get stabbed but i sead only if u hurt some 1
shall we do the abc a b c d e f g h i j k l m n o p q r s t u v w x y z now you sing now i now my abc next time wont you sing with me
With due respect, we want to introduce www.yesuncle.com as one of the leading online e-mail marketing advertisers of many reputed portals of all kinds. We have strength huge costmers for whom success our team works day'n'night. Although they are big corporates or one man organisation. As you know how fast internet industry is growing many many new tribes/people are joining this day by day it is becoming the need of all of them. Now this is our intelligency smartness how we extract better more effective results from this boom.
If you think this e-mail marketing stratgy is economical as compare to other ways of marketing is suitable for success of your portal. Than visit our website www.yesuncle.com .
Hope and pray for your success.
Is there any application which goes to the page when I hover on a web site link ?
One of your posts about rainbow crack was very useful for me.
Thanks and best of luck.
Your posts made me to create Winguard Blog.
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:
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.
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".
Quote: agree. Will definitely take into consideration when designing pages.
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.
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.
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 :)