The Impact of Ajax on User Experience - Part 2
By: Cindy Lu, Ph.D., CHFP
HFE Consulting, LLC
Published - 15 January 2007
In Part 1 on "The Impact of Ajax on User Experience" we looked at the positive impacts of AJAX on user experience [1]. In this article, Part 2, we will look at the negative impacts.
Negative Impacts of AJAX on User Experience
1. Adapting to Partial Screen Updates
On a web page, a navigation link takes the user to a new page; an action button triggers an event and may refresh the page when the action is complete (e.g. deleting an item from a list). The page transition and refresh provides adequate feedback to the user that new content or result is ready.
In Ajax-based applications, clicking a navigation link may only result in a partial screen refresh. Clicking an action button may cause a subtle or moderate screen change.
On Yahoo.com’s Home page, as you click through the featured news tabs, the content section is switched accordingly but the rest of the screen is not changed (Figure 1). When you mouse over the Weather link, the screen shifts downward for the user to view the weather data for the default location (Figure 2). These interaction designs are different from traditional web sites. Users may not be use to this type of interaction model. However, in these examples, the tab design, the enclosure surrounding the tabs and the content change may train the user to adapt to this new interaction model. 
Figure 1. Feature Story Sections on Yahoo.com's Home Page
Figure 2. Weather Data on Yahoo.com Home page
In web sites and applications where clicking a navigation link only cause partial screen update without good visual cues may make the user wonder whether the new destination has arrived, if the new change has occurred and where the change is on the screen. In applications where large amount of data is present, screen shift may make the user feel lost.
2. Learning New Interactions
Many new application interaction models and UI widgets are created in Ajax-based applications. These new interaction methods require users to learn new ways of doing things. Some may not be intuitive to learn. Even it is learned, it may not be effective and efficient to use.
In most web sites and applications, when the user fills a form, the user will not see the changes on the form after filling it out until the submit button is clicked.
Deane [2] pointed out, in 37Signal's Ta Da List application - as you click the checkbox in front of an item, the item is removed immediately from the To do list and added to the list below (completion list). This interaction can be confusing initially because the action clicking the checkbox triggers an action. Fortunately, the action can be reversed by un-checking the deleted item in the completion list (Figure 3).. 
Figure 3 An Example of a To-do List in Tadalist.com
In Microsoft's favorites.live.com, the initial Sign-In screen is a little bit confusing (Figure 4).
- Where does the user enter the user name and password?
- What does "Remove" mean?
As you mouse over the Sign-In ID, the Sign-in button appears. Then you need to click anywhere in the blue area to get the sign-in field.
It takes 5 steps to sign in:
- Viewing the ID
- Mousing over the ID
- Clicking the ID
- Entering the password and
- Clicking the "Sign in" button.
Figure 4 Sign-In screen on Microsoft's favorite.live.com
Figure 5 Sign-in button appears as you mouse over the sign-in ID
Figure 6 Sign-in field finally appears after you have clicked the sign-in area
Here is another example that shows that a new design can get in the way of user interaction with the web. Domajx.com uses the auto-suggest technique to search for domain names. When you pause during the typing a domain name, a message, "Please wait. Checking…" blocks the search field that prevents the user from typing further (Figure 7).
Figure 7. A message blocks the search field (domjax.com)
In Windows Live Favorites application, it is not easy to find the tiny handle to resize the viewing pane. Even though you find it, it is not easy to move it due to a slight delay between the action and the screen change (Figure 8)
Figure 8. It is not easy to resize the view pane (Windows Live Favorites)
3. URLs and Bookmarks
The URL stays the same even if the page content is changed. The user cannot bookmark the page after the user makes a sequence of clicks and stays on the same page. This creates a problem when you want to send the page to someone else. You will have to describe the sequence of actions to get to the right content. For example, when you find a map in maps.google.com, you cannot send the URL to your friends because the URL does not change (Figure 9).
Figure 9. The URL does not change (maps.google.com)
4. Back Button
The Back button does not work when the user performs a sequence of browsing tasks but still stays on the same page. Developers have implemented various solutions to this problem. For example, one approach is to use invisible IFRAMES to invoke changes that populate the history used by the browser’s back button.
5. Printing
It’s challenging to print the entire page after drilling down to a section of a page. Figure 10 illustrates the print preview for a screen in Windows Live Favorites in the IE browser.
Figure 10. The Print function is broken
6. Browser Compatibility
Browsers may not support all JavaScript event handlers for XMLHttpRequest. Different browsers also interpret some JavaScript elements in different ways. An application supporting multiple browsers and browser version require additional scripting code [3]. The good news is that the development community has been working hard to make Ajax toolkits compatible with popular browsers. As the Ajax Mars Report [4] indicated, the trend is moving strongly toward full compatibility.
7. Ajax Not Working When JavaScript is Disabled
For various reasons, the JavaScript support is disabled in many users' browsers. To enable the scripting support, the user needs to go to the browser's Tools menu to change the Scripting setting. Not every user knows how to do it or find the instructions. In addition, not every user wants to enable the scripting support.
8. Slow Browser
Since JavaScript is executed in the browser and the browser has no or limited storage space, too much JavaScript code can make the browse slow or even crash. If you use Gmail or the new Yahoo mail, you may notice the delay of the screen change when you interact with your mails. If you use online word processor such as Google Docs & Spreadsheet or Zoho Writer (www.zoho.com), you may notice some delay between typing or clicking an action button and the screen changes. The delay makes online office difficult to use.
9. Accessibility
JavaScript code and new visual effects introduced to Ajax applications have introduced accessibility problems. As indicated by Lemon and Fraulkner in their research paper, Making Ajax Work with Screen Readers [5], the main challenges are how to inform the user whether the page has been changed, where the change is and let the user interact with the content. Their conclusion is that it is not possible to make Ajax work in every known assistive technology.
Conclusions
There are several problems in AJAX-based applications that will impact user experience and accessibility. The problems can be categorized into:
- Interaction
- Functionality (e.g. bookmarks, back button and print)
- Accessibility and
- Performance.
The technical community can help resolve the functionality and performance problems. Accessibility experts and the technical community can work together to tackle the accessibility problems. It is the responsibility of the usability and design community to research the interaction problems and make sure AJAX-based applications are usable.
In Part 3 (and final article in this series) we will look at how user experience designers and usability practitioners can face the challenges and form strategies to design for a better user experience.
References
[1] The Impact of Ajax on User Experience – Part 1, Lu, Cindy, 2006
http://www.apogeehk.com/articles/AjaxUserExperienceStrategiesPart1.html
[2] Will Ajax Hurt Usability? Deane, 2005
http://www.gadgetopia.com/post/3720
[3] XMLHttpRequest – Browser Compatibility, Allamaraju, Subbu, 2006
http://www.subbu.org/weblogs/main/2006/07/xmlhttprequest_2.html
[4] Ajax Mars Report, 2006
http://www.musingsfrommars.org/2006/06/howre-we-doing-now-ajax-browsers.html
[5] Making Ajax Work with Screen Readers, Lemon, Gez and Faulkner, Steve 2006
http://juicystudio.com/article/making-ajax-work-with-screen-readers.php