[Up: design lab] [Prior: pagelength] [Robot Wisdom home page]
Say you have a webpage, plus the URL for a different page you want to link from your page. How should you place that URL on your own page?
We will distinguish 'anchor text' which is positioned between the opening and closing A-tag (ie, usually highlighted blue and underlined) from the longer stretch of 'link text' which refers to the link but may not be entirely within the actual anchor tags.
Below are quotes on these topics from many different web style guides, with a link to the guide after the quote.
There are also a few comments of my own.
NEW: A proposal to solve this called 'text buttons' [eg]
"Try to avoid references in the text to online aspects. "See the section on device independence " is better than "For more on device independence, click here."" W3C95?
"...make your HTML page such that you can read it even if you don't follow any links." W3C95?
"Write about your subject as if there were no links in the text." Sun
"Write Text as Though There Were No Links In It. Linking text should explain as clearly as possible where the link leads, and what value the user will receive by traversing it. A good way to make sure your linking text is descriptive and to the point is to write as though there were no links in it. "Invoice Information for Contractors gives specific information regarding invoices and compensation" gives readers valuable information and makes sense on its own, with or without a browser." UPRR
"Write about your subject as if there were no links in the text. In other words, do no refer to the mechanism of the Web." NAU
"...when you click on 'here', you have to look around to make sure it is the right here. Let me urge you, when you construct your HTML page, to make sure that the thing-you-click is actually some kind of title for what it is when you click there." W3C95?
"Choose meaningful words or phrases for links. Your reader should be able to scan the text of your links and learn something about their destination without much reference to the surrounding text. "Telegraphic" links, those that use cryptic or obscure language, force the reader to follow the link before they're sure the information at the other end is worth reading. If it's not what they want, their time is wasted and they often have to back up to continue." Sun
"Because it is so painful to read text on computer screens and because the online experience seems to foster some amount of impatience, users tend not to read streams of text fully. Instead, users scan text and pick out keywords, sentences, and paragraphs of interest while skipping over those parts of the text they care less about. Skimming instead of reading is a fact of the Web and has been confirmed by countless usability studies. Webwriters have to acknowledge this fact and write for scannability: Structure articles with two or even three levels of headlines (a general page heading plus subheads - and sub-sub-heads when appropriate). Nested headings also facilitate access for blind users with screenreaders Use meaningful rather than "cute" headings (i.e., reading a heading should tell the user what the page or section is about) Use highlighting and emphasis to make important words catch the user's eye. Colored text can also be used for emphasis, and hypertext anchors stand out by virtue of being blue and underlined " JN9703
"Links: Avoid the "click here" syndrome when defining a link; for example, "Get information about whatever is available by clicking here." Readers then have to remember where they're going to once they jump to another page. It's better to link to words or phrases that are a meaningful part of a sentence; for example, "Information about whatever is now available."" Moz3
"Choose meaningful words or phrases for your links. By simply scanning the text of your links, the reader should be able to derive some meaning about their destination." NAU
"(I learned about this when I wrote my anchor extractor program to build a page of all my links.)" NAU
"The simple solution in this case is to put the HTML link element around more of the text to make the context self explanatory... Avoid the use of, "Click here". It isn't necessary. Especially, don't use "Click here" as the only link text. Don't use graphics by themselves as links, especially if the graphics do not have any ALT=text associated with them." Strlng
"To provide information about link targets to users who surf link text only..." W3C99
"Most search engines associate the text of a link with the page that the link is on. In addition, we associate it with the page the link points to. This has several advantages. First, anchors often provide more accurate descriptions of web pages than the pages themselves. Second, anchors may exist for documents which cannot be indexed by a text-based search engine, such as images, programs, and databases. This makes it possible to return web pages which have not actually been crawled." Goog
"The text within a LINK is sometimes weighed more heavily than words found in the regular body text... Always use your primary keywords in the visible link tag area of at least one or more links on the page. Try to place your primary keywords at the start of the link when possible." Posn
"Things to add to your web site to make it annoying! 4) For all your links put down verbs like "jump, twirl, flip, drop, and move" instead of "news, pictures, links, and email"" Uneven
Everybody denigrates 'click here' but for slightly different reasons.
"Choose meaningful words or phrases for links. Your reader should be able to scan the text of your links and learn something about their destination without much reference to the surrounding text. "Telegraphic" links, those that use cryptic or obscure language, force the reader to follow the link before they're sure the information at the other end is worth reading. If it's not what they want, their time is wasted and they often have to back up to continue." Sun
"Write surrounding text so as to help people understand what the link does. Help your reader understand where links lead, and what sections contain. They're paying a time penalty for every link they follow. Help them understand what value they will receive if they traverse a link. Be critical of each link: if your surrounding text does not accurately predict the destination, examine that text or, more fundamentally, the reason for having the link." Sun
"[discussing 'link titles', see below] ...a short explanation of a link before the user selects it. Such explanations can give users a preview of where the link will lead and improve their navigation: bad links are less likely to be followed; users will waste less time going down the garden path increasing users' understanding of good links helps them interpret the destination page upon arrival: disorientation is reduced .. Having the title "Author biography" pop up when the user is thinking about what might be linked from my name gives the user an indication of the type of information he or she can expected to get from following the link. Among other things, it makes it clear that the link is not a "mailto" link that will spawn an email message... The goal of the link title is to help users predict what will happen if they follow a link. Appropriate information to include in a link title can be: name of the site the link will lead to (if different from the current site) name of the subsite the link will lead to (if staying within the current site but moving to a different part of the site) added details about the kind of information to be found on the destination page and how it relates to the anchor text and to the context of the current page warnings about possible problems at the other end of the link (for example, "user registration required" when linking to The New York Times) " JN9801
"Strive for descriptive and definitive text links, rather than implied destinations. "Return to the previous page" or "next topic" assumes that people can predict your structure, an assumption that may not be the case, since your document may be foreign to many of your readers. Referring to the Web mechanism itself, as in "click here," should also be avoided. Descriptive phrasing such as "view currently available Union Pacific Railroad Professional Positions" or "submit the Customer Registration Request tells users exactly where they're going and what they'll be able to do there. Making the item the user will be accessing the actual link will draw them to the link more quickly, and give them more immediate information than "Select this link to submit a Customer Registration Request." " UPRR
"Create context for each link. Surrounding text should help readers understand what the link does and where it leads." NAU
"The web is read by people who don't need or, often, want to know about FTP and NFS - or even WWW! ...Keeping on the subject of discourse rather than the mechanisms and protocols keeps the text shorter, which means people are more likely to read it. Even when you are working within the web metaphor, use links, don't talk about them." W3C95?
"Write about your subject as if there were no links in the text. Don't refer to the mechanism of the web, and don't attempt to guide or instruct your reader." Sun
"Referring to the Web mechanism itself, as in "click here," should also be avoided." UPRR
"Write about your subject as if there were no links in the text. In other words, do no refer to the mechanism of the Web." NAU
"The table of contents uses several "cute" headlines to link to stories (example: "Varnish Remover" is the link to the analysis of campaign commercials). On the Web, cute links normally don't work since users rarely take the time to download stuff they don't know what is. In print, playful headlines work because the reader can easily glance around the magazine to see what the story is about. On the Web, every click carries a penalty and removes the user from the context of the previous page, so link anchors must be exceedingly intuitive." JN9607
"Things to add to your web site to make it annoying! 8) Make pages that just give 2 letter links like "hp" for help and "em" for email " Uneven
"A single word may be too small a target, and may not be meaningful." Sun UPRR NAU
"Using an entire sentence for a link may prove difficult to read, especially if the text extends over multiple lines." Sun UPRR NAU
"Link titles should be less than 80 characters, and should only rarely go above 60 characters. Shorter link titles are better. Do not add link titles to all links: if it is obvious from the link anchor and its surrounding context where the link will lead, then a link title will reduce usability by being one more thing users have to look at. A link title may be superfluous if it simply repeats the same text as is already shown in the anchor. Do not assume that the link title will look the same for all users. Indeed, auditory browsers will read the text aloud and not display it visually. Different browsers will display link titles in very different ways, as shown in the figure. Finally, note that link titles do not eliminate the need to make the link anchor and its surrounding text understandable without seeing the link title. Users should not have to point to a link to understand what it means: the link title should be reserved for supplementary information. Also, for many years to come, some users will have browsers that do not display link titles. Normally, I advise against using new Web technologies for the first year after they have been introduced. In most cases, using anything new is asking for trouble and will alienate users with older browsers. Link titles are an exception to the need to wait a year. First, their use does not hurt users with browsers that don't display link titles (assuming you follow the guideline to keep the link anchor understandable when the link title is not displayed). Second, a browser that does not understand link titles will simply skip them. Since the title is not a new tag or otherwise intended to influence the layout of the page, the page will look exactly the same whether or not the browser does anything with the link titles. The only downside is that link titles will add approximately 0.1 seconds to the download time for a typical Web page over a modem connection. This is a rather harsh penalty, but worth paying because of the increased navigation usability for those users who do get to see the link titles. At the time of this writing, link titles will probably only be seen by 25% of the users. Normally, this would be insufficient to employ a new Web technology, but since link titles are extremely easy to add to your pages and since they do not pose any danger to users with older browsers, it makes sense to go ahead and start using link titles. Link titles are one of the first enhancements to the Web that actually help people navigate (as opposed to simply making pages look more fancy). Since we know that users have horrible problems finding things on the Web, we should give them all the help we can." JN9801
"Adding a link to text does emphasize the word or phrase containing the link, and can actively make the text more difficult to read." Sun
"Highlight text that is different. When using lists of links with similar text, use links to highlight those words or phrases that are different, rather than highlighting the entire phrase..." Sun UPRR
"Try to match the link text that someone clicks on with the title of the resulting page. It's an impossible task to make the text displayed in a link match the title of the destination page. It also makes for maintenance headaches as the titles of documents change. Try to choose link text that has a conceptual similarity to the title and headers of the destination document." Sun UPRR NAU
"Don't change text link colors! The convention that's evolved among creators and users of web browsers is that links that have not yet been followed use a brighter or higher luminance color than those that have already been traversed. (For many browsers, they're shown in shades of purple or blue) When you change the link colors, you can easily reverse this brightness mapping, or worse, choose colors that read at the same level of brightness. Don't do it." Sun
"The mother of bad web design conventions is the decision to make hypertext links blue. Other colors would have been a better choice and would have increased the reading speed of the anchor text by a few percent. It is unfortunate to put the most important text on the page in a color that is known to reduce readability. If we were designing the Web from scratch, I would recommend using a different link color than blue. Since we are designing sites for the Web as it exists, I retain my recommendation to leave the standard link colors alone: Blue text means "click here" on the Web, so by keeping unvisited links blue, there is no doubt in users' minds as to what they can do. The time they save by knowing what to do on a page is probably much bigger than the time they lose by having the few words in the hypertext anchors be a few milliseconds slower to read. Even more important, knowing the difference between unvisited (blue) and previously visited (purple) links helps users understand the structure of the website and their own navigation history. On sites that change the colors, we often observe users revisiting the same pages again and again because they do not realize that they have already seen those pages. The added confusion, substantial navigation delays, and reduced probability of ever finding the right page are all very severe usability penalties from changing the default link colors." JN9911
"The UPRR public Web site does not allow the specification of text link colors. The standard convention used among creators and users of Web browsers is that links that have not yet been followed use a brighter or higher luminance color than those that have already been traversed (on many browsers, they're shown in shades of purple or blue). When you change the link colors, you can easily reverse this brightness mapping, or worse, choose shades that read at the same level of brightness. Let the browser default (and user preference) determine the color of the links." UPRR
"List Text Links if There are a Number of Them When linking to a number of different documents or sites, rather than attempting to tie all the references together into one unwieldy paragraph, simply create a bulleted list. It will be easier for users to understand, and probably require less copy." UPRR
"The a better solution for users of screen-readers is to separate the links from the body of the text into a menu or link list... To a person using a screen-reader, each link is distinct and understandable." Strlng
"Embedded links are ugly. A recent study showed that large blocks of text are less appealing to Web readers than text with subheads, lists, bullet points, and white space. Grouping links logically by category and presenting them in annotated lists is more "eye-friendly" to the user." BWtch
"Repeated Links Are Unnecessary Many fledgling Web page creators get carried away by the endless possibilities of linking text, ending up with sentences that look like the following: 'Download the program's installer to your computer. The installer will be named Setup.exe.' All the text links in this example lead to the same destination. The user will only discover this, however, by following every one of them. By the time they get to the last one and find themselves once again on the same page they accessed through the others, they're likely to be feeling frustrated and impatient. Use accurate, descriptive phrasing to define the link, and you shouldn't need more than one reference. Users will notice it, and if it sounds useful to them, they'll follow it. Repeated references are superfluous." UPRR
Unreadable, wrongheaded overview
You can submit a new URL or any other suggestion for this page by typing it into the box below. It will instantly become visible to anyone at this comments page. I should get around to checking it out and updating it above within a week or three, at which point I'll delete it from the comments page.
If you want credit, include your name and email (otherwise it's anonymous). You can use HTML but you don't have to.
Special topics:
surfing-skills :
url-hacking :
open content :
semantics :
pagelength :
linktext :
startpages :
bookmarklets :
weblogging :
colors :
autobiographical pages :
thumbnail-graphics :
web-video :
timeline of hypertext
Anti-XML/W3C/etc:
structure-myth :
page-parsing :
firstcut-parser :
html-history :
semantic web
Design prototypes:
topical portal :
dense-content faq :
annotated lit :
random-access lit-summary :
poetry sampler :
gossipy history :
author-resources :
hyperlinked-timeline :
horizontal-timeslice :
web-dossier
Website-resource pages:
RobotWisdom.com :
Altavista.com :
1911encyclopedia.com :
Google.com :
IMDb.com :
Perseus.org :
Salon.com :
Yahoo.com
Older stuff:
design-lab :
design-checklist :
HyperTerrorist :
design-theory :
design cog-sci
Hosting provided by instinct.org. Content may be copied under Open Web Content License.