UX suggestion for 1.5

Question

I noticed that when I post an answer or comment on here, sometimes I press click submit and it takes several seconds to post. But it's not clear whether the post is going through (it's quite easy to miss or for buttons not to activate for whatever reason).

So I suggest for a better user experience, add some kind of indication that the post is being submitted. Maybe an icon like this next to the button?

 

Answer 1

Good suggestion. I did think about this, but decided to follow the lead of sites like Facebook which don't show a spinning cursor for small Ajax submissions. I think the rationale is that users are quite familiar with Ajax pages now, so aren't confused by the delay. Still, I can see it the other way, so perhaps this is a good idea for a pligin?

Comments

Facebook *does* give you visual feedback though - by disabling buttons when you click. Maybe you could add that? FB is also super fast, probably faster than most people's hosting would be (especially shared) so the delay is minimal.
And even though Facebook is immensely popular I don't think it's renowned for being a beacon of usability. Plenty of other sites do use icons or other loading indicators (Google, Amazon, reddit).

Answer 2

Just thought I'd update with a snippet I'm now using on my site. In qa-content/qa-question.js, add these two lines at the beginning of the qa_submit_answer function:

$('form[name="a_form"] input[class$="-answer"]').val('Saving...');
$('form[name="a_form"] input[type="submit"]').attr("disabled", true);

And these two at the beginning of qa_submit_comment:

$('form[name="c_form_'+parentid+'"] input[class$="-comment"]').val('Saving...');
$('form[name="c_form_'+parentid+'"] input[type="submit"]').attr("disabled", true);

It changes the button text to "Saving..." and disables the fields, so at least the user knows something is happening, as in the image below. Hope that helps!