Primary & Secondary Buttons

What are Primary and Secondary Buttons in the Forms

Usually, there are two buttons in any form. One is the primary action button which is the main action button in any form. Like, Ok, Done or Save button.

The other is the secondary action button, which is less used like no, cancel etc.

Visually Strong

The UI of both the buttons should be different and easily recognized. The primary action button should be more prominent, as compared to the secondary action button. It should be more highlighted then the secondary button. An action that enables a user to accomplish their largest or most important goal is referred to as a primary action

Clear Label & Right Context

Only visual is not important, you need to define a clear and distinct label on the buttons, so that suer can distinguish between the choices, they need to make.

For example - "OK" and "Cancel"

But, instead of using a generic label, the button should use right context and term.

To design any Dialog carefully, can prevent you from any Error or Problem 

A designer should keep in mind before designing any Dialog. They might be chances that the primary or the secondary buttons may be positive or negative.

Button Placement

The placement of the button is very important. The primary action button should be placed towards the right side of the secondary action button. Now the question is why we do so?

We do so, because, it would take lesser eye trips. The primary action will be seen on the left, followed by the secondary action on the right. If we move the secondary button towards the right, then the user will first look the primary button on the left side, then move their eyes towards secondary button. Their eyes will then return to the primary action to click it. This will take around three rounds of visuals.

Correct Way

Visually Confuse Users a Lot

The visual fixations on the right side is less as compared to the left side. In the case of primary action buttons, users focus only once on each button and then move on to the next button.

Although users might find it easier to reach the primary action on the left, placing it on the right of a dialog box actually makes it faster because the user's mental process is shorter.

 

Here cancel is secondary but visually prominent

 You should probably choose the platform that most of your users prefer if you're designing a web-based application.