Friday, March 30, 2007

The use and ABuse of AJAX

I'd like to tackle the theory of AJAXification for a moment, mainly because I was just in the middle of an AJAX-rendered hellish portion of an otherwise OK website.

AJAX is a buzzword and people who even know it are probably some of the few web programmers out there still able to compete over 6-digit salaried jobs.

The simple definition is that AJAX is a browser-side technology -- in other words it doesn't run on the webserver, it runs on your home or office computer -- that sends data and fetches data to and from a web server without the need to reload or load the webpage. Only the portion of the webpage that needs to be changed is changed, rather than the whole webpage. It can save time and looks better to the user because the pictures and background of the page don't need to reload. It can also be a waste of time, as shown in the example below.

With the proper use of AJAX, a web application can swiftly and seamlessly load information and change something on the webpage. Perhaps it can be used to anticipate the user's next move, load some data on the sly, and have it ready to slip in with some slick javascript maneuver when the user clicks. "Ha, ha! I knew you were going to click that!" This is especially cool when there are fewer choices for what the user might do. Not so great when there is a lot of data to pull from the webserver and not so great when there are too many choices to properly anticipate the user's next maneuver or when the data being pulled is directly dependent on the user's input.

The result of AJAX used correctly is a user experience that resembles a desktop application. Google (gmail at least) has it right, and I sure hope their programmers are getting the 6-digit income they deserve.

What annoys me is when AJAX is used to "be cool" -- not to enhance the user's experience.

The application that annoyed me today is the largest area newspapers' online calendar of events. Perhaps the application ran "slick" in testing with only 5 or 10 events listed. I'm sure it ran very nicely. Especially from their high-tech offices with terrific web service, or even with the servers at the same location.

There's a mini calendar which shows a bit into next month, and underneath it, starting with "today", is a huge detailed listing (date, time, name of event, location...) of the area's events for the next several days.

Each date on the calendar is a link that, when hovered, brings up a floating list of that day's events. If there were 3 events per day, this would be bright. There's more like 40. It takes as long to load the floating list as it would to reload the web page. You have to sit there hovering your mouse over the date for what seems like an eternity as it makes a call to the database to pull up and format the day's events. There's a nice swirly thing that shows up if you hover over the mini calendar. Without the swirly thing, if I went to the mini calendar to click, I wouldn't ever know that a "cool" list would eventually pop up. It pops up next to my mouse with a listing so long that when I then move my mouse down the list I eventually hit the bottom of the browser, and the whole AJAXified listing goes away. It doesn't scroll as I move down. That's real helpful.

Ok. Well, one could live with that -- instead of hovering and getting a hand-cramp, how about clicking on the date. As one would expect, the listing under the mini calendar changes to start with the date selected. However, this incites another AJAXified call to the database to fetch several days' events and replace the vast majority of the content on the webpage. Again, this data pull results in a long "load time" for the javascript (AJAX) to pull the data. It's nice that the sidebar dancing ads don't change, but exactly what time are you saving? Does this make you look "smarter" and "slicker"? the advertisers since you suddenly have nothing to do but stare at their glowing undulating ads.

But let's say I want to peruse today's events, and pull up the event details for items I'm interested in in another window, or in another tab, of my browser? Then when I'm done selecting a bunch, I can look through the event's details...

Because these aren't real webpage links, it ignores my attempt to open the link in another window. They're all "javascript links" and when I click them, the entire page goes away, even if I've attempted to open it in another window or tab. To get back to the mini calendar or listing, now I have to get the whole page by going "back" in the browser. That's not the way I want webpages to behave. At all. I'm a tab-oriented person. I let pages load in another tab and look at them when I'm good and ready.

All this time my laptop fan is going nuts, the load on my laptop was increasing, my laptop was getting hotter, and it was a waste to even be on the page. I have better things to waste my time with, like ranting about the abuse of AJAX!

This is just one example of a webpage that needs an AJAX Anonymous support group. Perhaps they never thought through what the user would do, how they would expect it to behave. They created a webpage Frankenstein monster based on what was "cool". It's not EASIER. It's not CHEAPER. It's their self-aggrandizement at stake. "Look, we have AJAX!" -- so what?

It doesn't help that I went for an interview with that company a year ago and they kept asking me if I knew AJAX and I kept saying "Not Yet." I still say not yet because I'm still not convinced that anything good would come of it. I've seen very very few things that would REALLY be enhanced by the use of AJAX. AJAX is not the killer tool to make a website cool. A website is either cool or not, regardless of the technology behind it. If doing something in AJAX would really make the experience better, go for it. Gmail is cool because it rather closely replicates the experience of a desktop email application. I hardly use it, but when I did, I was suitably impressed, then went back to my own email app. :)

An online shared calendar doesn't need to be AJAXified like this one was, though. I would have preferred to load each day's events in a separate tab, or view event details for selected dates in different tabs so I could keep flipping between them and comparing times and locations to see how many events I could attend.

What this AJAX stuff does to search engine optimization: Since search engines ignore javascript, all that data means nothing to them. Terrific on a private area of a website, horrible in a calendar application.

So, in conclusion, if you're looking for AJAX because you heard that AJAX is cool, ask to see some good and bad AJAX in action and talk to an expert to decide whether or not AJAX would enhance your users' experience given what you're doing on your website.

If you really do know AJAX, please stop people before they ruin their websites with it. You have a moral and ethical responsibility to guide people correctly in how they use their websites.

Please curb your AJAX. Good boy. Sit.

[tags]custom programming,education,ajax,information,programming,rant,fads,usability,web application programming,web applications,web standards,navigation,seo[/tags]

No comments:

Post a Comment