A UML Extension for Designing Usable User Experiences for Web Applications Vito Perrone1, Luca Mainetti2, Paolo Paolini1 1 HOC (Hypermedia Open Center), Politecnico di Milano, Italy perrone@elet.polimi.it 2 SET-Lab (Software Engineering and Telemedia), Università degli Studi di Lecce, Italy luca.mainetti@unile.it Abstract offered exploiting different delivery channels. These characteristics, together with the growing complexity of In this paper we introduce our framework for the delivered applications, have considerably increased supporting the entire development of interaction and data the intrinsic complexity of such a software category. intensive (typically Web) applications and describe one of Our assumption, quite agreed by the academic and the composing methods addressing the design of the user industrial communities [2], is that quality for such experience. Current proposals, both in the academic and applications is strictly related to a good design. As a industrial communities addressing such a kind of consequence of the above considerations, it is clear that in application, exhibit different weaknesses and strengths this stage industry needs systematic design methods that but are both characterized by poor acceptance by the could help in assuring the required quality [3]. current practice. Instead of proposing a new, richer Looking at the current methods addressing the design modelling method, we have extracted and reused what of Web applications, we discern two different good has been done in both the academic and industrial communities. From the one side, we have the academic worlds in order to meet potential stakeholders’ community, in particular the Web engineering one, where requirements. The whole approach has been shaped by a considerable number of specific design methods have the domain analysis and addresses the development of been proposed along the last decade [4-11]. Generally Web applications from requirements elicitation/analysis speaking and neglecting some peculiarities, most of these to software design in four phases. One of these phases, methods address the conceptual design [4] of Web the user experience design named E-WOOD, is here de- applications. They are characterized by rich semantics tailed. Its specific stakeholders and requirements are here coping with numerous peculiarities of Web applications. described. E-WOOD extends a UML proposal, coming On the other side, there is the UML community where from the industrial world, reusing web engineering representative companies from the industrial world are principles coming from the academic experience. It employing a massive effort [17,18] in defining a introduces a reasoning oriented, user centered semantics reference modelling language for supporting the which can be used for designing application better fitting development process of software systems. UML native stakeholders’ goals and closer to final user expectations. methods address the logical design [4] of an application, in that most of the modelling primitives abstract from 1. Introduction concrete implementation artefacts. Being their modelling primitives closely related to concrete counterparts, these Modern Web applications are assuming more and methods result easier to be understood and used by more a key role in most of the computer mediated human technicians as support for the implementation activities. activities. ECommerce, eBanking, eFinancing, eLearning On the contrary, when referring to the Web application and so forth, are only some important fields where the domain, where the user interaction with the system plays success of the business is strictly related to the quality of a key role, it is recognized that UML support is quite the Web application acting as mediator towards final vague [5]. It is mostly due to the fact UML lacks of a users. As far as shown in [1], in these applications user proper semantics which should help designers during the effectiveness and stakeholders’ goals satisfaction are analysis activities to devise a user oriented application. crucial for their quality. Typically, such applications Confirming this trend, the most recognized UML method provide users with a large amount of different proposed by the industrial community, that is, the WAE information (data intensive applications) and integrate [12] introduce ah-hoc primitives for modelling typical operations and business processes. As distinctive software components of a Web applications, like client characteristics, all these services are accessed in a highly page, server page, frameset, etc. Evidently, these interactive way exploiting the navigational paradigm. concepts do not belong to the user experiences so they Furthermore, currently services are more and more cannot be used to reason on how to improve it. Conversely, they can be effectively used to reason about [12] but embodies the semantics of a known academic the software architecture before coding it. method, called W2000 [25, 26], we are familiar to. Besides their peculiar characteristics, the adopted To illustrate vividly the approach and in particular the modelling languages, primitives, strengths and user experience modelling method, we will use real weaknesses, both communities advocate the MDA as a examples from the design of a running Web application way to improve the final product quality. However, they which we have designed and developed: the Website front this approach with a different philosophy. Academic “Munch und Berlin” (www.munchundberlin.org). It has proposals aim at designing what final users should been originally realized for the State Museum in Berlin perceive, carefully matching this design against the within the HELP EU-funded project with the aim of achieved requirements. Conversely, they often neglect providing to the general public (including users with architectural concerns. In other words, we can say they visual disabilities) a Website promoting the temporary embrace the idea that quality is mostly decided at exhibition of Evard Munch’s prints. Being a real, even if conceptual level so they typically pass from the relatively small-sized, application, it is quite suitable to conceptual design to the code. This position is also illustrate the main aspects of our approach. evident by the fact that most of these approaches propose support tools that can produce an application prototype 2. Web application design: panorama and (usually an evolutionary one) from the conceptual design. related works On the other hand, industrial approaches pay more attention to the correct design of the software modules Along the last ten years a number of methods have that compose the system architecture often overcoming an been proposed for supporting the design of Web accurate design of the user perspective. Most of them applications. In the following of this section we briefly analyze user requirements by means of use case diagrams resume the main characteristics of these methods from [18] describing which functionalities are supposed to be two perspectives – the academia and the industry – and provided by the system to its users. Then, the user considering their role with respect to the analysis and interaction with the system is detailed by means of software design phases. Looking at the academic sequences or collaboration diagrams [18] that describe the community, some of the most known existing dynamic properties of these functionalities in some methodologies are HDM [6], W2000 [25, 26], OO-HDM relevant scenario. On the basis of such an analysis and the [8], WebML [10], UWE [11], WSDM [9], OO-H [13], chosen architecture, designers have to define the software etc. Roughly speaking, they specify the design of a Web that will meet the achieved requirements. In other words, application at the conceptual level, neglecting we can say they embrace the idea that quality can be technological aspects and constraints. Besides technical assured by a good analysis and if suitable software (minor) differences, these methods share lots of common models are crafted. features. All of them are based upon an information- navigation paradigm to describe the user interaction, Recent studies [3, 14, 15, 16] demonstrate that in the recognize the importance of the semantics as guidance for Web domain most of the current proposals have only conceiving the application design and share the slightly impacted on the actual practice. What are the fundamental principle of separation of concerns. On the reasons? Which of the above philosophies should be other hand, they differ one with another in terms of adopted to define a more suitable design model? Various proposed design primitives, notation and support tolls. All can be the factors that hinder the adoption of systematic these methods Following this principle, and adopting the approaches for modeling. W2000 [25, 26] terminology1, the design of a Web application is achieved in four dimensions: Information In this light, the methodological framework we and Access Structures design, defining the basic introduce in this paper aims at embodying the advantages conceptual information units (entities) as perceived by the of the two mentioned philosophies. It is composed by user and the navigational infrastructure in terms of four phases embracing the web application development semantics associations (between related entities) and lifecycle from analysis to software specification. Each phase adopts a specific design model which has been defined on the basis of an accurate analysis of its 1In this paper we use W2000 as example of academic stakeholders’ goals. In particular, in this paper we design method since it has been developed in our research describe our proposal for designing the user experience. group so we are very familiar to its terminology. This method, named E-WOOD, extends the Conallen’s Nevertheless, we are firmly convinced all our UML proposal for designing the user experience – UX considerations are quite independent from it and generic with the respect of other similar design methods. access structures (navigational paths enabling users reach and navigation aspects both during the analysis and interesting information units); Operations and Business design phases. Process design, defining operations (e.g. “add to shopping cart”) and processes (e.g. “check-out”, Finally, the topic of explicitly considering stakeholders “registration”) within a Web application; Navigation and their requirements for shaping a suitable design design, defining the navigation network allowing users method has been barely fronted by existing approaches. browse information and access structures and execute In most of examined literature when a new modelling operations and processes; Presentation design, defining method is proposed, the well-known and high level the page structure in terms of lay-out aspects and software engineering principles are, at most, cited. For graphical elements and the page organization and example in [5] it is argued that the next generation of OO navigation. methods “…should be sufficiently user-friendly to all Although, if properly used, current academic methods kinds of possible stakeholders. That is, for all have the potentiality of enabling designers conceive high stakeholders of any model, its relevant parts expressed in quality (say usable and effective) applications, they the modeling language, must be understandable, must be suffer, as stated in a recent study [3], of some clear even. For the modeler as well as for all other inefficiencies which contribute to a poor acceptance from persons involved in the modeling activity, any model must the industrial environment. Owning sophisticated and be expressive, precise and clear as well”. However, semantically rich primitives often it takes too much effort besides these well known software engineering principles, and time in order to learn and start using the methods. we also advocate that, due to the diversity of all possible Modelling purpose is only badly or vaguely specified with stakeholders, the lack of an explicit consideration of what the respect of the overall development process. It is often every potential stakeholder expects by the modeling claimed models are intended as support tool during the method could be one of the main reasons of the existing early analysis activities, but they then their models are gap between current proposals and industry practice. also used to automatically generate the running application [13], [10]. Cumbersome design documents are 3. Analyzing Stakeholders’ Requirements generally produced as output of the design activities. These documents risk being hard to read and use both To be successful, design methods, as well as any during the analysis and the following implementation engineering product, should accomplish the needs and activities. Proprietary concepts and notation are expectations of its potential stakeholders. Defining a new generally proposed (except a few cases like [11]) by each method requires an accurate analysis of goals and method increasing the learning time and thus the negative requirements of their users, i.e. the practitioners who perception of industry people [21]. Ad-hoc and in-house daily conceive, develop and deploy applications, and made support tools are generally proposed instead of other potential stakeholders whose needs may influence commercial ones. the method definition. Neglecting stakeholders’ needs can With regard to the second category, that is, methods bring to lack of attention towards these engineering proposed in by the industrial world, UML is definitively products (design models) by the industrial practice while considered the standard de-facto in the design practice. fitness to requirements can drastically increase their Referring to the web application domain, the only acceptability at wider level. On this basis, we have recognized method coming from the industrial defined our approach by taking explicitly into account its environment is the one proposed by Conallen in [12],[20], potential stakeholders. It is composed by four phases that is, the Web Application Extension (WAE). WAE, embracing the web application development lifecycle like other UML native methods, adopts an from analysis to software specification. Each phase implementation oriented approach, in that most of the adopts a specific design model which has been defined on modelling primitives abstract from concrete the basis of an accurate analysis of its stakeholders’ goals. implementation artefacts. Examples of WAE primitives In this paper we focus on the conceptual design of the are client page, sever page, style sheet, frameset, etc, user experience which is usually achieved between the obtained by stereotyping UML classes and link, redirect, analysis activities and the software design. submit, etc., obtained stereotyping UML associations. Due to this characteristic, they are quite easy to 3.1 Requirements for a conceptual model understand and use by technicians for supporting the addressing the user experience design software design activities and broadly supported by Conceptual models are used at the beginning of the commercial tools. On the other hand, concerning WEB overall design activities, as intended in the software applications, it is known [5] that UML lacks of proper engineering discipline, which will finally lead to the semantics for supporting the design of communication detailed specification of the software modules to be coded. In this phase, the main goal of conceptual models Software designers and Implementers: define and is to clearly define the solution (application to-be) implement the software modules that will actually realize, characteristics, even if still avoiding implementation on the basis of the chosen system architecture, the details. In the following potential stakeholders (the most application specified by the conceptual models. From our relevant ones) and their relative requirements, gathered in experience on the field, a recognized lack of existing our experience on the field, are described. It should be conceptual models is that they require a considerable noticed that not all the described stakeholders are also effort to be mapped into software artifacts. Often, it is active users of design method, but their needs can hard to understand which diagrams should be considered indirectly influence the method definition. for obtaining a single software artifact and, most of times, Designers: are in charge of the system design. Depending several different diagrams must be composed. For on the reference community, the terminology adopted example in the web domain, to design a server page, within a company, the kind of application, and so on, software designers have to refer to information models different professional figures (e.g. information architects, for the page data, operation and business process models interaction and usability experts, and so on) might be for the business logic, navigation models for the attributed to play this role. Usually several designers navigation logic and presentation models for graphical work both in the analysis and design phases thus first goal and layout aspects. Software designers consider this is to ease the communication with the analysis activities activity being time consuming and, if not properly and among different designers in the design activities. supported by tools, a possible source of mapping For the former, some form of guidance should be mistakes. On the basis of these considerations, models provided to support the passage from the early solution should embody modeling primitives as closer as possible devised in the analysis activities to the actual design of to concrete counterparts and that as less as possible the system. This mapping should compromise between diagrams should be considered to define a software rigour – to enable some form of automatic passage – and component. Also the design documentation to be used for flexibility – to not constraint choices designers have to supporting the implementation activities should be perform in the design phase. In this phase, they have to concise and easy to read (many cross-references among design models very close to the application to-be, thus different diagrams are considered highly annoying). inevitably these models are rich in details and the Another highly desirable feature a modeling method specification is often composed by several heterogeneous should own, for these stakeholder types, is to provide diagrams representing different application concerns. To predefined mapping strategies – let’s say mapping master the overall design complexity (avoiding naive patterns – towards the most known architectural patterns. designers feel lost) the method should provide an explicit Finally, most of the interviewed software designers and framing strategy. Furthermore, model drawing is time- implementers were already used to the UML and related consuming activity that needs proper tool support. In CASE tools, thus they showed a remarkable preference in order to be used in professional environments, support having conceptual models described in UML-like tools should adhere to the commercial standards. Since notation and following the UML philosophy, that is, building such tools is an expensive activity, new modeling methods should belong to the UML family. modeling methods should be defined so that existing Product manager: this stakeholder type represents the commercial tools can be exploited. most important client counterpart dealing with the Usability experts and Graphical designers: depending application design, and act as interface of decision on project parameters like those mentioned above, these makers, opinion makers, clients and content/domain roles could be attributed to designers or other experts. Product managers are usually in charge of professionals with non technical skills. However, in WEB assuring the envisioned application will be able to satisfy applications these aspects are taking more and more the client company expectations, but they also are importance and require specific competences. Whatever responsible of a number of other specific tasks. Among is the case, these figures are interested in carefully others, one the most important is to set up the editorial defining and reviewing usability and graphical aspects chain. Their main, somehow opposite, goals are to take of the application to-be, thus concerns impacting usability the control of the overall application at a glance and to and layout/graphical aspects should be explicitly modeled get details of specific aspects (related to their tasks). and made easy to access. These experts are used to Desirable features for the method should be to review analyze and discuss about usability and graphical models at different levels of detail, to embody most of the concerns by means of mock-up or other similar needed information to set up the editorial chain and to representations that closely reproduce the application to enable some form of requirements tracking. be. Thus, to achieve an effective communication with Final Users: this stakeholder category is the more usability and graphical experts, models should also look important for tuning the application interaction even if it as close as possible to the actual application. is also the less accessible for several reasons. In fact, they usually are not part of the client, are barely identifiable 4. The whole framework at a glance and their characteristics can vary remarkably. Nevertheless, gathering some feedback from potential In this section we briefly introduce the whole users before the coding activities start can bring several methodological framework to better contextualize the advantages since modifying models is much less proposed conceptual modelling method. In all the section, expensive than modifying code. From our experience we specify precise references to the requirements [27], a discussion with users mediated by models is discussed above as it becomes necessary. usually ineffective because they need to see and handle In Figure 1 the composing phases are shown. A application as it were running. Application prototypes are different modelling method is proposed for each of them. much more effective in this development stage, thus As well as other software development processes, we models should be easy to turn into prototypes. assume that these phases should be executed in an Testers and Evaluators: models produced in the design iterative and incremental way, therefore the picture only phase are also used by testers and evaluators once the purpose is to express the phases order within the whole application has been implemented. In these phases, process. Considering the entire development process of a models should provide the ground for setting up the web application, we can say the framework covers both testing or evaluation plan. Testers and evaluators need the analysis and design activities [28]. Moreover, different concerns to be evaluated being easily adopting the Jackson terminology [22], we distinguish identifiable in the implemented application. Moreover, between the problem and the solution domains. These models should look very close to the implemented dimensions, the process and the domain, are used to application so that testers and evaluators can easily match organize the following discussion. the running product to the originating models. Table 1. Requirements for a conceptual tool for the Conceptual Design design phase. Phase 1 Phase 2 Phase 3 Phase 4 Stakeholders Design Requirements Requirements Requirements UX design Software design Designers R1. provide guidance for passing from early elicitation/analysis design solutions to actual design Problem Domain Solution Domain User Oriented System Oriented R2. compromise between rigor and flexibility R3. provide a framing strategy Analysis Design R4. enable to exploit existing commercial Figure 1: Phases in the development process of Web tools Usability and R5. distinguish and make easily accessible applications Graphical concerns impacting usability and experts layout/graphic The two left more phases are both achieved during the R6. models should look as close as possible analysis activities. For supporting the requirements to the actual application elicitation and analysis (phase 1) we propose AWARE Software R7. modeling primitives as closer as [1], a goal-oriented method specially suited for web designers and possible to concrete counterparts application requirements engineering. AWARE Implementers R8. as less as possible diagrams should be primitives include goals and requirements which considered to define a software definitively belong to the problem domain. component R9. Concise and easy to read specification However, in our experience, discussing with documents stakeholders (analysis) about needs and goals can be too R10. predefined mapping strategies towards abstract for a fruitful reasoning about relative importance the most known architectural patterns of various goals and requirements and for eliciting new R11. belong to the UML family ones [27]. A first very high level solution, focusing on Product R12. review models at different levels of specific topics, can help validation and elicitation manager detail activities (e.g. interviews) enabling a more concrete R13. embody information to set up the discussion about the problem. We call this activity editorial chain Requirements Design (phase 2) meaning that in this R14. enable requirements tracking phase requirements take a more concrete form Final Users R15. models easy to turn into prototypes accomplishing a preliminary hop from the problem Testers or R16. different concerns to be evaluated being Evaluators easily identifiable domain to the solution one. In this phase we use IDM R17. models should look very close to the [24]. IDM (Interactive Dialogue Model) is a design model implemented application for interactive applications based on linguistic concepts of human dialogue. It bases on the interpretation of the interaction between the user and the application as a sort of dialogue. It is simple to grasp, and effective in applications and a number of CASE tools already support representing the most relevant features of the application its diagram drawing (e.g. Rational Rose, MS Visio). in terms of content of the dialogue and dialogue moves. Second, as shown in paragraph 4.2, it is very easy and In fact, three simple design elements characterize IDM: intuitive mapping WAE models upon E-WOOD as far as “topic”, “change of topic”, and “group of topic”. An most of times, only one E-WOOD artefact is needed to interactive application may describe a “topic” (e.g. a define a set of related WAE artefacts (R8,R9). “print”, or a “technique”); or it may allow the user to Finally, the methodological framework also includes a switch to a “related topic” (e.g. switching from a “print” number of guidelines on how to use every method within to the “technique” used for it); or it may allow the user to each phase and how to move forward and back between start from a “group of topics” (e.g. “the masterpieces”, or adjoining phases. Guidelines are informally described in “the prints dealing with sickness”) and then browse terms of patterns [29] so providing an useful but flexible within the group. guidance (R1,R2). They also front specific design issues Although in traditional SE approaches requirements like the multi-user and multi-channel design. Lack of are directly used for designing the software architecture space prevents us to describe this aspect, but the complete (e.g. class diagrams, component diagrams, etc. using the set of guidelines can be found in [27]. UML terminology), in applications where the user interaction and the communication potential play crucial 5. E-WOOD: the user experience design roles, the software design has to be postponed to the user experience design [12]. In this phase the application is Our proposal for designing the user experience, called designed as perceived by final users, neglecting how the E-WOOD, has been defined as a UML extension. UML software will be realized. Here, designers have to has been chosen as modelling language to meet R11, precisely define how users interact with the application to while the extension mechanism has been preferred to accomplish their tasks, taking care of the application defining a metamodel in order to exploit easily existing usability and effectiveness with the respect of user commercial tools (R4). Our model extends an existing requirements and quality expectations. In our framework, proposal for designing the user experience, that is, the we achieve the concrete passage into the design phase by UX [12] since, as shown in the Conallen’s book, mapping translating IDM models (phase 2) into E-WOOD ones WAE models upon UX ones is easy and intuitive (phase 3). IDM and E-WOOD, together, build up our (R8,R10,R17). UX’s high level primitives are screen and approach to the conceptual design of WEB applications. links, and an application is merely considered as made up Both methods take their foundations in W2000 [25, 26], of a number of screens connected by links. Typically, a last heir of HDM [6] recognized as one of the first set of WAE artefacts are mapped upon a screen by means conceptual methods for web application design. As of realization associations (stereotyped as <>), described in section 2, W2000, as well as other similar specifying which logical elements (WAE models) build conceptual models, implements the separation of the various parts of the screen (contents and links). Our concerns principle by structuring the design in four main goal in extending the UX has been to add the dimensions. Both our methods keep this principle at the needed semantics (extracted by the W2000 primitives) to basis of their definitions but projecting the previous enable the separation of concerns impacting the dimensions in a sole dimension for the sake of application usability, its functionalities and the whole conciseness, for reducing the number of concepts to be quality (R5,R13,R16). In E-WOOD different concerns learnt and references among diagrams (R8,R9). The last are specified in different views and by introducing step (phase 4) consists of a detailed design of the software specific design concepts. These concepts have been that will be implemented to realize the desired user defined extending standard class and association experience. This is generally called logical design of the elements in terms of stereotype, semantic description, system to-be. Passing from phase 3 to phase 4, a constraints, tags properties. An additional property paradigm shift is achieved since, in phase 4, designers (mapping constraints) has been also introduced to specify have to design the system that will realize the modelled mapping constraints between IDM and E-WOOD models user experiences. This passage is far to be straightforward (R1,R2). As well as in UX, E-WOOD high level and a number of trade-offs with the architectural primitives are screens and links. Screens can aggregate constraints and various decisions have to be undertaken both content and input forms; links can be used to [27]. Models produced in this phase should specify a perform a simple navigation among pages or to provide design easy to code. Here, we adopt the modelling inputs to operations and processes. E-WOOD models are method proposed by Conallen, namely WAE [12]. Our thus very close to the application to-be (R6, R7, R17) and choice has been driven by two main reasons. First, it is easy to turn into prototypes or mock-ups (R15). Keeping already recognized in the industrial environment as the these basic primitives we have also preserved the proven UML method for designing the software for web mapping capabilities towards the WAE (R10, R8). The introduced semantics is also used to define a Every Munch’s Web page includes contents and links framing strategy (R3) which helps designers organize the highlighted in the picture by continue line rectangles, overall design activities, fosters reuse and make design while only some pages include also the set of links documentation more readable (R9). The framing strategy highlighted by a broken line rectangle. To model this we mostly reflects the W2000’s design dimensions. E- use two <> abstract classes WOOD proposes to organize the design of the overall modelling the two different templates. The diagram on application in five views. Each view includes several the bottom right corner shows that a specialization diagrams and makes use of specific stereotyped classes. relationship is used to specify the hierarchy between these Due to the lack of space, in the following we only templates. The layout content belonging to the “General introduce the main views to show the philosophy behind Template” is represented by the <> our method and how we have tried to accomplish the class aggregated to the template, while the outgoing links above stated requirements. The complete specification are represented by means of the stereotyped associations can be found in [27]. <> ending on the target pages. It can be The Template View is used to define common contents noticed as <> is modelled as abstract and links of page sets. Examples of common contents class since it is defined only for generalizing content and could be the copyright information, the company logo and links belonging to a set of concrete pages. A specific so on, whilst examples of common links could be those constraint is provided in the formal specification of the connecting to the home page or to the various site’s UML extension. sections (like those on the bottom of many web sites). The Structural View is used to define pages enabling Typically the template design involves the graphical users explore information concerning the domain entities designers who are in charge of the application look-and- or IDM’ topics. <> classes are aggregated to fell (R5). The basic primitive used in these diagrams is screen classes and models portions of the whole topic the <>, an abstract class used as place- information. <>s are used to model the holder for content and links belonging to a set of screens. navigation achieved across pages belonging to the same Layout contents (both information and graphical topic. For example, as depicted in Figure 3, the overall elements) and common links are modelled respectively by information concerning the “Print” entity are organized in means of <> and <> three pages (Introduction, Big Image and Description) primitives. In Figure 2 a Web page of Munch is shown which are connected by means of bi-directional links together with design excerpts taken from the template originating from the “Introduction” page. Each IDM topic view. is mapped on a number of content classes (and relative pages) equivalent to the number of its dialog acts. Content classes are then enriched by a fine-grain definition of data slots which can be used as input for setting up the editorial chain (R13). Content classes contain a Boolean tagged value called entry point whose purpose is to specify whether that portion of the content can be used as starting point for exploring the entity information. Following our framework guidelines, such pages should include, at least, a minimal set of entity attributes that can be used by the user to understand what the entity instance talks about. Information organization, kind of navigation and entry points are concerns usually discussed with communication and usability experts <> Standard Page <> (R5,R16) taking in mind that when users navigate these Standard Page pages are clearly interested in improving their knowledge about the entity. Publishing Unit Type Name <> Standard Page Figure 2: Some excerpts from the Template view (a) (b) Figure 3: a) Structural view for the "Print" topic; Figure 4: Association views In the Association View designers specify how to pass from a discovered interesting topic to a related one (relevant relation in IDM). For this part of the user experience design, it is very important to carefully decide In the Access Path View designers have to specify the how to enable users to understand which of the possible navigational paths enabling users find interesting objects. target topic instances they are interested in. This aspect is For example in an e-commerce web site like Amazon, called, in the HCI community, information scent and is examples of predefined navigational paths are the books one of the factors strongly impacting the application categories which organize books by topic and sub-topics, usability. In E-WOOD we use to this purpose the but also a “Bestsellers” or personalized “Book <> (Figure 4 (a) and (b)). In (a) recommendations” and so forth. The purpose of these these information are integrated in all the “Print”’s pages pages is supporting users while exploring the proposed (it is aggregated to the abstract page representing the site content organization improving the user common features of all the structural pages) and understanding. Such pages should help users in deciding <>s connect these pages to the target how to move around possible choices enabling them one. In (b), the “Technique” page includes a <> exploring in depth the navigational path. In each path association which brings to new page “Prints of the step, possible users should choice how to refine the set of Technique” whose only purpose is to list the possible possible interesting kinds of topics or, in case of terminal target “Prints” which have been produced using the steps, which topic instance is worth to be examined source “Technique”. From this page a <> point to the destination pages. The <> primitive includes a tagged value that specifies the of topics” concept. In the example in Figure 5, the E- association multiplicity in terms of min, max and expected WOOD model of a one-step path enabling users access to values. In particular, the expected multiplicity provides a the most famous Munch’s prints is depicted. The access useful indication about how many instances of the target structure is available in the page modelled by the entity are in general addressed by the association. This <> “MasterPieces”. Here users can find an information can be used for taking some design choices “Introduction” to the collection and a list of prints. For like attaching the <> to the source each print a short preview is provided by means of three page or defining a new ad-hoc page (the two possible print’s attributes: “Small picture”, “Name” and “Print’s solutions shown above). Having max or expected data”. This information is modelled by the <> class aggregated to the <> the <> to the source pages, while “MasterPieces”. By means of these previews users can in case the expected number grows up, we suggest the choice which print they are interested in and navigate to it other solution. by means of the <> “Index”. Once users land to the choose print page, he can also move back and forward among the collection members (other MasterPieces prints). To model this, in this diagram the <> “Next/Previous Masterpieces” is added to the abstract <> “Print”. It represents the E-WOOD model for a case of guided tour pattern. It operate identifying which are the potential stakeholder is important to be noticed as these links are only available types and their goals and requirements. On the basis of in the context of this collection, so if the user reaches a this analysis, instead of inventing new design methods, print by other access mechanisms (other access paths, we have reused or extended the best, in our view, of associations, search engine, etc.) he cannot move among current approaches both in the academic and industrial prints contained in this collection. Access paths usually communities. The approach covers both analysis and define a navigational context, in that new content and design activities and consists of four phases, executed in links can be added to entity pages when accessed by a an iterative and incremental way. Defining it, we put in specific access path. practice most of our experience achieved working on the field with conceptual design methods for Web <> Standard Page applications [3], [27]. This paper has focused on our proposal for the user experience design, namely E-EWOOD. It is a UML profile that enables to specify the user experience in terms of pages and links but that embodies semantics enabling designers reason together with different stakeholder types about crucial concerns heavily impacting the application usability and effectiveness, that is, its perceived quality. Moreover, due to its definition, E-WOOD can exploit existing commercial tools for supporting the model drawing and perfectly match an existing and already affirmed, among practitioners, method for designing the software modules of a WEB application. The approach has been applied in several design and Figure 5: An excerpt of the Access Path View for reverse design case studies and industrial projects. Its the Masterpieces page transferability in industrial environments has been also experimented in two projects in cooperation with two Besides these main views, we also propose a Italian software companies (in the context of the Navigational Map View that summarizes the main GENESIS-D projects [27]). From these first experiences navigational features of the entire application. Our a number of considerations can be drawn out. Compared guidelines suggest how to choice candidate pages, among to W2000, we have noticed a significant decrease of the the overall defined in other views, to be included in the required learning time. Practitioners were able to use both navigational map. Switching from the navigational map to methods after a short but intensive course (2-3 days). the detailed design of contained screens it allows R12 They drew IDM models using paper and pencil, while being accomplished. Finally, the Operation/Process View used VISIO™ stencils for designing E-WOOD and WAE complements the previous views adding to pages models. In all the achieved experiences, we spent, with E- concerns related to operations invocation (e.g. “add to WOOD, on the average one third of the time required by shopping cart”) and defining pages involved in business W2000 to produce the same level of detail in the processes execution. Lack of space prevents us to specification of several application designs. This has to be describe this complementary view. summed to the time required for manually drawing IDM models which is, however, very affordable. Compared to 6. Conclusions UX, we obtained several advantages mostly due to the introduced semantics. Models are more expressive and We all know that the existing literature about easy to be revisited; the framing strategy enables a conceptual methods addressing the design of Web suitable organization of the overall design activities; a applications is (over)abundant. On the other hand, we number of well know design patterns, developed in the also know that a remarkable gap between theory and web engineering community, can be exploited to produce practice still exists [14, 15, 16],[3]. Which are the reasons quality applications. behind the poor acceptance by the practitioners? Starting Finally, concerning future works, we are working in from these considerations, in this paper we have claimed two main directions: (i) enriching the framework with that a possible reason might be that existing proposals guidelines and patterns for fronting specific aspects like have failed short by neglecting stakeholders’ goals and the multi-channel design and the mapping of E-WOOD expectations. In this light and focusing on the models upon the most known software architectures development of WEB applications, we have carefully (JAVA and MS.NET); (ii) Concerning the second point, analyzed the environment where a design method should as said above, one of the reasons which guided our decisions in defining methods in phase 3 and in adopting International Wolrd Wide Web Conference, WAE in phase 4 has been the reuse of commercial CASE Brisbane, 1997. tools already widespread in the industrial environment 10. Ceri, S., Fraternali, P., Bongio, A. et al., Designing like MS Visio® and IBM Rational Rose®. So doing, Data-intensive Web Applications, Morgan companies already accustomed to these tools can easily Kaufmann, 2002. step towards the adoption of our methods only adding a 11. Hennicker, R., Koch, N. A UML-based Methodology few stereotypes and our views strategy. Existing for Hypermedia Design. In volume 1939 of LN in commercial tools do not support the design of models of Computer Science, York, England, October 2000. phase 1 and 2. In order to improve the coverage of the Springer Verlag. whole approach with proper tools, we are already 12. Conallen, J. Building Web Applications with UML working for defining an ECLIPSE [30] add-in which (s.e.), Addison-Wesley, 2003. should include, besides all the modelling primitives, also 13. Gómez, J., Cachero, C., Pastor, O., Conceptual a set of semi-automatic rules for passing from a phase to Modeling of Device-Independent Web Applications, the next one, some tracking mechanism among phases IEEE Multimedia, April-June 2001 (Vol. 8, No. 2). and a loose consistency check option. For example, the 14. Barry and Lang: A Survey of Multimedia and Web consistency manager could check if the several user views Development Techniques and Methodology Usage. can be actually derived by the unique database and if the IEEE Multimedia, April-June, 2001 logic perceived by users when executing processes is 15. C. Britton et al.: A Survey of Current Practice in the compatible with the business processes implemented at Development of Multimedia Systems. Information the logic level. and Software Technology, vol. 39, no. 10, 1997, pp. 695-705. 10. References 16. B. Fitzgerald: An Investigation of the Use of Systems Development Methodologies in Practice. Fourth 1. Bolchini, D., Paolini, P. Goal-Driven Requirements European Conf. Information Systems, Lisbon, Analysis for Hypermedia-intensive Web Portugal, 1996 Applications. Requirements Engineering Journal, 17. OMG, Object Management Group: UML 2001: a Special Issue RE03, Springer 2003. Standardization Odyssey, October 1999. 2. Grady Booch. Language Once Was Key – Now It's 18. OMG, Object Management Group: Unified Modeling Design. Windows Server System Magazine. February Language (UML), version 1.5 (formal/04-04-04) 2003 Issue. 19. SDTimes Magazine. UML Adoption Making Strong 3. Garzotto, F., Perrone, V. On the Acceptability of Progress. August 15, 2004 Conceptual Design Models for Web Applications. In 20. Conallen, J., Modeling Web Application Pro. of ER’03 Workshops, (IWCMQ’03), October Architectures with UML. Communications of the 2003 , Chicago, USA. ACM, 1999 4. Mylopoulos, J., Information Modeling in the Time of 21. Kaindl, H., et al. Requirements Engineering and the Revolution. Information Systems, Vol. 23, 1998 Technology Transfer: Obstacles, Incentives and 5. Engels, G., Groenewegen, L. Object-oriented Improvement Agenda. Requirement Engineering modeling: a roadmap. In A. Finkelstein, editor, "The journal 7(3): 113-123 (2002) Future of Software Engineering", Special Volume 22. Jackson, M., The World and the Machine. Keynote published in conjunction with ICSE 2000, 2000. Address at ICSE-17; in Proceedings of ICSE-17; 6. Garzotto F., Paolini P. HDM- A Model-Based ACM Press, 1995. Approach to Hypertext Application Design. In ACM 23. Yu, E., Modeling Organizations for Information Transactions on Information Systems, Vol. 11, No1 Systems Requirements Engineering. Proc. of the 1st January 1993, p1-26. Int. Symposium on Requirements Engineering, 7. Isakowitz T, Stohr EA., Balasubramanian P. (1995) RE'93, San Jose, USA, 1993. RMM: A design Methodology for Structured 24. Bolchini, D., Paolini, P., Dialogue-based Design for Hypermedia Design. In Communications of the ACM Multichannel Interactions. In Proc. of IWWOST04 Vol.38 No8 August pp 34-44. workshop held in conjunction with ICWE’04, 8. Schwabe, D., Rossi, G. An Object Oriented Approach München, Germany. to Web-Based Application Design. Theory and 25. Baresi, L., Garzotto, F., Paolini, P. From Web Sites Practice of Object Systems, 4 (4), J. Wiley, 1998 to Web Applications: New Issues for Conceptual 9. De Troyer, O., Leune, C., WSDM: a User-Centered Modelling. In Proc. WWW Conceptual Modeling Design Method for Web Sites, in Proceedings 7th Conf, October, 2000. 26. 24. Baresi L., Garzotto, F., Paolini, P., Perrone, V. 30. Balconi, A., Mainetti, L., Paolini, P. Perrone, V.: Hypermedia and Operation Design. Deliverable D7, GENESIS-D: Formal specification of the conceptual European IST project UWA, www.uwa-project.org and logical models. Politecnico of Milan, deliverable 27. Perrone, V., Bolchini, D., Designing Communication D2.2, project Genesis-D (October 2004). Available Intensive Web Applications: Experience and Lessons on from a Real Case. In proc. of WER 2004, 9-10 Dec. https://www.elet.polimi.it/upload/perrone/D22Modell 2004 - Tandil, Argentina. To appear in a special issue oConcettuale.pdf in Italian. on Req. Engineering of the Journal of Computer 31. Eclipse consortium. Eclipse – Home page. Science & Technology, autumn 2005. www.eclipse.org/. 28. Ghezzi, C., Jazayeri, M., Mandrioli, D.: Fundamentals of Software Engineering. Prentice- Hall, 1991. 29. Gamma, E, Helm, R., Johnson, R. and Vlissides, J. Design Patterns: Elements of Reusable Software Architec-ture. Addison-Wesley, 1995.