How to create a Design System for Buttons
When a user lands on a product he leans to search for possible actions as soon as possible. Most of the crucial actions are defined in the form of buttons. We see a lot buttons with different shapes, color and texture. But how can I define best design system for buttons?
Buttons always have some text over it to guide user more effectively. But how does user distinguish what is the most important function over here. To reduce cognitive load of the user designers should craft a design system for buttons so that it is widely clear which actions are to be taken first.
Below are the two main factors:
- Primary and Secondary
- Hierarchy of main functions and sub functions
Primary and Secondary
Main functions are classified into two categories: Primary and Secondary. In the below form user can not distinguish between the primary actions and the secondary actions as both has the same styling.
We need to decide on some primary and secondary visual styling so that user can quickly get the main functions in one go. Now have a look at the below form with beautiful distinguished button styling. Primary button speaks for itself that it has a function(clicking) this is affordance and blue color signifies that it is a primary function. Primary button is filled with solid color giving more prominence.
Hierarchy of main functions and sub functions
A lot of designer are afraid of using different size of buttons. It is believed that same size buttons perform best thus give more consistency to the interface. But I am not married to it at all. See the below example.
Forms have a section where user needs to upload a file to complete the form. In the first form button for ‘Upload File’ has the same size. I feel this is totally wrong as it is a sub function. The styling would be same as we have for secondary button but it should be relatively small to the main functions as shown in form second. This shows clear visual hierarchy of design system. It is very important to show clear differentiation between main and sub function.
Hope you like the article. Please share and comment!! :))
