Abstract

This paper presents MoCaDiX, a method for designing cross-device graphical user interfaces of an information system based on its UML class diagram, structured as a four-step process: (1) a UML class diagram of the information system is created in a model editor, (2) how the classes, attributes, methods, and relationships of this class diagram are presented across devices is then decided based on user interface patterns with their own parametrization, (3) based on these parameters, a Concrete User Interface model is generated in QuiXML, a lightweight fit-to-purpose User Interface Description Language, and (4) based on this model, HTML5 cross-device user interfaces are semi-automatically generated for four configurations: single/multipledevice single/multiple-display on a smartphone, a tablet, and a desktop. From the practitioners' viewpoint, a first experiment investigates effectiveness, efficiency, and subjective satisfaction of three intermediate and three expert designers, using MoCaDiX on a representative class diagram. From the end user's viewpoint, a second experiment compares subjective satisfaction and preference of twenty end users assessing layout strategies for interfaces generated on two devices.
- 2018. Ergonomics of human-system interaction -- Part 11: Usability: Definitions and concepts, ISO/TC 159/SC 4. https://www.iso.org/standard/63500.htmlGoogle Scholar
- Silvia Abrahão, Emilio Iborra, and Jean Vanderdonckt. 2008. Usability Evaluation of User Interfaces Generated with a Model-Driven Architecture Tool. Springer London, London, 3--32.Google Scholar
- Mir Farooq Ali, Manuel A. Pérez-Quiñones, Marc Abrams, and Eric Shell. 2002. Building Multi-Platform User Interfaces with UIML. In Computer-Aided Design of User Interfaces III, Proceedings of the Fourth International Conference on Computer-Aided Design of User Interfaces, May, 15--17, 2002, Valenciennes, France, Christophe Kolski and Jean Vanderdonckt (Eds.). Kluwer, 255--266.Google Scholar
- Nathalie Aquino, Jean Vanderdonckt, Nelly Condori-Fernández, Óscar Dieste, and Óscar Pastor. 2010. Usability Evaluation of Multi-device/Platform User Interfaces Generated by Model-driven Engineering. In Proceedings of the 2010 ACM-IEEE International Symposium on Empirical Software Engineering and Measurement (ESEM '10). ACM, New York, NY, USA, Article 30, 10 pages. Google Scholar
Digital Library
- Vincent Balat. 2013. Client-server web applications widgets. In 22nd International World Wide Web Conference, WWW'13, Rio de Janeiro, Brazil, May 13--17, 2013, Companion Volume, Leslie Carr, Alberto H. F. Laender, Bernadette Farias Lóscio, Irwin King, Marcus Fontoura, Denny Vrandecic, Lora Aroyo, José Palazzo M. de Oliveira, Fernanda Lima, and Erik Wilde (Eds.). International World Wide Web Conferences Steering Committee / ACM, 19--22.Google Scholar
Digital Library
- Helmut Balzert. 1995. From OOA to GUIs - the JANUS System. In Human-Computer Interaction, INTERACT '95, IFIPTC13 Interantional Conference on Human-Computer Interaction, 27--29 June 1995, Lillehammer, Norway (IFIP Conference Proceedings), Knut Nordby, Per H. Helmersen, David J. Gilmore, and Svein A. Arnesen (Eds.). Chapman & Hall, 319--324.Google Scholar
Cross Ref
- Gordon Blair, Nelly Bencomo, and Robert B. France. 2009. Models@ Run.Time.Computer42, 10 (Oct. 2009), 22--27. Google Scholar
Digital Library
- Ashley Bush and Sandeep Purao. 2011. Mapping UML Techniques to Design Activities. In Information Modeling in the New Millennium, Matti Rossi and Keng Siau (Eds.). IDEA Publishing Group, Chapter 12, 199--217.Google Scholar
- Gaëlle Calvary, Joëlle Coutaz, David Thevenin, Quentin Limbourg, Laurent Bouillon, and Jean Vanderdonckt. 2003. A Unifying Reference Framework for multi-target user interfaces. Interacting with Computers 15, 3 (2003), 289--308.Google Scholar
- Adam Chlipala. 2016. Ur/Web: A Simple Model for Programming the Web. Commun. ACM59, 8 (July 2016), 93--100. Google Scholar
Digital Library
- Peter Coad. 1992. Object-oriented Patterns. Commun. ACM35, 9 (Sept. 1992), 152--159. Google Scholar
Digital Library
- Peter Coad, David North, and Mark Mayfield. 1997. Object Models: Strategies, Patterns, and Applications. 2nd Edition. Prentice Hall, Upper Saddle River, New Jersey. Google Scholar
Digital Library
- Andy Cockburn, Amy Karlson, and Benjamin B. Bederson. 2009. A Review of Overview+Detail, Zooming, and Focus+Context Interfaces. ACM Comput. Surv.41, 1, Article 2 (Jan. 2009), 31 pages. Google Scholar
Digital Library
- Maria Francesca Costabile, Piero Mussio, Loredana Parasiliti Provenza, and Antonio Piccinno. 2008. End Users As Unwitting Software Developers. In Proceedings of the 4th International Workshop on End-user Software Engineering(WEUSE '08). ACM, New York, NY, USA, 6--10. Google Scholar
Digital Library
- António Miguel Rosado da Cruz. 2014. Use Case and User Interface Patterns for Data Oriented Applications. In Model-Driven Engineering and Software Development - Second International Conference, MODELSWARD 2014, Lisbon, Portugal, January 7--9, 2014, Revised Selected Papers (Communications in Computer and Information Science), Slimane Hammoudi, Luís Ferreira Pires, Joaquim Filipe, and Rui César das Neves (Eds.), Vol. 506. Springer, 117--133.Google Scholar
- António Miguel Rosado da Cruz and João Pascoal Faria. 2007. Automatic Generation of User Interfaces from Domain and Use Case Models. In Quality of Information and Communications Technology, 6th International Conference on the Quality of Information and Communications Technology, QUATIC 2007, Lisbon, Portugal, September 12--14, 2007, Proceedings, Ricardo Jorge Machado, Fernando Brito e Abreu, and Paulo Rupino da Cunha (Eds.). IEEE Computer Society, 208--212. Google Scholar
Digital Library
- António Miguel Rosado da Cruz and João Pascoal Faria. 2009. Automatic Generation of user Interface Models and Prototypes from Domain and Use Case Models. In ICSOFT 2009 - Proceedings of the 4th International Conference on Software and Data Technologies, Volume 1, Sofia, Bulgaria, July 26--29, 2009, Boris Shishkov, José Cordeiro, and Alpesh Ranchordas (Eds.). INSTICC Press, 169--176.Google Scholar
- António Miguel Rosado da Cruz and João Pascoal Faria. 2010. A Metamodel-Based Approach for Automatic User Interface Generation. In Model Driven Engineering Languages and Systems - 13th International Conference, MODELS2010, Oslo, Norway, October 3--8, 2010, Proceedings, Part I (Lecture Notes in Computer Science), Dorina C. Petriu, Nicolas Rouquette, and Øystein Haugen (Eds.), Vol. 6394. Springer, 256--270. Google Scholar
Digital Library
- Paulo Pinheiro da Silva. 2000. User Interface Declarative Models and Development Environments: A Survey. In Interactive Systems: Design, Specification, and Verification, 7th International Workshop DSV-IS, Limerick, Ireland, June5--6, 2000, Proceedings (Lecture Notes in Computer Science), Philippe A. Palanque and Fabio Paternò (Eds.), Vol. 1946. Springer, 207--226.Google Scholar
- Mohamed Dahchour, Alain Pirotte, and Esteban Zimányi. 2002. Materialization and Its Metaclass Implementation.IEEE Trans. Knowl. Data Eng.14, 5 (2002), 1078--1094. Google Scholar
Digital Library
- Anke Dittmar, Mathias Kühn, and Peter Forbrig. 2014. A Domain-specific Model-based Design Approach for End-user Developers. In Proceedings of the 2014 ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS'14). ACM, New York, NY, USA, 161--166. Google Scholar
Digital Library
- Brian Dobing and Jeffrey Parsons. 2008. Dimensions of UML Diagram Use: A Survey of Practitioners.J. Database Manag.19, 1 (2008), 1--18.Google Scholar
Cross Ref
- Tao Dong, Elizabeth F. Churchill, and Jeffrey Nichols. 2016. Understanding the Challenges of Designing and Developing Multi-Device Experiences. In Proceedings of the 2016 ACM Conference on Designing Interactive Systems (DIS '16). ACM,New York, NY, USA, 62--72. Google Scholar
Digital Library
- Mohammed Elkoutbi, Ismaïl Khriss, and Rudolf K. Keller. 2006. Automated Prototyping of User Interfaces Based onUML Scenarios. Automated Software Engineering 13, 1 (01 Jan 2006), 5--40. Google Scholar
Digital Library
- Henrik Eriksson, Angel R. Puerta, and Mark A. Musen. 1994. Generation of knowledge-acquisition tools from domain ontologies.Int. J. Hum.-Comput. Stud.41, 3 (1994), 425--453. Google Scholar
Digital Library
- Luca Frosini and Fabio Paternò. 2014. User Interface Distribution in Multi-device and Multi-user Environments with Dynamically Migrating Engines. In Proceedings of the 2014 ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS '14). ACM, New York, NY, USA, 55--64. Google Scholar
Digital Library
- Josefina Guerrero García, Juan Manuel González-Calleros, Jean Vanderdonckt, and Jaime Muñoz Arteaga. 2009. A Theoretical Survey of User Interface Description Languages: Preliminary Results. In2009 Latin American Web Congress,Joint LA-WEB/CLIHC Conference, Merida, Yucatan, Mexico, 9--11 November 2009, Edgar Chávez, Elizabeth Furtado, and Alberto L. Morán (Eds.). IEEE Computer Society, 36--43. Google Scholar
Digital Library
- Giuseppe Ghiani, Marco Manca, and Fabio Paternò. 2015. Authoring Context-dependent Cross-device User Interfaces Based on Trigger/Action Rules. In Proceedings of the 14th International Conference on Mobile and Ubiquitous Multimedia(MUM '15). ACM, New York, NY, USA, 313--322.Google Scholar
Digital Library
- Christian Gram and Gilbert Cockton. 1996. Design Principles for Interactive Software. Chapman Hall, London. Google Scholar
Digital Library
- Peter Hamilton and Daniel J. Wigdor. 2014. Conductor: Enabling and Understanding Cross-device Interaction. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '14). ACM, New York, NY, USA, 2773--2782. Google Scholar
Digital Library
- Steven Houben, Nicolai Marquardt, Jo Vermeulen, Clemens Klokmose, Johannes Schöning, Harald Reiterer, and Christian Holz. 2017. Opportunities and Challenges for Cross-device Interactions in the Wild.interactions 24, 5 (Aug. 2017), 58--63. Google Scholar
Digital Library
- Christian Janssen, Anette Weisbecker, and Jürgen Ziegler. 1993. Generating User Interfaces from Data Models and Dialogue Net Specifications. In Proceedings of the INTERACT '93 and CHI '93 Conference on Human Factors in Computing Systems (CHI '93). ACM, New York, NY, USA, 418--423. Google Scholar
Digital Library
- Tero Jokela, Jarno Ojala, and Thomas Olsson. 2015. A Diary Study on Combining Multiple Information Devices in Everyday Activities and Tasks. In Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems (CHI '15). ACM, New York, NY, USA, 3903--3912. Google Scholar
Digital Library
- Andrew J. Ko, Thomas D. LaToza, and Margaret M. Burnett. 2015. A practical guide to controlled experiments of software engineering tools with human participants.Empirical Software Engineering 20, 1 (01 Feb 2015), 110--141. Google Scholar
Digital Library
- Philip Langer, Tanja Mayerhofer, Manuel Wimmer, and Gerti Kappel. 2014. On the Usage of UML: Initial Results of Analyzing Open UML Models. In Modellierung 2014, 19.-21. März 2014, Wien, Österreich (LNI), Hans-Georg Fill, Dimitris Karagiannis, and Ulrich Reimer (Eds.), Vol. 225. GI, 289--304. http://subs.emis.de/LNI/Proceedings/Proceedings225/article21.htmlGoogle Scholar
- Howard Levene. 1960. Robust tests for equality of variances. In Contributions to Probability and Statistics: Essays in Honor of Harold Hotelling, Ingram Olkin and Harold Hotelling et al. (Eds.). Stanford University Press, Palo Alto, CA,USA, 278--292.Google Scholar
- James R. Lewis. 1995. IBM computer usability satisfaction questionnaires: Psychometric evaluation and instructions for use.International Journal of Human-Computer Interaction 7, 1 (1995), 57--78. arXiv:https://doi.org/10.1080/10447319509526110 Google Scholar
Digital Library
- James R. Lewis. 2002. Psychometric Evaluation of the PSSUQ Using Data from Five Years of Usability Studies. International Journal of Human-Computer Interaction 14, 3--4 (2002), 463--488. arXiv: https://doi.org/10.1080/10447318.2002.9669130Google Scholar
Cross Ref
- James R. Lewis. 2006. Sample Sizes for Usability Tests: Mostly Math, Not Magic. interactions 13, 6 (Nov. 2006), 29--33.Google Scholar
Digital Library
- Rensis Likert. 1932. A technique for the measurement of attitudes. Archives of Psychology 22, 140 (1932), 55--. http://psycnet.apa.org/record/1933-01885-001Google Scholar
- Marina Machado, Rui Couto, and José Creisssac Campos. 2017. MODUS: Model-based User Interfaces Prototyping. In Proceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS '17). ACM, New York, NY, USA, 111--116. Google Scholar
Digital Library
- Jan Meskens, Jo Vermeulen, Kris Luyten, and Karin Coninx. 2008. Gummy for multi-platform user interface designs: shape me, multiply me, fix me, use me. In Proceedings of the working conference on Advanced Visual Interfaces, AVI 2008, Napoli, Italy, May 28--30, 2008, Stefano Levialdi (Ed.). ACM Press, 233--240.Google Scholar
Digital Library
- Pedro J. Molina, Santiago Meliá, and Oscar Pastor. 2002. JUST-UI: A User Interface Specification Model. Springer Netherlands, Dordrecht, 63--74.Google Scholar
- Michael Nebeling. 2017. XDBrowser 2.0: Semi-Automatic Generation of Cross-Device Interfaces. In Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems, Denver, CO, USA, May 06--11, 2017., Gloria Mark,Susan R. Fussell, Cliff Lampe, m. c. schraefel, Juan Pablo Hourcade, Caroline Appert, and Daniel Wigdor (Eds.). ACM,4574--4584.Google Scholar
Digital Library
- Michael Nebeling, Theano Mintsi, Maria Husmann, and Moira Norrie. 2014. Interactive Development of Cross-device User Interfaces. In Proceedings of the 32Nd Annual ACM Conference on Human Factors in Computing Systems (CHI '14). ACM, New York, NY, USA, 2793--2802.Google Scholar
Digital Library
- Thanh-Diane Nguyen, Jean Vanderdonckt, and Ahmed Seffah. 2016. Generative Patterns for Designing Multiple User Interfaces. In Proceedings of the International Conference on Mobile Software Engineering and Systems (MOBILESoft '16). ACM, New York, NY, USA, 151--159. Google Scholar
Digital Library
- Jeffrey Nichols, Duen Horng Chau, and Brad A. Myers. 2007. Demonstrating the Viability of Automatically Generated User Interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '07). ACM, New York, NY, USA, 1283--1292. Google Scholar
Digital Library
- Jeffrey Nichols, Brandon Rothrock, Duen Horng Chau, and Brad A. Myers. 2006. Huddle: Automatically Generating Interfaces for Systems of Multiple Connected Appliances. In Proceedings of the 19th Annual ACM Symposium on User Interface Software and Technology (UIST '06). ACM, New York, NY, USA, 279--288.Google Scholar
- Jeni Paay, Dimitrios Raptis, Jesper Kjeldskov, Bjarke M. Lauridsen, Ivan S. Penchev, Elias Ringhauge, and Eric V. Ruder.2016. A Comparison of Techniques for Cross-Device Interaction from Mobile Devices to Large Displays. In Proceedings of the 14th International Conference on Advances in Mobile Computing and Multi Media (MoMM '16). ACM, New York, NY, USA, 137--146.Google Scholar
- Jeni Paay, Dimitrios Raptis, Jesper Kjeldskov, Mikael B. Skov, Eric V. Ruder, and Bjarke M. Lauridsen. 2017. Investigating Cross-Device Interaction Between a Handheld Device and a Large Display. In Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems (CHI '17). ACM, New York, NY, USA, 6608--6619.Google Scholar
Digital Library
- Oscar Pastor and Juan Carlos Molina. 2007. Model-driven architecture in practice - a software production environment based on conceptual modeling. Springer, Berlin. Google Scholar
Digital Library
- Inés Pederiva, Jean Vanderdonckt, Sergio España, José Ignacio Panach, and Oscar Pastor. 2007. The Beautification Process in Model-Driven Engineering of User Interfaces. In Human-Computer Interaction - INTERACT 2007, 11th IFIP TC13 International Conference, Rio de Janeiro, Brazil, September 10--14, 2007, Proceedings, Part I (Lecture Notes in Computer Science), Maria Cecília Calani Baranauskas, Philippe A. Palanque, Julio Abascal, and Simone Diniz Junqueira Barbosa (Eds.), Vol. 4662. Springer, 411--425. Google Scholar
Digital Library
- Christian Prehofer, Andreas Wagner, and Yucheng Jin. 2016. A Model-based Approach for Multi-device User Interactions. In Proceedings of the ACM/IEEE 19th International Conference on Model Driven Engineering Languages and Systems(MODELS '16). ACM, New York, NY, USA, 13--23. Google Scholar
Digital Library
- Angel R. Puerta. 1997. A model-based interface development environment. IEEE Software 14, 4 (Jul 1997), 40--47. Google Scholar
Digital Library
- Angel R. Puerta, Henrik Eriksson, John H. Gennari, and Mark A. Musen. 1994. Beyond Data Models for Automated User Interface Generation. In People and Computers IX, Proceedings of HCI '94, Glasgow, UK, August 1994, Gilbert Cockton, Stephen W. Draper, and George R. S. Weir (Eds.). Cambridge University Press, 353--366. Google Scholar
Digital Library
- Angel R. Puerta and David Maulsby. 1997. Management of Interface Design Knowledge with MOBI-D. In Proceedings of the 2nd International Conference on Intelligent User Interfaces, IUI 1997, Orlando, Florida, USA, January 6--9, 1997,Johanna D. Moore, Ernest A. Edmonds, and Angel R. Puerta (Eds.). ACM, 249--252. Google Scholar
Digital Library
- Jaroslav Pullmann. 2014.Model-Based User Interface Charter - Glossary. W3C Working Group Note. https://www.w3.org/TR/mbui-glossary/Google Scholar
- Claire Rowland, Elizabeth Goodman, Martin Charlier, Ann Light, and Alfred Lui. 2015. Designing Connected Products' UX for the Consumer Internet of Things. O'Reilly, Cambridge. Google Scholar
Digital Library
- Stephanie Santosa and Daniel Wigdor. 2013. A Field Study of Multi-device Workflows in Distributed Workspaces. In Proceedings of the 2013 ACM International Joint Conference on Pervasive and Ubiquitous Computing (UbiComp '13).ACM, New York, NY, USA, 63--72. Google Scholar
Digital Library
- Florian Scharf, Christian Wolters, Michael Herczeg, and Jörg Cassens. 2013. Cross-Device Interaction: Definition, Taxonomy and Application. In AMBIENT 2013: The Third International Conference on Ambient Computing, Applications,Services and Technologies, Maarten Weyn (Ed.). IARIA, IARIA, Porto, Portugal, 35--41. http://www.imis.uni-luebeck.de/publikationen/scharf-et-al-IARIA_Ambient-2013-dl.pdfGoogle Scholar
- Ahmed Seffah and Peter Forbrig. 2002. Multiple User Interfaces: Towards a Task-Driven and Patterns-Oriented Design Model. In Interactive Systems:Design, Specification, and Verification, Peter Forbrig, Quentin Limbourg, Jean Vanderdonckt, and Bodo Urban (Eds.). Springer Berlin Heidelberg, Berlin, Heidelberg, 118--132. Google Scholar
Digital Library
- Manuel Serrano and Gérard Berry. 2012. Multitier Programming in Hop.Commun. ACM55, 8 (Aug. 2012), 53--59.Google Scholar
- Amany Shatnawi and Raed Shatnawi. 2016. Generating a language-independent graphical user interfaces from UML models. Int. Arab J. Inf. Technol.13, 6B (2016), 1039--1044. http://ccis2k.org/iajit/?option=com_content&task=blogcategory&id=104&Itemid=387Google Scholar
- Vi Tran. 2010. UI generation from task, domain and user models: the DB-USE approach. In Proceedings of the 2nd ACMSIGCHI Symposium on Engineering Interactive Computing System, EICS 2010, Berlin, Germany, June 19--23, 2010, Noi Sukaviriya, Jean Vanderdonckt, and Michael Harrison (Eds.). ACM, 353--356. Google Scholar
Digital Library
- Jean M. Vanderdonckt and François Bodart. 1993. Encapsulating Knowledge for Intelligent Automatic Interaction Objects Selection. In Proceedings of the INTERACT '93 and CHI '93 Conference on Human Factors in Computing Systems(CHI '93). ACM, New York, NY, USA, 424--429. Google Scholar
Digital Library
- Jishuo Yang and Daniel Wigdor. 2014. Panelrama: Enabling Easy Specification of Cross-device Web Applications. In Proceedings of the 32Nd Annual ACM Conference on Human Factors in Computing Systems (CHI '14). ACM, New York, NY, USA, 2783--2792. Google Scholar
Digital Library
Index Terms
MoCaDiX: Designing Cross-Device User Interfaces of an Information System based on its Class Diagram
Recommendations
Capsule-Based User Interface Modeling for Large-Scale Applications
We present a novel approach to modeling and implementing user interfaces (UI) of large business applications. The approach is based on the concept of capsule, a profiled structured class from UML which models a simple UI component or a coherent UI ...
MDA-Based UI Modeling and Transformation of Spoken Dialog Systems
HIS '09: Proceedings of the 2009 Ninth International Conference on Hybrid Intelligent Systems - Volume 01Traditional Model Driven Architecture (MDA) approaches to software application development are appropriate for building systems with visual user interfaces. However, they are not suitable for designing of dialog systems. A more effective approach to ...
A semiotic analysis of unified modeling language graphical notations
Unified modeling language (UML) is the standard modeling language for object-oriented system development. Despite its status as a standard, UML has a fuzzy formal specification and a weak theoretical foundation. Semiotics, the study of signs, provides a ...






Comments