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.