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

In the F-shaped scanning pattern is characterized by many fixations concentrated at the top and the left side of the page. Specifically:

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
  • Finally, users scan the content’s left side in a vertical movement. Sometimes this is a slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.
  • 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.