Whatever a website needs to do, it always needs buttons to do that.
Buttons are an essential element of interaction with a website. They have a primary role in the conversation between a website and a person visiting it.
For the buttons to be effective, you need to follow a few basic principles.
1. Make buttons look like buttons
When it comes to interacting with user interface, users need to know instantly what is ‘clickable’ and what’s not. Every item in a design requires effort by the user to decode. Generally, the more time needed for users to decode the UI the less usable it becomes for them.
Remember: “Don’t make me think!”
Don’t assume that something in your UI is obvious for your users
You know very well what’s a button and what is not, what is clickable and what is not. Don’t assume that it is in any way clear to others too. You know what each element in your design is intended to do. Everyone else needs to figure it out. And the less “figuring it out”, the better.
Use familiar designs for your buttons
Here are a few examples of buttons that are familiar to most users:
Among all those examples, the “Filled button with shadows” (third from top) is the clearest for users. Avoid the last one if you can. It could be confusing. It’s a “ghost button” I’ve written about before.
Don’t forget about the whitespace
The amount of whitespace near the button makes it easier (or harder) for users to understand whether it’s an interactive element or not. Otherwise, the button might get confused with an information box.
2. Put buttons where users expect to find them
Don’t make users hunt for buttons. If users don’t find the button where they expect it, they won’t know that such button exists.
Use traditional layouts and standard UI patterns as much as possible. Don’t play hunt-the-button game with your users.
3. Label buttons with what they do
Users should clearly understand what happens when they click on a button.
It’s not clear what does ‘OK’ and ‘Cancel’ represent in this dialog. Most users will ask themselves “What happens when I click on ‘Cancel’?”
I’ve seen even worse, when the question was “Cancel removal?” and the options were “OK” and “Cancel.”
Instead of using ‘OK’ label it’s better to use ‘Remove.’ This will make it clear what this button does for the user. Also, if ‘Delete’ is a potentially dangerous operation, you can use red color to state this fact.
4. Properly size your buttons
Button size should reflect the priority of this element on the screen. Large button means more important action.
Prioritize buttons
If you need two calls to action, prioritize one over the other. Make the decision easier. Never place two identical buttons next to each other.
Make buttons finger-friendly for mobile users
In many mobile apps, buttons are too small. This often leads to the situation when users mistype. Don’t try to cram everything into one tiny screen. Make elements larger.
5. Avoid using too many buttons
This is a common problem for many apps and websites. When you provide too many options, your users end up doing nothing. When design pages in your app or website, think about the most important actions you want your users to take.
One button is ideal. Two, if you can’t have just one. Anything more and you’re straining the cognitive load of the person visiting the page, you’re “making them think.” And while it’s usually good, in this case, it’s bad.
6. Provide visual or audio feedback on interaction
Ever clicked a button only to wonder if it worked? And then clicked again, just in case? Especially on mobile.
As humans, we expect some feedback after we interact with an object. It might be visual, audio or tactile feedback — anything that acknowledges the fact that interaction was registered.
For some operations, such as downloading, it worth not only acknowledge user input but also show a current state of the process.
With a button like this you don’t need to wonder if the click worked or not:
Bonus: providing visual feedback also makes your site feel faster.
Conclusion
Despite the fact that buttons are an ordinary element of interaction design, it’s worth putting a lot of attention to make this element as good as possible.
Button design should always be about recognition and clarity.
7 Basic Rules for Button Design
PS. I wonder what happens when you click this button 🤔
