UKOLN AHDS AJAX And Usability Issues



Introducing AJAX

The term Asynchronous JavaScript and XML (AJAX) refers to a method by which a number of technologies can be combined to enable web applications to communicate in an asynchronous manner with services - that is, they can dynamically send and receive information without forcing page reloads, in a manner that is transparent to the user. This allows for a user experience similar to that of using local applications on a desktop PC. The background to AJAX is discussed in more depth in a QA Focus briefing paper [1].

Using AJAX

AJAX applications potentially offer a number of benefits, such as speed and efficiency in terms of bandwidth and time, and consistency in terms of appearance and behaviour across browser platforms. However, there are several potential disadvantages, a number of which are covered in this briefing paper. Some are related to security, such as limitations set as a response to cross-scripting security flaws, and the deactivation of JavaScript by many users, although this may also be due to accessibility issues. Others involve implementation issues, design issues or mismatch with user expectations.

AJAX and Usability

Certain usability issues have been identified as particularly common:

Concept of State

The Web is built according to a very specific content of state; once a page has been downloaded, it is usually expected to remain static. AJAX uses dynamic Web page updates, which means that state transition (the move from one page view to another) is now much more complex, as separate elements may update asynchronously. AJAX applications frequently do not store application state information; this breaks the 'back' button functionality of the browser. Many Web users use the back button as their primary means of navigation and struggle to control the system without it. Supporting undo and redo is one of the key usability rules and vital in allowing users to recover from errors - that said, it is not always possible or advisable, such as in the case of the sale event in e-commerce.

AJAX requires developers to explicitly support this functionality in their software, or use a framework that supports it natively. Various solutions to this problem have been proposed or implemented, such as the use of invisible IFRAME elements that invoke changes which populate the history originally used by the browser's back button.

A related issue is that because AJAX allows asynchronous data exchange with the server, it is difficult for users to bookmark a particular state of the application. Solutions to this problem have also started to appear. Some developers use the URL anchor or fragment identifier (the identifier after the hash '#') to keep track of state, and therefore allow users to return to the application in a given state. Some AJAX applications also include specially constructed permalinks.

The asynchronous nature of AJAX can also confound search engines and web spiders, which traditionally record only the content of the page. Since these usually disregard JavaScript entirely, an alternative access must be provided if it is desirable for the web page in question to be indexed by search engines. Many AJAX applications will not benefit from indexing by external search engines, such as email, mapping services or online chat clients; however, as the popularity of AJAX grows, it is likely that more informational sites will begin to apply the technology.

User Expectations

The Web is no longer in its infancy and most users have now become fairly familiar with its conventions. When entering a Web site there are certain expectations of how information will be served up and dealt with. Without explicit visual clues to the contrary, users are unlikely to realise that the content of a page is being modified dynamically. AJAX applications often do not offer visual clues if, for example, a change is being made to the page or content is being preloaded. The usual clues (such as the loading icon) are not always available. Again, solving this problem requires designers to explicitly support this functionality, using traditional user interface conventions wherever possible or alternative clues where necessary.

Response Time

AJAX has the potential to reduce the amount of traffic between the browser and the server, as information can be sent or requested as and when required. However, this ability can easily be misused, such as by polling the server for updates excessively frequently. Since data transfer is asynchronous, a lack of bandwidth should not be perceivable to the user; however, ensuring this is the case requires smart preloading of data.

Design Issues

AJAX makes many techniques available to developers that, previously, were available only by using DHTML or a technology like Flash. There is therefore concern that, as with these previous technologies, designers have access to a plethora of techniques that bring unfamiliar usability or accessibility problems. Gratuitous animation, pop ups, blinking text and other distractions all have accessibility implications and stop the user from fully focussing on the task at hand. When creating AJAX applications developers should fully consider the ramifications from the user's perspective.

Accessibility

Most methods of AJAX implementation rely heavily on features only present in desktop graphical browsers and not in text-only readers [2]. Developers using AJAX technologies in Web applications will find attempting to adhere to WAI accessibility guidelines a challenge. They will need to make sure that alternate options for users on other platforms, or with older browsers and slow Internet connections, are available.

A more detailed explanation of usability and the Web is available as a briefing paper [3].

Conclusions

The concerns surrounding adoption of AJAX are not unfamiliar; many stem from user and developer experience of Flash. Like Flash, the technologies comprising AJAX may be used in many different ways; some are more prone to usability or accessibility issues than others. The establishment of standard frameworks, and the increasing standardisation of the technologies behind AJAX, is likely to improve the situation for the Web developer.

In the meantime, the key for developers is to remember is that despite the availability of new approaches, good design remains essential and Jacob Nielson's Ten Usability Heuristics [4] should be kept in mind. AJAX applications need to be rigorously tested to deal with the idiosyncrasies of different browsers, platforms and usability issues. Further, applications should degrade gracefully and offer alternative functionality for those users who do not have JavaScript enabled.

Note that as the use of AJAX increases and more programming libraries become available, many of the issues mentioned in this briefing paper will be resolved. In parallel it is likely that over time browsers will standardise and incorporate better support for new technologies.

References

  1. An Introduction To AJAX, QA Focus briefing document,
    <http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-93/>
  2. W3Schools Browser Statistics, W3Schools,
    <http://www.w3schools.com/browsers/browsers_stats.asp>
  3. Usability and the Web, QA Focus briefing document,
    <http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-86/>
  4. Ten Usability Heuristics, Useit.com,
    <http://www.useit.com/papers/heuristic/heuristic_list.html>