The Impact of Ajax on User Experience - Part 1
By Cindy Lu, Ph.D., CHFP
HFE Consulting, LLC
Published - 23 October 2006
Ajax has been a hot topic since Jesse James Garrett coined the term and published the essay "Ajax: A New Approach to Web Applications" in February, 2005. Numerous Ajax-based web applications and development toolkits have been rushing to the internet in the past year. Web-based applications have become richer and more responsive, not only closing the gap with the desktop but also presenting new and fun ways for user-web interactions.
According to SitePoint and Ektron's survey of 5,000 Web Developers "The State of Web Development 2006/2007", 46 percent of respondents said they will tap the AJAX model for a project in the next 12 months. Gartner estimates that by 2010, at least 60% of new application development projects will include the Rich Internet Applications (RIA) technology.
If you are user experience designers (UXDs), usability practitioners or user interface developers, you should follow this new technology trend closely because Ajax is all about improving user experience. This article provides a brief overview of Ajax, the impact of Ajax-based web applications on user experience and recommends some strategies for being part of the technology wave.
Ajax and Rich Internet Applications (RIA’s)
AJAX is an acronym for "Asynchronous JavaScript and XML". Ajax describes a set of web development technologies such as JavaScript, XHTML, CSS, DOM, XML, XSLT and XMLHttpRequest that deliver richer and more responsive web applications. The motivation behind Ajax is to improve web application’s interactivity, speed and usability.
In the client side of Ajax-based applications, there is an Ajax engine written in JavaScript. This engine is responsible for both rendering the user interface and communicating with the server for data processing. The kernel in Ajax engine is XMLHttpRequest, a JavaScript object that communicates with the server asynchronously. This technique allows data being exchanged between the user interface and the server without making the user wait. The result is that the presentation of the web page and the data exchange can be separated; the page refresh is eliminated; only the relevant page elements are refreshed, and only when it is needed.
RIA's are web applications that provide rich interaction features and functions similar to desktop applications. RIA technologies include Applet, Macromedia Flash, DHTML, Ajax and other technologies. The advantage of Ajax compared to other RIA technologies is that no plug-in is needed to make it work. A RIA example is the new Yahoo Financial Charts that utilizes Flash to present the stock charts.
Positive Impacts of Ajax on User Experience
Ajax is all about making the user interface richer and more responsive in web applications. The impact of Ajax on user experience has been evidenced from many Ajax-based web applications. This section summarizes the positive impact of Ajax on user experience.
1. Improved Performance and Smoother Responses
In Google Calendar, as you browse through the calendar, the data is updated without any page refresh. In Gmail, as you click through emails in a thread, the content is shown instantaneously. On Yahoo home page, when you switch between two news tabs, the updated news is presented to you instantaneously. When you mouse over the Weather icon, you can immediately view the updated weather data. Even when you enter a different ZIP code, you can see the instant weather data update.
Figure 1 Mouse over the Weather button results in updated view of weather forecast. (Yahoo.com)
With Ajax, the user experience of browsing and viewing the content on a page is different. The page responds faster and the updated data is presented without the entire page refreshed.
2. Multiple Interactions
Thanks to the asynchronous communication technique and the separation of data presentation from data exchange with the server, once the user submits a request, the user can move to another area immediately without waiting for the request process completed. In Flickr, you can activate the online editing feature for multiple pictures. You do not have to complete the edit in one form in order to activate another one.
Figure 2 The user can enable the online editing feature for multiple pictures (Flickr)
3. Automatic data refresh to keep the site updated
Ajax applications can continuously poll the server for the latest information to keep the site updated. Data can also be continuously saved to the backend. These capabilities are very useful for applications when the data is changed somewhere else while the user is browsing it.
4. Live support
The system can monitor user actions in real time and provides support when needed. Google Suggest presents possible complete search terms as the user types. PCnames.com fetches the available domain names instantaneously as the user enters a domain name.
Figure 3 Auto-complete: As the user types "usab", Google Suggests presents possible terms and results. (Google Suggest)
Figure 4 Live Search: As the user types a domain name, the domain registration information is presented instantaneously. (Ajax Lookup in pcnames.com)
5. Richer Interactions on the Web
Desktop interaction methods such as drag and drop, slider bar, zoom in/zoom out functions, inline editing, etc. implemented in Ajax-based applications provide more flexible and powerful ways for users to interact with the web. For example, In Google Calendar, you can simply drag an appointment from one date cell to another to change the appointment date. Microsoft's live.com uses a slider bar for the user to change the view size of images. It also allows the user to drag and drop a selected image to a scratch pad.
Figure 5 Microsoft's Live.com enables users to change image viewing size by a slider bar.
Another desktop interaction method, list-detail pane interactions, is implemented in Ajax-based applications such as Yahoo Mail Beta and Windows Live. It makes reading emails much faster.
New online applications such as Google Spreadsheet, Google Calendar, Writely, Zoho writers, etc. create rich interactions similar to desktop applications.
6. New Functions and Interaction Techniques
New functions and interaction techniques such as collapse transition, expand transition, various ways to show invitations to actions, pop over windows are designed and implemented in Ajax-based applications. These new interaction techniques create richer interactions and enhance the communications. In many Ajax-based applications, pop-up windows are replaced by pop over windows. The traditional OK and Cancel buttons are gone. Figure 6 demonstrates a pop over window for setting up an appointment.
Figure 6 Google Calendar. Clicking the time grid invokes a pop over window for the user to enter event information.
7. Visual effects enhance experience
New visual and animation effects are added to web applications for better communications with users. Fresh and light visual designs make Web 2.0 and Ajax-based applications look pleasant and inviting.
Yahoo Pattern Library lists many new visual patterns for communicating transitions. Figure 7 illustrates two design patterns from Yahoo Pattern Library that utilize visual effect to enhance the interactions. The Spotlight Transition pattern is used to enhance the feedback message. Drop Invitation pattern is used to clarify the drag and drop location. Although these visual effects can be labeled as "eye candy", when applied with care, they can make the interactions more effective and efficient.
Figure 7 Yahoo: Two design patterns used to enhance user interactions
In summary, in Ajax-based application, new functions and interaction techniques aimed at enriching user experience have allowed the user to do more on the web in a more efficient, effective and fun way.
In Part 2, we will look at some of the problems created using Ajax.
Next article: CEOs and Usability
Back to Top