Code To Give Users Time To Read Feedback

I’ve blogged before about giving users of a web application feedback on the page whilst they wait for something to load and also about slowing down the responses from AJAX requests in order to give those users time to fully read and understand that feedback. I’ve recently built some more code to help achieve this. This is a jQuery extension.

If you’re going to use AJAX to load some content into the page as the user requests it then it’s a good idea to tell the user what is happening. This is often done with some sort of message on the page saying something like “stuff is loading here, won’t be long”. Also it’s a good idea for the round trip to the server and back to be quick because you don’t want your users to be waiting all day long. However, if the round trip is less than half a second then the user probably didn’t get time to read that message and, depending on the scenario, this could lead to an un-happy web experience.

So I have some code that extends the jQuery AJAX ‘post’ and ‘get’ functions so that we can invoke them but ensure that our success callback function isn’t invoked until at east the N number of milliseconds that we have set have passed.

So the process is as follows:

• User clicks a button to request some information.
• JavaScript is called and immediately puts some sort of loading message on to the page.
• A post or get request is made using my extension and is asked to wait at least 500 milliseconds before the success callback function is invoked.
• If the request takes less than 500 milliseconds then the remainder is set to pass before invoking the success function. If the request takes longer than 500 milliseconds then the success function is invoked as soon as the request returns.
• The success function removes the loading message from the page and replaces it with the content the user asked for.

This ensures that the user had time to understand the feedback on the page but also ensures the data they requested get’s displayed to them as soon as possible after.

Check out the demo page to see this working.
Download the source to start using it yourself.

This entry was posted on July 13, 2011 at July 13, 2011 and is filed under JavaScript, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.