AME: an Adaptive Modelling Environmentas a ... - ACM Digital Library

Demonstration

EICS'14, June 17–20, 2014, Rome, Italy

AME: an Adaptive Modelling Environment as a Collaborative Modelling Tool Alfonso Garc´ıa Frey, Jean-S´ebastien Sottet and Alain Vagner Public Research Center Henri Tudor 29 Avenue John F. Kennedy L-1855 Luxembourg {alfonso.garcia, jean-sebastien.sottet, alain.vagner}@tudor.lu process are related to each other and, in consequence, provide a better comprehension of the UI development. Indeed, UI development teams are made of different stakeholder profiles, like usability specialists, designers, functional analysts and developers; suboptimal solutions often arise from communication and collaboration problems among the team.

ABSTRACT

The development of User Interfaces (UIs) is a complex task. Researches shown that one of the reasons is the lack of integrated views that often forces developers to implement suboptimal solutions. These integrated views refer to (1) the artifacts that are manipulated by the stakeholders during the UI development process and (2) how these artifacts relate to each other. To overcome the lack of integrated views in the context of model-based UI development this paper introduces AMEs, Adaptive Modelling Environments that support UI development by providing explicit representations of both the artifacts and their relations. A first prototype is depicted in a case study and illustrated with a video. Details of the architecture are provided.

The integrated views refer to (1) the artifacts that are manipulated by the stakeholders and (2) how these artifacts are related to each other. In the context of model-based UI development these artifacts are of very different natures. Examples of them are ergonomic criteria (e.g., cognitive workload, guidance) managed by usability experts, widgets and wireframes conceived by designers and functions programmed by the developers to implement the application behavior.

Author Keywords

Most of the existing tools for UI development do not take into account the lack of integrated views neither for individual work nor for collaborative UI development. To this end, this paper provides an overview of AMEs, Adaptive Modelling Environments that aim at supporting both individual and collaborative work in order to improve UI development. AMEs are model-based for a number of reasons which are explained in the next section along with the related work. Afterwards, a first prototype of an AME is described through a case study. Details of the architecture are provided before the final conclusion and perspectives.

Human-Computer Interaction; Model-Driven Development; Multi-Stakeholders Engineering; User Interfaces; Tools; IDE; Collaborative Modelling; ACM Classification Keywords

D.2.2 Software Engineering: Design Tools and Techniques; H.5.2 Information Interfaces & presentation: User Interfaces INTRODUCTION AND PROBLEM STATEMENT

The development of User Interfaces “is a time-consuming and error-prone task” [29]. Approximately 50% of development resources are devoted to UI implementation tasks [23]. According to [28] one of the causes is “the lack of an integrated view” that “often forces developers to implement suboptimal solutions”. This lack of integrated views affects not only how individuals work during the UI development process, but also how individuals collaborate in such process. A potential solution to overcome the lack of integrated views and thus, enhance individual and collaborative work [24] “is to develop more flexible tools”. According to Schmidt [28] and Kimelman [19] these views should help individuals to understand how the artifacts they manipulate during the UI development

RELATED WORK

Model-Based approaches are suited for UI development for several reasons. First, a number of frameworks and languages [20, 25, 5] structure the way UIs are generated from models. Models are defined in [3] as “an artifact that conforms to a metamodel and that represents a given aspect of a system”. Thus, thanks to this conformance relationship, models are successively transformed and combined using transformations to finally generate the code of the UI. Moreover, using model-based approaches for UI development provides a number of significant advantages like easier evolutions and reuse [17], dynamic adaptation to the context of use [8, 4], enduser programming [9], greater quality [10, 15, 22, 31] and automatic generation of support [14, 13] among others.

Permission to make digital or hard copies of part or all 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 third-party components of this work must be honored. For all other uses, contact the Owner/Author. Copyright is held by the owner/author(s). EICS’14, Jun 17-20 2014, Rome, Italy ACM 978-1-4503-2725-1/14/06. http://dx.doi.org/10.1145/2607023.2611450

AMEs are model-based UIs themselves that aim to support collaborative modelling in the context of UI development. Indeed, previous research shown that collaborative modelling for one single type of models provides significant advantages

189

Demonstration

EICS'14, June 17–20, 2014, Rome, Italy

Figure 1. AME interactive online editor. The Interactive Workflow View enables stakeholders to (meta)model their artifacts. The figure shows a modelisation done by the interaction designers and the functional analysts. Inter-artifacts relationships are explicitly represented. The preview window corresponds to the highlighted container state named “Login”. A video of the whole modeling process is available at https://www.youtube.com/ watch?v=Mz_kSuraFe0&hd=1.

