A Model-Based Method for Seamless Web and Mobile Experience Marco Brambilla Andrea Mauri Dipartimento di Elettronica, Informazione e Bioingegneria (DEIB) Politecnico di Milano, Italy firstname.lastname@polimi.it Mirco Franzago Henry Muccini Department of Information Engineering, Computer Science and Mathematics (DISIM) University of L’aquila, Italy firstname.lastname@univaq.it Abstract Consumer-centered software applications nowadays are re- quired to be available both as mobile and desktop versions. However, the app design is frequently made only for one of the two (i.e., mobile first or web first) while missing an ap- propriate design for the other (which, in turn, simply mimics the interaction of the first one). This results into poor quality of the interaction on one or the other platform. Current solu- tions would require different designs, to be realized through different design methods and tools, and that may require to double development and maintenance costs. In order to mitigate such an issue, this paper proposes a novel approach that supports the design of both web and mo- bile applications at once. Starting from a unique requirement and business specification, where web– and mobile–specific aspects are captured through tagging, we derive a platform- independent design of the system specified in IFML. This model is subsequently refined and detailed for the two plat- forms, and used to automatically generate both the web and mobile versions. If more precise interactions are needed for the mobile part, a blending with MobML, a mobile-specific modeling language, is devised. Full traceability of the rela- tions between artifacts is granted. Categories and Subject Descriptors D.2.1 [Requirements/ Specifications]: Languages; D.2.2 [Design Tools and Tech- niques]; D.3.4 [Processors]: Code generation General Terms Design, Languages Keywords mobile applications, software development, multi-platform applications, software modeling, model- driven development, MDE 1. Introduction Consumer-centered software applications nowadays are ex- pected to properly work across multiple devices, both mobile and desktop, through a web browser, or a native app [5, 12]. Users have the expectations to run the same applications (e.g., weather forecasts, messaging apps, document editors, work planners) while in their offices, as well on the move. By following this market needs, developers are more and more producing both web and mobile software. However, and quite frequently, an application to be used on a mobile device have different use cases, presentations, interaction flows, and features with respect to the same application run- ning on desktop computers. While this shall call for different designs (that properly takes into account the nature of the developed application and of the device), most frequently mobile–first or desktop–first design is realized, while leaving the other view a rough draft of the former. As a result, several web and mobile apps expose a user interface that is not opti- mized for the specific features of the device they are thought for. This results in a terrible user experience for customers, who in turn typically refuse to interact with the application, due to the poor quality of the interaction on one or the other platform. Current solutions would require different designs, to be realized through different design methods and tools, and that may require to double the development and maintenance costs. Furthermore the various versions of an application are usu- ally developed by different teams, hence it can be hard to keep track of the evolution of the features, resulting in a inconsis- tent user experience. The evolution should impact coherently on all the platforms. Current solutions require multiple de- velopment teams that use different technologies and design methods. This not only may lead to the aforementioned issues but also it increases the development and maintenance cost. Therefore, we see the need of providing a unique design pro- cess for generating appropriate UIs through a novel approach that supports the design of both web and mobile applications at once, by considering interaction requirements derived from Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from Permissions@acm.org. Mobile!’16, October 31, 2016, Amsterdam, Netherlands c  2016 ACM. 978-1-4503-4643-6/16/10...$15.00 http://dx.doi.org/10.1145/3001854.3001857 33