April 12, 2017 Chess No Comments on Tips on Designing Effective Buttons
Tips on Designing Effective Buttons
Buttons in interaction design may look simple and insignificant, but they are actually one of the elements that require a well-though-out strategy to create. Buttons play a big role in design that requires an input or if there is some sort of interaction that’s waiting to happen between the user and the program.
Things to Consider when Designing Buttons
Make sure the button has a distinct shape, and provides enough ‘visual cues’ to help users know where to point and click. Button shapes familiar to users are square and rectangle, depending on what the page needs.
The button shapes and sizes all throughout the website or app should be consistent. To make them more distinct, make use of shading and highlight to make the buttons pop out of the page.
Every button on the user interface should have a proper label or icon to eliminate the surprise factor. No one clicks on something they do not know where it’ll lead to. Having clear labels on buttons lets page visitors know what action the button will do and where it will lead to. Effective buttons often use action verbs to make it clear. Ineffective buttons, on the other hand, are often vague with no clear action.
The buttons should be placed and located correctly; do not make users hunt down for the buttons. The buttons should be where the user expects it to be, so consider the location and order of buttons when designing an app or website.
Nothing beats a button that perfectly fits the pad of your fingertips. The size and padding of your button should work with the other elements on the page and should be designed large enough to enable easy user interaction. Find the perfect size that works with the page/app. Check out the MIT Touch Lab study for proper button sizes. Average human finger pad goes from 10-14mm while the fingertips are 8-10mm. 10mmx10mm should work as good minimum touch target size for buttons.
Along with the button sizes, padding between buttons, and visual feedback should also be considered. If the buttons are too close together, accuracy in pressing might be affected. The controls need to be separated enough for users to have enough breathing space.
If there’s no difference in how the button looks the user won’t know if it has been pressed or not. A button should have multi-states to indicate whether or not there has been interaction.
Among the buttons that need distinction are call-to-action/action buttons and primary and secondary buttons. Buttons like these have to be a different color. The color should not blend it and should stand out from the background to note where the most important call-to-action button is.
There should also be a difference between primary and secondary buttons, agree and disagree buttons, accept and cancel buttons, and the like.
- Primary – should carry a stronger visual weight, dominant button (bright colors).
- Secondary – weaker visual weight, reduce visual prominence.
Additionally, mouseover highlight should have a different color to let the users know which button they have selected to click.
Important Questions to Ask
When you know you’ve done everything you can to improve the buttons in the UI design, ask yourself the following questions, the answers to these will determine how effective the button design will be.
- Will the users be able to identify the button?
- Does the button label describe the button action?
- Is the button easily visible?
- Will the users be able to differentiate between buttons?
To optimize your website or page, get in touch with MicroCreatives’ developers and designers to learn how to have an effective button and overall, a website that converts.