11

When the user clicks a button to submit a form is there a popular way to give the user instant feedback that the form has been submitted? (other than them looking at browser tab and seeing a spinner there)

I see some sites disable the submit button after click while others hide the submit button and show a spinner, others disable and show spinner beside it. I'm just wondering which would be the most popular or common.

Improve this question
1
  • don't ask for a best practice as this is too vague.
    – Andrew Davis
    Jan 9, 2012 at 21:59

5 Answers 5

Reset to default
7

Typical practice is to

  1. Rename the submit button ('Saving...'), but do not disable it - give users a placebo and the belief they've a workaround if saving / submitting freezes (even if, in reality, re-clicking does nothing). Remember, users do not trust your application to work as promised.
  2. If the next stage depends on the user submitting the last form, indicate in your copy that relationship, so it's clear that the previous action led to this content.
  3. If the user is updating a record, rather than moving through a wizard-like multi-stage process, provide a banner or message in a consistent location that informs the user they're successful.
  4. If using 'spinners', avoid showing multiple spinners on the same page - they're rather disorientating. A single indicator is preferable.
Improve this answer
3
  • Just remember, on a web app I'll see that my re-clicks don't do anything, that will really scare me off as a user!
    – Barfieldmv
    Jan 10, 2012 at 7:49
  • 1 spinner for each datarow that is edited is not that strange. But a label would be better. Saving... Saved.. Label goes away.
    – Barfieldmv
    Jan 10, 2012 at 10:33
  • 1
    It does depend, @Barfieldmv. WHen the entire page disappears into spinners, it is bad. SMall spinners for each line are not a big problem, but I still think one is better.
    – Schroedingers Cat
    Jan 10, 2012 at 11:45
3

Best practice might be :

  1. Add the "Saving" or "Uploading" or some thing depends on your form with the spinner.
  2. Increase the spinner speed by very little
  3. disable the button would be fine as the user feels they dont have to do it again.

  4. Delay the visual of spinner by 400 to 500ms after the user submits the form.

    (its based on the cognitive psychology that makes the user feels that the form is loading fast and doing some desired work they want. This makes the user to wait a little longer also with out frustration)

Improve this answer
3

My recommendation (checked countless of times):

  • make all of form elements inactive
  • show indicator of action (spinner on a button, or loader + label "Submitting your [type of data e.g. message]..." on a new layer
  • always show confirmation message after successful submission, might be on a new page, that specifies next steps (if there are any) and thanks user for his/her time
Improve this answer
2

Disabling the button is probably a good idea, if pressing it twice is seriously bad. Changing the text ( and even animating it with dots - saving.... ) may be appropriate. Changing the text as the process progresses might be worth it if the time is long.

But the core way to give users good feedback that their form has been submitted is to move to the next stage in the process as quickly as possible. All of the fancy UI stuff should not detract from the critical issue that I do not believe my data has been submitted until I see the next page successfully loaded ( or, because I am a techy, when I see that the next page has been requested ). The quicker you can have captured the data - not necessarily processed it - and moved on, tha happier the user will be.

Improve this answer
1
  • That sounds dangerous. What if the server returns an error? I prefer to leave all the data in tact until a success message comes back so that the user can still re-submit it if necessary.
    – mpen
    Jul 2, 2015 at 22:20
1

I think that after press the Submit button, you should disable it. Second, show a message that data is being sent. When it's sent, change the message for another to notify that you successfully sent data and locate a button to accept the message, like an "OK".

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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