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)