You Can Change It Later

The Blog Of David Marks


Posted on | February 17, 2010 | No Comments

I’ve noticed a disturbing trend in web site design: flashy ajax-y user interfaces that are actually worse than their full-page-refresh forefathers. The Ajax calls are *synchronous* in nature when they would have been aysnchronous using plain-jane HTML.

Let me call this LAJAX. Lame AJAX, or latent javascript xml communication depending on your politics.

The worst offender of this is forms with checkboxes and drop-downs. Let me illustrate exactly what I’m talking about with a clear example from a certain gigantic mobile conference registration form.

What happens:

On each page, there is a set of checkboxes which you must check to select which events and activities you plan to attend. Clicking each box results in a long delay between when you click the checkbox, and when it shows the actual check.

Click-pause-pause-check. Click-pause-pause-check.

This is confusing as heck for users who think their browser has hung in the middle of a big transaction.

Why does this happen?

Because they are custom checkboxes which use javascript to communicate with the server, wait for a response, then update the page to reflect my choice. They are not normal HTML checkboxes — they are special javascript thingys designed to enhance the user experience.

Why this is LAJAX:

a) The long delay is confusing to users who don’t understand why a normal page element does not seem to be working. This reduces their trust in the web site form — did their selection go through, or fail? A plain-jane full-page-refresh web page would have worked better with less development effort.

b) The normal checkboxes supported in HTML are already asynchronous as far as the user is concerned. When the user clicks a plain-jane HTML checkbox, it will immediately show a check without a page refresh or server response. You can always then send an event back to the client (the browser) to modify another element on the page later, if necessary for validation or another function.

Some recommendations:

a) Think carefully before incorporating advanced javascript elements into your web pages, and do not replace asynchronous HTML elements like checkboxes with less effective LAJAX versions. The idea behind AJAX is a better, faster, snappier user experience. Not just to eliminate page refreshes or do more with javascript.

b) If you need to attach advanced functionality to existing HTML elements, do it in an asynchronous manner. Update the UI elements immediately rather than waiting for that xmlhttprequest to return from the server on Sealand. Avoid situations where the javascript submits something to the server then waits for a response before updating the page.

c) There are times when you want to wait for a server response before showing something to the user. In those cases, you can show a “loading…” animation to let the user know what is going on so they don’t freak out when there is a delay. An example of this would be a credit card transaction or flight ticket search. Click-loading-loading-response.

Hope this is helpful for those of you writing site code out there. Sorry I don’t have time to provide some code examples for the above — if someone has a suggestion for some good examples definitely send it my way or add it as a comment.

*I know there is a debate about whether or not ajax is an acronym. Does it mean “asynchronous javascript with xml” or is it a word which encapsulates almost any method of constructing a web page UI in a way that does not require a page refresh to modify page elements. I am not chiming in on that debate — I am continuing the ambiguity with the new question: Does LAJAX mean latent javascript and xml, or does it encapsulate any web page UI element which causes unnecessary latency by attempting to do something silly using ajax-y methods?


Leave a Reply