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.

2. MoCaDiX: Designing Cross-Device User Interfaces of an
Information System based on its Class Diagram
ACM EICS’2019 (Valencia, Spain, June 18th-21st, 2019)

3. MoCaDiX: Designing Cross-Device User Interfaces of an
Information System based on its Class Diagram
ACM EICS’2019 (Valencia, Spain, June 18th-21st, 2019)
Jean Vanderdonckt
LouRIM
Université catholique de Louvain,
Belgium
Thanh-Diane Nguyen
ICHEC Brussels Mnaagement School &
Université catholique de Louvain,
Belgium

4. EICS’2019 (Valencia, June 18th–21st, 2019)
Motivations: to start from a UML Class Diagram
• A structured diagram that describes a domain of interest
by specifying its classes, their attributes and methods, and
the relationships between the classes
• Is the most favoured conceptual model by designers
• Dataset of 907 class diagrams [Bush & Purao, 2000]:
• 47% of them produced classes
• 19% = attributes, 33% = methods, 8% = associations
• 121 Open UML projects [Langer et al., 2014]:
• 100% of them produced class diagrams, 47% use cases
• Class diagram + use case = first preferred combination (71%)
• Most frequent: class, attribute, method, inheritance, and association
4

5. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
5
A
A AClass Mapping
ClassName
+Attribute _1: DataType (cardinalities )
+Attribute _2
...
+Attribute _m
+Method _1: Signature
+Method _2
...
+Method _n
ClassName
Enter Text
Enter Text
Enter Text
Attribute_1 :
Attribute_2 :
...
Attribute_m :
Method_1 Method_2 ... Method_n
Class Mapping

6. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
6
A
A AClass Mapping
ClassNameClassName
+
+SimpleValuedAttribute_1: DataType
+SimpleValuedAttribute _2
...
SimpleValuedAttribute _p
+
+MultiValuedAttribute_1
+MultiValuedAttribute _2
...
MultiValuedAttribute_r
+ _1:SimpleReturnMethod Signature
+SimpleReturnMethod_2
...
+SimpleReturnMethod_n
+MultiReturnMethod _1: Signature
+MultiReturnMethod_2
...
+MultiReturnMethod_s
Enter Text
Enter Text
Enter Text
SimpleVA_1 :
SimpleVA_2 :
...
SimpleVA_r :
Method_1
Method_2
...
Method_n
MultiVA_1 MultiVA_2 MultiValuedAttribute_p
MultiMethod_1 MultiMethod_2 MultiMethod_s...

7. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
7
A
A AAttribute Mapping
Attribute data type Property Concrete Interaction Unit (CIU)
Boolean Check box
Hour Profiled edit field with regular expression
Date Profiled edit field with regular expression
Char Alphanumeric edit field
URL Link
Hashtag Profiled edit field with regular expression
Media Browse push button linked to media manager
String 30 Single-line edit field
60 Two-line edit field
>60 Multi-line edit field
Method Direct Push button
Indirect Edit field associated with semantic function
(Excerpt of 19 rules)

8. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
8
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Source class presentation:
Target class presentation:
Target class collection:
Flat Nested Separated
Flat Nested Separated
None
One-to-one
One-to-many
Both
All
A
B
F
C
D
E
G
Relationship Mapping

9. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
9
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Source class presentation:
Target class presentation:
Target class collection:
Flat Nested Separated
Flat Nested Separated
None
One-to-one
One-to-many
Both
All
A
B
F
C
D
E
G
Relationship Mapping

10. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
10
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Source class presentation:
Target class presentation:
Target class collection:
Flat Nested Separated
Flat Nested Separated
None
One-to-one
One-to-many
Both
All
A
B
F
C
D
E
G
Relationship Mapping

11. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
11
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Source class presentation:
Target class presentation:
Target class collection:
Flat Nested Separated
Flat Nested Separated
None
One-to-one
One-to-many
Both
All
A
B F
E G
C
D
Relationship Mapping

12. One-to-one
EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
12
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Source class presentation:
Target class presentation:
Target class collection:
Flat Nested Separated
Flat Nested Separated
None
One-to-many
Both
All
A
B F C
D
E G
Relationship Mapping

13. One-to-many
One-to-one
EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
13
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Source class presentation:
Target class presentation:
Target class collection:
Flat Nested Separated
Flat Nested Separated
None
Both
All
A
B F
C
D E G
Relationship Mapping

14. Both
One-to-many
One-to-one
EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
14
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Source class presentation:
Target class presentation:
Target class collection:
Flat Nested Separated
Flat Nested Separated
None
All
A
B F C
D E G
Relationship Mapping

15. All
Both
One-to-many
One-to-one
EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
15
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Source class presentation:
Target class presentation:
Target class collection:
Flat Nested Separated
Flat Nested Separated
None
A
B F C D E G
Relationship Mapping

16. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
16
A
A
E
A
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
= Association
relationship
Relationship
Transformation
A
D
A
D
A
D
A
D
A
D
A D
Source
model
Separated
Flat
None 1 to 1 1 to m Both All
Combined
Nested
FlatNested
Combined
A D
A
D
Relationship
mapping
Simple inheritance

