Form's buttons

December, 2021

When it comes to designing forms, it’s vital to remember that users can be reluctant. Buttons, if wrongly considered, can dramatically degrade user experience. Position, order and aspect are 3 things which will facilitate user perception and render his life easier.

Eye tracking

People scan a page like (more or less) they read a book. From top to bottom and from left to right.

The alignment of actions with a form’s input elements provides a clear path to completion that helps people complete forms faster. Be conscious of where you place form actions as primary actions directly aligned with input fields tend to increase completion rates and the less time people have to spend on your forms, the happier they will be.

Primary action

Don’t have more than one primary action button on the screen at a time.
Always keep normal state for primary action in order to highlight what information is missing/wrong in order to perform this action.
Primary actions directly aligned with input fields provides a clear path to completion that helps people complete forms faster.
Avoid generic words such as “Submit”, because they give the impression that the form itself is generic. Instead, state what action the button will perform when clicked, such as "Search flights", "Add documents" etc..

Secondary action(s)

Always place primary action first, secondary action(s) second, this is the natural order of things.
Secondary actions should have less visual weight because we assume that majority of users will go with the primary action.

Consider people using screen reader, putting primary action first makes total sens and should help them to perform their tasks faster.

Positive/Negative as secondary

Always use primary color for positive action and secondary for negative action.

Giving the secondary action which stands for negative (possibly irreversible) action more visual weight is dangerous because the user can select the irreversible action by mistake.

Destructive action as primary

Use distinguishable color (usually red) and be extremely precise on the label for primary destructive action.