Buttons on a wizard

Question

In our current framework, we are presented with the challenge of accommodating five distinct action buttons: "Submit," "Back" (to the previous page), "Cancel" (to exit), "Save as a Draft," and "Save as a Template." While each of these actions serves a unique purpose and holds value in our user interactions, it is imperative that we consider the principles of user experience (UX) design, which emphasize the need for expedient, user-friendly actions, coupled with the simplification of unnecessary steps without introducing confusion.

Upon careful evaluation, it has come to my attention that the placement of all these buttons on a single page may, in my opinion, create an overwhelming "line of action buttons." This configuration could potentially challenge our users' ability to swiftly and intuitively select the appropriate action, which is contrary to the very essence of UX design.

How can I solve this problem without creating this overwhelming confusing line?

Answer 1

I would organize the actions as follows:

1. Submit
   • importance = primary action
   • purpose = save user's data and trigger business events
2. Cancel
   • importance = secondary action
   • purpose = exit the current process
3. Back
   • importance = secondary action
   • purpose = navigate between views
4. Save as a Draft
   • importance = optional action
   • purpose = save user's partial data for future editing
5. Save as a Template
   • importance = optional action
   • purpose = save user's partial data for repeated reuse

---

Based on this grouping, you can choose how to display each of the 3 types:

1. Primary action should be only one per page, it should be the most obvious element, usually as filled button, positioned where the user can easily access it.

2. Secondary actions should be less than 3, less proeminent than the primary action, usually as text or ghost buttons, positioned close to the primary action or in such way that the user can easily access them.

3. Optional actions can be many, they should not draw attention, usually as text buttons or icon-only buttons, positioned in a special area or toolbar where user can see them, but without drawing any attention to them.

---

An UI element draws attention when:

• it is big compared to the content
• it has bright colors
• it has a lot of empty space around itself
• it has animations or movement

---

The most basic suggestion I can give (without seeing a mockup) would be:

1. Make the submit button big, filled background. Add some space around it. Place it where you have other submit buttons in your app.
2. Make the Cancel and Back actions as text or ghost buttons. Place them close to submit button or in a corner.
3. Make the "Save as..." actions as icon-only buttons inside a toolbar or as text buttons inside a 3-dots menu. Place them in a corner, or even close to submit button if you use a 3-dots menu.