MoCaDiX : Designing Cross-Device User Interfaces of an Information System based on its Class Diagram

Vanderdonckt, Jean;Nguyen, Thanh-Diane
(2019) Proceedings of the ACM on Human-Computer Interaction — Vol. 3, n° EICS, p. 1-40 (2019)

Files

MoCaDix-EICS2019.pdf
  • Open Access
  • Adobe PDF
  • 4.47 MB

Details

Authors
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/multiple device 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
Affiliations

Citations

Vanderdonckt, J., & Nguyen, T.-D. (2019). MoCaDiX : Designing Cross-Device User Interfaces of an Information System based on its Class Diagram. Proceedings of the ACM on Human-Computer Interaction, 3(EICS), 1-40. https://doi.org/10.1145/3331159 (Original work published 2019)