by anthony 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.