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.