The Role of AJAX in enhancing the user experience on the Web ( Sagar G Arlekar - June 2006

AJAX is not a new technology but a combination of several existing technologies in a new way. These include HTML, CSS, DOM, XML, XSLT, XMLHttpRequest and Javascript. The acronym AJAX stands for Asynchronous Javascript and XML. AJAX is based on open standards supported by many browsers and platforms. AJAX is a new paradigm for building web application.

AJAX applications eliminate the start-stop-start-stop nature of traditional web pages hence allow web application to look and behave like the desktop ones, of course to a limited extent. AJAX allows pages to request small bits of information from the server instead of entire pages. This incremental updating of pages eliminates the page refresh problem and slow response that have plagued Web applications since their inception.

AJAX has received tremendous industry recognition and support. The major software giants and web portals have adopted it. A large number of AJAX toolkits and libraries are available for free. AJAX does have its limitation but most of them can be overcome by integrating AJAX with other technologies whenever required.

AJAX is here to change the user experience on desktop as well as on mobile devices.

Rich Internet Applications

According to Wikipedia Rich Internet Applications (RIA) are web applications that have the features and functionality of traditional desktop applications. RIA's transfer the processing necessary for the user interface to the web client but keep the bulk of the data back on the application server.

Traditional web applications centered all activity around a client-server architecture with all processing done on the server, and the client only displaying static content. The biggest drawback with this system is that all interaction must pass through the server, which requires data to be sent to the server, the server to respond, and the page to be reloaded on the client with the response. Most traditional web applications have clumsier and difficult to use interfaces compared to desktop ones. The primary difference between a RIA and traditional web applications is the amount and quality of interaction between the user and the interface. An RIA can use a wider range of controls to improve users’ interaction allowing efficient interactions, better error management, feedback and overall user experience. Another benefit of RIAs is that data can be cached in the client, allowing a vastly more responsive user interface and fewer round trips to the server.

Some of the features and benefits delivered by RIA's are listed below

a) Allows feedback, confirmation and errors messages to be displayed on same page/view.

b) Wider variety of controls e.g. sliders, date pickers, windows, tabs, spinners etc.

c) No installation, just an AJAX enabled browser required

d) Higher immunity to viruses and piracy.

e) Reduced load on server resources as processing is distributes over server and client

f) Lowered application development and deployment costs

g) Reduction in network traffic due to more intelligent client and selective data request

The most common technologies used for building RIA's are Java applets and web start, Adobe Flash and Flex, and AJAX. Efforts are being made to make AJAX work with the other mentioned technologies. Adobe Systems has released libraries to help developers bridge Adobe Flash and Flex technology with AJAX. Similarly libraries are available to integrate AJAX with Java,.NET,PHP,Python,Perl,Ruby and other backend technologies.

What can AJAX do?

To start with let me tell the readers that this entire document was composed online using an AJAX powered word processor available at www.writely.com

AJAX is playing a crucial role in making Web 2.0 promises a reality. Some of the features of web 2.0 are

a) Use of Web as the platform

b) Software delivered as a service instead of packaged software

c) Cost-effective scalability

d) Architecture with user participation

AJAX interfaces are a key component of many Web 2.0 applications. Google, Yahoo, Microsoft, Amazon and many others have embraced AJAX.

Google services like Maps, Gmail, Suggest, Reader use it. Google Maps, which is considered as one of the most impressive and popular AJAX based application, allows user to zoom in and out and scroll the map in four directions very much like a desktop application. User can drag the map on screen with the mouse pointer and double click to center. All this with no clicking and waiting for graphics to reload each time you want to view the adjacent parts of a map. Gmail uses AJAX for spell-check, auto save, new email check and other functions. In Google suggest suggestions are provided in real time as the user types the search query.

Yahoo's Flickr and instant search use AJAX. In Flickr the text-editing and tagging interface uses it. Instant search gives user the result as he/she is typing the query. Yahoo frontpage too has been AJAXified.

Windows Live is a free AJAX virtual desktop. Some of its features are search, news, maps, email integration, instant messenger, contact management tool etc. More features can be included through the use of third party 'Gadgets'.

Meebo is a web based instant messenger client, it supports Yahoo, Gtalk, MSN and AIM protocols. Writely, Zoho, gOffice, AjaxOffice are AJAX based online word processors; some are full-fledged office suits. Digg is a technology news website that combines social bookmarking, blogging, RSS, and non-hierarchical editorial control. Travbuddy lets users create travel journals and share travel experiences, reviews and photos. This application also uses Google Maps. Pageflakes, Netvibes and Protopage are free startpages.

Zimbra is an AJAX based collaboration suit. Kiko and Calendarhub are online calendars. Pixoh is an online photo editing application

The impact of AJAX on user experience
AJAX user interfaces are highly responsive giving users the feeling that changes are instantaneous. It also introduces multiple segments of interactivity on the same page. User may submit a form and immediately after concentrate on some text or click on a menu item in some other segment. Even in case of an error in one segment other segments can stay usable. AJAX applications usually avoid the need of horizontal and vertical scrollbars, this adds to user convenience.

Existing AJAX applications can be categorized into two types 1) partially AJAXed - here AJAX is used to provide certain functionalities e.g. Flickr and 2) fully AJAXed - here AJAX is necessary for functionalities as well as for user-interface e.g. Meebo, Google Maps, Windows Live

The way users use fully AJAXed applications is very different from their traditional web experience. In these applications the concept of web pages breaks down, surfing a site or using an applications is not just clicking links and loading fresh pages. In some applications the response may result in changes to small/certain parts of the current view, the URL in the address bar remains unchanged and the Back, Forward, Reload and Bookmark buttons are rendered meaningless. The browser is not certain to show the previous state of the application on hitting Back/Forward buttons. Users need to adapt to this change in browser behavior.

Some of the processes/elements in user experience which have undergone AJAXification are mentioned below

a) Hierarchical tree navigation - users find it irritating to navigate trees in Directories and Discussion threads, AJAX makes expansion/contraction of tree nodes smooth without making the user wait for the new page to load

b) Form value check - as the user fills in a online form an AJAX call could be made to the server to do tasks like checking availability of user name, measure strength of password, populate drop-down boxes further down based on data already entered. Also auto-completion and spell-check features can be provided

c) Rapid user-user communication - browser based chat applications and games can be built without the need to manually refresh the page to get current data/state

d) Data filtering and rearranging - this include applying a filter, sorting by date or some particular column values, relocate iframes, divs and page elements

e) Server-side pushes - AJAX enables simulation of server-side push technology using polling

AJAX on mobile

Pocket PC and Smartphone Devices (2003 and later) support AJAX.

Opera Software has released Opera Platform SDK, a kit for developing and running software on mobile phones. This SDK will allow development of AJAX based rich mobile applications. In addition the Opera Platform SDK will help developers adapt existing content and web applications to run on mobile phones.

By storing an AJAX application on the mobile phone and allowing XML-communication with a Web-server, the traditional bandwidth constraints become less of an issue. This also enables transparent updating of information pushed to the mobile phone.

With increasing processor power and wireless network speeds AJAX is sure to play an important role in enhancing mobile user experience.