Buttons are a critical element with any interactive design.
Without them, your design isn't interactive. One of the critical functions of a button is to actually look like a button, so the user can distinguish it from the rest of your designs. Additionally, buttons should be elegant, clean, seamless, and consistent with the overall look and feel of your design.
Buttons even have an impact on your sales, for example, red buttons convert higher than green buttons. Even the text of your button affects your click-through-rate. We've outlined 6 guidelines for creating the perfect buttons.
1. Placement and Order
Button placement is incredibly important because incorrect placement could interrupt the user's flow. When placing buttons vertically (on top of each other) place the least emphasized buttons at the top and the most emphasized at the bottom. When placing buttons side to side (next to each other), begin with the most emphasized on the left side and least emphasized on the right.
2. Button Anatomy
Button anatomy is also a great thing to understand. A button consists of a label, a container, and an optional icon. While icons might help your CTR or give your user more context, they are not required for a functional or good looking button. Containers for labels can either be solid (have a fill) or have a border, with an optional drop shadow to add some depth.
3. Button Size
Button size ties hand in hand with emphasis, however it highlights priority versus emphasis. Generally, larger buttons evoke a sense of urgency, and are typically the first to be looked at. In the context of a music app, the user might prioritize the 'Play' button over the 'Dislike' button, thus, the play button should be made larger than the dislike button.
4. Color and Contrast
Color and contrast play a huge role in the mood or idea that your buttons invoke. For example, green tends to invoke success, prosperity, or security, while red tends to invoke warning, failure, aggression, or dominance. Here's a link to a site that goes much more in-depth with the different colors and what they mean. For the purposes of buttons though, these are the most common meanings of colors.
5. Width and Padding
Button padding is one of the most important aspects of button styling. My personal styling is to set vertical padding equal to font height, and set horizontal padding to 1.33 times vertical height. If a font height is 20px, vertical padding is 20px, and horizontal padding would be 27px. Button styling generally depends on the overall look and feel you are going for, as well as your own personal preferences. Buttons should be placed as far apart as one side of the horizontal padding, as depicted in the lower part of the graphic.
6. Button States
Finally, buttons need to have different styles for different states, so that the user can detect which state the button is actually in. Not shown in the graphic is the focused state and the disabled state. Typically, the hover state is a lighter color, clicked is a darker color or even lighter color, disabled is gray, and focused has an outline. However, it's very important for you to design your own style that the user can understand and interact with.
Buttons are one of the most critical elements of user interface and user experience design (UI UX Design) because they allow the user to get context and make decisions. Styling and positioning these buttons is crucial, because it determines how exactly the user makes and prioritizes these decisions, and ultimately how the user interacts with your website or app.
Element Six Design is an Oklahoma City web design agency specializing in affordable web design services as well as graphic design and brand design services. Contact us today to schedule a call to discuss you company and how we can help you with a brand new website and SEO Services.