Let’s design better buttons
Buttons are a common element of interaction design.While they may seem like a very simple UI element, they are still one of the most important ones to create.So let’s have a look at the essential items you need to know in order to create better buttons.
Make Buttons look like buttons
It is important to make a button look like a button. Visual cues help people determine the clickability. So just use proper visual signifiers on clickable elements to make them look like buttons.
Shape
It’s okay to be creative and use different shapes, but unique ideas can be a bit riskier. Square and rectangular shaped buttons were introduced into the digital world a long time ago and users are familiar with them.
Consistency
Users will be able to identify and recognize all UI elements as buttons if only we maintain the consistency throughout the interface. For example when a user recognizes a particular element’s shape as the “button”, being consistent won’t only contribute to a great looking design , but it will also provide a more familiar user experience. Using different shapes for a one unique element is not only confusing the user, it is an incorrect design practice.
Shadows and Highlights
Drop shadows make the element stand out against the background and make it easily identifiable as a tappable or clickable element as objects that appear raised look like they could be pressed down or tapped or clicked.
Clearly labeled buttons
We as users used to avoid interface elements without a clear meaning. It is good to include buttons with proper labels or icons in your UI.
Clear and Distinct labels
Users will feel more comfortable when they understand what action a button does. When a user goes through a button “save” , the user can clearly understand that pressing the button will only save the entered data and there is no risk pressing that button. It is clear and specific to the task.
Size and padding
You should consider how large a button is in relation to the other elements on the page and to ensure the buttons you design are large enough for people to interact with. A study found out that the average size of finger pads are between 10–14 mm and fingertips are 8–10 mm making 10mm*10mm a good minimum touch target size.
Provide visual feedback
This requirement isn’t about how the button initially looks to the user, it’s about interaction experience with the UI element. Usually a button isn’t a one state object. It has multiple states, and providing visual feedback to users to indicate the current state should be a top priority task.
Visual Distinction for primary and secondary buttons
When choosing between primary and secondary actions , visual distinctions are a useful method for helping people make their choices.So the primary positive action associated with a button needs to carry a stronger visual weight while the secondary action should have the weakest visual weight because reducing the visual prominence of secondary actions minimizes the risk for potential errors and further directs people towards a successful outcome.
So next time you try to design your interface, use these tips to include better buttons.
