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.