15

I'm designing a form-based UI and the user can choose to leave things part-way through and resume later, or he can carry on to completion (in which case certain validation takes place). It's a little like filling your shopping cart on Amazon.

I need wording for the buttons which conveys those two situations to the user, but my user tests indicate that 'Save' and 'Finish' don't unambiguously do this.

So I can test the rest of the design, I've resorted to these:

buttons saying 'Save for now' and 'Ive finished entering stuff'

but they do seem a trifle long-winded ;-)

I've seen the discussion about 'Done' and 'Save' but IMHO that doesn't really resolve the issue.

|improve this question
  • 10
    Save Progress and Submit Form/Application would seem to fit the bill. If there is a review step then Save Progress and Review and Finish could be fitting. – MonkeyZeus Aug 15 '16 at 14:01
  • 2
    Save and Submit are self-explanatory enough to me, but I can see how the former is vague enough that some people might think that's all they need to do, and be incredulous when they click it, get a 'Thanks!' message that they don't really read, and later come back to find that it only saved a draft. So, I'd be inclined to call the left one Save Draft and the right one (I'm not so sure about this) something like Submit Completed Form – underscore_d Aug 15 '16 at 14:16
  • 5
    "Save for now" seems... off. Typically you save things for later. – Harrison Paine Aug 15 '16 at 15:23
  • 2
    What's wrong with "Save" and "Finish"? – Monty Harder Aug 15 '16 at 17:31
  • 2
    @DanBryant This sounds like a web app. What you describe isn't the norm in that case. (I'm not saying it can't be done, but using client-side scripting to "autosave" is easily broken by browsers restricting such scripting for security reasons.) – Monty Harder Aug 15 '16 at 20:43
21

Since the changes are saved with both buttons, my suggestion is to call them both save with something that distinguishes them:

Save as draft
Save as final

Final is too vague though, better use:

Save and [what is next]

Example for a shopping cart:

Save and continue to checkout

|improve this answer
13

Might you consider doing something a little more pro-active on behalf of the user and automatically save their data between each step, or even after each field or selection is completed? In either case, you could simply present "Save and Close" or "Continue" controls.

As a user, if I click a Continue control, I assume that the system is saving all of my work as I go (and it should). But if I leave, I want some assurance that everything will be saved up to the point I've completed. You COULD have a "cancel" or "close" link and provide a dirty-save dialog saying "Your page has unsaved changes" and give them a bunch of options, but that should be saved for if they try and leave using browser controls, not your own system.

IMHO.

|improve this answer
  • 2
    Came to answer exactly like this. Requiring the user to regularly hit "Save" or lose their data is very much an antipattern. You should save on every user action, or where necessary, save at a regular period and show a small unintrusive notification hat you did so. – Dewi Morgan Aug 15 '16 at 15:59
  • 1
    I love things like this... Good UX should mostly be transparent. The user should almost not be aware of it; frictionless. – Chris Aug 20 '16 at 14:17
10

'Save' is fairly self-explanatory: the user is saving the data on the form. The only confusion may arise from whether this save is step that will take them to the next part of the process or whether they are just saving the data for later retrieval. A possible solution would be to use 'Save Progress' or 'Save Data' (or something similar) to clarify the point.

The other button is a more difficult task. If the next step in your process has a name you should probably use that. For example, if the next step involved payment details you might use 'Proceed To Payment', or as you have written in your question you could use 'Validate My Details'.

Obviously you could tweak the phrasing to suit your particular style.

The point is to be as clear as possible so that the user has a strong idea of what to expect after they click the button. When clicking the 'Save Progress' button they might expect to see some sort of pop-up or some other indicator confirming the save. For the other button they will be expecting whatever you label the button with - in your case you want them to expect the validation process or whatever the result of that process is.

