=Paper=
{{Paper
|id=Vol-153/paper-3
|storemode=property
|title=Towards a User-Centered Design of Web Applications based on a Task Model
|pdfUrl=https://ceur-ws.org/Vol-153/paper3.pdf
|volume=Vol-153
|dblpUrl=https://dblp.org/rec/conf/caise/WincklerV05
}}
==Towards a User-Centered Design of Web Applications based on a Task Model==
https://ceur-ws.org/Vol-153/paper3.pdf
Towards a User-Centered Design of Web Applications based on a Task Model
Marco Winckler1, Jean Vanderdonckt2
1
LIIHS-IRIT Toulouse, 2Université catholique de Louvain
winckler@irit.fr, vanderdonckt@isys.ucl.ac.be
Abstract notations intended to support the design activity of web
Since more than a decade, several methods for applications that surpass the capabilities and the aims and
engineering and developing web applications have been goals of merely those found in document processing and
introduced and extensively used. Since these methods software engineering. Several models for the
often focus on data and related processes, their approach development of Web applications have been proposed
to conceptual modeling of web applications is centered and extensively used in the recent years such as the OO-H
on the notions of data, objects, functions, processes, and method [8], the Object-Oriented Hypermedia Design
services. In this paper, we show that these methods could Method (OOHDM) [15] and WebML [3]. Such models
be expanded by modeling the user interface of such web sometimes consist of an adaptation from previous work
applications by adopting a user-centered approach based on Hypermedia Systems, Object Oriented methodology
on a task model. A task model represents the user’s and Formal Methods. Those models which have been
viewpoint on how to manipulate these data and trigger influenced by Hypertext Systems and Object Oriented
these functions so as to reach the goal associated to the methodology, propose solutions based on the concept
task. Depending on the user, several different task models authoring-in-the-large; which means they provide abstract
could be elaborated and each task model may lead in turn models describing the overall classes of information
to different user interfaces for the same data and elements and navigation structures without much concern
processes, as opposed to a single user interface as for implementation details [7].
produced by traditional development methods. For this Most development methods existing for web
purpose, a case study is presented that demonstrates how applications base their conceptual modeling on the
a task can be modeled so as to represent the user’s objects (or data) and their related methods, functions, or
viewpoint in the user interface and to refine the dialog of services. The consequence of this hypothesis is that the
the application. types of task that can be derived from these models
frequently adopt the traditional CRUD (Create, Read,
1. Introduction Update, Delete) pattern: tasks are limited to basic
operations on objects and their relationships. When some
The development of Web applications is known to be methods go beyond this simple pattern, the dialog of the
as a complex activity due to many factors that need to be resulting user interface is assuming a transactional
considered simultaneously: the evolving nature of scheme: all data that are manipulated by the task are
applications, the multidisciplinary nature of development supposed to be entered and all methods that are required
team, the competitive points of views for the application, to accomplish the task should be triggered by the user.
the complexity and incompleteness of user requirements, But no order is assumed, thus resulting in a dialogue
the tight schedules for delivering the Web application [1, where no contextual consideration is supported. For
6, 13]. In particular, many currently existing Web instance, such methods cannot model fine-grained
applications must follow predefined business logics and dialogues such as: if the user selects this radio button,
complex transactional operations and services requiring activate dynamically this push button associated to that
integration with distributed databases and legacy systems. service, enter information with this order that can
Notwithstanding, the early Web was born as a dynamically change according to the user’s preference,
hypertext/hypermedia system and it still preserves many dynamically change a form according to user’s reply,
of its hypermedia influence. As a result of this hybrid display this window according to the previously done
heritage, the development of many Web applications may operations. In other words, the dialog is often restricted to
tend to prefer considering aspects typically addressed in navigation between pages and screens, not to fine dialog.
document management systems (e.g., information Work on “classical” interactive systems has shown the
architecture), software engineering (e.g., functional central role played by task analysis for designing usable
architecture) [9]. and useful systems [2, 11]. Task models allow the
To cope with this complexity, the Web Engineering description of high-level user requirements in terms
community has investigated and defined models and activities that must be performed by the user and/or by the
system in order to reach some goal. The modeling
produced with task models leads to many different site whenever the page they are navigating). Additional
implementations. One advantage of this is that we can transitions and states can be included into the model to
compare different design options prior to the represent single pages, external relationships, index,
implementation, thus saving time. guided tours or any other navigational requirements.
Most of the user’s tasks over the Web concern the
navigation [6]. By navigation we understand here all 3. Case Study: Informal Description
activity allowing users to move from a Web page to
another, which covers supplying information through Our case study is the digital library of theses for the
forms (identified as part of electronic procedure using a French Association on Computer-Human Interaction
database), following a navigation paths or freely (AFIHM1). The main aim with this Web application is
exploring the information space. allowing users to navigate, search and update a digital
This paper argues that the use of task modeling can be library of theses on the HCI field. The general idea
employed synergistically with navigation modeling to behind this Digital Library (DL) is to allow users to feed
improve the usability of Web applications designs. The the database with little effort and control by the AFIHM.
Section 2 describes a general method centered on user Since some users could create unexpected records (e.g.
tasks. Section 3 presents a case study for a Digital Library supplying incomplete/inappropriate information,
which demonstrates our approach. Section 3.1 presents mistakenly changing a record) the Web application
the user roles for the application. Section 3.2 presents the should support a kind of review process. This review
modeling of user users’ tasks by the means of the process is made up by a system administrator who
ConcurTaskTree notation (CTT) [14]. Section 3.3 decides to give or not his authorization to publish a thesis
introduces the StateWebCharts notation (SWC) [18] and in the catalogue after have been notified by mail each
presents the corresponding navigation models for the time a user submit his/her thesis. The informational and
digital library. Section 3.4 shows how to drive from functional requirements for the application can be
navigation models with SWC to the prototyping of the summarized as follows:
digital library. Section 4 presents a discussion and related a) To provide searching and browsing facilities;
work. Lately, Section 5 presents the conclusions. b) All visitors can create for free their own account
c) Only users having an account can submit and
download thesis from the DL;
2. A Method for Web User-Centered Design
d) To ease updating the catalogue’s contents by users;
We assume that the phase of requirements engineering e) To support a fast review process of thesis;
has been already started and designers have identified the f) Allow users to navigate from the Digital Library to
users’ profile, their informational needs as well as the the AFIHM’s Web site;
underlying data model. The method presented here does g) Notify users about the status of their submission (i.e.
not impose any particular notation. We used to describe accepted, refused, etc.).
the user profile and informational requirements by textual Due to space restriction, only a portion of the task
scenarios. The underlying data model is described by the models and navigation models produced for the case
means of a UML class diagram. The approach for study are presented below.
modeling is made up by following these steps:
1) Identify the different roles performed by the user; 3.1 User Roles and Tasks
2) Create a task model for each role; Table 1 presents the roles which have been identified
3) For each task model create an individual navigation for the application (“everyone” and “system
model; administrator”) and their corresponding (allowed) tasks.
4) Create relationships in the navigation model for any The role “everyone” corresponds to any Web site visitor,
further informational requirements; which covers the profiles “Not logged in” and “registered
The step one 1 is performed in the very early phases of user”. The browsing and searching facilities of the
development when the target audience for the Web database are available to everyone but a user only can
application is set up. The tasks of each user role are submit or download a thesis in the electronic format if
specified by the means of a task model at the step 2. In s/he is logged into the system. The user role “system
the step 3 task models guide the process of navigation administrator” refers to someone who is responsible for
modeling; in addition, designers can include relationships supervising the submissions.
to describe system behaviors as reaction to user
interaction, which is not described by task models. The
step 4 is made up by detailing the navigation in order to 1
include relationships based on informational requirements AFIHM is the French acronyms of “Association
(e.g. allow users to return to the main page of the Web Francophone d'Interaction Homme-Machine”. More
information available at: http://www.afihm.org/
Table 1. Target audience for the AFIHM’s theses Web site. User tasks are entirely performed by the user without
Role
interacting with the system (not used in this case study
User Profile Pre- (allowed) Tasks
conditions example). Interactive tasks are performed by the user with
Everyone Not logged in none Query (Search Digital Library) the system such as tasks “Provide Keyword” (Fig.1.a) and
Create an account “Provide identification” (Fig.1.b). Application tasks
Log into the system describe actions performed by the system without user
Registered Logged in Query (Search Digital Library) intervention, for instance “Show result” (Fig.1.a) and
user Download thesis “Validate User Identification” (Fig.1.b). In the sequence,
Update account information
we designer can create more complex relationships
Submit a thesis to the
catalogue between tasks. For example, Fig. 2 shows a complete task
System Have access Logged in Review submissions modeling for download a thesis form the Digital Library.
administrator rights
Full control
over the
catalogue
3.2 Modeling User Tasks for the Digital Library
with the CTT Notation
We start by modeling individual the tasks without in-
between dependencies such as “Query” and “Log into the
a) CTT model for the task “Query”
system”. Fig.1 presents these tasks by using the CTT
notation [14]. In CTT, tasks are organized in a hierarchy;
for example in Fig. 1.a, the task “Query” is accomplished
when its subtasks “Provide Keyword” and “Show result”
have been completed. The relationships between tasks are
based on LOTOS operators such as enabling (operator
>>), enabling with information passing (operator []>>),
task interruption (operation [>), etc. CTT notation allows
modeling 4 types of tasks: abstract task, user tasks,
application task and interactive task. The Abstract tasks in b) CTT model for the task “Log into the system”
CTT are tasks which require compound tasks such as Fig. 1. CTT models of individual tasks without in-between
“Query” (Fig.1.a) and “Log into the system” (Fig.1.b). dependencies.
Reuse of tasks
Fig. 2. CTT modeling for a download a thesis from the Digital Library.
It worth noting in Fig. 2 the reuse of tasks “Log into the States in SWC are represented according to their function
system” and “Query”. The relationship (|=|) means that in the modeling. States can be static, dynamic, transient or
these tasks can be performed in any order. The system external. Static states represent static content while
only performs the task “Send the file” after s/he has dynamic states represent pages generated dynamically by
searched the digital library and get logged in the system the system. Transient states describe a non-deterministic
can. In this modeling, the task “Query” is iterative behavior in the state machine; they are needed when a
(represented by the symbol *). To allow the interruption single transition cannot determine the next state for the
of this iteration the user can perform the task “Request state machine. External states represent external modules
download”. The task “Log out” was added to allow the for the application of external Web sites. In a similar way,
users to exit the application at any time. The operator a SWC transition explicitly represents the agent activating
“[>” indicates the interruption of the task. it. Transitions whose event is triggered by a user are
By exploiting to the task model above it is possible to graphically drawn as continuous arrows while transitions
perform several scenarios (see Table 2). The scenarios triggered by system or completion events are drawn as
presented in Table 2 are used to evaluate all alternative dashed arrows. Each individual Web page is considered a
sequences for the task “download a thesis from the digital container for objects and each container is associated to a
library”. The scenarios below do not impose any state. Links and interactive objects causing transition are
particular implementation that means user tasks can be represented by events. The operational semantic for a
better understood without to have to planning how to SWC is: current states and their content are visible to the
support them by the system. This kind of analysis is made users while non-current states are hidden. Users can only
possible because user tasks are considered from the point navigate outgoing relationships (represented by the means
of view of the users need for the application and not how of transitions) from current states. When a user selects a
to represent the user activity with a particular system. transition the system leaves the source state which
becomes inactive letting the target state to be the next
Table 2. Some possible scenarios for the task “download a thesis active state in the configuration. SWC also provides the
from the digital library”. pseudo-states as those found in StateCharts (i.e. shallow
history, deep history, end state and initial state). More
Scenario 1 Scenario 2 Scenario 3
details about SWC can be found in [18].
Provide Identification Provide Keyword Provide Keyword
Sequence of task
Validate User Show result Show result
In order to exemplify the elements of the SWC notation,
execution
Identification Provide Identification Provide Keyword Fig. 3 presents the SWC modeling for doing a query over
Provide Keyword Validate User Show result the digital library and logging into the system which
Show result Identification log out correspond to the tasks “Query” and “Log into the
Request download Request download
system” presented by Fig.1.a and Fig.1.b, respectively.
Download Download
3.3 Modeling the Navigation for the Digital
Library with the SWC Notation
As described in previous section, some tasks require users
to provide a keyword for querying a database or to
provide their identification for getting access to private
documents. In these cases, navigation models must
represent what happens if the user identification fails or if a) Navigation model for the task “Query”
the database records do not match to the keyword. These
issues are better represented by navigation models than
task models.
For navigation modeling we have proposed the StateWeb-
Charts notation (SWC) [18]. SWC is a formalism based
on StateCharts [10], which has been extensively used to
model complex/reactive systems. StateCharts can be
defined as a set of the states, transitions, events,
conditions and variables and their inter-relations. In b) Navigation model for the task “Log into the system”
SWC, states are abstractions of containers for objects
(graphic or executable objects). For Web applications Fig. 3. SWC modeling to log into the system (a) and query (b).
such containers are usually (but not only) HTML pages.
Fig. 4. SWC modeling to log into the system (a) and query (b).
In Fig. 3.b, the states “provide identification” and the users whether it concerns content-based navigation or
“validate user identification” correspond to the subtasks navigation required to follows a specific procedure.
in Fig.1.b. The state “validate user identification” is a 3.4 Prototyping the Web Application
transient state which does have a visual representation to The edition, simulation and prototyping of SWC models
the user. This state is associate to dynamic state “Try are supported by the tool SWCEditor [17] (see Fig 5).
again” which is dynamically generated and presented to After we have verified that the navigation built with SWC
the user if the login fails. Otherwise, the transient state holds in our requirements we can start by creating the
present the welcome page represented by the static state Web pages that correspond to the SWC model. The Web
“Welcome”. We can observe that these states correspond pages were built using a visual environment independent
to the subtasks in Fig1.b but they also include new states from SWCEditor since, at the present, it does not
(i.e. “Try again” and “Welcome”) and transitions (i.e. integrate a Web page editor. Once we have prototyped
“Error”, “Show logged in” and “Repost(mail,pwd)” each individual Web page for the application, we returned
which are required to describe the behavior of the to SWCEditor and we associated each state to a Web
application in response to user tasks. page. Each state visible at the user presentation is
The Fig. 4 shows the complete navigation model for associated to a Web page which includes the content and
download a thesis from the Digital Library including the the graphical presentation for the objects. The SWCEditor
support for the tasks “Log into the system” and “Query” supports the simultaneous simulation of SWC models and
(the digital library). Similar to the previous examples, this the execution of the corresponding Web pages. Fig. 6
SWC modeling includes transitions that complete the provides a view at glance of this process. The navigation
description of the system’s behavior. In addition, it modeling for the digital library of AFIHM is presented at
features some transitions supporting content-based left highlighting the current state in the simulation (i.e.
navigation such as “return from auth.”, “get logged in“, the state “home”). At right, Fig 6 presents the
“return from search DL”, “start search digital library” and corresponding implementation of the home page. We also
“Search DL”. Notice that these transitions link static can observe at left of Fig 6 a dialog window showing a
states such as “home” and “welcome” which correspond list of transitions going out from the state “home”. These
to static documents. When linking up states by the means transitions are translated to links at the home page. The
of transitions we can create all the navigation required by arrow links indicates this translation.
Fig. 5. SWCEditor: edition of the model “Download paper from DL Library”.
Fig. 6. Prototyping the Digital Library for the theses of the AFIHM.
4 Discussion and Related Work navigation [4]. The hypertext interconnections in Web
When designing Web applications, we have to pay applications can be extremely complex and designers
attention to the users’ tasks and to the users’ mental could benefit from tools and guidelines to support and
model about the information space in order to help users assist them. Tauscher and Greenberg [16] describe some
to navigate efficiently the application. The efficiency of patterns of navigation but their results don’t explain
Data-driven approaches is limited to the navigation one which tasks are engaged while these patterns are used.
can extend from an underlying database. The main These studies try to describe user tasks at a high and
problem of such as an approach is that the underlying generic (activity) level but don’t provide any information
database does not necessarily (and quite often doesn’t) about how task modeling could be performed or how a
represent the user mental model for the Web application. task model can be exploited within the development
Even though task modeling is widely considered as process of a web application.
helpful activity which let design to analyze the user Only a few works have been addressed the problem of
activity without influence of technological constraints, the model user tasks for the Web Design. The WSDM
actual use of task models for the design of Web method [5] tackles many usability concerns and user
applications is underestimated mainly because current requirements which are quite often neglected by other
approaches for the design do not provide any guidance on methods. However WSDM don’t provide a way to model
how to integrate task models into the design process. and analyze user tasks without having to take into account
We assume that tasks models are not suitable for the system model. SOHDM approach [12] relies upon
representing part of the system because the way users scenarios to guide all the design activities concerning the
have access to information is part of the system development of Web applications but it does not take into
specification not part of the user task [19]. Keep task account non-functional aspects that are relevant for a
models independent from system models allows the user-centered design process. As mentioned before, both
analysis of user needs for tasks and the transformation of content-based and task-based navigation should be
such as models according to the modality and any other supported by navigation modeling methods.
implementation constraints. For example, a task model
should not inform how many pages a user must visit to 5 Conclusions
accomplish a task because the number of the pages is on
the system domain which can adapt the number of pages This work has presented a Task-Centered Approach for
in the presentation dynamically according to parameters navigation modeling. Our aim is to demonstrate how to
such as the device employed, the preferred modality for describe user requirements by the means of task models
user interaction (graphic, sound/voice, etc), and so on. and scenarios and how to transform them into
Thus both task models and system models (in the case of navigational paths. For this purposes we have employed
the Web navigation models) must be employed the CTT notation [16] to represent user tasks because it
synergistically to produce appropriated User-Centered enable us to explicitly represent the tasks that are
Designs. performed by the user, by the application and those which
As discussed in the first section, most development are interactive (i.e. require both system and user
methods existing for web applications base their intervention). For navigation modeling we have employed
conceptual modeling on the objects (or data) and their the SWC notation [18] because it provides non-
related methods, functions, or services, and they derive ambiguous descriptions for the navigation and it
tasks from the traditional CRUD (Create, Read, Update, explicitly where user and system act changing the state of
Delete) pattern: tasks are limited to basic operations on the application. Both notation presented are supported by
objects and their relationships. When some methods go tools which facilitate the edition and simulation of
beyond this simple pattern, the dialog of the resulting user models.
interface is assuming a transactional scheme: all data that The precise modeling of user tasks provides a deeper
are manipulated by the task are supposed to be entered understanding about the user needs for the application.
and all methods that are required to accomplish the task The mapping of task models to navigation models allows
should be triggered by the user. These development designers to explore many possible solutions for the
methods focus on the designer's point of view about the implementations.
content and the navigation of the web application. The role of navigation models is to create appropriate
Moreover, when the user’s perspective is taken into views of information space (by grouping entities from an
account it is often introduced very informally. When underlying data model or a document database) and
dealing with large web application this informal process provide navigable relationships in-between according to
reaches its limits and often leads to usability failures. the users’ needs. Since task models are high-level
Inappropriate navigation design of applications as one of description of the user activity they are not suitable to
the main sources of usability problems related to the
represent all aspect concerning the navigation over Web [9] Gu, A., Henderson-Sellers, B., Lowe, D. Web
applications. For this reason the mapping between task Modelling Languages: The Gap Between
models and navigation models is required to complete the Requirements and Current Exemplars. 8th Australian
design. World Wide Web Conference (AusWeb'2002) 2002.
The use of formal description techniques, such as SWC, [10] Harel, D. StateCharts: A Visual Formalism for
provides a clear and non ambiguous description of the Complex Systems. Science of Computer
navigation supporting user tasks by the system. In Programming vol. 8, no. 3, pp. 231-274 (1987)
addition, the appropriate tool support can alleviate the [11] Johnson, P. Human-Computer Interaction:
effort of modeling and support rapid prototyping, as Psychology, Task Analysis and Software
shown in section 3.4. Even thought we wish do not Engineering, Mc-Graw Hill, Maidenhead, UK, 1992
discuss in this paper the verification of the SWC model, [12] Lee, H., Lee, C., Yoo, C. A scenario-based object-
we can just mention that some tools exist to support the oriented hypermedia design methodology. Elsevier
simulation and verification of properties of the model that Information & Management no. 36, pp. 121-138
can be assimilated as usability problems (e.g. deep (1999)
navigation paths, dead links, and so on). [13] Murugesan, S., Deshpande, Y. Web Engineering:
Managing Diversity and Complexity of Web
Acknowledgments Application Development. LNCS 2016. Springer-
This work is partially supported by the project SPIDER Verlag, Berlin, p. 355 (2001)
Web (Capes/Cofecub n. 399/02). [14] Paterno, F., Mancinii, C., Meniconi, S.
ConcurTaskTrees: a Diagrammatic Notations for
References Specifying Task Models, In Proceedings of IFIF T13
Conference INTERACT 97, Sydney,
[1] Balasubramanian, V., Bashian, A. Document Chapman&Hall. (1997) pp. 362-69
management and Web technologies: Alice marries [15] Schwabe, D., Rossi, G. Building Hypermedia
the Mad Hatter, Communications of the ACM 41(7), Applications as Navigational Views of information
pp. 107-115 (1998) Models. 28th Hawaii International Conference on
[2] Benyon, D. Task Analysis and System Design: the System Sciences pp. 231-240 (1995)
Discipline of Data. Interacting with Computers, 4(1), [16] Tauscher, L., Greenberg, S. How people revisit web
pp. 102-123 (1992). pages: empirical findings and implications for the
[3] Ceri, S., Fraternali, P., Bongio, A. Web Modeling design of history systems. Int. J. Human–Computer
Language (WebML): a Modeling Language for Studies vol. 47, pp. 97-137 (1997)
Designing Web Sites. WWW9 Conference (2000) [17] Winckler, M., Barboni, E., Farenc, C., Palanque, P.
[4] Cockburn, A., Jones, S. "Which way now? Analysing SWCEditor: a Model-Based Tool for Interactive
and easing inadequacies in WWW navigation," Modelling of Web Navigation. ACM Computer-
International Journal of Human Computer Studies pp. Aided Design of User Interfaces (CADUI'2004),
105-129, 1996. Funchal, PT. (2004)
[5] De Troyer, O., Leune, C. J. WSDM: A User [18] Winckler, M., Palanque, P. StateWebCharts: a
Centered Design Method for Web Sites. 7th Formal Description Technique Dedicated to
International World Wide Web Conference (1998). Navigation Modelling of Web Applications.
[6] Fleming, J. Web Navigation: Designing the User International Workshop on Design, Specification and
Experience. O'Reilly & Associates Press. (1998) Verification of Interactive Systems (DSVIS'2003),
[7] Garzotto, F., Paolini, P., Schwabe, D. HDM—a Funchal, PT. (2003).
model-based approach to hypertext application [19] Palanque, P.; Bastide, R.; Winckler, M. Automatic
design. ACM Transactions on Information Systems Generation of Interactive Systems: Why A Task
(TOIS) vol. 11, no. 1, pp. 1-26, (1993) Model is not Enough. 10th International Conference
[8] Gómez, C.C. J., Pastor, O. Extending an Object- on Human-Computer Interaction – HCI
Oriented Conceptual Modelling Approach to Web International’2003, Héraklion, Greece, June 2003.
Application Design. CAiSE'2000 pp. 79-93, (2000)