AJAX and providing the illusion of efficiency

Modern websites utilise AJAX – that’s Asynchronous JavaScript and XML to developers, which in layman’s terms means: make things update on the page without the whole page reloading. We’ve been doing this for a while now, longer than even the acronym existed, as it means you can target areas of the page that need to update without affecting other areas. This isn’t news to any developer, in fact we are all completely accustomed to it. However what I’ve been seeing more of lately is laziness with the implementation. Sites that include AJAX functionally on form posts, searches, select box change events etc. that don’t include any visual cue to the user leaves them feeling frustrated and confused. I know that it annoys the hell out of me.

I’ll summarise this simply: when you make an AJAX request in your code, ensure you include an indication on the screen that something is actually happening. I am referring to animated loader images, “Please wait” descriptions, and background opacity filters. In the flow of IA to design to slicing, it is not often thought of before it reaches development. I have no problems with this as it is usually the developer who elects what parts of the page will require AJAX and what will not – it should be up to us then to implement the indicators and choose the appropriate one for the job. There are many free repositories of images to use (http://www.ajaxload.info/ is my default choice as you can choose from a large selection of indicators and generate them in specific colours) or of course you could get something especially designed.

There are plugins for JQuery available to add such overlays (e.g. http://www.jqueryscript.net/loading/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin.html) however I find it simpler to include my own by using the .promise() function. Here is an example of how I would hook up an opacity change indicator:

var waiting = container.addClass('halfopacity').promise();
        waiting.done(function () {
            $.ajax({
                type: "POST",
                url: formPath,
                complete: function () {

                    ...

                    $(container).removeClass('halfopacity');
                }
            });
        });

The AJAX function will run its course and remove the indicator when completed (in this case, a CSS class that sets opacity: 0.5). This same approach can be used to show and hide an animated GIF or descriptive text. Importantly if an error returns from your AJAX event, you can inform the users similarly.

End users expect to receive feedback when they push a button, and rightly so. By simply adding these indicators to your site any user frustration levels caused by “Did I actually press that button? Is anything happening?” will be negated.