[11]. In consequence, providing support for multiple models should reiterate and possibly increase such benefits. However, collaborative modelling has been only lately considered, (e.g. in [18]). Existent collaborative environments such as Synergo [2], Space-Design [7], CoolModes [26] or Gambit [27] lack of integrated modelling views for multiple stakeholders or focus on a predefined set of models. On the contrary, our proposal does not fix neither the models nor their representations.

Case Study

The AME (figure 1) shows multiple integrated views of an online shopping website being developed. The shopping website provides several catalogues to the users, each of them containing a family of products. Once one or more products have been added to the cart (products can be either added or removed from the cart), users can checkout. To checkout or modify the account details, users are requested to login. The figure shows four different views (three inside the AME plus the AME itself) addressing different stakeholders. These stakeholders are all involved in the co-design and codevelopment of the shopping website. These views and their stakeholders are depicted next.

Most model-driven engineering tools1 do not support collaborative modelling and when they do, collaboration is diluted into classical modelling editors without focusing on the relationships between different stakeholders’ artifacts. Moreover, the models managed and generated by these tools are predefined at design-time whereas AME provides means for both (meta)modelling and importing existent (meta)models.

1.- Interaction Workflow View

The Interaction Workflow View enables interaction designers to define the interaction workflow. The interaction workflow (already used by languages like IFML [6]) captures all the different workspaces (orange ovals) in which the UI is decomposed. The main workspace is the Home website from which users can navigate to Select Catalogue. From here, the products of the catalogue are available through the List Products workspace.

Most model-based UI development tools (Cedar Studio [1], MASP [4], Leonardi2 , GrafiXML [21], UsiComp [16], WebRatio [6], Xplain [12]) also lack of support for remote collaboration, integrated views, or have fixed (meta)models. ADAPTIVE MODELLING ENVIRONMENTS

AMEs aim at supporting collaborative modelling of UIs in two ways. Firstly, providing stakeholders with specific views on their artifacts, represented with customizable representations. Secondly, providing views that make explicit the relationships between different stakeholders’ artifacts. The combination of both is illustrated in the case study described next. 1 2

The interaction designer of the case study has a graphical design background and concentrates on page flow. The manipulated artifacts are thus the workspaces composing the interaction workflow of the website plus the relationships between them that enable navigation. Note that navigation from a workspace to another could eventually require external information. For instance, Checkout requires confirmation by the CheckStock() function. Other examples are saving the state of

http://wiki.eclipse.org/images/d/dc/Report.external.bvs.pdf http://www.leonardi-free.org

190

Demonstration

EICS'14, June 17–20, 2014, Rome, Italy

the application and updating information in the UI. These relationships are all examples of cases involving different stakeholders’ artifacts (workspaces and functions). Functional analysts define these function signatures (blue boxes) that trigger functionality from the functional core. 2.- Source Code View

The source code view (bottom-left window, figure 1) enables developers to implement functional aspects previously identified by functional analysts. Developers are also involved in the interaction workflow to implement navigational relationships between workspaces. Regarding the chosen development methodology, developers can also discuss with functional analysts the relevance of defined functions and potential discrepancies between existing models and developments.

Figure 2. Modified MVC architecture of AME. URL routing, DOM events (e.g. mouse clicks) and Model events (e.g. attribute changes) trigger handling logic in the View. The handlers update the DOM and Models that may trigger additional events. Models are synced with data sources.

CONCLUSION AND PERSPECTIVES

This paper introduces AME, an Adaptive Modelling Environment that firstly, enables stakeholders to visualize and manipulate the metamodels, models and transformations, or any of their internal elements, that are relevant to their specific tasks in the context of model-based UI development; secondly, the AME should help stakeholders to understand the full stack of models by means of integrated views in which custom representations of the manipulated artifacts and their interconnections are displayed. An AME in the form of an online Integrated Development Environment -IDE- has been introduced. The AME has been depicted through a case study including four different stakeholders, each of them working with their own (meta)models. The architecture and implementation have been discussed.

The artifact manipulated in this view is the source code implementing the function signatures that interface the functional core. This view in figure 1, opened by clicking the associated function, is showing the implementation of the validation function (blue box) used in the login workspace. 3.- Design View

The design view enables designers to have a first preview of the UI being designed. The preview is computed at runtime and updated according to stakeholders’ actions. The preview provides designers with the benefits of rapid prototyping. This view is interactive but not directly modifiable. 4.- AME View

