Links Vs Buttons

Where to use links, When to use buttons?

This question is in my mind for many years. Finally I did some research to understand the difference between links and buttons. Took opinions from experts, discussed in mailing lists, posted in facebook groups and read some blogs. I have documented my understanding below. Feedback welcome and ready to incorporate the valid comments in the post.

What is a Hyperlink

Definition from Webopedia (External Website), An element in an electronic document that links to another place in the same document or to an entirely different document. Typically, you click on the hyperlink to follow the link. Hyperlinks are the most essential ingredient of all hypertext systems, including the World Wide Web.

Where to use links

  • Links are found in nearly all Web pages. Links allow users to click their way from page to page.
  • Links are used to navigate from one portion to another portion of the same web page, one page to another page within a website, or one website to another using a “href” attribute.
  • Links are used when information is provided in some other window, layer, popup. Eg: Help window available while filling up a form (instructions to fill link).
    Elements Next, proceed and continue can be used as links when it takes the user to an another webpage. Eg: Next 10 results out of 100 results, Next lesson in a training module etc.

What is a button

Definition from Webopedia (External Website), In graphical user interfaces, a button is a small outlined area in a dialog box that you can click to select an option or command.

Where to use buttons

  • Buttons are used when an action is associated with the element. Eg, Search, Submit, cancel, reset, save, Add to cart, delete, close, install, finish, print, confirm, remove etc. .
  • Buttons are used to collect information or make a choice from other window, popup or a layer. Eg, If you know only first name of a person among 100 people out of which 5 have similar first name. A window is provided with available options with same first name from which the user can select the required name. (Search Names button).
  • Elements such as Next, proceed, continue can be buttons when they are in a part of process in collecting information entered by the user. Eg: Filling up a form in 5 steps, making an online transaction.

Why do developers use images and links instead of buttons

  • Developers use an image which looks like a button and provide an anchor to it. (Example code below) This is not semantic, button should be used where ever an action is associated with the element.
    <a onclick=”action();”><img src=”image/button.jpeg”>Submit</a>
    An image is used to avoid little complex CSS styling which otherwise can be achieved through input type buttons (comment from facebook developer groups).
  • Some developers do not even provide anchor to the image button. In this scenario, users who use only keyboard will not be able to navigate and activate the button.
  • Problem lies with designers than developers who provide the images for buttons (Facebook comment) .
  • Links can be easily styled where as buttons are complex to manage styling.

4 Comments to "Links Vs Buttons"

  1. Jenny Bruce's Gravatar Jenny Bruce
    September 23, 2013 - 5:05 am | Permalink

    Rakesh,

    Thanks for this post.
    Re your comment “Some developers do not even provide anchor to the image button.” – I also see lots of developers use images in or to provide controls on web pages or apps.
    The use of or as a user interface control (using scripts to provide the interactivity) is a clearly stated failure of WCAG 2.0 (F59), so it is beyond me why developers continue to use this technique.
    I believe you’re right about the fact that wrapping an image in an anchor element to act as a button/control is not correct semantic use of the element.
    However, I have struggled to find this explicitly stated in WCAG 2.0 – although I think Technique H91 does infer this.
    Technique H91 includes a table that specifies what I understand to be the ‘default’ role of particular HTML elements and the role of is stated as ‘link’ – therefore making an behave as a ‘push button’ must surely contravene the specification.
    In recent times I have seen developers use ARIA to attempt to add semantic information to the anchor element; A new app I was reviewing contained the following code:

    Submit

    While this provides some semantic information to the element, my (still unanswered) question was – is it okay to change the role of from ‘link’ to ‘button’ using ARIA, or should the role of never be changed from it’s default role?

    I’d be most grateful if anyone could give me an authoritative answer to my question.

    Jenny

  2. October 2, 2013 - 8:28 am | Permalink

    Rakesh

    Are Devs really still wrapping anchors around an image for a “pseudo” button look. I find this hard to believe.

    Surely we have advanced from 2002 and are now using CSS. It doesn’t take much skill to style a link into a “pseudo” button without an image. This method is scalable as well.

    Have you considered the micro interaction expectations between buttons and links – this is a area that will provide you with a great deal of insight.

    Also the use of buttons is contextual to the environment, if its small touch screen, you want buttons not links.. mainly due to the interactive area increase.

Comments are closed.