A button is an interactive element that results in the action described on it.
If it says save on a button, clicking it will most likely save something.
Its also one of the most important interactive elements of any digital product.
It can lead to a purchase, download, send, among other important actions.
The more our button looks similar to what we associate with buttons, the better.
This is why a rectangle (or a rounded rectangle) is always the safest choice for a button.
Other shapes and forms (triangle, circle, organic) are not as recognizable to the user.
40% off TNW Conference!
You should set the padding and safe space using grid base numbers.
Spacing and alignment
Unevenly spaced buttons are one of the most common problems of interfaces.
Double-peek if your button labels are centered both horizontally and vertically.
Create guides if you oughta be sure.
On the sides, its even better to use double the W rule for increased readability.
Dont forget about the safe space of, or space in between, your buttons.
The right size
Both web and mobile buttons should also have the right minimum size.
If your buttons are too small, it will be difficult to tap or hit them.
That results in frustration and can lead to users uninstalling your app.
The best way is to start with 44 x 44 pixels for all interactive elements on mobile devices.
The sweet spot is somewhere around 50 pixels for mobile buttons.
In the case ofcursor-baseddevices, 32x 32 pixels should also work.
A right arrow or chevron placed after the button label makes the resulting message stronger.
The user is more compelled to click and proceed.
This works well if youd like to strengthen your CTA.
Buttons with shadows are also more clickable and noticed much faster than flat ones.
Add a subtle drop shadow in the button to make it stand out from the background more.
Rounded corners
Rounded buttons are considered more friendly and positive than sharp edges.
At the same time, they make it a lot harder to design content around them.
Aligning icons
Good icon alignment on buttons is one of the hardest things to do.
In many cases the relation between font-weight and icon-weight is specific to them.
There is however a simple and useful rule that works in most cases.
Inside it, we create another shape to house the icon.
It should have a padding inside the larger shape which is the same size as our text height.
Then we place our icon inside the smaller shape.
In the case of a chevron, its best for it to be text-height.
you might also check the line-width against the font width the more closely matched the better the end result.
Even small inconsistencies or bad alignments can lead to lower conversion.
When it comes to buttons, conversions and clicks are all that matter.
In summary, remember to:
Good luck!
CEO of the HYPE4 agency and author of the Designing Interfaces book.
Also tagged with
