by anthony on 07/04/10 at 6:18 pm
Have you ever visited a website and accidentally clicked on text that you thought was a link, or a link that you thought was text? A well-designed website will often distinguish the difference between links and text, so that users won’t make these mistakes. The way they do this is by using the characteristics of a link. This helps users find what’s clickable and what isn’t. If you have a low click-through rate on your site, you are probably not using strong enough link affordances.
An affordance is a property in which the characteristics of an object influence its function. On the web, links have certain characteristics or affordances that communicate their clickability. If you’re affordances are weak, users will likely miss your link. If you want more clickthroughs on your site, make sure at least two or more affordances are used to link to each piece of content.
Here’s a list of different affordances you can use to make your links look distinct from your text:
- Use a shade of blue for text links- You don’t have to use blue, but blue is the most common recognizable color for links. You can use other colors as long as it’s not the same color as the text and has enough color contrast with the background to be easily readable.
- Use a bullet or arrow pointing to or away from the link – There are many different styles of arrows you can use. I typically like using this one, “».”
- Underline the link – Many sites make the underline show when users mouse-over the link. This is fine as long as there is another affordance that shows before mousing-over, such as the link color.
- Make the image associated with the content an active link - The image that accompanies the content that the user sees should always be an active link that takes the user to the content.
- Place a border or fill around the text - When you do this it makes the link look like a button. People are familiar with buttons and know how to interact with them.
- Place the links in the left/right margins or the top/bottom of the page – These page locations are prime for navigation. Users expect these areas to have clickable links.
Giving your links a strong affordance is a simple thing to do. When you do it consistently, users will understand how to use your site more effectively. The characteristics of a link are universal around the web. Most websites follow them, but not all. The ones that don’t will suffer in clickthroughs. The ones that do will triumph.