UI button design
Before we start designing our buttons, we should take time to think about how the design communicates interaction. Make buttons look like buttons. Make it easy for user to interact with buttons. Label buttons with what they do . Use color contrast to guide users to action. And make sure to maintain consistency throughout the interface controls, so the user will be able to identify and recognize the app or site UI elements as buttons on each page. Taking time to plan the buttons will make our life easier because it will allow better user interaction with our application or website.
The easiest shape to make buttons square or square with rounded corners, depending on the style of the website or application. Rectangular shaped buttons have been introduced into the digital world a long time ago and users are familiar with them. Some research suggests that rounded corners enhance information processing and draw our eyes to the center of the element. We can try be more creative and use other shapes such as circles, triangles or even custom shapes, but keep in mind that is can be a bit more risky.
The size of buttons also play a key role in helping users to identify these elements. Consider the size of button elements as well as the padding between clickable elements. When tap is used as a primary input method for our application or website, we can reference MIT Touch Lab study in order to choose a proper size for the your buttons. The MIT study found that the averages for finger pads are between 10–14mm and fingertips are 8–10mm, making 10mm x 10mm a good minimum touch target size. Use the guidelines to minimize the number of errors to the practical level while balancing other important characteristics. When mouse and keyboard are the primary input methods, button measurements can be slightly reduced to accommodate dense UIs.
Choose a proper labels for your buttons. The selection should be based on the principle of least astonishment, in other words, users should not be surprised by what the buttons do. If a necessary button has a label with a high astonishment factor, it may be necessary to change the label. A rule of thumb is to label the buttons with what they do. Add a clear message of what happens after the click / tap or show what an element does using action verbs.
When picking a color palette, remember to think about how colors will help users navigate and understand the action. Use color and contrast to help users see and interpret the application's content, interact with the right elements, and understand actions. Make the most important button look like it's the most important one.
Every button is meant to direct users into taking the action we want them to take. Think of the website or application as a conversation started by a busy user. The button plays a crucial role in this conversation. A smooth interaction keeps the conversation flowing along while glitches such as not being able to find a right button, create interruptions.