This presentation, entitled "A MDA-Compliant Environment for Developing User Interfaces of Information Systems" summarizes the characteristics of the User Interface eXtensible Markup Language, as a support for model-driven engineering of user interfaces. This presentation was the keynote address for the CAISE'2005 conference (Porto, June 16, 2005).

1. A MDA-Compliant Environment for Developing User Interfaces of Information Systems Jean Vanderdonckt [email_address] Head of BCHI Lab, http://www.isys.ucl.ac.be/bchi

2. « Everything you can imagine is real » (Picasso) « Everything you model can be turned into a real interface »

7. 1.1 Heterogeneousness of platforms

8. 1.1 Multiplicity of contexts of use TV is multi-media family device #1 Family Device Booking notification Everywhere connectivity for simple data exchange Travelling Travel booking site Powerful interface for complex operations Working Multimedia Travel programme Sporting Experience Role Location

12. 1.2 What does it cover? User Platform Domain Task Environment

17. 1.3 Abstraction #2: the abstract UI [ Limbourg, 2004 ]

21. 1.3 Abstraction #3: the task [ Limbourg, 2004 ]

23. 1.3 Abstraction #4: the context of use [ Limbourg, 2004 ]

24. 1.3 Mapping the models [ Montero et al ., 2005 ] triggers (tg): { , } x updates (up): x observes (ob): x isExecutedIn (ex): x manipulates (ma): { , } x These mappings can be established:

26. 1.4 What do we have so far? Final User Interface (FUI) Concrete User Interface (CUI) Abstract User Interface ( AUI ) Task & Domain Rendering Code Modality-independent Abstract Individual Component Task Classes HTML push button Download Down Load Toolkit-independent Concrete Interaction Object Final User Interface (FUI) Concrete User Interface (CUI) Abstract User Interface ( AUI ) Task & Rendering Code Task Classes <input type=submit value=“Download&quot; name= Download Download Down Load Down Load Windows push button Method triggered: download a file Object: computer file OSF/Motif XmButton Graphical 2D push button Digital control AIC VRML97/X3D button Software key Function key Graphical 3D push button Physical push button Physical control AIC Control AIC

27. 1.4 What do we have so far? Concrete user Interface S Final user Interface S Task and Domain S Abstract user Interface S S=Source context of use UsiXML unsupported model UsiXML supported model User S Reification Platform S Environment S

29. 2.1 Task and domain models

30. 2.1 Task and domain models [ Limbourg, 2004 ]

31. 2.1 Task and domain models

43. 2.4 What do we have so far? Concrete user Interface S Final user Interface S Task and Domain S Abstract user Interface S S=Source context of use UsiXML unsupported model UsiXML supported model User S Reification Abstraction Platform S Environment S

49. 3.2 What do we have so far? Concrete user Interface S Final user Interface S Task and Domain S Abstract user Interface S S=Source context of use UsiXML unsupported model UsiXML supported model User S Reification Abstraction Platform S Environment S

50. 3.2 What do we want to get? Final user Interface T Concrete user Interface T Task and Domain T Abstract user Interface T T=Target context of use Concrete user Interface S Final user Interface S Task and Domain S Abstract user Interface S S=Source context of use http://www.plasticity.org UsiXML unsupported model UsiXML supported model User S User T [ Cameleon project , 2004 ] Environment T Reification Abstraction Reflexion Translation Platform S Environment S Platform T

