The Irritation of Non-Clickable Links

I know where you sleep you dirty little faker.Oh, Hi! You can’t really click me but before you know that, you’ll have to give it a go! Thanks!

I have a pet peeve. It’s a pretty normal pet peeve and I am sure that I share it with many other people.

I hate non-clickable links. Can’t stand them. I think they are annoying and atrocious.

What is a non-clickable link? Well, technically it’s an oxymoron but what I am describing is when you have text on a website that looks like it should lead you to more information, or describes another page or place on the site, but does not in fact link to it. It’s like having an email address displayed with no way to automatically click it and send someone an email, or having a navigation tab that goes nowhere.

An affordance is a quality of an object, or an environment, that allows an individual to perform an action.

What we’re also talking about here are “link affordances“, an affordance being “a quality of an object, or an environment, that allows an individual to perform an action” according to Wikipedia. The design of an object suggests how it should be used.

If you think about it, there are many reasons why non-clickable links are unusable. They are teasers that hint at providing you with information, but they are not providing you with an easy way to access it. They increase work for the user. They suggest a function which they do not perform.

When building a site, true, it may take you a few extra minutes to assure that all links are clickable, but surely that is better than having 100 site visitors attempting to click the link, finding they can’t, seeking information, failing, and then leaving your site dissatisfied.

If you have something that isn’t a link but looks like one, see if you can think of a way to more clearly define all of your links. Are they underlined? Are they all one color? Is there an icon next to them symbolizing their purpose? How can you prevent your users from having to think about whether or not a link can be clicked?

The most common ways of making a link obvious are:

  • Underlining the text.
  • Having the text change color when you mouse over it.
  • Making all links a universal color not used by other elements on the site.

There is a great list of do’s and don’t written by Dr Bob Bailey. If you want a longer list of things that work well as link representations, I recommend you check it out.

And don’t forget to read through our own post about when and how to create usable links and buttons.

Take a look at your site and see if you have anything on there that could be mistaken for a link. Your visitors will thank you for not making them have to think!

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. nice read.

    we just had this discussion at work yesterday. We kept finding usability errors due to inconsistency in links throughout the design. They didn’t realize the simple need for consistency until they themselves tried to use the client dashboard we were creating… It is key to put yourself in the users shoes.

    thanks again for another good article

    ~ Aaron I

  2. Nice post. It’s just as important to make hyperlinks obvious I think. If hyperlinks are obvious then you don’t go clicking bold text thinking it’s a link.

    My advice is toLet your hyperlinks shine.

  3. Great read! This is especially true now for AJAX pages where links are simply anchors that do nothing but call javascript.

    Like David, I recently wrote an article about making links that actually make sense and are obvious to their destination. Don’t Click Here! – Placing Links in Context.

  4. I agree that these are annoying. Shouldn’t the internet have some kind of program that doesn’t allow this? We are modifying the internet as we go and I think that should be something that needs to be fixed. It should go up on the priority list.

  5. I agree to some extent, however I think it is ok to style body text with backgrounds or underlines as long as they are consistent throughout the site.

    It’s also a good idea to style the hyperlinks with something that users wont be able to confuse the two with.

  6. @Bill Biwer: A good point, Bill. In styling body text in a similar fashion to what we would expect links to be, consistency is the key. Thanks for that!

  7. Regarding to links :)
    I had the same problem here on your site, but not on text, the images are not linked to the posts in the “Related Posts” table. :D

  8. @Bill Biwer: Hi Bill, I have to disagree about the underlining. When we see underlined text we think ‘hyperlink’. I haven’t seen a site that has managed to avoid this ambiguity when underlining unlinked text.

  9. I think the opposite scenario is also pretty irritating: when links don’t stand out enough. Instances when links are barely a shade off from the actual text color, or when they don’t do any kind of hover action really irritates me.

  10. @Ionut Bondoc: Ah, thanks for the feedback! It is added to our to-do list!

    @David Hamill: Good point. I have thought about this same topic…

    @Corey Freeman: Excellent observation, I agree!

  11. Did anyone else find the style of the italics in this article a bit like non-clickable links?

    Maybe because links were on my mind of perhaps it’s the colour that is similar to the link colour on this site but I definitely instinctively moved my mouse over the first few to see if they revealed a link.

  12. I appreciate you for giving helpfull information with great links.

  13. Totally agree with you Redd. I have discussed the subject of usable links from a different perspective by proposing a set of 15 guidelines for making links more usable:

    http://usabilitygeek.com/15-usability-guidelines-for-designing-web-site-links/

    Well done for the post!

Related Posts