We need to use more than 3 button in a form. So we would provide something that contained Authorize, Reject, and Cancel. All are placed at the bottom of the form.

Is it good practice to have more than two buttons on a form on mobile? If so, how can we make it user friendly and the placement make sense so the user understand what is happening? Can we have both Reject and Cancel at the same time without causing confusion?

  • can you elaborate on what each button will do? e.g. is cancel just going to navigate back away from the form? – Dave Haigh Aug 13 '15 at 13:51

Going by the limited information we have, I assume that we are talking about something along the lines of a "planned transaction" form, where there are three actions:

Primary Action 1: Authorize will actually cause the transaction to happen

Primary Action 2: Reject will prevent the transaction from happening

Secondary Action: Cancel will NOT have an effect on the transaction, but only on the user interaction (by, for example, going back to the previous screen)

It heavily depends on the context how to deal with those actions. I’m going further with more assumptions, which may not match your situation, but should give you an idea about the thought process:

I assume that the default action would be to authorize the transaction. Thus, I would …

Place the Button "Authorize" prominently, let’s say – for the sake of simplicity – left-aligned and 1/3rd of the screen wide.

"Reject" has the same level of impact, so I would place it level with the "Authorize"-Button, and of the exact same size.

To indicate the consequences I would also apply a well-learned pattern and make the "Authorize" button green and the "Reject" button red.

This leaves us with the "Cancel"-Button. Which, maybe, shouldn’t even be a button, since it doesn’t really cause an action (if my assumptions are correct!). In that case, I would place it below the two buttons, centered, as a text element.

The question is not how many buttons a form can have, but in what way multiple interactions can be presented to make their consequences as intuitive as possible.

Hope this helps at all :-)

| improve this answer | |
  • Thanx for the suggestion @christian u r assumptions were right. and i will consider your suggestion on authorize and reject buttons but cancel below them as a text element would not be intuitive. may be i can place on top right corner. Any other suggestions are welcome. – Sunil kv Aug 13 '15 at 15:06
  • Glad to help! On an afterthought, it might even be less ambiguous to label the navigational element "< back" rather than "cancel" – Christian Aug 13 '15 at 15:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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