The Button vs. Link Debate

by on 08/09/10 at 2:41 pm

The button and the link have co-existed together for a long time. The link vs. button debate is not really a battle of which affordance is better, but instead a question of when to use one over the other.

When we look at the web, links outnumber buttons on most websites.  The reason for this is because

  • links are easier to create
  • links are simple and sufficient
  • links don’t overshadow content

Buttons, however, are the opposite.

  • buttons take more time and effort to create
  • buttons can come in different sizes, colors and styles
  • buttons can sometimes overshadow content

The differences of the button are, in fact, its strengths. You can style a button to look three-dimensional so that it exhibits the physical characteristics of a real button, and therefore, afford the act of pressing. A button can also be sized and colored in a way that uniquely stands out on its own. This makes it more noticeable and easier to click on than a link. When isolated on its own, a button may also intrigue the user’s curiosity, which could lead to more clicks than a link.

A button is a much more potent affordance than a link, which means it should be used sparingly. Overusing buttons will put your click-rate at risk, which is why you should check which call-to-actions are the most important that deserve a button for. Actions like signing up, joining, subscribing, buying, registering, submitting, saving and searching are important because they enable the user’s commitment to the website.

In order to make your buttons strong, you also have to consider the placement of the button. If you place a button in an area with a lot of surrounding objects it could degrade the potency of your button. Ideally, you want to place your button alone with as few amount of objects as possible, so that more attention is drawn to it.

The color of a button is important as well. If a page has more than one button, then you should make the most important button a different color than the others. When they are all the same color then they all have equal weight. But when only one button has a different color, that button has more visual weight than the other buttons. There’s always a call-to-action that deserves more clicking than the rest.

By using buttons the correct way, you can better influence users to click on what you want them to click on.  The question you should ask yourselves when designing is not when to use the link, but when to use the button.

9 Responses to “The Button vs. Link Debate”

  1. Pritam Pebam

    Aug 11th, 2010

    I think Users trust buttons more than links…
    and can you please elaborate what you mean by “but tons can come in dif fer ent sizes, col ors and styles”??? Why can’t we just style the links to look like a button??

    • anthony

      Aug 12th, 2010

      What I mean by that is that buttons give you more flexibility in how you style them. You can choose your own color, gradient, size, font, shape and placement for it because a button is essentially an image that stands on its own.

      Links compete with text so they require a level of standardization and consistency in order to communicate that it’s an affordance. Because of this you lose flexibility in how you style your links. If you wanted to make your links look like buttons by putting parenthesis around them that doesn’t seem like a problem if the link navigates you to specific content, but buttons should definitely be used for actions of commitment.

  2. Hemanshu

    Aug 12th, 2010

    Yeah, I completely agree here.. buttons for actions and links for navigation :)

  3. J. Albert Bowden II

    Sep 2nd, 2010

    sorry, but can you define button and link in this context, i’m not sure if you are talking about anchor elements as links, button elements for buttons and/or input elements with an attribute of button.

  4. Travis

    Sep 9th, 2010

    I try to limit the use of buttons for things that are actually committing an action. Examples: logging in, submitting a form, posting a comment, etc. I use links for things that trigger other actions. Examples: showing a form to post a comment (wherein a button is there to commit the comment). Whatever you choose to do, I think there should be a differentiation and consistency in how you use links vs buttons so users get used to the difference (whether they notice it or not).

  5. Erica DeWolf

    Oct 18th, 2010

    Great post! I think the question also becomes what the goal of your page is. If it’s a landing page, and you want somebody to perform a call to action- then a button should be used, as it has been proved more effective in this situation.

    Thanks for the info!

  6. Aaron

    Feb 9th, 2011

    Nice.
    Here I leave you an old but still good article about links and buttons from Jakob Nielsen’s web.

    http://www.useit.com/alertbox/command-links.html

  7. BURKE

    Jun 7th, 2011

    This is a great discussion, and one that most designers don’t understand. The idea of when to use a link or a button. The Jakob Neilsen article is a great one! However, moving forward, it fails to describe what happen when there are several call-to-actions on a page, or more specifically within a content grouping.

    For example, log in components that ask users to “submit” or “forgot password?” Forms that allow users to “submit” or “clear”. It’s important to understand primary vs. secondary, or even tertiary actions.

    Rule of thumb.. Your primary action gets the button, while secondary and tertiary actions need to default to a link representation. This way the primary action receives the most visual weight, or prominence, thus encouraging users to take that action over the others. Hope this helps everyone.

  8. Arvind

    Nov 28th, 2011

    Great article, I have been troubled by this for a while. However I still dont know how to put this into a UI guideline document?

    Edit, is a link or a button? Remove? Add?

Leave a Comment