I have a pet peeve: I hate non-clickable links. Can’t stand them. I find them annoying and atrocious. And I’m not the only one. In fact it’s so common that there’s a term for expecting something should link (or do any action based on how it looks). It’s called an affordance.
To be fair, a “non-clickable link” is an oxymoron. However, I assume that any text on a website that references another page will link to it. It might be an email address, a page title, or a navigation tag – but sometimes there’s no way to click it. To me, this isn’t text. It’s a non-clickable link.
The reason I assume the text is clickable is because text referencing other pages is an affordance.
An affordance is a quality of an object, or an environment, that allows an individual to perform an action.
–Wikipedia
The problem with non-clickable links is due to “link affordances,” or my (and many people’s) assumption that text that mentions another page will link to that page, because of the way the text looks or sounds.
Why do affordances matter?
Our online experiences differ from one website to another. So how do we know when to click on something, when to move to a new page, what a button is, what’s navigation, or how to otherwise interact with a website?
Enter affordances.
Even though eight different pages may have eight different types of menus, all the menus have certain things in common that tell us “click on me to go somewhere.” They’re all at the top of the page, for example, and they are a different color than the rest of the page, or divided by a header line.
No one expects the entire Internet to be consistent in every way, but we do need to follow standard best practices so that users can trust their instincts and actually use our sites. That means we need to be able to recognize affordances and make sure we use them!
Finding the Links
These “non-clickable links” are a perfect example of a broken affordance. Essentially, they just aren’t usable, for many reasons. They are teasers that hint at providing the user with information, but they don’t follow through with an easy way to access the information. They suggest a function which they do not perform, and because of that, they increase work for the user.
What’s funny is that even if it takes a site designer a few extra minutes to ensure that all possible links are real and clickable, those few minutes are negligible compared to having 100 site visitors who attempt to click the link, find that they can’t, scan the site but ultimately leave dissatisfied and frustrated that they couldn’t find the information they wanted.
Continuing on our link example, consider what it is that makes text look like a link. 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.
If text that is not intended to be a link is underlined, a unique color, or changes color when rolled over, consider the reasons behind that decision. Affordances are basically the common sense of the internet, so just ask this simple question:
How can you prevent your users from having to think about whether or not a link can be clicked?
Getting started with links and more
There aren’t a lot of resources available to help follow affordances, maybe because so many people think of them as common sense. But unfortunately, common sense isn’t so common, and we can all use a little help as we design. [Editor’s Note: these resources were updated as of April 2016]
- Take a look at Andrew Maier’s 2009 presentation on web usability and affordances, which he followed up with a detailed article.
- Check out the IxD checklist, which includes suggestions on how to use affordances to create clear, simple, consistent, and structured sites.
- See Paula Borowska’s 2015 article on 6 types of digital affordances that impact UX.
- Read our 2008 [since updated] UX Booth post about when and how to create usable links and buttons.
- And don’t forget to usability test! Having users identify what’s intuitive on a site and what’s mistaken for a button, link, or other interaction will improve the usability of the site. To paraphrase Steve Krug, visitors will thank you for not making them think!
Ready to get your feet wet in Interaction Design? In this article we touch briefly on all aspects of Interaction Design: the deliverables, guiding principles, noted designers, their tools and more. Even if you're an interaction designer yourself, give the article a read and share your thoughts.