Ajax is great - if not overused

No doubt that Ajax can affect user experience to a large extent. We expect from Ajax applications to render parts of pages quickly and smoothly. However, excessive use of Ajax can make things go really bad.

A few days ago I wanted to filter out some content (let's say list of books) on one particular website. Site has a live filter for filtering content. By ticking checkboxes with categories you narrow your choice. So the story goes like this: initially, a paged list of books was displayed. I wanted to see only books from these categories: user experience, web development, ASP.NET, jQuery, and usability. Every time I checked a checkbox, new AJAX request was initialized and list was narrowed.

The problem was that each Ajax request lasted between 3 and 4 seconds. It's not difficult to calculate that it took me between 15 and 20 seconds to finish my filtering, which is very much indeed. Every time I clicked on the checkbox I was looking at Ajax progress indicator and knew that I will have to do it a few more times until I get the desired result. Doesn't sound good, isn't it?

What would be a solution? Simply add a button that would make just one Ajax request and filter data. Yes, this is one more click, but the whole operation would took only 3 or 4 seconds.

As I said earlier, Ajax is excellent thing which purpose is to improve the user experience in overall. If it is not the case, it is certain that you have failed somewhere.

So, one click more or 15 seconds more?

More articles in Blog archive or elsewhere

Gaya 05 May 2009 #

Hmmm, why not just filter out books using Javascript? I mean; the books were displayed somewhere right? They could easily store some information somewhere and just delete the rows when needed.

Sometimes I don't understand some choices by interface developers haha.

Great post Janko

Nemke 05 May 2009 #

Interesting. This is just the result of putting Ajax request everywhere, without thinking of consequences. Good job noticing this, because we often forgot when to stop adding new "features" that ends up being performance killer.

Janko 05 May 2009 #

Gaya, Thanks! Using just JavaScript might be an option if you display just small amount of data. If there is a huge number of records in a database, you would have to "go to the server side"

The thing is that I like that website, but this just annoys me too much.

Simone 05 May 2009 #

@Gaya: you are right, that's the main question: if the page already has all the books, why do a round-trip to the server? That would have made sense if the books shown in the page were just the top ones.

Nemke: Exactly. It is especially common with ASP.NET Ajax.

Simone: I now understand that didn't explain correctly what was in the list. It was a paged list and first page contained let's say 50 books. Each page change initiated a new Ajax request.

Ah! that changes everything

Yeah, then the filter button would be better ;) Anyways, we both thought of something else haha.

Gaya: Exactly. Sorry for that, I changed that sentence.

Chris 05 May 2009 #

Hi,

First comment here but I read all the articles.

I have to say the solution with the button to filter is a good one, because the page will look the same even without Javascript.

That's for my 2 cents

WC 05 May 2009 #

That's not really a problem with Ajax, but just site design in general. I've seen -exactly- the same thing done without Ajax, but with page refreshes instead. You could only add 1 filter at a time, and each page refresh takes more time than an Ajax request would.

Richard Reddy 05 May 2009 #

It's a shame that this type of Ajax use is the norm really rather than the exception. People think 'the effect is cool' rather than 'if a user uses this feature everyday on my site what is the experience like?'

Another reason for this sloppiness is that a lot of developers and designers are rushed because their company needs to get the site/product out the door for cash flow reasons and it's a sad truth but site optimisation and end user experience is way down the list for most developers and designers. Management's attitude is 'Well it works and the client is happy so launch it'.

It's all about education though. Educating the client to appreciate good, solid work and internally educating management about the benefits of testing the new sites (UX/site performance/etc) in a proper and measurable way.

Sorry for the mini rant here....it's one of my pet hates ;)

Chris: Agree. Thanks for the comment

WC: Of course, that's a mistake made during design. The question is why use Ajax if you don't improve performance, and user experience on the other hand.

Richard: Unfortunately, that's often true. "Ajax is cool" is sometimes the only good reason why to ajaxify applications. The part with management - I'm afraid there is nothing much that a developer can do about it. Sad but true.

Remy 05 May 2009 #

One solution could be to use a little timeout, e.g. only after 3sec an Ajax request is made, this way you can quickly click your list together, but you still don't get many postbacks.
I guess this is how it is done with all these autocomplete lists.

Craig Mason 05 May 2009 #

Hotwire does this when filtering by zones. It's unbelievably annoying. I've sent feedback to them several times but they refuse to fix it.

Kawsar Ali 05 May 2009 #

Really well analyzed post Janko. Keep up the good work

Soh Tanaka 05 May 2009 #

Good observation Janko

Andrew 06 May 2009 #

Janko great points... keep up the awesome blog.

Janko 06 May 2009 #

Remy: I think that timeout won't be that helpful in this situation because I need some time to scan through categories and pick those of my interest. And I would probably need more that 3 or 4 seconds for that.

Craig: They refused to fix it? So sad.

Kawasar, Soh Tanaka, Andrew: Thanks!!

Davide Espertini 06 May 2009 #

Janko I think your idea sounds good for me and I think that the better ways, in this case, is to get a filter button to filter my choices, that is more usable than an 'infinitely' ajax's calls after every click on a checkbox. One more click is the better way for me,only one ajax's calls that is more efficent than two/three/four/etc..
( sorry for my bag english.. XD )

Davide: Yes, when it comes to checkboxes or radio-buttons, you have to be careful with Ajax calls. Don't worry about the English, neither mine is better

Webdesign Meppel 20 May 2009 #

I totally agree with you that Ajax shouldn't be overused. But I think the example you give isn't a matter of overuse, it's just not used the right way. I don't know how many books are in the database but I think 3 to 4 seconds for a query is too long. So maybe the problem is something else. Allthough I agree on you that one button would be better then a request everytime a box is checked.

Jon Cage 04 Jun 2009 #

@WC: I agree the problem here is not too much javascript (as the title of the post suggests). The real issue is that it's used badly. A filter button would make much more sense though...

ivyclark 09 Jul 2009 #

I agree with Meppel. This is just a case of bad implementation... can't blame it on ajax. Lots of crappy web sites out there, but we don't blame it on html/css/photoshop right?

Janko 15 Jul 2009 #

Webdesign Meppel: Yep, it definitively isn't used in the right way. By "overused" I meant adding ajax requests on every single chickbox click instead of using one button, but I might have found better term, this one leads to confusion

Jon, ivycclack: of course, the problem isn't in the technology but in the way it is implemented.