AJAX, can there be too much?

Like any problem, there is no one right solution.  There are always many different solutions that work for different reasons.  Some solutions require the best solution; some solutions require the more optimized solution; other solutions just need to “get done”.

As a developer, I like AJAX.  It’s easy to develop and it makes for a really good user flow.  No more loading new pages to add comments or view the description of a product.  It can all be done with a smooth interface and less waiting.

But, can you have too much AJAX?

I think the simple answer is NO.  Wait, don’t start throwing your arguments at me yet, let me explain.  The more AJAX Javascript event handlers we use, the more we need to think about the user flow though and add new features (like Facebook has done; more on this later) that ensure we don’t lose the user experience.  I think Uncle Sam’s statement to Peter Parker is fitting here:  With great power comes great responsibility.  It’s ok to use a lot of AJAX, just make sure to use it wisely.

Some of my favorite spots to implement AJAX are the following:

– Comments.  I love in Facebook how I can read someone’s status, click the comment button, the form shows and away I go.  When I’m done, I just click submit.  It’s made clear to me that it is being processed by the form being grayed out momentarily and my comment is automatically posted.  Excellent all round user experience.

– Username validation.  This one is still not too widely used, but is quickly picking up momentum.  Almost every site now a days that requires you to register makes you select a unique username.  Like most people I have a few favorites that I always use.  There is nothing more painful than filling out a registration form of 5 to 10 fields, click submit and then get a big nasty error saying the username is already taken.  I would much prefer to let them tell me right after I finish entering it.  The even worse experience is when your data isn’t already prefilled upon the error!  Another great user experience.

– News/Product descriptions.  For detailed product and news pages, it’s still important to provide the full viewing area to sell it.  However, if you have a one paragrapher that can be displayed beneath a title this is another great spot to do it rather than making the user leave the current page.  In today’s society people’s attention spans are very short, so why make them wait longer than they have to see something.  A great example of usage on this is Yahoo’s TV Listings.  Clicking on the show name opens up a sub display with the description of the episode/movie and a few other click options.

Now, some may argue that you should pull all of this data in by default and hide it.  I’ll argue against that pretty quickly.  Let’s do some quick math calculations to prove why.  Let’s assume that there are approximately 3 shows per block and about 50 channels for a total of 150 shows displaying.  Assume the average description is 10 to 20 words.  This would equate to probably 2 or 3 KB of HTML code.  Doesn’t seem like much, but now multiply it by 150.  We are talking about over 300 KB of additional HTML code that needs to be processed by the web server, downloaded to the user and processed by their browser.  Of those 150 shows, how many do you think the average person clicks on?  1 maybe 3 shows.  That is a lot of extra bandwidth and load time delays to increase the click action of a show name by a 100-300 milliseconds for the AJAX call to perform.

So the above are some great examples of how and why to use AJAX.  At the end of the day I really only have one specific type of AJAX loading that bothers me (and probably many end-users) and that is “full content” AJAX loading.

What I mean by this is, let’s use the above news/product description example.  Assume that rather than showing the description beneath the title and the existing listing page was replaced completely by the article or product.  As a user how would you most likely return to the previous listing?  Are you going to click the tiny breadcrumb link called “Back to products”?  Some of you will, but the average person is going to click their back button in the browser.  Guess what will happen?  They are not going to return to the listing page, they are going to return to the page before that!  Bad user experience.

Luckily there is a solution to this problem and guess who has already done it?  Facebook.  Notice how each time you click a link that “goes to a new page” it doesn’t actually do it, they append some variables to the URL but perform an AJAX call.  If you are on Facebook right now in another tab, go to it and click “Messages” for example.  See how the URL changed to something like: http://www.facebook.com/?sk=messages but did you notice how the page didn’t actually reload?  Now click the back button.  See what happens, you actually go back to the page you were on.  This is great example of a lot of AJAX full page loading, BUT ensuring the user experience isn’t lost.

To summarize, using AJAX is a great way to improve the overall user experience as well as improve your speed and bandwidth usage by minimizing the amount of data you process and hide/display to the user based on actions.  Just make sure that the user experience is never lossed by misuse of AJAX and then the answer is always, you can never use too much AJAX!