What is the best practice for multiple button placement and emphasis?

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?

Answer

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.