We have a form on our system, it basically allows a user to build a list of products they are selling, then send it out via email, once they have completed the forms there is a lot of actions they can take, the more functionality they request I feel like the bottom of the form has become confusing with so many buttons. Any suggestions to make this more usable?


  1. Save - saves and keeps them on the same page
  2. Save & Exit - saves and returns them to the list of their other lists
  3. Send Test Email - sends themselves an email so they can preview it
  4. Preview - Opens a modal popup of what the view form will look like
  5. Send - Saves the form and presents them with a list of their connections to choose who to send it to

enter image description here

3 Answers 3


I would say that the scope creep has stretched the "Form" design pattern too far. The cancel / submit paradigm doesn't work for the extra functionality, because this has become a fully fledged application rather than a form.

I would suggest going more towards the document management design pattern because

  • You are able to save the data before it is complete enough to "send".
  • You have preview functionality.
  • You allow the user to exit before the data is complete enough to "send".

Some suggestions to go down this route:

  • Functionality, i.e. all action buttons go from the bottom corner to a menu along the top.
  • Cancel could translate to some kind of undo functionality (or just allow user to close without saving)?

There are a few strategies you could take to improve the design.

I agree with @Francescha that some of the actions are beyond the scope of the form. However, if you have current users it's also beneficial to consider transitional strategies.

One strategy I've used in the past when working with entities that could have multiple submit actions is to use a split button to hide secondary or compound actions.

I would remove "Cancel" as it doesn't provide any functionality beyond pressing the browser's back button and I'd collapse "Save" and "Save and Exit"

You could try something like this as a start:

split buttons

Eventually, I'd move the preview functionality into a toolbar at the top of the form, and save only use the form submission area for save and submit actions.

  • I agree overall but I would suggest there may be a case for Cancel. I've had users tell me they fear using the back button when in an inputting process because they're afraid to get a post submit confirmation message which they never know how to answer. Even if it's not the case here, there may be value in giving users a sure way out. Commented Jul 1, 2014 at 5:44
  • Thanks for the suggestions, like the idea of combining buttons to tidy up the form at the bottom but keep the functionality.
    – GTyre
    Commented Jul 7, 2014 at 13:48

I feel some of the actions should be separate parts of a "user-journey", in a similar way to how paying online takes place in distinct stages.

I'd split it into these pages, shown clearly to the user by tabs or arrows at the top of the page:

  • Create products
  • Preview and test
  • Send

Or possibly all on the same page, if you're trying to be concise and quick. The preview could also be automatically shown (if it's not likely to be enormous).

  • Thanks for the suggestion, definitely need to break the process up.
    – GTyre
    Commented Jun 18, 2014 at 13:23

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.