Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
don't ask for a best practice as this is too vague. –  Andrew Davis Jan 9 '12 at 21:59
add comment

5 Answers

up vote 5 down vote accepted

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.
share|improve this answer
    
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 '12 at 7:49
    
+1 for multiple spinners. They drive me nuts. –  Schroedingers Cat Jan 10 '12 at 9:59
    
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 '12 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 '12 at 11:45
add comment

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)

share|improve this answer
add comment

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.

share|improve this answer
add comment

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
share|improve this answer
add comment

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".

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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