Form with both save and submit buttons

Question

I am working on a Web application that consists of a number of forms. Each form can be edited and the user can elect to save their work so far and come back to resume at any time. However, once the user submits, their response is marked as complete and they are no longer able to continue editing it.

Right now I am representing this with floating buttons labeled "Submit completed response" and "Save and continue later," with the submit button having a highlighted color and the save button having plain white to match other buttons in the application.

I've received some reports that users do not understand the purpose of the two distinct buttons. I've added a help link below that triggers an overlay explaining the use of the buttons, but I'm not sure how satisfying that is (I'm not really optimistic about users bothering to read help text, even if it's only three sentences long).

Some other ideas:

• Relabel the buttons somehow (although I have a hard time coming up with labels I think wouldn't be more confusing)
• Change the positioning of the buttons (perhaps the submit button should be on the bottom and the save button alone should float?
• Some sort of hover text for the buttons (don't think this helps much)

Is there a generally accepted convention for this sort of functionality? Other Web applications with similar functionality? I searched but mostly found a lot of argument about whether buttons should be labeled "save" or "submit" -- clearly not a question in my case, since the buttons represent different actions.

The client has suggested changing the colors so the save and resume option is highlighted, but my hunch is that hardly anyone will choose "submit" if I do it that way.

Answer 1

My suggestion would be to change the name of the save button as "Save as draft" so that users know that you are saving a draft entry which is not being submitted shown in the example below

With regards to the positioning of the buttons ,I am not a big fan of the example above as the submit\send button is right next to the save as draft button and there is a chance that the user might submit something without completion by accidentally clicking the submit options.

My suggestion would be to separate the two buttons as shown below

^{download bmml source – Wireframes created with Balsamiq Mockups}

So you have a primary call to action and a secondary call to action with the secondary call to action more prominent which allows the the user to find the submit option quickly if desired