3

I've been working on some modals for an app, and I have done some research into how various confirmation/abort options are presented to the user in the footer of a modal.

A user over on Dribbble posted a nice shot with this treatment for his buttons:

enter image description here

I've seen this treatment before, where the "abort" option isn't actually a button, but never read any sort of reasoning or justification behind it. Could anyone give me some justification? I seem to prefer this method, but that's not enough of a reason to style it that way.

My assumption is that the user has intentionally taken some actions to get this modal, so the option to complete the full action is more prominently displayed than an exit (in case they made a mistake).

Extra points for a link to a study or discussion.

Improve this question
1
2

The "Create" task is the focus, the "Cancel" is secondary. By making it text, we are de-emphasizing the task, yet keeping it front and center in-case the user needs it.

JIC: What I don't understand in this modal is why they have separated the radio buttons so far apart. Normally, there are just two options, stacked or left/right next to each other, so it is clear that the user can only select one. The way they have been visually designed seems like they are button-esque.

J

Improve this answer
3
  • Why is "Cancel" even needed? Doesn't closing the modal do the exact same thing? – erik_lev Oct 15 '13 at 23:06
  • 1
    True, although some users may not realise this, sometimes its a good idea to spell things out. – Joe Taylor Oct 16 '13 at 8:56
  • Giving you the answer because you discuss action priority. Seems to be the most notable consideration. – Jon Oct 16 '13 at 14:33
2

In addition to what user36345 mentions, I think it looks better without using a solid button. It gives the interface room to breathe, looking less cluttered and drawing attention from the user to the CTA that you're trying to draw them to.

Improve this answer
0

Primary calls to action initiating progress/movement of some sort should always be more prominent than a global reset/cancel. You actually will have to seek it out if you want to do it.

Improve this answer
0

In the example you referenced, are users canceling the specific step or the entire form/modal? Closing the modal is the same as selecting cancel. One could argue that the cancel action is redundant because the user can simply close the modal.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.