17. EICS’2019 (Valencia, June 18th–21st, 2019)
Hypothetical UML V2.5 Class Diagram
17
= Association
relationship
A
A
B
A
C
A
F
A
D
A
E
A
G
A
1..1
1..1
1..n
1..n
1..1 1..n
Relationship
Transformation
Multi-level
inheritance
A
A
E
A
G
A
A
E
G
A
E
G
A
E G
A
E G
A
E G
A
E G
Source
model
FlatNested
SeparatedCombined
Flat
None 1 to 1 1 to m Both All
Combined
Nested
A
E G
A
E G
A
E G
A
E G
A
E G
A
E G
A
E
G
A
E G
A
E G
A
E G
A
E G
A
E G
Relationship
Mapping

18. EICS’2019 (Valencia, June 18th–21st, 2019)
Other relationships: by transformation
18
A
A
D
A
H
A
A
A
D
A
H
A
D
A
+Relationship
Transformation
A
A
D
A
1..n
1
H
A
D
A
1..n
1Relationship
Transformation
Multiple
inheritance

19. EICS’2019 (Valencia, June 18th–21st, 2019)
Other relationships: by transformation
19
Composition
Relationship
Transformation
A
A
D
A
0..n
1
A
A
D
A
Relationship
Transformation
A
A
D
A
1..n
1 A
A
+

20. • MoCaDix Process: Step 1
Model editor Class
diagram
Step 1 – Model editing
EICS’2019 (Valencia, June 18th–21st, 2019)

21. • MoCaDix Process: Step 2
Model editor Class
diagram
Step 1 – Model editing
User Interface
patterns
Pattern design
options
Pattern selection and
parametrization
Patterns
parameters
UI preview
Step 2 – Parametrization
EICS’2019 (Valencia, June 18th–21st, 2019)

22. • MoCaDix Process: Step 3
Model editor Class
diagram
User Interface
patterns
Pattern design
options
Pattern selection and
parametrization
Patterns
parameters
UI preview
Step 1 – Model editing
Step 2 – Parametrization
Concrete User Interface model generator
Concrete User
Interface model
Concrete User
Interface
model editor
Step 3 – Concrete UI generation
EICS’2019 (Valencia, June 18th–21st, 2019)

23. • MoCaDix Process: Step 4
Model editor Class
diagram
User Interface
patterns
Pattern design
options
Pattern selection and
parametrization
Patterns
parameters
UI preview
Concrete User Interface model generator
Concrete User
Interface model
Concrete User
Interface
model editor
Step 1 – Model editing
Step 2 – Parametrization
Step 3 – Concrete UI generation
Cross-Device User Interface generator
Final User Interface
for Smartphone
Final User Interface
for Tablet
Final User Interface
for Desktop
Cloud Computing-based UI Server
Step 4 – Cross-device UI generation
EICS’2019 (Valencia, June 18th–21st, 2019)

24. • MoCaDix Process: Step 4
EICS’2019 (Valencia, June 18th–21st, 2019)
DeviceSingle MultipleDisplay
Single
Multiple

25. • MoCaDix Process: Step 4
EICS’2019 (Valencia, June 18th–21st, 2019)
Source
model
Separated
Separated
Flat
Nested
Combined
Combined
None 1to1 1tom Both All
Flat Nested
None 1to1 1tom Both All
Flat Nested
None
1to1
1tom
Both
All SDSD
SDMD/MDSD
SDMD/MDSD
MDMD

26. Example
EICS’2019 (Valencia, June 18th–21st, 2019)
Collection
+CollID : Integer
+CollName : String
+CollDate : Date
+CollTime : Hour
+CollStatus : Enum
+CollHowMany()
+CollHowMuch()
+CollCalcOverWorkers()
+CollRankWorkers()
+CollCalcForMe()
Worker
+WorkerID: Integer
+WorkerName: String
+WorkerAbout: String
+WorkerCalcForMe()
+WorkerRateMe()
1..*1
<<Enumeration>>
CollStatus
PartTime
FullTime
Retired
A
A
D
A
1..n
1
A
A
D
A
=>
A D
A D
Group of
radio
buttons
Edit field
associated
with
semantic
function
Main
concrete
interaction
unit
Secundary
concrete
interaction
unit

27. Example of GUIs
generated
EICS’2019 (Valencia, June 18th–21st, 2019)
Single device, single display (SDSD) for tablet
Source model = combined+flat, target model = flat,

28. Example of GUIs
generated
EICS’2019 (Valencia, June 18th–21st, 2019)
Source model = separated, target model = flat,
Single device, multiple displays (SDMD)
for desktop

29. • Conclusion
• We presented MoCaDix, a method for designing GUIs for cross-
device interaction starting from the UML2.5 class diagram
• Benefits
• Mapping rules are transposable to ERA, OO models
• A series of design options based on class diagram
• GUIs generated are readily available from the UML class diagram
• For experiments and examples: see paper
• Shortcomings
• Only works for Information Systems
• Only HTML5 generated GUIs, no custom widgets, no beautification
• No integration with Google Material
• Always subject to consistency with model (round-trip engineering)
EICS’2019 (Valencia, June 18th–21st, 2019)

30. Thank you very much
for your attention