The Irritation of Non-Clickable Links

Text formatted like links can throw users off, and lead to confusion on the web. This post highlights things to keep in mind when creating links and designing copy on your site.

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!

About the Author

Redd Horrocks

Redd Horrocks hails from South East England. She moved to Atlanta at the age of eighteen and has enjoyed her life here ever since. She has a degree in Communications and Media Studies and now works in Professional Theatre Administration. She is also a Freelance Writer and runs Distilled Rose, a personal finance blog. Redd also contributes to or manages four other blogs with topics ranging from Personal Finance to Vegetarian Cuisine. Redd is actively involved in the Atlanta blogging community, and is the founder of the Atlanta Bloggers Meetup group. She also works with Andrew as his photography assistant and editor. She likes clean websites and steers away from anything overly bright. Redd also enjoys such womanly pursuits as baking and knitting, but has an unreasonable dislike of mops.

Related Articles

13 Comments

  • Aaron Irizarry Reply

    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

  • David Hamill Reply

    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.

  • Zach Dunn Reply

    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.

  • Nikki – Logo Design Guru Reply

    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.

  • Bill Biwer Reply

    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.

  • Redd Horrocks Reply

    @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!

  • Ionut Bondoc Reply

    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

  • David Hamill Reply

    @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.

  • Corey Freeman Reply

    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.

  • Ed Everett Reply

    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.

Leave a Comment on This Article