THE EFFECTS OF THE AJAX TECHNOLOGY ON WEB
APPLICATION USABILITY
Jonas Kluge
Smile - Motoristes Internet, Paris, France
Frank Kargl, Michael Weber
Institute of Media Informatics, Ulm University, Germany
Keywords:
Ajax, Usability, WWW, Web Application, Efficiency, Satisfaction, Survey.
Abstract:
The Ajax technology is said to make the Internet faster, more interactive and user-friendly. It is spreading
rapidly throughout the web. By allowing scripts being executed inside the user’s browser to communicate
with a remote server, it enables new forms of interaction for web-pages and -applications. In this paper we
analyze Ajax usability, taking into account both advantages and imposed problems. Subsequently we present
a user study with two typical scenarios in web-applications and compare Ajax-enabled and non-Ajax-enabled
versions. This allows us to verify and quantify the assumed effects. As a result, we show that Ajax significantly
enhances both user satisfaction and efficiency of use, at least in some scenarios.
1 AJAX INTRODUCTION
The term Ajax is an acronym for Asynchronous
JavaScript and XML (Garrett, 2005) and describes
a way to realize a HTTP communication from within
a JavaScript program embedded into a web page.
The retrieval of information or the usage of an
application in traditional websites consists of load-
ing web pages page-by-page by clicking on links or
submitting forms. Once a page has been loaded, the
content remains mostly unchanged until a user action
triggers loading of a completely new page.
In contrast to this, Ajax sites can dynamically
load new data from and transmit data to the originat-
ing web server while the page stays in display. The
Javascript application running inside the browser can
update the content of the web page with no need to
discard the whole page at every data transmission.
Communication happens asynchronously in the back-
ground, the web application stays fully functional in
the meantime. Figure 1 shows the control-flow of an
Ajax site compared to a regular web application.
The communication with a webserver in an Ajax
application is controlled by the so-called XML-
HttpRequest object, which offers either synchronous
or asynchronous retrieval of data. In the latter case,
the application is notified via callbacks, when the re-
trieved data is available. The XMLHttpRequest ob-
ject is an API being accessible from major scripting
languages, like e.g. JavaScript. Its runtime environ-
ment is the Ajax engine being embedded into a stan-
dard web browser.
Using the available mechanisms, highly inter-
active web applications can be realized, like e.g.
Google Maps (http://maps.google.com) where users
can seamlessly navigate through maps or Gmail
(http://www.gmail.com/) where the inbox can be up-
dated or emails moved between folders, all without
loading a new page.
So Ajax-enabled web applications seem to offer
huge benefits in usability compared to traditional web
applications. But studies trying to analyze this are
very rare. So our goal is to provide some significant
results that substantiate certain aspects of Ajax usabil-
ity.
2 USABILITY ASPECTS
When used in web pages, Ajax enables new interac-
tion modes with web pages, which imply effects on
the usability of these. In this section we will analyze
the improvements that an adequate use of Ajax can
289
Kluge J., Kargl F. and Weber M. (2007).
THE EFFECTS OF THE AJAX TECHNOLOGY ON WEB APPLICATION USABILITY.
In Proceedings of the Third International Conference on Web Information Systems and Technologies - Web Interfaces and Applications, pages 289-294
DOI: 10.5220/0001286102890294
Copyright
c
SciTePress
Time
Browser
HTML page
Server
Time
Interface
HTML page
Interface
HTML page
Interface
Classic Web Application
Browser
HTML page
Ajax Engine
Server
Interface
Display Input Display Input Display
Req.‐
Response
Req.
Response
Req.
Response
Req.
Response
Req.
Response
Req.
Response
Req.
Response
Ajax application
Figure 1: Comparison of classic web applications and ajax applications.
mean for websites; in the following section we will
discuss the drawbacks of its usage.
2.1 Application Speed
Web sites can use Ajax to load content requested by
the user. Given a web page is already present at the
users browser, subsequent loads can be truncated to
the changes. This way the server can omit sending the
code used for layout and unchanged parts of the page
(like menus) and just transfer the new content. This
can reduce the loading time of a page significantly.
The effect is most noticeable when only a rela-
tively small part of a big page changes or is addi-
tionally loaded. Also when a form is submitted as
a part of a page and the rest of the page is supposed
to remain in display (e.g. the later examined message
board with an additional message being added), the
transfer via Ajax can save transmission time.
2.2 User Interface Smoothness and
Interactivity
As the user can work within a page and the displayed
page doesn’t have to be discarded at each request of
additional content, the interaction with the web page
can be designed substantially more fluid than before.
The interruption of the user’s work process and the
required adaption to a new workspace which happen
when the page is changed disturb the workflow of the
user. When content is sent or loaded via Ajax, the user
interface remains continuously visible and unchanged
apart of the new content elements.
A good user interface interacts with the user and
reacts instantaneously to his actions. Lowry et al.
compared in a study variants of web applications with
different grades of interactivity and found out that the
satisfaction of the user increases with higher interac-
tivity. (Lowry et al., 2006)
Regarding the interactivity, web applications were
always in an inferior position compared to desktop
software. Classic web applications can only directly
react to user actions as far as the required informa-
tion had been delivered to the browser with the page.
In any other case a new page has to be loaded. This
limits potential reactions to predictable user input. In
case the reaction of the application is based on a big
amount of data it is neither useful nor wanted to trans-
mit all data to the user. Using Ajax the application
can access server side data from inside the page and
react to user input dynamically. Thus only these parts
of data which are relevant to handle the current user
input have to be loaded.
WEBIST 2007 - International Conference on Web Information Systems and Technologies
290
2.3 Data Transfer Transparency
We have already mentioned that Ajax can reduce the
actual time the user has to wait for new content to
appear. Often the subjective impression of waiting
depends not so much on the actual time it takes to
load and display the content but on the way the user
interface presents it. Culwin and Faulkner (Culwin
and Faulkner, 2001) found out that users preferred
an interface keeping them informed regarding the to-
tal loading progress over an interface with a regular
browser loading indicator.
With Ajax, the technical means now exist for web
applications to provide custom loading indicators to
the user. By being able to control the user interface
without interruption, the application can keep the user
informed about when loading occurs, what is being
loaded and what the current progress is. In contrast
to this, regular web browser UIs only display a load-
ing animation and a rough estimation of the loading
progress.
2.4 New Interactions
Ajax can not only replace regular loading of content
and speed up applications by this, but also enables
new interactions with a web page. For example an in-
put field which offers completion suggestions for the
typed characters can hardly be realized without Ajax.
Neither a reload of the whole page after each typed
character nor preloading all possibly needed data (like
the train stops in the later mentioned travel planner)
together with the web page would be very useful.
3 PROBLEMS
As we have seen, the use of Ajax can improve website
usability in several modes. Unfortunately, by chang-
ing the way the web applications work, problems arise
as well. In this section we discuss the drawbacks of
Ajax in the fields of accessibility and the disturbance
of web browser navigation tools.
3.1 Accessibility
As Ajax applications rely completely on JavaScript,
they are not accessible to users of browsers, which do
not support this language. Text browsers such as Lynx
and browsers for mobile devices but also screenread-
ers for visually impaired are part of this group.
As the different web browsers vary in extent and
implementation of Javascript support, the risk is high
that Ajax applications do not work as expected with
some browser versions. To reach a broad compatibil-
ity, strong efforts are necessary.
Possible solutions to the accessibility problem in-
clude the delivery of normal HTML pages, which are
subsequently enriched with Ajax functionality. To
realize this, a non-Ajax-based version of the page
is loaded and subsequently modified by a JavaScript
programme, if Ajax support has been detected.
3.2 Browser Navigation and Bookmarks
In normal web applications, users navigate between
pages and can use the browser’s “back” and “forward”
buttons to return to recently visited items. Typically
pages can also be bookmarked and re-visited later.
As with Ajax the change of page content is con-
trolled by scripts, the browser cannot simply go
“back” any more. Clicking the navigation buttons
might lead to undesirable consequences.
Also, when content is loaded via Ajax, the URI
of the page does not change, which renders the book-
mark function of web browses useless. Accessing a
bookmark of an Ajax page thus loads the initial screen
only.
Several workarounds for these problems are
known. A promising approach to the navigation prob-
lem is the implementation of custom functions for the
handling of the “back” and “forward” buttons, which
is supported by the current releases of Mozilla Fire-
fox and Microsoft Internet Explorer browsers. The
bookmark problem can be solved by coding the cur-
rent page-state into the in-page link anchor marker
“#” either by providing a link to the current state or
by automatically jumping to a new virtual anchor on
each page update.
4 EMPIRICAL SURVEY
To support our theoretical findings from the last sec-
tions, we conducted a user testing in which we mea-
sured the differences in selected usability aspects be-
tween Ajax and non-Ajax-versions of two web appli-
cations. This chapter describes the configuration of
the study and its results.
4.1 Subjects and Measures
We decided to examine two different usages of Ajax:
On the one hand we choose a form field auto-
complete widget as a very typical example for appli-
cations that become possible when using Ajax. The
auto-complete widget is used in a public transit trip
planner, where the fields for the start and destination
THE EFFECTS OF THE AJAX TECHNOLOGY ON WEB APPLICATION USABILITY
291
station suggest completions for the typed characters,
based on a database of all train stations in Germany.
In our second example, Ajax is used to send the
content of a form to the server in order to save it to a
database while the user can continue to use the appli-
cation. This is implemented in a discussion forum ap-
plication where the user can add a comment which is
submitted to the server via Ajax and directly inserted
into the tree-like message board. In the meantime,
the user can continue reading or posting to the forum
without interruption.
While in the first example the expected advan-
tage consists in the support of the user through the
auto-complete suggestions, the main issues in the sec-
ond example are the reduced transfer time and the in-
creased smoothness of the user interface.
For the study we implemented both web applica-
tions in a version with and a version without Ajax
usage. As measures we choose two sub-aspects of
usability: satisfaction and efficiency (Nielsen, 1993).
We select satisfaction, as it is a subjective impression
and summarizes the whole experience of the user with
the application. In contrast, efficiency is chosen as an
objectively measurable criterion.
Satisfaction was measured with a 12 item ques-
tionnaire based on the IBM Usability Satisfaction
Questionnaire (Lewis, 1995) with statements like
“Overall, I am satisfied with how easy it is to use
this system”Each item has to be rated on a scale with
five possible gradings between “strongly disagree”
and “strongly agree”. Efficiency was quantified by
the time the users needed for the completion of given,
characteristical tasks.
4.2 Hypotheses
According to the chosen subjects and measurements,
four hypotheses are tested:
H1: The user satisfaction with the trip planner with
auto-completion of input fields is higher than without
auto-completion.
H2: The efficiency of using the trip planner with auto-
completion of input fields is higher than without auto-
completion.
H3: The user satisfaction with the message board with
transmission of new comments via Ajax is higher than
with regular comment transmission.
H4: The efficiency of using the message board with
transmission of new comments via Ajax is higher than
with regular comment transmission.
4.3 Methodology
The study was conducted via Internet. The partici-
pants were asked to complete a set of tasks for each
application. Each user worked with both the Ajax and
the non-Ajax version of the two applications, so they
had to complete four sequences altogether.
The order of the applications and the Ajax and
non-Ajax version was randomized to eliminate suc-
cession effects. Two different variants of the tasks
were created for the two versions of the applications,
the assignment of the task variants to the application
versions was randomized, too.
After each version the participant was requested to
fill out a satisfaction questionnaire. At the end of the
survey statistical data (age, gender, experience with
computers and the Internet) was gathered and a text
field for transmitting feedback was offered.
4.4 Results
The survey has been completed by 123 participants
successfully. Participants were between 14 and 68
years old with an elevated concentration between 20
and 30. There was a slight dominance of males with
a rather high experience with computers and the in-
ternet. Figure 2 shows the age and gender distribu-
tion. A small number of participants (exceeding the
123) experienced technical problems, mainly browser
compatibility issues, and have not been included in
the analysis.
The results show different extents of improvement
on satisfaction and efficiency in the two applications.
For the statistical validation of the results we applied
an analysis of variance for a repeated measures de-
sign. Using this method, three of the four hypotheses
can be confirmed while the fourth cannot be validated
statistically.
Figure 3 gives an overview over the results. Figure
4 shows a histogramm of the time required to com-
plete the given tasks, which is taken as the inverse of
efficiency.
The satisfaction with the trip planner improves
from 3.7 to 4.37 (on a scale from 1 to 5) when in-
troducing the Ajax-enable auto-complete widget. The
corresponding hypothesis H1 can be proven with high
significance (p < 0.01).
The time needed to complete the given tasks with
the trip planner decreases in average from 92.5 s to
71.5 s with Ajax auto-completion which shows a clear
gain in efficiency. Hypothesis H2 can thus be corrob-
orated also with high significance (p < 0.01).
In the message forum application, the satisfaction
of the users improve from 3.84 to 4.22 when the com-
WEBIST 2007 - International Conference on Web Information Systems and Technologies
292
50
60
AgeDistribution
GenderDistribution
20
30
40
50
female;
42
0
10
20
15
19
20
24
25
29
30
34
35
39
40
44
45
49
50
54
55
59
60
64
65
69
male;81
15
19
20
24
25
29
30
34
35
39
40
44
45
49
50
54
55
59
60
64
65
69
Figure 2: Age and gender distribution of the participants.
92,5
RequiredTime
withAjax withoutAjax
4,37
4,22
384
Satisfaction
withAjax withoutAjax
71,5
63,8
70,0
3,70
3
,
84
tripplanner messageboard
tripplanner messageboard
Figure 3: Results of the study: Measured Satisfaction for the Ajax and the non Ajax version of the two evaluated applications
(higher value = better) and time in seconds needed to complete the given tasks (lower value = better).
ments are transmitted via Ajax. Hypothesis H3 can
also be confirmed with high significance (p < 0.01).
The efficiency also increases when using of Ajax,
reducing the average time needed for the tasks from
70 s to 63.8 s. However, the statistical test cannot con-
firm the corresponding hypothesis H4 (p = 0.067).
Summed up the employment of Ajax leads to a
satisfaction gain in both cases, whereas the efficiency
benefits can only be confirmed in one case. These
results will be discussed and interpreted next.
4.5 Interpretation of Results
The results show that the introduction of Ajax leads
to improvements of different extents in terms of satis-
faction and efficiency of use of web applications.
The auto-completion function has clearly proven
its advantages in terms of satisfaction as well as effi-
ciency. The so improved trip planner received many
positive comments from the users, which requested to
have this function available in real trip planner appli-
cations.
In the second application, which uses Ajax to
transmit the content of a form, the advantages are not
as big as with the auto-completion. Regarding effi-
ciency there was no significant gain at all. A possi-
ble explanation is the fact that the internet connection
speeds in the tests were so fast, that the time advan-
tage reached through the transmission via Ajax was
hardly noticeable for the majority of the users.
Another reason for the failure to significantly
prove the efficiency gain is the high variance in time
needed by the participants to complete the tasks.
Though being instructed to quickly scan the forum
and write just anything, many participants read the
comments thoroughly and tried hard to write mean-
ingful contributions. A similar trial should be pos-
sibly conducted using a different application sce-
nario. Anyhow the Ajax-based version did not per-
form worse than the non-Ajax one.
5 CONCLUSION
In this paper we presented many advantages when
using Ajax in web applications but also considered
some drawbacks. The main advantages in the field
of usability affect user satisfaction and response time
THE EFFECTS OF THE AJAX TECHNOLOGY ON WEB APPLICATION USABILITY
293
Required time for the trip planner
with Ajax
without Ajax
Required time for the message board
with Ajax
without Ajax
Figure 4: Histogramm of the time required to complete the given tasks with the two applications, comparing the Ajax and non
Ajax version each. A lower value indicates a higher efficiency.
which influence the efficiency with which the applica-
tion can be used. Besides this, new functions enhanc-
ing user comfort can be created. Some new kinds of
applications are only possible through the use of Ajax.
On the other hand problems may arise because
the browser loses some control over the HTTP traffic
and its functions for navigation may not work as ex-
pected. However, with some effort developers can re-
alize working browser navigation functions for most
scenarios.
A more fundamental problem comes up when a
user cannot use an Ajax application at all because her
browser is incompatible with Javascript and/or Ajax.
This is also an aspect of usability and maybe the most
severe usability problem: The non-usability. When
designing an application developers have to take into
consideration the target group: will it be able to use
the application or is partial non-accessibility viable.
Unquestionably Ajax makes sense when creating
comfort functions like the auto-completion described
previously. They are attached to existing applica-
tions and do not replace any regular HTTP transfer
but only add visual support and convenience. Thus,
they can easily be omitted if the browser does not sup-
port Ajax. Then, Ajax can be used without any of the
disadvantages being mentioned.
For the group of applications that cannot be real-
ized without Ajax, the situation is different. They may
not be accessible for some groups of Internet users,
but compared to the former non-existence of this ap-
plication class, it is still an improvement.
5.1 Future Work
While we looked at the benefits of Ajax not only the-
oretically but also empirically in our study, we ana-
lyzed the drawbacks only in theory. In a future work
it could be attempted to formalize and quantify the
mentioned problems of the Ajax technology. Other
future research could deal with a more comprehensive
evaluation of other possible applications and include
other usability aspects.
Ajax spread rapidly the last years and will con-
tinue to do so. Our paper showed that Ajax is no
magic bullet as it can bring up new problems. How-
ever we could also show that the employment of Ajax
brings a noticeable gain of efficiency and satisfaction
in certain fields. Wisely used, Ajax can clearly im-
prove the usability of web applications that way.
REFERENCES
Culwin, F. and Faulkner, X. (2001). Brewsing the web:
Delay, determination and satisfaction. In HICSS ’01:
Proceedings of the 34th Annual Hawaii International
Conference on System Sciences, page 5018, Washing-
ton, DC, USA. IEEE Computer Society.
Garrett, J. J. (2005). Ajax: A new
approach to web applications.
http://adaptivepath.com/publications/essays/archives/
000385.php.
Lewis, J. R. (1995). Ibm computer usability satisfaction
questionnaires: psychometric evaluation and instruc-
tions for use. Int. J. Hum.-Comput. Interact., 7(1):57–
78.
Lowry, P., Madariaga, S., Moffit, K., Moody, G., Spauld-
ing, T., and Wells, T. (2006). A theoretical model
and empirical results linking website interactivity and
usability satisfaction. HICSS ’06. Proceedings of the
39th Annual Hawaii International Conference on Sys-
tem Sciences, 6:123a.
Nielsen, J. (1993). Usability Engineering. Academic Press.
WEBIST 2007 - International Conference on Web Information Systems and Technologies
294