Today we’ll discuss one small issue to take into account when deciding how to use AJAX on your site. The issue revolves around usability – giving your visitors a positive user experience. Specifically, we’ll discuss the click response, which will sound obvious when you think about it, but an unfortunately large number of developers don’t seem have done so.

What is click response?

The click response principle of usability simply says that whenever a user clicks a button, they should feel like they’ve actually clicked a button. In other words, they should receive an immediate response to their click action. There is nothing more frustrating or confusing to the user than clicking on a button, then not knowing if anything has happened because of it. The user will either leave the page, assuming the function doesn’t work, or they’ll click the button again and again, which may do interesting things to your code.

Now, there is a little leeway to this principle. The most common and traditional action of a click in a browser is to click on a link to open a new page. Every user of the internet expects this to take a little while, and browsers themselves do not generally provide a noticeable click response (although, on Windows at least, the computer still gives a click sound whenever the mouse is clicked, and this is often associated with link clicking in browsers). This is standard internet browser behaviour, and there isn’t really anything we can do about it. The browsers give little signs that they are at least thinking about loading the new page (with loading icons in the tabs, for example). It is possible to provide an intermediate step to link clicks on your site which will indicate loading of something, but this is probably not necessary, and might be considered over-engineering.

Immediate response

AJAX provides us with the opportunity to improve on this standard user experience, but it needs to be done properly. First and foremost, you should always provide a reaction to a user’s action immediately. This will most often involve some sort of loading image or message, letting the user know that something is happening while the page communicates with the server.

Loading images

Loading images are usually simple (and small) animated GIF files, and there are a number of websites available that will allow you to create and customise animated GIFs on the fly (eg: http://preloaders.net or http://www.ajaxload.info/). You may need to use asynchronous techniques to present loaders, even if you were intending to process the click completely synchronously .

Handling multiple clicks

It is also quite important to handle multiple clicks gracefully. Never assume that the user will click the button only once, and then wait for the reaction to finish completely before continuing. One of the main benefits to asynchronous programming, and AJAX, is that the user can do more than one thing on a website at the same time. You should always test to see what happens when a user clicks your button a second time before the first has finished processing, or what happens when a user clicks a second button before the first has finished. It may be necessary to hide the entire page with a loading layer until the process has finished to prevent the user from clicking any other buttons. A loading layer is a semi-transparent layer through which the user can see the page, but cannot interact with it. It will often have a loading image or message in the middle of it.