|improve this answer
  • 1
    Yes, even if it weren't for the Save button, the general rule is to label the final action button with what the app is doing with the entered data so the user is more likely to understand what they're committing. So don't use Done, Finished, OK, or Submit, Use Purchase, Checkout, Post, Publish, Signup, Register, or whatever your feature actually does for the user. – Michael Zuschlag Aug 15 '16 at 11:01
  • 2
    Thing is, "Save" sounds too good, in that if it boots the user to a message like 'Thanks! Your progress has been saved to complete later', they might only read the 1st word of that, & just assume they're all done & their form has been submitted. Then in a few days they'll be on the phone, raging, asking why their form hasn't gone anywhere - & incredulous that you're telling them it's because they pressed the wrong button. 'But it said Save! Why didn't you Save it?' ... 'We did, sir, but--.' You get the idea. IMO adding a bit more clarity is a tiny effort to pre-empt a lot of potential hassle – underscore_d Aug 15 '16 at 14:22
  • 1
    @underscore_d - Context is everything. In this scenario the 'save' button will be right next another button prompting the user to take the next step - the save button would not be the primary CTA in that area of the screen. Plus, I did outline the problem with just using "Save". – Andrew Martin Aug 15 '16 at 14:26
  • 1
    @AndrewMartin Sure, and since you already suggested Save Progress, I'm kinda riffing on a general tangent here, not massively relevant to your answer I admit. :/ You're right that if the other button was context-sensitive or even just Next or Finish, that would make the lesser effect of Save much less clear, as would e.g. green highlight on the main button. – underscore_d Aug 15 '16 at 14:28
6

Eliminate "save for now" entirely

You should never discard a user's data unless that user has expressly asked for it (and perhaps confirmed it with a modal, but that's another discussion). When the user enters information into your form, it should be saved automatically and asynchronously with Javascript. Just show a "saving..." or "your changes have been saved" line of text as appropriate. If you find that you are unable to save (e.g. because the internet dropped out), you can soft-block navigation to make sure the user is aware their information may be lost.

Once you're saving everything automatically, there is no longer any need for a button that does so manually. Then you can just have one "next" or "finish" button.

|improve this answer
  • 2
    Even better: something like "your changes were saved 5 minutes ago" gives the user an indication of how much data will be lost when the UI is destroyed. – Rhymoid Aug 16 '16 at 11:03
2

My suggestion is "Save for Later" for the save button. However it should not look as a primary action button but one that is not that visible as the "Finish" button.

The "Finish" button name should be pursuant with name of the process that the user is trying to finish: "Complete [name of process]" or "Finish [name of process]". If its some kind of application it should be "Complete application" or if its a survey - "Complete Survey". If you provide more information on the context of the form filling process we may come up with better names for the "finish" button.

|improve this answer
1

I would switch the buttons. As others have said "Complete [Task]" is a good name for the primary action of the form. "Save draft" is a convenience service for the user, and can be styled as a secondary action.

|improve this answer
0

I would suggest "Save for later" and "Submit" or something akin to these.

"Save for later" clearly implies that the user is retaining ownership and the task is still his/her responsibility. Nothing will happen with the information until the user completes this task.

Likewise "Submit" implies that the user is giving up ownership to the next actor and the user has completed this task.

This is a positive handoff and makes ownership of the task completely clear.

I really like the autosave feature, but not all websites are created equal. That is, my actual experience with websites and autosaving has been inconsistent.

It's very encouraging to know that the data I've entered has been saved and I can get back to it later.

|improve this answer
0

First Thoughts

These two come to my mind:

  • Save Draft
  • Submit

I think those two are standard practice nowadays! They are also short, and easy to read at a glance, which is what we need/want in order to be more user friendly!

Second Thoughts

If there are multiple forms/pages for the user to fill out, you won't want "Submit" as an action, you might want:

  • Save for Later
  • Next Page

In this case you would want the last page's actions to be:

  • Save for Later
  • Submit

It may also be a good idea, to automatically save the field information and alert the user on page load that "Your progress has been automatically saved!"

Good luck!

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.