3

Usually, we only have 2 buttons at the bottom of a form or a page that requires an action: Submit & Cancel.

This one is quite easy to style. However, what if we are dealing with multiple buttons at the bottom of a page? For example:

 ← Back | Send Email | Booking Paid | Check-in Guest

I'm thinking of making "Back" just a link (not a button) and making "Send Email" / "Booking Paid" secondary buttons (light gray). Then I'd make "Check-in Guest" as the primary button (green).

I still feel that there's a better way of doing it or dealing with multiple buttons / actions. What do you think?

3
  • What does "back" do exactly? Is it equivalent to cancel? Is booking paid to change the status to something other than checked-in? And, why would I want to send an e-mail on this form (who am I sending it to - seems removed from the other two actions)?
    – Josh Bruce
    Commented Mar 21, 2013 at 2:35
  • Is the idea to keep the user on the same page? Will the workflow still remain linear, or do they take the user onto different paths? You can also consider moving the additional buttons to a different section of the page if it makes sense. It would depend on the actual function/feature, but for example you can even just have a dropdown with different functions and still keep the Submit and Cancel button.
    – Michael Lai
    Commented Mar 21, 2013 at 5:37
  • What exactly is the form for? Commented Mar 21, 2013 at 6:42

1 Answer 1

3

There is a nice idea of presenting user flow in a form of travelling through a city, with roads and squares. I find this approach great for deciding about the importance of elements in the UI.

In this approach, streamlined processes are roads:

  • The signs should clearly show the way to go (like road signs)
  • Usually it is possible to go back, but you can put a "no turning back" sign
  • There are turns (situations when user cannot finish the process and needs to be taken to another output)
  • There are also crossroads, or rather: forks (situations, when user needs to decide which way to go, e.g. pay with a credit card or PayPal)

By the roads, there can be different playces to stop at (shops, restaurants) but these are not as important as the main stream. These should not be very much emphasized, so that user can stop at them ("Read more about security of the payment process" or similar info popups). These should not take you away from the road, you just step in and then step out.

Squares are places to stop at for longer:

  • It is possible to look around, use a variety of attractions located nearby
  • It is possible to take one of the roads leading from the square to somewhere else.

Plus of course there are the places to step in, which are kind of end points in the meaning of closed functionality, but still can have multiple rooms to navigate through.

The good thing about this point of view is that attractions placed on the sides of the road and the ones around squares gain different meaning. The processes themselves need to be emphasized, and thus the navigation representing traveling from one stop to another should be bigger, more obvious, while just a step-in-step-out places should be indicated in a less emphasized form. This applies for "roads" of course. When user gets to a "square", the navigation can be different, as it does not distract user from travelling from one place to another. So, both roads leading to other places and the step-ins can be emphasized at the same level if necessary.

In your case, I am not sure if it is a "road" or a "square" (I don't think it's an end point), but I hope that it will help you decide about the importance of the elements. Should it be a "road" (which I suppose, anyway) the [Back] and [Check in] buttons should be bigger and placed on opposite sides of the screen (for LTR languages - [Back] on the left, [Check in] on the right), while the importance of the other buttons should be reduced. In this case, as you want users to travel towards [Check in], this buton should be the most emphasized one. Should it be a "square" though, the information you provided may be not enough to give a correct answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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