Usability Tip: Ajax loading/busy indicator

What is Ajax?

In a nutshell, "With Ajax,web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page".

  Now that these requests are happening at the background, user should be aware that the application is trying hard to retrieve the data.  But, How do we do that?

This is where we can use Ajax loading/busy indicator.  We show some text/image saying that we are working/loading... until the request is completed.  This would increase the usability and end user will be happy enough.  

  I am going to show it's implementation in RoR based web applications.  

Module ActionView::Helpers::PrototypeHelper, takes care of Ajax implementation through prototype library.

as you see the rails form tag helper comes out with interesting usability options. Above we just implemented, :loading & :complete options where-in it would show/hide particular div ("loading"). And what's in that div?




well it's done.  

Few samples...

Do I need a designer? 

hmm... we don't need designer for every thing. Especially this usability can be entirely handled by developer.  

How do I create an image? I don't have prior experience! 

Not needed just follow 3 simple steps 

1. go to http://www.ajaxload.info/ 

2. select Indicator type, colors. 

3. Generate & Download It  

I don't know RoR, how can I do it in PHP/Python/Java/JavaScript? 

This needs prototype, JavaScript library that provides DOM manipulation. The same is achieved like this:

use the above snippet.