Interactive web design frequently uses buttons; these small elements may seem simple, but in fact they can be one of the most significant aspects of any page. So how can buttons be used to help create a better, more streamlined user experience?
Let buttons be buttons
What’s the best way to ensure that visitors to a page know that a specific element is a button? It’s easy really; just give them the visual clues they need to judge clickability. These signifiers could include making buttons that are square, or rectangular, and finishing them with rounded corners – depending on the general look of the app or page. Rectangular buttons are a tradition in the digital world, so stick with this shape to meet user’s expectations.
Highlights and shadows
Giving an object a shadow is like providing a clue as to its interactive potential. Drop-shadows create contrast, ensuring an element jumps out from the background and is easy to spot as being clickable. This is achieved through a 3D effect which ‘raises’ the button, whilst other content remains ‘flat’.
Clearly label each button
When items are actionable, like buttons, the label used to identify them should always be distinct and unambiguous. This is not the time for abstract ideas or vague descriptions, so give enough information for people to understand what they are clicking through to. ‘Create Account’, ‘Submit’, or ‘Sign up’, are all examples of explicit labels that make people feel confident in tapping them.
Keep buttons in proportion
The buttons on a page need to be sized in relation to the elements surrounding them. They don’t need to dominate the space, but should be big enough for people to use. Smaller targets can be harder to interact with than larger ones, but the average minimum size is around 10mmx10mm on most sites. The area between the buttons, or padding as it is sometimes known, is also important, as it divides each action and gives the interface an uncluttered appearance.
Call to action buttons
Some of the most important buttons on any webpage are the Calls to Action, these are the attention grabbing elements which draw in visitors to a page and encourage them to click through to another stage. To make them most effective, use bold colours which contrast with the rest of the page and position them in a spot that users will pass; either centrally, beside important text, or at the bottom of a sidebar.