We have all heard a lot about AJAX. But aside from being a four-letter acronym, what is AJAX, and what does AJAX mean to you, the UI designer? This article is intended to shed some light on AJAX at an introductory level.
While AJAX is used primarily in Web designindeed, this article focuses on the Webit will open up new design possibilities beyond the Web. AJAX suggests a new design methodology for all desktop applications. Adobe has its AIR(tm) framework, Microsoft has its Silverlight framework, and Opera has its Opera Desktop. All three seek to bring this Web paradigm to the desktop, thus changing traditional application design. In all these examples, AJAX-style programming is used to build what were traditional desktop applications.
Where Does This Magic Come From?
What Is AJAX Good For?
AJAX is great at solving two problems in traditional page-based Web design: buffering data before the user needs it, and improving user interactivity with the application interface. Google Maps is an example where the buffering problem is solved.
In previous map applications using the page-refresh paradigm, a map image is displayed as one page and then every subsequent pan, zoom, or similar interaction requires a new page with the requisite new data provided in one shot. What this means to the user is an annoying pauseclick the button, wait several seconds as the full screen blinks and is refreshed. There is no smooth animation, no immediate response to the user as we have come to expect from a typical desktop application.
Google Maps breaks this download-refresh paradigm. Instead of refreshing the entire page, the user can grab the map and drag it as the data fluidly fills the frame: There is no annoying pause. The Google engineers have prefetched the data that lies just outside the border of the map in frame. When the map is dragged, the prefetched data comes into view with no refresh latency. The display does not blink as an entire page of data is reloaded. This is the Asynchronous in AJAX. The data is fetched asynchronouslyat a different timefrom the user’s request. The result is a smooth user interaction more like a desktop application, yet keeping several benefits of a Web application: no application needs to be downloaded and installed, no updates are needed (instead, the latest software version is always served from the server), and the user interface is the same across any machine regardless of operating system (OS), as long as the OS has an industry-standard Web browser.
Gmail is similar. Instead of prefetching data, Gmail focuses on AJAX to provide application interaction without requiring a refresh of the entire active display. For example, in the old paradigm, when a new email message arrives, an entire display of data (which could be hundreds of items) is pushed down and repainted on the screen. With AJAX, only the new message is updated. Only the local screen area that needs to be refreshed is updated.
Gmail is an example where AJAX is used to improve user interactivity. The Gmail application interface instead performs much more like a desktop application. New emails are automatically added to the inbox without requiring a full-page request (no flickering page refresh is visible; no need for the user to press the refresh button), while address fields that the user must fill are instead dynamically populated with hints from the user’s contact list. This improved interactivity is made possible because much more of the computation now happens in the Web browser, on the client device, than in the previous model.
Other AJAX Benefits
AJAX-style programming has other benefits beyond the buffering and improved user interactivity described above. Bandwidth requirements are typically less for a given application. This is because only the data that is needed is requested and transferredrefreshing the entire page with all data and graphics is not necessary. Another thing that works well with AJAX is queries that take a long time to run. Instead of pushing a submit button and causing the user to wait for a long time while the results are returned, with AJAX, the request for data can be made in the background while the user has continuous ability to interact with the page.
Additionally, dynamic data filtering works well with AJAX. Imagine a T-shirt ordering application in which T-shirts are available in different sizes, colors, and styles. However, depending on available inventory, not all combinations are available. As the user selects each attribute in turn, the options available should be filtered to return only the available items at that time. If each selection requires a page refresh, the user interaction becomes very slow and frustrating. However, with AJAX, the full data set can be downloaded, and the filtering of available options can be done in real time as the user makes progressive selections.
Finally, AJAX is good for form submissions. Feedback can be given to the user as the form is filled in. There is no need to wait until the form is finally submitted. For example, AJAX can be used to generate hints as a user fills in fields on a form.
What Are the Drawbacks of AJAX?
The primary annoyance with AJAX is that the browser’s “back” button (or equivalent scripting command) does not behave as expected with a traditional page-driven application. Since the AJAX application exists in a single page, pressing the back button takes the user to the previous pagewhich is completely outside of the given application. This can be very confusing to the user, since in the page-driven model, the back button takes the user to the previous step within the application. There are ways to mitigate this problem. For example, the script can artificially insert data into the history list so that when the back button is pressed, the application state is reverted to simulate the expected back behavior. This is what is done with Google Maps.
A similar problem exists with bookmarks. When bookmarking an AJAX page, the state of the given application is not bookmarked; only the address of that application is bookmarked. The user can attempt to bookmark a page that is several steps deep into an application flow, but when that user returns to the bookmark, he or she is placed at the starting point in the application. This can be very confusing. Again, there are some workarounds. When the bookmark is created, the script to add the bookmark can dynamically add a fragment to the URL to preserve some state information. Then when the user returns to this bookmark, the application state can be restored, placing the user in his or her expected place in the application.
The final drawback of AJAX is that it can actually cause degraded user performance if improperly implemented. The nature of AJAX is to shift the computing load from the server to the client computer. The optimum compute allocation, on the client or server, must be determined based on relative computing power. If too much burden is put on the client’s Web browser in processing long and complicated scripts, then the AJAX application can actually perform more slowly than the traditional page-based application.
What Does This Mean to You, the Application Designer?
Today AJAX is used primarily for Web-application design. Web pages are a common method for implementing UI and applications. Powerful graphics and interaction capabilities can be implemented in a way that’s accessible to a broad community of designers. AJAX has the additional benefits of enforcing good application design by separating data and its presentation.
As we are already seeing today, this paradigm will move from the Web to desktop applications. Likely this will appear first in embedded systems, where applications can be less complex and the ability to quickly create a graphically rich UI is desired. The entire device UI can be implemented in a Web-browser paradigm. For example, user interfaces for devices such as network routers are already typically implemented in a Web-browsing paradigm. Soon, these same devices will deploy a user-interface application that has the same look and feel of a desktop application, but is built on AJAX Web technology. Benefits include the ease to author, ease to upgrade, and rich graphics capabilities. Furthermore, it is easy to implement the same UI across a wide range of devicesthe only requirement is to port the browser. With minimal study, an interaction designer familiar with Web technologies can not only use AJAX to build improved Web applications, but soon will also be able to build Web applications to drive the user interface for a desktop device.
If you haven’t done so already, check out AJAX and its capabilities. You may need to know more about it sooner than you think.
Daniel F. Zucker
About the Author
Dr. Daniel Zucker is an independent consultant specializing in the mobile Web. He is co-chair for the W3C SMIL Workgroup, and most recently was senior director of technology and FAE for ACCESS, a leading supplier of non-PC Web browsers. Prior to ACCESS, Zucker was VP of engineering for Mobilearia and CTO for ePocrates.
©2007 ACM 1072-5220/07/0900 $5.00
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.
The Digital Library is published by the Association for Computing Machinery. Copyright © 2007 ACM, Inc.