Wednesday, October 24, 2007

11 Link Usability Tips

Who ever said that underlining a part of sentence is the best way to reference information? Hyperlinks just happen to work like this, and the fact that they’ve taken off may be an indicator of their usefulness in itself, but one could imagine other ways to reference information. The browser may display a “context” menu for instance so you can navigate sites. Or there may be a side-bar which show thumbnails of relevant articles & sites. In any case, as long as we have links, we better make sure we create them in their most useful ways. Here are some (subjective) tips for doing so:

1. Make sure there’s enough space to click on for a given link. Do you know those A-Z link lists? They’re a common navigation element on top of some directory-style pages, going like this: “A | B | C | D | ...” etc., where each letter is linked. In this case, some letters – especially the “I” – become much too small to comfortably click on. Use a non-breaking space around each letter (”... I ...”) to increase the clickable area, allowing for easier navigation. You might also want to use this approach for link text like numbers (e.g. “1”) or symbols (e.g. “#”).
2. The first link should be the most important. As a rule of thumb – and there may be exceptions – the first link in a blog post or article will gain the most attention, and the highest click rates. So make sure it’s also the most relevant one for your article. If you are discussing new website XYZ, then make a link to XYZ the first link in your article – not necessarily within the first sentence, but just the first link – and put links to related material over subsequent words. This allows visitors to be guided best.
3. Select which links are important, and don’t link to everything. If you write an article you are often filtering for your audience. One such filter is to only link to pages that are truly relevant to get your point across (or to allow readers to cross-check it for validation). If you include a link in every second word of a sentence, then it will hurt readability as people don’t always know which links are worth to follow. (One noteworthy exception are those “train links” which, on purpose, link e.g. half a dozen words to different reference sites. It can be a style element to indicate for instance “a lot of people discussed this issue before.”)
4. Don’t add gadgets to links. Have you seen those links which open an info box when you hover over them? Snap.com, for instance, offers such a service. I suggest not to use it; it might be fun once, but it gets very annoying very quickly for your audience.
   People use links for all kinds of purposes; they might right-click them to open them in a new window, they may copy them for their own post, they may click on them to quickly follow to a site. Such an info box on the other hand only helps with one use-case – wanting to know more about a site without actually visiting it – while putting the burden of clutter & micro-lags to almost all other use cases. (A more subtle way to give more information for a link is to use the “title” attribute on the anchor tag. Any kind of JavaScript links on the other hand can create accessibility problems, so they are better used only sparsely and only when really justified.)
5. Make links scannable. You might have heard of microcontent, as the Nielsen concept is pretty old in web years. When link text becomes microcontent, it means it can be understood out of context. Thus, avoid link text like “here” or “click” and try, if at all possible (and it’s not always possible – again, there are exceptions to most rules) to use a link text that can be considered the title of the document you are referring to.
6. Creating a link out of something users might want to copy can be a hindrance. Some text, like a phone number, your readers/ users may want to copy from their browser to the clipboard and back into some address book or other application. There are many, many other instance of where this is useful. However by creating a link out of something it becomes a bit harder in typical browsers to copy the actual text, at least when you try selecting it in normal ways by dragging your mouse over the text.
   For instance, very often in Gmail I try to copy the name of a sender of an email, but Gmail won’t let me – because the name is a link (a non-underlined link too, so there’s some additional surprise when you try to mark it, and it won’t let you but expands something instead; only after you clicked “show details” will you be able to comfortably select & copy a name).
7. Don’t include icons for almost every link. Some news sites or wikis use a special icon for all outgoing links. This may be a nice feature in theory, but in practice it disturbs the reading flow when it shows for almost every link. On the other hand, sometimes using icons (or “ASCII icons” like “>>”) can aid to get the meaning of the link across, so it should be a case-by-case decision.
8. Make link text flexible enough so that it “survives” even the removal of the link. This is more an issue of readability than usability, actually. In some cases, people may read your content in places where they can’t follow up through to your link. For instance, they may have printed out your article. Or they may have saved your article on their laptop but they don’t have an internet connection at the time. Or they may click on your link but the page in question has been removed, or is down, or has been changed dramatically.
   In these cases, a good link will a) contain enough information on its own so that the article doesn’t fully depend on the external source, and b) is phrased in such a way that its link can be ignored.
   A link text like e.g. “click here” both disturbs the reading flow – no one would write “click here” on paper, yet your article may be printed out (or be navigated without a mouse, e.g. the keyboard) – and also may lack crucial information to continue reading your article.
9. Underline links you consider important enough for people to click on. This one is kind of obvious. Most links are most usable when they are not only indicated by color, but also by an underline (certain rare exceptions may exist).
   But the reverse is true as well: if you find yourself including a lot of links in your articles which don’t look like links at all (but rather like normal text), and which you don’t expect people to click on – I’ve seen some popular blogs do this, perhaps to boost the ranking of their archive in Google – then don’t include them. It can be confusing to “stumble” over a link when you don’t expect one.
   (Also, on that note, it’s usually bad style to use underlines on anything that is not a link... importance is better indicated by font-size, or using a different background-color – like yellow – or using bold or italics.)
10. Don’t expect your readers to fully understand (and appreciate) when you use special advertising links mixed with your normal content and links. Have you seen those double-underlined links which are thrown over random words within normal articles, and which show advertisement when you hover over them? Besides violating the “don’t gadgetize your link” I find they are a somewhat dubious way to advertise for two reasons; first, your readers may expect you to link only what you consider relevant. By auto-linking in this way, you’re diluting the value of your normal links. And second, these links can skew your voice in weird directions, as they give a commercial undertone to the topics you discuss. Perhaps you are making a point about politics, but when you use the word “democracy” it will be linked to a commercial offering, which can hardly be your point as an author (I’ve seen this kind of thing happen before at some blogs, and it can really devalue the point of an article).
11. Don’t “obfuscate” the URL. There are certain mechanisms which help a site owner track outgoing links, with the trade-off that they will channel the URL through another domain. Also, there are certain services which “compress” the link length, like TinyUrl. While there are exceptions, this is bad style for linking in articles or other posts because it removes all contextual information when you look at the link URL, e.g. by hovering over it. It may also destroy the read vs unread browser history, as you might already have visited the page in question (only you didn’t visit its TinyURL’ed variant). Last not least, it may introduce lags when people follow the link, and potentially it also puts your links at risk – what if e.g. TinyUrl goes down, or introduces interstitionals interstitials?

What do you think, and do you have more tips?

11 Link Usability Tips by Philipp Lenssen | Comments (12)

>> More posts

Advertisement