Future work will use adequate evaluation techniques of the so called groupware usability to test the suitability of AMEs with real stakeholders and compare its performance against existing collaborative modelling tools. Remote collaboration and inclusion of visualization techniques for better interaction (as in as [30]) will be studied in future versions.

The AME is itself a view on the models of the application that enables for observation and modification by stakeholders. The left sidebar provides access to the (meta)models proposed by the AME or imported by the stakeholders. In case of imported (meta)models, default representations are used when no representation is provided.

ACKNOWLEDGMENTS

Insights on the architecture and implementation of the AME are provided in the following section.

This work has been supported by the Luxemburgish FNR MoDEL project (C12/IS/3977071).

Architecture and Implementation

REFERENCES

AME makes use of a set of metamodels as, for instance, a state-chart metamodel to capture the interaction workflow. The (meta)models are built with the Eclipse Modelling Framework (EMF) and finally persisted in a XML format on a model repository, so they can be later used and/or transformed according to users’ actions and contexts.

1. Akiki, P. A., Bandara, A. K., and Yu, Y. Cedar studio: An ide supporting adaptive model-driven user interfaces for enterprise applications. EICS’13, ACM (2013). 2. Avouris, N., Margaritis, M., and Komis, V. Modelling interaction during small-group synchronous problem solving activities: the synergo approach. In Workshop on Designing Computational Models of Collaborative Learning Interaction, ITS’04, Springer (2004). 3. B´ezivin, J., Jouault, F., and Valduriez, P. On the need for megamodels. Proc. of OOPSLA/GPCE: Best Practices for Model-Driven Software Development workshop, 19th Annual ACM Conf. on Object-Oriented Programming, Systems, Languages, and Applications (2004). 4. Blumendorf, M., Feuerstack, S., and Albayrak, S. Multimodal user interaction in smart environments: Delivering distributed user interfaces. In Constructing Ambient Intelligence, vol. 11 of Communications in Computer and Information Science. Springer, 2008.

AME has been designed as an online tool to maximize the collaboration possibilities, specially in non co-located environments. The AME front-end has been developed in JavaScript, HTML and CSS to provide fast run-time and multi-platform online interaction. The server side implements a modified MVC pattern described in figure 2. The preview window corresponding to the design view in figure 1 is automatically updated every time a model is modified. The preview is generated with model-to-text transformations that produce the HTML excerpts used to update the view. Importing custom (meta)models is supported with classical (meta)modelling exchange formats such as Ecore and XMI.

191

Demonstration

EICS'14, June 17–20, 2014, Rome, Italy 18. Izquierdo, J. L. C., Cabot, J., Lopez-Fernandez, J. J., Cuadrado, J. S., Guerra, E., and Lara, J. Engaging end-users in the collaborative development of domain-specific modelling languages. In Cooperative Design, Visualization, and Engineering. Springer, 2013. 19. Kimelman, D., and Hirschman, K. A Spectrum of Flexibility-Lowering Barriers to Modeling Tool Adoption. In ICSE 2011 Workshop on Flexible Modeling Tools (2011). 20. Limbourg, Q., Vanderdonckt, J., Michotte, B., Bouillon, L., and L´opez-Jaquero, V. Usixml: A language supporting multi-path development of user interfaces. In Engineering Human Computer Interaction and Interactive Systems, vol. 3425 of Lecture Notes in Computer Science. Springer, 2005, 200–220. 21. Michotte, B., and Vanderdonckt, J. GrafiXML, a multi-target user interface builder based on UsiXML. In ICAS (2008), 15–22. 22. Montecalvo, E., Vagner, A., and Gronier, G. Proposal of a usability-driven design process for model-based user interfaces. In 2nd Workshop on USIXML (2011). 23. Myers, B. A., and Rosson, M. B. Survey on user interface programming. In Proc. of the SIGCHI Conference on Human Factors in Computing Systems, CHI’92, ACM (New York, 1992), 195–202. 24. Ossher, H., van der Hoek, A., Storey, M.-A., Grundy, J., Bellamy, R., and Petre, M. Workshop on flexible modeling tools, flexitools11. ICSE ’11, ACM (2011). 25. Patern`o, F., Santoro, C., and Spano, L. D. Maria: A universal, declarative, multiple abstraction-level language for service-oriented applications in ubiquitous environments. TOCHI09 16, 4 (Nov. 2009). 26. Pinkwart, N., Bollen, L., and Fuhlrott, E. Group-oriented modeling tools with heterogeneous semantics. In ITS’02, Springer (2002), 21–30. 27. Sangiorgi, U., and Vanderdonckt, J. Gambit: Addressing multi-platform collaborative sketching with html5. In Proc. of the 4th ACM SIGCHI Symposium on Engineering Interactive Computing Systems, EICS’12, ACM (New York, 2012), 257–262. 28. Schmidt, D. C. Guest editor’s introduction: Model-driven engineering. Computer 39, 2 (2006). 29. Schramm, A., Preußner, A., Heinrich, M., and Vogel, L. Rapid ui development for enterprise applications: Combining manual and model-driven techniques. In Proc. of the 13th International Conf. on Model Driven Engineering Languages and Systems: Part I, MODELS’10, Springer (2010), 271–285. 30. Sottet, J., and Vagner, A. Defining domain specific transformations in human-computer interfaces development. In 2nd Conf. on Model-Driven Engineering for Software Developement, Modelsward’14 (2014). 31. Sottet, J.-S., Calvary, G., Coutaz, J., and Favre, J.-M. Engineering interactive systems. Springer, 2008, ch. A Model-Driven Engineering Approach for the Usability of Plastic User Interfaces, 140–157.