52. Example 1: widget replacement (1) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?> < cuiModel name =&quot; MyModel &quot;> < version modifDate =&quot; 2004-03-24T17:09:17.402+01:00 &quot; xmlns =&quot;&quot;> 7 </ version > < authorName xmlns =&quot;&quot;> Youri </ authorName > < window height =&quot; 500 &quot; width =&quot; 600 &quot; name =&quot; Formulaire (2/5) &quot; id =&quot; window_1 &quot;> < box relativeHeight =&quot; 100 &quot; name =&quot; box1_0 &quot; id =&quot; box1_0 &quot;> < box type =&quot; vert &quot; name =&quot; boxTodo &quot; id =&quot; boxTodo &quot;> ... < box type =&quot; horiz &quot; name =&quot; box_2_2_2_1 &quot; id =&quot; box_2_2_2_1 &quot;> < textComponent defaultContent =&quot; Sexe &quot; isBold =&quot; true &quot; id =&quot; label_2 &quot;/> < radioButton groupName =“ grupo01 &quot; defaultContent =&quot; Femme &quot; defaultState =&quot; false &quot; id =&quot; radiobutton_0 &quot;/> < radioButton groupName =&quot; grupo01 &quot; defaultContent =&quot; Homme &quot; defaultState =&quot; true &quot; id =&quot; radiobutton_1 &quot;/> </ box > ... </ box > </ box > </ window > </ cuiModel > Excerpt for an usiXML CUI specification. [ Limbourg et al ., 2004 ]

53. Example 1: widget replacement (2)

54. Example 1: widget replacement (3) The UsiXML graph before applying any rule

55. Example 1: widget replacement (4) LHS RHS NAC Rule 1: Create a new comboBox with the same id and name as the name of the group of radioButtons. [ Limbourg et al ., 2004 ]

56. Example 1: widget replacement (5) Rule 1: Create a new comboBox with the same id and name as the name of the group of radioButtons. The usiXML graph after aplying the first rule

57. Example 1: widget replacement (6) LHS RHS ::= Rule 2: Convert every radioButton within the group “x” into an item for the comboBox “x”, we have just created. [ Limbourg et al ., 2004 ]

58. Example 1: widget replacement (7) Rule 2: Convert every radioButton within the group “x” into an item for the comboBox “x”, we have just created. The usiXML graph after aplying the second rule

59. Example 1: widget replacement (8) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?> < cuiModel name =&quot; MyModel &quot;> < version modifDate =&quot; 2004-03-24T17:09:17.402+01:00 &quot; xmlns =&quot;&quot;> 7 </ version > < authorName xmlns =&quot;&quot;> Youri </ authorName > < window height =&quot; 500 &quot; width =&quot; 600 &quot; name =&quot; Formulaire (2/5) &quot; id =&quot; window_1 &quot;> < box relativeHeight =&quot; 100 &quot; name =&quot; box1_0 &quot; id =&quot; box1_0 &quot;> < box type =&quot; vert &quot; name =&quot; boxTodo &quot; id =&quot; boxTodo &quot;> ... < box type =&quot; horiz &quot; name =&quot; box_2_2_2_1 &quot; id =&quot; box_2_2_2_1 &quot;> < textComponent defaultContent =&quot; Sexe &quot; isBold =&quot; true &quot; id =&quot; label_2 &quot;/> < comboBox id =&quot; comboBox001 &quot; name =&quot; label_3 &quot; isDropDown =&quot; true &quot;> < item id =&quot; radiobutton_0 &quot; name =&quot; radiobutton_0 &quot; defaultContent =&quot; Femme &quot;/> < item id =&quot; radiobutton_1 &quot; name =&quot; radiobutton_1 &quot; defaultContent =&quot; Homme &quot;/> </ comboBox > ... </ box > </ box > </ window > </ cuiModel > Excerpt from the final transformated usiXML specification

60. Example 1: widget replacement (9)

62. Example 2: Plastic UI [ Grolaux , Van Roy, Vanderdonckt , 2002 ]

67. Future trend: sketching? [ Coyette & Vanderdonckt , 2005 ]

71. … and you for your attention Free download and register USer Interface eXtensible Language http:// www.usixml.org SIMILAR, the European task force making user interfaces similar to human-to-human communication http:// www.similar.cc Home Page of BCHI Lab http:// www.isys.ucl.ac.be / bchi