=Paper=
{{Paper
|id=Vol-153/paper-2
|storemode=property
|title=A UML Extension for Designing Usable User Experiences for Web Applications
|pdfUrl=https://ceur-ws.org/Vol-153/paper2.pdf
|volume=Vol-153
|dblpUrl=https://dblp.org/rec/conf/caise/PerroneMP05
}}
==A UML Extension for Designing Usable User Experiences for Web Applications==
https://ceur-ws.org/Vol-153/paper2.pdf
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.