The last couple of years have seen a lot of change in the way web applications are created. Gone are the days when the web application developers used to give unresponsiveness and ‘click-to-load’ behavior of the web as an excuse for the under-usable websites. Today’s applications are much more responsive, much more usable and can compete better with the desktop applications – not only because they are accessible from any browser or any computer but also because they are no less than desktop applications when it comes to the usability.

The technology (or a combination of technologies) that has made this possible is AJAX or Asynchronous Javascript And XML (it’s just been a year since the term was coined but the technology existed much before). Much has been said and written about Ajax – so I will not go into the details of what it is capable of. Instead, I will be focusing on 2 things:

1. Popular Ajax Design patterns used and to be used
2. Don’ts of using Ajax

Ajax Design Patterns

Yahoo recently came up with a UI design pattern library (http://developer.yahoo.net/ypatterns/index.php) where they talk about the various UI design patterns that is useful for any website developer. The above article describes ‘Pattern’ as ‘an optimal solution to a common problem within a specific context’. Some of these UI design patterns are plain UI patterns while some of these are Ajax patterns. In this article, we will begin with exploring more Ajax design patterns and then move over to the Do’s and Don’ts in the next section.

• Autosuggest Textboxes: Yahoo UI Library describes this pattern in detail at the following URL: http://developer.yahoo.net/ypatterns/pattern_autocomplete.php (they call it Autocomplete – I like it to be a suggestion and not completion). The idea is to come up with suggestions based on the bounded set of data and not rely on the browser autocomplete features. This might be really useful in the following cases:
  • Login text-boxes: Suggest the data from the existing user-base.
  • To / Cc boxes in the emails: Get data from the address-book and previous receivers.
  • Search: If I am looking for a phrase and I just remember a part of it, this feature can immensely help in effectively looking for something popular or something which you vaguely remember but are looking for suggestions.


• Inline data editing: Haven’t we felt like being able to edit our profile data inline instead of going to an edit page, saving it and then come back to the view page to verify that the editing was successful. Inline data editing pattern is the pattern which is gaining popularity because it solves this pain point. Look at the screenshots below for illustration. Here is how the text looks like in the ‘View’ mode:
  
  Here is how it looks in the ‘Edit’ mode:
  
• Moving data between lists – Let’s say that you have a website through which you can enter TV shows and you can activate / de-activate the shows. So, the page shows 2 lists: all the active shows at the top with ‘De-activate’ buttons against them and this is followed by another list of all inactive shows with ‘Activate’ buttons against them. This pattern suggests that clicking the buttons should move the shows up / down the list without the need of refreshing the entire page.

  Another scenario where this can be used is in case of To-Do lists (the way Basecamp does it). Items in the To-Do lists can be moved to the ‘Completed List’ and vice-versa without the need of refreshing the page. Look at the screenshot below:
  
  
  

• Online Chat: Providing customer support in the form of online chat in a gutter-block on a web-page goes a long way in connecting with the customers. Imagine an embedded IM (like Meebo) running in the bottom-right side of your page that pops out if you need to ask a question with the customer support. The screenshot for the same is pasted below. This IM can just be a Jabber based client or just a plain client-server application.
  
  
  
  
• Pagination: Navigating through pages without a page refresh has immense usability in the search results, browsing the list of tags, etc. In the screenshot below, we have a ‘more’ button which will refresh the list of tags without a page-refresh and that will also show a ‘prev’ button to go back to the previous page. The 2 buttons “prev” and “more” can be used to navigate through the entire list.
  
  
  
  
• Reflecting the state of fast changing data: Isn’t it annoying to click to book an airline seat only to be presented with a message that “That seat is not available, please select the other”? The frequency of message increases with the time you spend on that particular screen and deciding which seat to pick. The same scenario is applicable if you are looking for availability of an apartment in a high demand building. Keeping the state of the data current can be achieved using this pattern. The idea is to periodically poll the server and update the status of data whenever there is a change. You need to exercise caution not to misuse this pattern else it will lead to overloading of servers.


• Guessing users’ actions and pre-fetching data: Ok – let’s push the envelope a bit. Let’s say I am checking my emails and there are 10 unread messages. I click opened the first email and then I clicked on the ‘down arrow’ to open the next email. Wouldn’t it be cool to pre-fetch the next email while I am on an email so that there is no delay in getting the next one? And if the user performs some other action, the user experience will be same as it would have been without pre-fetching. The better we can guess the users’ actions, the better experience we can provide using this pattern.

Ajax is powerful but …

Ajax is such a technology that it’s very easy to get over-excited about it and that might lead to its potential abuse. So, if it is important for us to use Ajax to improve the user experience, it is also important to keep a few things in mind. I have tried to outline a few Ajax Don’ts below:

• Not giving immediate visual cues for data refresh: People are used to see some kind of indicators on the browsers to denote that the data is being updated on the page. The “Loading…” button of GMail is a good example of such an indicator. When the page is not refreshing, the browser doesn’t give any indication about the data being uploaded and hence we need to handle that programmatically.
• Not using links that can be bookmarked: The important data on the web should be bookmark-able. Changing the data through Ajax doesn’t change the URL in the address-bar. So, make sure that all your important data has permanent links which can be passed around for quick view.
• Not thinking about search engines: Most of the web crawlers and spiders follow the hyperlinks on the website to index data. If your website refreshes the data using Ajax, chances are that the spiders will not reach to that (unless it is reachable through hyper-links also). So, do think about the document tree of your website before over-using Ajax – at least till the time the spiders become smarter.
• Not planning for non-JavaScript users: The other day, our Chartered Accountant was working with accounting software which is installed on a Windows 2003 server machine. He wanted to email a file so that he could work on it from home. He tried gmail and because of the security settings of the machine, JavaScript was disabled and the email didn’t work. It was quite frustrating for him and I believe that there are many more users like him. So, it is important for people to know their customers and plan the applications accordingly. Ajax applications will not work without JavaScript which may or may not be fine, depending upon the target customers. But if we want to extend reach, there is a need to provide an alternative.
• Too much processing: Ajax is good but don’t overload the page with a lot of processing. The browsers were never meant for huge JavaScript operations. Too much of JavaScript on the page might give the application a toy-like look but then people don’t stick to 1 toy for a very long time.

Overall, Ajax is a very interesting piece of technology that has changed web applications a lot and will keep doing so. The only thing we need to guard against is over-excitement about the same resulting in any misuse.