Why should "cancel" and "confirm" button have the same size?

Question

A lot of UI Frameworks provide 2 different types of buttons:

1. a sort of confirmation button
2. a "cancel" button

The UI of the two buttons could be different: different colors, background, borders, etc. and it could help to distinguish a confirmation button with a defined padding and background color from a cancel button which has the same size in terms of padding and height but a transparent background color.

My questions are:

• Why are the 2 buttons consistent in size?
• Is it a bad approach changing the size of the cancel button?
• What's the pro having the same size?

Answer 1

You may want to keep the same size for the following two reasons :

• Different sizes creates contrast, that creates visual clutter.
• Placing same size buttons around a virtual vertical axis creates symmetry, which is regarded as more pleasing, formal and stable.

But, if you have more important design goals, i.e. attract user attention, space limitations etc, you may use different sizes.

Answer 2

Cancel and Confirm as just two choices at the end of a scenario which from a user's perspective have equal importance. If you make one of the two buttons more visible (either by using size or color) then you are influencing his decision. Some times you actually want to influence user's decision but others you don't. If you intend to influence his decision making, you can make one of the two buttons large or more visible.

Then there is a second aspect to consider which @DesignerAnalyst has addressed and that is more around visual aspects. If you decide to influence user's decision making, you'd be better of using varying color contrasts than varying sizes.

Hope this answers your question.

Answer 3

Cancel and Confirm typically just happen to have same size buttons. There's really no UX principle supporting same size primary and secondary buttons

In fact, a larger confirm button is preferred to emphasize the primary action. This is why a lot of cancel and undo actions on the web are styled as a link (e.g. UX.SE's post answer form) to give the primary action more weight.

You can read more about visual weight from the article referenced by @DasBesto https://uxmag.com/articles/visual-balance-and-weight-allocation-for-usability

Then why are cancel and confirm buttons usually the same size?

1. The word "Cancel" and "Confirm" have very similar length.

Buttons length by default are determined by the length of its content. Since Cancel and Confirm are very similar in length, you get similar size buttons.

2. Buttons on touch screen needs to be large.

On a mobile device, you need large tappable buttons. With a modal, to facilitate tapping, you make the buttons span the entire width. Cancel and Confirm are made the same size as a compromise to ensure both buttons are easy to tap on. This is okay because color also provides strong visual weight. As long as your Confirm button color make it stand out from your Cancel button, having the two button be the same size isn't that big a deal.

Answer 4

I think you just want to take focus away from the destructive action. By having a cancel or delete button smaller or less focused, there's less chance of an accidental action that has harmful effects.