Have you ever accidentally clicked on text you thought was a link? A well-designed website distinguishes the difference between links and text so users won’t make these mistakes.
The way they do this is by using link affordances. 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 visual characteristics of a web element indicate its function. 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 click-throughs, make sure at least two or more affordances are used on your links.
Here’s a list of different affordances you can use to make your links distinct:
Use a shade of blue for text links- You don’t have to use blue, but blue is the most common color for links. You can use other colors as long as it’s not the same color as the text.
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 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 simple and necessary to do. When you do it consistently, users will understand how your site works. The affordances of a link are universal around the web. Most websites use link affordances, but different styles of them. Whatever affordance style you use, make sure it’s distinct enough for the user.
Book
Affiliate