5. Botterweck, G. Multi front-end engineering. In Model-Driven Development of Advanced User Interfaces, vol. 340 of Studies in Computational Intelligence. Springer Berlin Heidelberg, 2011, 27–42. 6. Brambilla, M., and Fraternali, P. Large-scale model-driven engineering of web user interaction: The webml and webratio experience. Science of Computer Programming (2013). 7. Bravo, C., Duque, R., and Gallardo, J. A groupware system to support collaborative programming: Design and experiences. J. Syst. Softw. 86, 7 (July 2013). 8. Calvary, G., Coutaz, J., Thevenin, D., Limbourg, Q., Bouillon, L., and Vanderdonckt, J. A unifying reference framework for multi-target user interfaces. Interacting with Computers 15, 3 (2003). 9. Dittmar, A., Garc´ıa Frey, A., and Dupuy-Chessa, S. What can model-based ui design offer to end-user software engineering? In Proc. of the 4th ACM SIGCHI Symposium on Engineering Interactive Computing Systems, EICS’12, ACM (New York, 2012). 10. Fernandez, A., Insfran, E., and Abraho, S. Integrating a usability model into model-driven web development processes. In Web Information Systems Engineering WISE 2009, vol. 5802. Springer, 2009, 497–510. 11. Gallardo, J., Molina, A. I., Bravo, C., Redondo, M. A., and Collazos, C. A. Groupware: Design, implementation and use. Springer, 2008, ch. Comparative Study of Tools for Collaborative Task Modelling: An Empirical and Heuristic-Based Evaluation, 340–355. 12. Garc´ıa Frey, A., Calvary, G., and Dupuy-Chessa, S. Xplain: an editor for building self-explanatory user interfaces by model-driven engineering. In Proc. of the 2Nd ACM SIGCHI Symposium on Engineering Interactive Computing Systems (2010). 13. Garc´ıa Frey, A., Calvary, G., and Dupuy-Chessa, S. Users need your models!: exploiting design models for explanations. In BCS HCI, British Computer Society (2012), 79–88. 14. Garc´ıa Frey, A., Calvary, G., Dupuy-Chessa, S., and Mandran, N. Model-based self-explanatory UIs for free, but are they valuable? In INTERACT (3), vol. 8119 of Lecture Notes in Computer Science, Springer (2013). 15. Garc´ıa Frey, A., C´eret, E., Dupuy-Chessa, S., and Calvary, G. Quimera: A quality metamodel to improve design rationale. In Proc. of the 3rd ACM SIGCHI Symposium on Engineering Interactive Computing Systems, EICS’11, ACM (2011), 265–270. 16. Garc´ıa Frey, A., Ceret, E., Dupuy-Chessa, S., Calvary, G., and Gabillon, Y. Usicomp: an extensible model-driven composer. In Proc. of the 4th ACM SIGCHI Symposium on Engineering Interactive Computing Systems, EICS’12 (2012), 263–268. 17. Hamid, B., Radermacher, A., Lanusse, A., Jouvray, C., Grard, S., and Terrier, F. Designing fault-tolerant component based applications with a model driven approach. In Software Technologies for Embedded and Ubiquitous Systems, vol. 5287. Springer, 2008.

192