8 Tips For Better Link Design
Links are the most common thing on the internet, that’s what the whole web is about. Although we use them every single day there are a lot of implementation techniques to keep in mind to improve usability.
1. Avoid general links. Instead of "click here" use something like "more information about San Francisco hotels". A link should give clear hints about what it’s gonna be found on the next page. Generic terms confuse users.
2. Include introductory information for related links. Give context to users making the first link in a group fully understandable. For example:
Read this report in English
This report in German
This report in Spanish
3. If the link is an image, provide a text equivalent that describes the message the image transmits. For example, for a link picture include the following "alt" attribute:
<A href="uk_cities.html">
<IMG src="uk.png"
alt="See UK cities on the map">
</A>
It is even better if the link works as an image description (example taken from News.com):
|
|
.png)
4. Providing keyboard shortcuts to important links will help users with problems to use a pointing device like a mouse. Remember that helping the impaired ones is helping everyone, in this case this feature could also help advanced users to save time. Use the accesskey attribute for this.
<A accesskey="E" href="edit.html"
title="Edit">
Edit</A>
|
|
5. Create a logical tab order through links.
6. Use language familiar to the user for links. For example some countries use "Shopping Cart" instead of "Shopping Basket".
7. Same links across a website should point to the same document. The "Support" link should take to the same page website-wide.
8. Differentiate links with similar names or meaning. For example, you might find "About Us" and "Company Info". In that case leave only one of those.
Popularity: 21% [?]
Very good checklist.
Most important - provide link feedback -
If it’s an outbound link, show it was clicked on the page it originated from.
If its an inbound link (depending on the website content) change the link color when mouse down.
allow the user to know his action was identified by the system.
Good list. I’d add one more…
Always make it very clear if a link is going to open anything other than a web page. For example, mailto: links or links to PDF documents. Drives me crazy when these are lacking some visual clue. Nowadays I usually hover over the link and check the status bar before clicking.
I once read that a good way to make links stand out is by making them plain blue, like the links in the AdSense skyscraper in your sidebar. It’s because blue links are/were the standard for so long, still is in the big search engines. Was my comment valid at all?
Hi Eli,
I think your comment is very important, in fact, it’s very important to make links look like “links”. In my opinion users identify links easier when they are blue and underlined.
Thank all for your comments!
Alex
That’s not a correct use of “alt” attribute. Alt is used for accesabillity, not to give useful hints.
Hi fdog,
You are right. But please let me give you a further explanation of what I meant. Imagine that you see a button that is a UK map picture (uk.png) that is pointing to a better map description or bigger picture (uk_cities.html). I find two advantages for the user if you place an alt= “See UK cities on the map” attribute;
1. Users having problems to distinguish what’s on the little button will get an idea as they hover over with the mouse.
2. Users using a browser reader (for visually impaired) will get a description of the button (remember that in this example the button is an image).
I think these points are good for the user in general, not only for the impaired. So, why not using it to help all users?
Thank for comments!
Alex
Wonderful indeed!