=Paper=
{{Paper
|id=Vol-2019/flexmde_9
|storemode=property
|title=Enhancing Flexibility in User Interaction Modeling by Adding Design Uncertainty to IFML
|pdfUrl=https://ceur-ws.org/Vol-2019/flexmde_9.pdf
|volume=Vol-2019
|authors=Marco Brambilla,Romina Eramo,Alfonso Pierantonio,Gianni Rosa,Eric Umuhoza
|dblpUrl=https://dblp.org/rec/conf/models/0001EPRU17
}}
==Enhancing Flexibility in User Interaction Modeling by Adding Design Uncertainty to IFML==
https://ceur-ws.org/Vol-2019/flexmde_9.pdf
Enhancing Flexibility in User Interaction Modeling
by Adding Design Uncertainty to IFML
Marco Brambilla∗ Romina Eramo† Alfonso Pierantonio† Gianni Rosa† Eric Umuhoza†
∗ Department of Electronics, Information and Bioengineering. Politecnico di Milano, Italy
Email:{name.surname}@polimi.it
† Department of Information Engineering, Computer Science and Mathematics. Università degli Studi dell’Aquila, Italy
Email:{name.surname}@univaq.it
Abstract—User interaction (UI) design is an important task of the designed application, as well as to the success of the
in the development of software applications: in fact the success underlying business.
of the application itself, as well as the business behind it, is
strongly related to the user experience. Unfortunately, designers The Interaction Flow Modeling Language (IFML) [8], [7],
can obtain realistic feedback from users about their actual [10] is designed for expressing the content, user interaction
expectations only at runtime, by analyzing the user behavior
over the final application. and control behavior of software applications. Unfortunately,
A possible solution to this problem is to integrate the user ‘the proof of the pudding is in the eating’: designers are
feedback in the design phase, for example through A/B split given relevant feedback about the actual expectations only
testing, which allows to test the effectiveness of different variants by analyzing the user behavior at runtime. Hence, some a-
of the application interface. However, so far A/B testing has posteriori adaptations of the UI could be needed for meeting
been addressed only through manual coding and a-posteriori
refactoring based on the analysis of the results. Model-driven
the application goals. A way to address such difficulties
development may enable the integration of such techniques with consists in reducing the gap between UI design and user
runtime log analysis and design-time application specifications. experience by involving users in the design phase, for example
Unfortunately, creating new alternatives in the model usually through A/B split testing [24], in which different end-users
corresponds to a combinatorial explosion of the application examine different alternatives, and the most effective ones are
versions, making the testing hard to manage.
selected based on statistical analysis of user behavior.
In this paper, we propose a model-driven approach that
enables to denote design alternatives in a compact way by
This can be viewed as a form of bound design uncer-
adopting a model for uncertainty, integrated with a model for
the user interaction design. Thus, the multiple possibilities can be tainty [14]: while a number of alternative solutions have been
represented by a single user interaction model (i.e., IFML model) contemplated, the designer does not hold enough information
from which a single software application will be generated, or knowledge to decide at this stage of the process which is
including all the variations that need to be evaluated. Uncertainty the right one. A trivial strategy would consist in creating a
can then be solved by integrating the results of user behavior
different IFML model for each alternative to be evaluated.
analysis (for instance, over the application logs of a web site).
Thanks to this, our approach considerably reduces the costs of However, this implies various disadvantages: first, a small
the user interaction optimization. set of alternatives in the model usually corresponds to a
combinatorial explosion of the application versions, making
I. I NTRODUCTION the testing hard to manage due to the difficulty to precisely
back propagate user feedback to the right model. Second,
Over the last decade and half, modeling techniques have by designing independent models the designer misses all the
been leveraged to cover requirement specification [3], [2], logics that covers the decisions on which alternatives to show
design [28], and verification/validation (e.g., [18]) of software to which user, which runtime data to collect, and what kind of
artifacts. In the context of user interaction (UI) modeling, analysis to run on the user behaviour to decide which variant
model-driven techniques have been proposed (see [6], [5]) for should be preferred.
a wide range of tasks, including model checking, full code
generation of the designed application, runtime user tracking In this paper, we propose an extension to the IFML model-
and integration with design-time models. ing notation, which leverages uncertainty to a first-class status.
One of the core aspects of UI design with respect to other Uncertainty-related decisions are documented in an intentional
system perspectives, is that designers must aim at guaranteeing manner by means of models with uncertainty, which permit the
a better user experience (e.g., the user expects to find the designer to make transitional decisions to be either confirmed
desired information in the expected place and through intuitive or undone in a traceable way once enough data analytics about
navigation paths), as this is key to the acceptance and adoption user behavior are available.
The paper is organized as follows: Sect. II discusses the
background on the IFML language. In Sect. III, an example
clarifies the addressed problem. The extension to uncertainty
for IFML is presented in Sect. IV. Finally, related work is
discussed in Sect. V and conclusions are drawn in Sect. VI.
(a)
«ParameterBindingGroup»
II. BACKGROUND : IFML Title AlbumTitle
«ParameterBindingGroup»
SelectedAlbum AnAlbum
Year AlbumYear
The Interaction Flow Modeling Language (IFML) is de-
«Window» AlbumSearch «Window» Albums «Window» Album
signed for expressing the content, user interaction and control
behavior of the front-end of software applications. Its meta- «Form» «List» «Details»
Album Album Album
model uses the basic data types from the UML metamodel, Search List Details
specializes a number of UML metaclasses as the basis for
IFML metaclasses, and presumes that the IFML Domain (b)
Model is represented in UML. Fig. 1: IFML Example: (a) a piece of user interface and (b)
An IFML model supports the following design per- the corresponding IFML model. The user enters data into an
spectives: The view structure specification, which consists input form and submits; the submission event causes a distinct
of the definition of view containers, their nesting rela- ViewContainer to appear with a list of matching albums; the
tionships, their visibility, and their reachability; The view selection of an item in the list causes the display of the
content specification, which consists of the definition of corresponding details in a third ViewContainer.
ViewComponents, i.e., content and data entry elements con-
tained within ViewContainers; The events specification,
which consists of the definition of Events that may affect III. P ROBLEM S TATEMENT
the state of the user interface. Events can be produced by
the user’s interaction, by the application, or by an external An interaction model is a design model that describes the
system; The event transition specification, which consists front-end of a software application with the aim to bind
of the definition of the effect of an Event on the user the contents together in a way that supports the conceptual
interface; The parameter binding specification, which consists models of its target users. Thus, interaction design decisions
of the definition of the input-output dependencies between have to meet customer preferences. As said, since testing and
ViewComponents and between ViewComponents and understanding the user behavior will be possible when the
Actions; and The reference to Actions triggered by the application is running, the designer could be uncertain about
user’s events. The effect of an Event is represented by an the better strategy to adopt in the design of user interaction.
InteractionFlow connection, which connects the event This can be translated in a set of design variants describing
to the ViewContainer or ViewComponent affected by slightly different user interactions. Such design alternatives
the Event. The InteractionFlow expresses a change of have to be compared and evaluated in terms of user acceptance,
state of the user interface: the occurrence of the event causes a usability, and effectiveness from a business perspective (e.g.,
transition of state that produces a change in the user interface. leading to more or less transactions performed by a user).
IFML concepts can be stereotyped to describe more Given such issues, we aim at finding the most compact and
precise behaviors. For instance, one could define specific efficient way for describing these variants, so as to:
stereotypes for describing web pages (a specific kind of
ViewContainer); forms, lists and details (specific kinds • maximize traceability of all the phases of the develop-
of ViewComponent); and submission or selection events. ment;
• minimize the risk of inconsistency across the variants;
By exploiting this extensibility feature, we defined custom
• integrate the generation of the code for the management
extensions of IFML for covering Web [1] and mobile [9], [25]
applications. of the different variants and the selection of the appro-
priate variant to be shown to the different users;
Figure 1(a) shows a piece of a user interface that allows
• simplify the integration of the modeling of the variant
to search an album by title or year, visualize a list retrieved
with the runtime data collection describing the user
albums, and see details of a selected album. Figure 1(b)
behaviour across the variants;
shows the corresponding IFML model which consists of: (i) a
• enable integration of statistical analysis of runtime data
ViewContainer AlbumSearch which contains a specific
and final selection of the best variants with no additional
ViewComponent, a Form named Album Search. The form is
cost of development.
associated with a submission Event; (ii) a ViewContainer
Albums which contains a ViewComponent, List named In order to make the problem statement more concrete, we
Album List; and (iii) a ViewContainer, Album containing now describe a simple running example which will be used
a ViewComponent, Details named Album Details. along the whole discussion.
Fig. 2: Version 1 of Book Details. The details of a selected
book are displayed along with two lits: comments and authors
of the selected book.
A. Example: Bookstore
Fig. 3: Version 2 of Book Details. The details of a selected
Bookstore is a kind of e-commerce web application for book are displayed along with a list of its comments. The list
book selling. The books are organized in categories. A book is of authors is placed in a new page, Authors, reachable from
associated with its authors, comments, and editorial reviews. Book Details page via a new event, authors.
The main functionalities of the applications include: (i) Book
searching which allows the user to search for a book, and vi-
by means of a model-to-model transformation M2UM written in
sualize its details (including the book’s authors and comments
ATL1 . It takes as input a metamodel M conforming to Ecore2
related to the selected book); (ii) Book review which allows
and generates the corresponding metamodel with uncertainty
the user to write a comment on a book; and (iii) purchasing,
UM. At this point, modelers may specify their models with
which allows to buy a desired book.
uncertainty conform to UM. An um model is semantically
Figure 2 shows a piece of the user interaction model
equivalent to a set of models m1 , ..., mn conforms to M (i.e.,
allowing the user to visualize details of a selected book, in
all the candidate solution models represented in um).
Book Details Page. The details of the Book are displayed
The next sections illustrate in detail the uncertainty metamodel
along with two lists: a list of comments and another one for
and how it can be generated and utilized.
the authors of the selected book. The user can access Author
page to see detailedc information (including other books he A. Uncertainty IFML Metamodel
co-authored) of the selected author. In Figure 3, we show an The uncertainty metamodel U M is obtained by extending a
alternative way to display the same content as in Figure 3. The base metamodel M with specific connectives able to represent
UI in Figure 3 is obtained from the one in Figure 2 through the multiple outcomes of a transformation. These connectives
the following actions: denote the uncertainty points where alternative model elements
• removal of a List of authors from the Page Book are attached. Let us consider the IFML language presented in
Details Sec. II. 3 . For the sake of brevity, we provide a restricted
• addition of a new Page, Authors, containing the list of version of the IFML metamodel that allows us to model the
authors of a selected book case study discussed in Sect. III.
• addition of a new event, called authors, allowing the The uncertainty metamodel UIFML is depicted in Fig. 4 as
user to visualize the List of authors of the selected book an extension of the considered restricted IFML. In particular,
To decide which version of the UI to keep for the final the uncertainty metamodel UIFML is generated extending the
implementation, one can conduct the experiments in which base metamodel as follows:
end-users are directly asked to provide their preferences on 1) the abstract metaclass TracedClass with references
these two alternatives. However, little new alternatives in the include and exclude is added;
model usually correspond to a combinatorial explosion of the 2) the metaclass OperatorType that enumerates the logical
application versions, making the testing hard to manage. operator literals AND, OR and XOR is added;
3) the abstract metaclass UClass, enabling the representa-
IV. R EPRESENTING U NCERTAINTY IN IFML tion of uncertain elements, is added. It has the attributes
Without dedicated support, working with uncertainty means name; the attribute uType of type OperatorType for
that modelers handle each alternative model separately. In specifying the logical operator connecting alternatives;
order to reduce the burden of managing a collection of models, 4) for each metaclass C in base IFML, such that it does not
we consider uncertainty as a first-class concern in the design, specialize other metaclasses:
implementation, and deployment of those systems [17]. To this 1 ATL Transformation Language: https://eclipse.org/atl/
end, the metamodel-independent approach discussed in [13] 2 EMF Ecore: http://www.eclipse.org/modeling/emf/
able to manage a set of variants by means of a model with 3 For reason of readability, we omit the description of the language. The
uncertainty is exploited. The metamodel generation is realized interested reader may refer to the OMG specification
Fig. 4: IFML Uncertainty metamodel
4.1) a corresponding abstract metaclass IC is created mentioned approach, the model in Fig. 2 and Fig. 3 can be
such that C specializes IC. Such interface allows to represented by means of a unique model with uncertainty
choose among a certain element or an uncertain one depicted in Fig. 5. The model is composed of a common part
4.2) a metaclass UC that extends IC and UClass is added. and an uncertain part denoted by dashed lines.
It specifies an association variants of type C and
multiplicity 1..* that relates the alternative elements In particular, according to the example in Sect. III we have
to the uncertainty point of type C and an association two Uncertainty Points called respectively V1 and V2. Each
uPoints of type UC and multiplicity 0..* enabling to uncertainty point is composed of a set of elements that are in
nest uncertainty points. common with the chosen version. For instance, the uncertainty
4.3) the metaclass C is generalized by TracedClass, point V1 includes: a ViewComponent, List of Authors; an
The main advantage of such representation technique is that Event allowing to see the details of the selected author; and
the uncertainty represented by a set of alternative models is a Navigation Flow from Book Details Page to the Author
leveraged to a first-class status. Hence, a complete set of mod- Page (containing the details of a selected author). While
els can therefore be manipulated as whole, for instance with the uncertainty point V2 includes: Event named authors,
an automated transformation (as done for instance in [16]), which allows to access the list of authors of the selected
without iterating over each individual in the set. book; ViewContainer, a page named Authors. It contains
a ViewComponent named Authors, displaying the list of
B. IFML Model with Uncertainty authors of the selected book; a Navigation Flow from Book
At this point, modelers may specify their user interaction Details Page to Authors Page; An Event named details,
models with uncertainty. In particular, by using the afore- leading to detailed information of the selected author; and a
Fig. 5: IFML Uncertainty Model
Navigation Flow from the page of authors to the page ment has been studied in many works, often with the intention
named Author, which contains the details selected author. to express and represent it in models. In [15], the notion of
partial model is introduced in order to let the designer specify
V. R ELATED W ORK uncertain information by means of a base model enriched
a) Conceptual Modeling of WebApplications: This work with annotations and first-order logic. Model transformation
is widely related to a large corpus of researches that address techniques typically operate under the assumption that models
conceptual modeling of Web applications. Among them we do not contain uncertainty. Nevertheless, the work in [16]
can cite: (i) Araneus [20], a modeling proposal for Web proposes a technique for adapting existing model transforma-
applications that allows one to represent the hypertext organi- tions in order to deal with models containing uncertainty. In
zation, with nested relations and inter-page links; (ii) W2000, particular, a lifting operation permits to adapt unidirectional
formerly HDM [4], which introduced a notion of model-based transformations for being used over models with uncertainty
design, clearly separating the activities of authoring in-the- preserving their original behavior. In [21] a formal approach
large (hypertext schema design) and authoring in-the-small called MAVO is proposed and applied to design models in
(page and content production); (iii) OO-HDM [23], a UML- order to express and allow automated reasoning in presence
based approach for modeling and implementing Web applica- of uncertainty.
tion interfaces; (iv) Hera [26], a model-driven design approach
VI. C ONCLUSION AND F UTURE W ORK
and specification framework focusing on the development of
context-dependent or personalized Web information system; In this paper we proposed a model-driven approach that
(v) Web Application Extension for UML (WAE) [11], a UML enables to denote design alternatives in a compact way by
extension for describing Web application interfaces and the adopting a model for uncertainty, integrated with a model
client-server interactions; (vi) WebDSL [27], a domain-specific for the user interaction design. In this way, the multiple
language consisting of a core language with constructs to possibilities are represented in a single user interaction model
define entities, pages and business logic, plus extensions. from which a single software application can be generated,
b) Design Uncertainty: Uncertainty is ubiquitous within including all the variations that need to be evaluated.
contexts such as requirements engineering [12], software pro- As future work, we plan to provide a visual editor for
cesses [19] and adaptive systems [22]. Uncertainty manage- the specification of models with uncertainty with graphical
and concrete syntaxes depending on the tool availability for [11] J. Conallen. Building Web applications with UML. Addison Wesley,
the considered modeling language. In our case, the adopted 2002.
syntaxes for specifying models do not affect the overall [12] C. Ebert and J. D. Man. Requirements uncertainty: influencing factors
and concrete improvements. In Procs. of ICSE, pages 553–560. ACM
approach since models are manipulated by considering their Press, 2005.
abstract syntaxes. Whereas, a specialized visualization of the [13] R. Eramo, A. Pierantonio, and G. Rosa. Managing uncertainty in
uncertainty will allow the modeler to benefit from hiding, bidirectional model transformations. In SLE 2015, pages 49–58, 2015.
partitioning, constraining, and abstracting while traversing [14] M. Famelis and M. Chechik. Managing design-time uncertainty. Soft-
an uncertain model. Furthermore, we plan to manage the ware & Systems Modeling, 54(9):69, Mar. 2017.
uncertainty by integrating the proposed approach with other [15] M. Famelis, R. Salay, and M. Chechik. Partial models: Towards
approaches for user behavior analysis like the one proposed modeling and reasoning with uncertainty. In ICSE, pages 573–583,
2012.
in [6].
[16] M. Famelis, R. Salay, A. D. Sandro, and M. Chechik. Transformation of
models containing uncertainty. In MoDELS’13, pages 673–689, 2013.
R EFERENCES
[17] D. Garlan. Software engineering in an uncertain world. In Proceedings
[1] R. Acerbis, A. Bongio, M. Brambilla, and S. Butti. Model-Driven of the FSE/SDP workshop on Future of software engineering research,
Development Based on OMG’s IFML with WebRatio Web and Mobile pages 125–128. ACM, 2010.
Platform. In Proceedings of ICWE 2015, pages 605–608, 2015.
[2] Ameller and E. Al. Handling non-functional requirements in Model- [18] H. Giese, M. Tichy, S. Burmester, and W. Schäfer. Towards the
Driven Development - An ongoing industrial survey. RE, pages 208– compositional verification of real-time UML designs. ACM SIGSOFT,
213, 2015. 28(5):38, 2003.
[3] D. Amyot and G. Mussbacher. User requirements notation: The first ten [19] H. Ibrahim, B. H. Far, A. Eberlein, and Y. Daradkeh. Uncertainty
years, the next ten years. Journal of Software, 6(5):747–768, July 2011. management in software engineering: Past, present, and future. In
[4] L. Baresi, F. Garzotto, P. Paolini, and P. Paolini. From web sites to web CCECE, pages 7–12. IEEE, 2009.
applications: New issues for conceptual modeling. In ER (Workshops), [21] R. Salay, M. Chechik, J. Horkoff, and A. D. Sandro. Managing
pages 89–100, 2000. requirements uncertainty with partial models. Requir. Eng., 18(2):107–
[5] C. Bernaschina, M. Brambilla, T. Koka, A. Mauri, and E. Umuhoza. 128, 2013.
Integrating modeling languages and web logs for enhanced user behavior
[22] P. Sawyer, N. Bencomo, J. Whittle, E. Letier, and A. Finkelstein.
analytics. In Proceedings of the 26th International Conference on World
Requirements-aware systems: A research agenda for re for self-adaptive
Wide Web Companion, WWW ’17 Companion, pages 171–175, 2017.
systems.
[6] C. Bernaschina, M. Brambilla, A. Mauri, and E. Umuhoza. A big data
analysis framework for model-based web user behavior analytics. In [23] D. Schwabe, G. Rossi, and G. Rossi. The object-oriented hypermedia
International Conference on Web Engineering, pages 98–114, 2017. design model. pages 45–46, 1995.
[7] M. Brambilla and P. Fraternali. Interaction Flow Modeling Language: [24] M. Speicher, A. Both, and M. Gaedke. Ensuring Web Interface Quality
Model-driven UI engineering of web and mobile apps with IFML. through Usability-Based Split Testing. In ICWE 2014.
Morgan Kaufmann, 2014.
[8] M. Brambilla, P. Fraternali, et al. The interaction flow modeling lan- [25] E. Umuhoza, H. Ed-douibi, M. Brambilla, J. Cabot, and A. Bongio.
guage (IFML). Technical report, version 1.0., The Object Management Automatic code generation for cross-platform, multi-device mobile apps:
Group (OMG), http://www.ifml.org. Some reflections from an industrial experience. In Proceedings of the 3rd
[9] M. Brambilla, A. Mauri, and E. Umuhoza. Extending the interaction International Workshop on Mobile Development Lifecycle, MobileDeLi
flow modeling language (ifml) for model driven development of mobile 2015, pages 37–44, New York, NY, USA, 2015. ACM.
applications front end. In International Conference on Mobile Web and [26] R. Vdovják, F. Frăsincar, G.-J. Houben, and P. Barna. Engineering Se-
Information Systems, pages 176–191. Springer, 2014. mantic Web Information Systems in Hera. Journal of Web Engineering,
[10] M. Brambilla, E. Umuhoza, and R. Acerbis. Model-driven development 1(1-2):3–26, 2003.
of user interfaces for iot systems via domain-specific components and [27] E. Visser. WebDSL: A case study in domain-specific language engi-
patterns. Journal of Internet Services and Applications, 8(1):14, 2017. neering. In GTTSE 2007, 2008.
[20] G. Mecca, P. Merialdo, P. Atzeni, V. Crescenzi, and V. Crescenzi. The
(short) araneus guide to web-site development. In WebDB, pages 13–18, [28] M. Voelter and E. al. DSL engineering: Designing, implementing and
1999. using domain-specific languages. dslbook. org, 2013.