Blog

2 min read

Website links and buttons: what’s the difference?

Posted by Juan Olvera on 14 Nov, 2018

One of the more often misused elements of the web is, ironically, the foundation of the web itself.

When we create web products, we want to make them easy for everybody to use. At the same time, we want to draw the user’s attention so they can act on something that could benefit the owner of the website. For example, we might style a link like a button to grab more attention and redirect the user to a landing page after clicking it.

Often the means we use to accomplish such actions diminish the results of the original goal.

Before going into detail, I'd like to explain the goal that most of the business-related websites want and later explain how designers and developers can accomplish this using standards, good practices, and conventions.

Usability

The best way to make a user comfortable on a website is by making it easy to use, providing all the information the user might want (over what the website owner wants to show), with everything accessible and available within as few clicks as possible.

One of the methods that achieves usability is the use of affordances and conventions. On the web, we want to build an interface that users can recognize, or that feels familiar, so they are more comfortable exploring it. The most common example for this is the use of "windows" as graphic interface objects we can interact with when using a computer.

Buttons are other conventions taken from real life. When you want to turn on a light, you press a button or flip a switch. When you want to brew coffee, you press a button. When you want to withdraw cash from an ATM, you press buttons. Using these conventions facilitates the learning process of new users into the web.

What We Do Wrong

In short, we usually make links look like buttons. Links and buttons are different elements with different purposes.

Link Functions

Navigate the user to another page
Cause a browser refresh
Support page jumps with anchors on a page

Button Functions

Submit a form
Open a modal window
Toggling an interface

We make links look like buttons to draw attention to them but, in doing so, we break the conventions and affordances that the web has built over the years. This comes with usability and accessibility implications.

Citing Laura Kalbag from her book Accessibility for Everyone:

It's like turning on your bedroom light only to find you've been teleported to your kitchen.

What We Can Do

The proper convention is for the button to perform an action within the website, like the doorbell of your house, or the buttons on your Xbox controller.

When designing a website, make sure that button behavior elements look like buttons and text links look like text links. People know these conventions; they’ve been using them since the beginning. Link texts are the foundation of the web, and buttons are the interface of the physical devices. Users know the difference.

If we happen to get push back from the client, the marketing department or business-related requests, remind them that usability is beneficial to all their departments. Apart from what they believe to be the right way to do things, standards and best practices are written and evangelized since the inception of the web, and they exist for this reason. It's in the best interest of everyone to make the web easy to use and accessible for everybody.

Topics