jQuery - AJAX post - tips and usability ideas

Wednesday, 18 March 2009


I'm going to go over some usability tips and ways you can improve your web applications that use AJAX.

As you have seen from my previous posts I like using jQuery and jQuery has some fantastic easy to use built in functions that help with AJAX requests.

Today I'm going to look at a simple form submit, but will give you some tips on how to implement AJAX that will help relieve user frustration. AJAX is great when everything runs smoothly, but we need to be able to handle any errors that come up in a graceful way and we also want to avoid users from getting annoyed.

For a working example of a successful submit go here

For a working example of a failed submit go here

Here's some of the ways that users deal with problems in AJAX:

* Clicking on the submit button several times until something happens
* Leave the site in a rage and never coming back again
* Sitting there staring at the screen for a long, long, long time (believe me this happens, some people are patient enough to wait 5 - 10 minutes even if nothing is happening)
* Refreshing the browser several times hoping that this will resolve the issue
* Try and contact support

All of these are bad and here is why:
* The form may have already submitted correctly, but there was a problem with the response so submitting several times could result in multiple / partial inserts
* This should be obvious, you don't want your users leaving your site less than satisfied
* Your users should have a good idea of exactly what is happening and if there is a delay or problem they should know about it
* Refreshing the browser in most cases won't fix an AJAX problem, this is usally done out of frustration
* If you can keep your users informed this will stop them from having to jump straight on the phone to support every time there is a small issue

In this example, I'm going to go over some ways that you can avoid these issues from happening. The main reason these things happen is because the user is not aware of what is going on. This is one of the biggest problems with AJAX. A typical scenario; User fills out form, clicks submit and wheel starts spinning and then it doesn't go anywhere from there... what to do?

Here are some good practices when dealing with AJAX:
* Show the spinning disc, many users are familiar with it and it looks like something is happening even though it is just an animated gif.
* Have a precise message telling the user what is going on at each step e.g. Saving your data now etc.
* If the AJAX save fails then send the details to support, don't just wait till your user contacts you, this might not happen until it's too late. The support email should have the following:
- What data the user was trying to send
- The URL that was used when making the AJAX call including all paramters
- Any user details you have, you may want to follow this up
- The time and date that it happened so you can track frequency
* If the AJAX save fails give the user some options. Let them try and submit the form again, if you are sending support emails for failed attempts you can always remove duplicate entries. Provide them with a support email address or phone number or a send button to "send error report to support" or something similar. Your user will feel like something is being done even when something breaks.
* Show a success message that tells the user that everything was successful. Again, if you are handling requests properly in the back end you can report to yourself if there are any issues.

The first step in getting jQuery to handle your submit request is attaching a submit function to your form as such:

$("#ajaxsubmit").submit(function() {

// Do your processing here

return false;
}

The return false is necessary so that it doesn't pass through to the forms action. You should add a working action to your forms in case the user doesn't have javascript enabled.

Let's have a look at my submit function:

$("#ajaxsubmit").submit(function() {
$("#messages").html("<img class="ajaxloadimg" src="http://www.blogger.com/images/ajax-loader.gif" /></code><p class="save">Please wait, saving your data...</p>");

$("#ajaxsubmit input[name=submit]").hide();

$("#ajaxsubmit input").attr("disabled", "disabled");

// Perform your validation error checking here
var formdata = $("#ajaxsubmit").serialize();

$.ajax({
type: "POST",
url: "process_ajax.php",
data: formdata,
timeout: 2000,
error: function (XMLHttpRequest, textStatus, errorThrown) {
ajaxSubmitError(XMLHttpRequest, textStatus, errorThrown);
},
success: function (data) {
ajaxSubmitSuccess(data);
}
});

return false;

});

I start off by showing a message to the user to let them know that we are in the process of saving their data.
I then hide the submit button so they can't go crazy resubmitting over and over again. We will give them this option back if the save fails, otherwise we don't want them to hit that button again.
I then lock all the fields, I don't want to remove them completely. I personally like to see what is being submitted even after I have hit submit just in case I screwed up big time and need to make a call or send an email to fix things up. Having the fields visible allows the user to reconfirm in their mind that they have submitted the correct info. Again, these will become unlocked if the AJAX call fails.

The next step is serializing the data so that it can be posted and then the call to the AJAX function. jQuery makes this so easy to do, if you want to see what other options are avaiable go the jQuery AJAX API reference at this page. The three options to take note of are these timeout, error and success.

- timeout This will stop our users from having to stare at their screens if something went wrong. Regardless of whether there was an error or things are just going slow (to the user there is no difference, there is just a problem!) it will throw a timeout error after x number of miliseconds have passed and it hasn't received a success message.

- error Your error handling function. jQuery will pass back some information about the error. Once we get this we need to do two things: Let the user know on their screen, and let your support team know via email

- success If everything went well the success function is called. In here you should report back to the user with a success message and then you can decide either to clear or remove the form, you don't want there old data sitting there, that's asking for trouble. One good idea is to have a success message appear and then slowly dissapear, this is a good idea particularly when someone needs to make multiple entries on the same form, you don't want the old success message hanging around.
blog comments powered by Disqus