This presentation contains the slides of the Doctoral Course given at University of Valencia (Spain) regarding model-driven engineering of user interfaces based on UsiXML (User Interface eXtensible Markup-Language, www.usixml.org), November 2006.

1. Model-Driven Engineering of User Interfaces Jean Vanderdonckt Université catholique de Louvain (UCL) Louvain School of Management (LSM) Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI) http://www.isys.ucl.ac.be/bchi

6. Adapted from [Palanque,2002] Target Applications, Domains Notations and tools User Interface Interaction Techniques 2006 TODAY No Interaction Technique Automated, batch systems Nothing Character UIs Business applications Screen definitions Graphical User Interfaces Information systems Entity-relationship Attribute model State-transition diagrams

8. Software evolution Day 1: Why?

11. Heterogeneousness of platforms Day 1: Why?

12. Multiplicity of contexts of use Day 1: Why? 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

14. Is this web site usable? Day 1: Why?

26. Simple choice Mixed domain: Know domain: Day 1: Why? [Vanderdonckt & Faulkner,2002] Unknown domain : Amount of possible values  [2,3] Amount of possible values  [8,50] Amount of possible values  [4,7] Amount of possible values  ]50,+  [ Amount of possible values  [2,3] Amount of possible values  [4,7] Amount of possible values  [8,50] Amount of possible values  ]50,+  [

27. Choix multiple Mixed domain: Known domain: Day 1: Why? [Vanderdonckt & Faulkner,2002] Domaine inconnu : Amount of possible values  [4,7] Amount of possible values  [8,50] Amount of possible values  ]50,+  [ Amount of possible values  [2,3] Amount of possible values  [4,7] Amount of possible values  [8,50] Amount of possible values  ]50,+  [ Amount of possible values  [2,3]

44. Derivation panel with preview CTTE Operator Operator parameters Design comment resulting from Applying guidelines Design Preview that dynamically changes according to parameters Legends Day 1: Why? [Vanderdonckt et al.,2003]

49. Typical models

50. 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 Day 2: What? [Calvary et al.,2003] Environment T Reification Abstraction Reflexion Translation Platform S Environment S Platform T

53. Revisitation [Bouillon,2006]

58. Adapted from [Palanque,2002] Target Applications, Domains Notations and tools User Interface Interaction Technique 2006 TODAY 2007 No Interaction Technique Automated, batch systems Nothing Character UIs Business applications Screen definitions Graphical User Interfaces Information systems Entity-relationship Attribute model State-transition diagrams Multi-platform User Interfaces Web, Java applications Task model, context model, UML ,…

69. MDE based on UsiXML Model to Model Platform Independent Model (PIM) Platform Specific Model (PSM) Model to Code Source code MDA Components Techniques proposed based on UsiXML Computing Independent Model (CIM) Model to Model UsiXML model: Abstract user interface UsiXML model: Concrete user interface Rendering Final user interface UsiXML models: task, domain Graph transformations Graph transformations

70. CIM Step 1: Task model

73. New Abstraction: the task meta-model [Limbourg,2004]

74. CIM Step 2: domain model [Limbourg,2004]

75. CIM Step 3: Task-domain mappings IdealXML [Limbourg,2004]

77. Abstraction: the abstract UI

79. IdealXML [Montero,2005]

80. Example of AUI produced

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

84. Example solution (first variant)

85. Example solution (first variant)

86. Task and domain models [Montero,2005]

87. Typed Model-to-Model Transformation Uses language Meta-Meta-Model Graph Structure is instance of Meta-Model Our Meta-Model Meta-Model Subset 1 e.g., Task+Domain Model is instance of Meta-Model Subset 2 e.g., Concrete UI Model is instance of Initial UI Model e.g., MyTaskAndDomainModel Resultant UI Model e.g., MyConcreteUIModel Transformation Rule Our transformation catalog [Limbourg,2004]

90. Transformation system [Limbourg,2004] G Host USIXM specification G’ Resultant USIXM specification LHS RHS Matches - Co-Matches Is Transformed Into Is Transformed Into Transformation Rule 1 Transformation Rule 2 … Transformation Rule N Transformation System NAC Not Matches +

92. PIM step: task+domain to AUI Identification of AUI structure Spatio-Temporal Arrangement of AIOs Selection of AIC Definition of Abstract Dialog Control STEP : From Task & Domain to AUI SUB-STEPS Derivation of AUI to Domain Relationships

93. How to read a graph transformation? Node type Node (Attribute,value) Edge type Edge (Attribute,value) Node Edge

94. Rule 1 LHS RHS ::= Ø

95. Rule 2 LHS RHS ::=

96. Rule 3 LHS RHS ::=

97. Rule 4 LHS RHS ::= NAC

98. Rule 5 LHS RHS ::= NAC1 NAC2

99. Rule 6 LHS RHS ::=

100. Rule 7 LHS RHS ::= PAC “ X < 3000”

101. Rule 8 LHS RHS ::= PAC “ X > 3000” NAC

102. Rule 9 LHS RHS ::=

103. Rule 10 PAC LHS RHS ::= “ X > Y”

104. PIM sub-step 1: Definition of AUI structure (AC)

105. PIM sub-step 1: Definition of AUI structure (AC)

106. Facet type

108. AC Participate to OpinionPoll AC Answer Poll AC Answer Questionnaire AC Answer Question AIC (Input/Single Selection) Select Proposition AIC (Output) See Statistics AIC (Input/Single Selection ) Chose Poll AIC (Control) Validate Question AIC (Output) Provide Personal Data AIC (Output) Read Question AIC (Input/Single Selection) Chose Questionnaire

109. PIM sub-step 2: definition of AIC types AC = Abstract Container AIC = Abstract Individual Component CIC = Concrete Interaction Component

110. PIM sub-step 3: Definition of spatio-temporal arrangement

112. PSM Step: AUI to CUI Reification of AC into CC Arrangement of CICs Selection of CIC Concrete Dialog Control Definition STEP : From AUI to CUI SUB-STEPS Definition of Navigation Derivation of CUI to Domain Relationships

113. PSM sub-step 3: definition of navigation An example of a complex rule

114. PSM: Concrete User Interface

115. Example: Platform adaptation widget substitution (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 a UsiXML CUI specification

116. Example: widget substitution (2)

117. Example: widget substitution (3) The UsiXML graph before applying any rule

118. Example: widget substitution (4) LHS RHS NAC Rule 1: Create a new comboBox with the same id and name as the name of the group of radioButtons.

119. Example: widget substitution (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 applying the first rule

120. Example: widget substitution (6) LHS RHS ::= Rule 2: Convert every radio button within the group “x” into an item for the comboBox “x” that we have just created thanks to Rule 1

121. Example: widget substitution (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 applying the second rule: radio buttons disappeared

122. Example: widget substitution (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

123. Example: widget substitution (9)

124. 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

125. Multiple development paths

126. Mapping the Methodological World onto the Transformation World A development library stores (in usiXML textual format) paths, steps and sub-steps definition and their associated transformation systems and transformation rules Development step Development step Development sub - step Development sub - step Development path Development path Transformation System Transformation System Transformation Rule Transformation Rule isComposedOf isRealizedBy isComposedOf isComposedOf * 1 * 1 1 * 1 0..1 Development step Development step Development sub - step Development sub - step Development path Development path Transformation System Transformation System Transformation Rule Transformation Rule isComposedOf isRealizedBy isComposedOf isComposedOf * 1 * 1 1 * 1 0..1 Methodological World Development step Development step Development sub - step Development sub - step Development path Development path Transformation System Transformation System Transformation Rule Transformation Rule isComposedOf isRealizedBy isComposedOf isComposedOf * 1 * 1 1 * 1 0..1 Transformation World [Limbourg,2004]

127. Multiple development paths Rule n Transformation System 1 Rule 1 Rule 2 … Rule n Transformation System 2 Rule 1 Rule 2 … Rule n Transformation System ... Rule 1 Rule 2 … Rule n Transformation System n Rule 1 Rule 2 … : when source terminates apply target : execute development step Development Step α

131. What is a Feature Model? C F1 C F1 F2 C F1 F2 Dependencies 1. 2. Optional Exclusive Alternate [Schlee & Vanderdonckt,2004]

132. Example of a Feature Model Alternate [Schlee & Vanderdonckt,2004]

133. Interpretation of a feature model C F1 F2 F3 F2a F2b F3a F3b C F1 F2 F3 F2a F2b F3a F3b 0 1 1 1 1 0 0 UsiXML Specifications <C> <F1>0</F1> <F2>1 <F2a>1</F2a> <F2b>0</F2b> </F2> <F3>1 <F3a>0</F3a> <F3b>1</F3b> </F3> </C> ABA ANGIE-Part [Schlee & Vanderdonckt,2004]

134. Generative Programming void channelFftSpectrum(T*, T*, T*, Pl* ppl = NULL); void channelRange (T*, Pl* ppl = NULL ); void nlinFilterCommon (const int& nID, Mask*, Pl*); int pot (const unsigned int& ) const; ImgProcessT<T>& channelXor (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelMix (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSub (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL); ImgProcessT<T>& chann elMix ImgProcessT<T> & channelSub (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelMix (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSub (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL); V oid channelFftSpectrum(T*, T*, T*, Pl* ppl = NULL); void channelRange (T*, Pl* ppl = NULL ); void nlinFilterCommon (const int& nID, Mask*, Pl*); int pot (const unsigned int& ) const; ImgProcessT<T>& channelXor (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelMix (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSub (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL); public: ImgProcessT(const char* const psz = &quot;&quot;, Pl* ppl = NULL); ImgProcessT(const int&, const int& nWidth = 20, const int& nHeight = 20, const int& nFillColor = 0, ProgressLine* ppl = NULL ); ImgProcessT(const ImgProcessT<T>&); virtual ~ImgProcessT(); virtual char* getClassName() const; virtual char getClassID () const; ImgProcessT<T>& operator+=(const ImgProcessT<T>&); ImgProcessT<T>& operator-=(const ImgProcessT<T>&); ImgProcessT<T>& operator^=(const ImgProcessT<T>&); ImgProcessT<T> operator+ (const ImgProcessT<T>&); ImgProcessT<T> operator- (const ImgProcessT<T>&); ImgProcessT<T> operator^ (const ImgProcessT<T>&); ImgProcessT<T>& channelNLinFilter(const int&, Mask*, T*, Pl* ppl=NULL); mgProcessT<T>& operator+=(const ImgProcessT<T>&); ImgProcessT<T>& operator-=(const ImgProcessT<T>&); ImgProcessT<T>& operator^=(const ImgProcessT<T>&); ImgProcessT<T> operator+ (const ImgProcessT<T>&); ImgProcessT<T> operator- (const ImgProcessT<T>&); ImgProcessT<T> operator^ (const ImgProcessT<T>&); ImgProcessT<T>& channelNLinFilter(const int&, Mask*, T*, Pl* ppl=NULL); void channelFftSpectrum(T*, T*, T*, Pl* ppl = NULL); void channelRange (T*, Pl* ppl = NULL ); void nlinFilterCommon (const int& nID, Mask*, Pl*); int pot (const unsigned int& ) const; ImgProcessT<T>& channelXor (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelMix (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSub (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL); USIXML Specifications ImgProcessT<T>& channelMix (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSub (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL) ImgProcessT<T>& channelMix (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSub (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL) Components void areaOperation(const int&, const int&, const int&, const int&, ImgProcessT<T>& (ImgProcessT<T>::*pimgpr)(const int&, Pl*), const int& nAngle, Pl* ppl ); void areaOperation(const int&, const int&, const int&, const int&, ImgProcessT<T>& (ImgProcessT<T>::*pimgpr)(Pl*), Pl* ppl ); void areaOperation(const int&, const int&, const int&, const int&, ImgProcessT<T>& (ImgProcessT<T>::*pimgpr)(const int&, const int&, const int&, const int& ), const int&, const int&, const int&, const int& ); void channelShowHistogram( int*, const int&, const int&, const int&, const int&, const int&, const int&, const int& n = 0 ) const; void channelFft ( T*, T*, T*, const unsigned int&, const unsigned int&, Pl* ppl = NULL ); void channelIfft ( T*, T*, T*, const unsigned int&, const unsigned int&, Pl* ppl = NULL ); void channelFftSpectrum(T*, T*, T*, Pl* ppl = NULL); void channelRange (T*, Pl* ppl = NULL ); void nlinFilterCommon (const int& nID, Mask*, Pl*); int pot (const unsigned int& ) const; ImgProcessT<T>& channelXor (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelMix (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSub (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL); public: ImgProcessT(const char* const psz = &quot;&quot;, Pl* ppl = NULL); ImgProcessT(const int&, const int& nWidth = 20, const int& nHeight = 20, const int& nFillColor = 0, ProgressLine* ppl = NULL ); ImgProcessT(const ImgProcessT<T>&); virtual ~ImgProcessT(); virtual char* getClassName() const; virtual char getClassID () const; ImgProcessT<T>& operator+=(const ImgProcessT<T>&); I Final code ImgProcessT<T>& channelAdd (T*, T*, Pl* ppl = NULL); ImgProcessT<T>& channelSubBalanced(T*, T*, Pl* ppl = NULL); public: ImgProcessT(const char* const psz = &quot;&quot;, Pl* ppl = NULL); ImgProcessT(const int&, const int& nWidth = 20, const int& nHeight = 20, const int& nFillColor = 0, ProgressLine* ppl = NULL ); void channelFftSpectrum(T*, T*, T*, Pl* ppl = NULL); void channelRange (T*, Pl* ppl = NULL ); void channelFftSpectrum(T*, T*, T*, Pl* ppl = NULL); void channelRange (T*, Pl* ppl = NULL ); void channelFftSpectrum(T*, T*, T*, Pl* ppl = NULL); void channelRange (T*, Pl* ppl = NULL ); void channelFftSpectrum(T*, T*, T*, Pl* ppl = NULL); void channelRange (T*, Pl* ppl = NULL ); [Schlee & Vanderdonckt,2004]

136. Design Tab Design window Components toolbar Components options

141. 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

144. From compiled code [Marion,2005]

155. 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 Let’s go for adaptation [Calvary et al.,2003] Reification Abstraction Platform S Environment S

156. 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 UsiXML unsupported model UsiXML supported model User S User T [Calvary et al.,2003] Environment T Reification Abstraction Reflexion Translation Platform S Environment S Platform T

174. Multi-platform for Emergency [Amouh et al.,2005]

177. Graceful degradation [Florins & Vanderdonckt,2004]

178. Transformation rules

179. Transformation rules Add all >> Add > << Remove all < Remove >> > << < > < Group box Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 1 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

180. Transformation rules

182. Context model

183. Adapted from [Palanque,2002] Target Applications, Domains Notations and tools User Interface Interaction Technique 2006 TODAY 2007 No Interaction Technique Automated, batch systems Nothing Character UIs Business applications Screen definitions Graphical User Interfaces Information systems Entity-relationship Attribute model State-transition diagrams Multi-platform User Interfaces Web, Java applications Task model, context model, UML ,… Virtual Reality User Interfaces 3D Applications Scene model

186. Why take care of multiple displays? [Czerwinsky,2005] Effects of Display Size on Task Times 0 20 40 60 80 100 120 140 160 DISPLAY Average Task Time (Seconds) Small Large

187. Why take care of multiple displays? The tasks were easy to perform 0 1 2 3 4 5 Small Large Display Size Average Rating (1=Disagree, 5=Agree) [Czerwinsky,2005]

188. Why take care of multiple displays? [Czerwinsky,2005]

189. Demonstration DistriXML [Grolaux & Vanderdonckt,2005]

190. Demonstration using two displays from two different computers DistriXML

191. Example using a Pocket PC DistriXML

196. This is not a floating toolbar Process DistriXML

197. This is migration ! Computer B Process Process Computer A DistriXML

223. Preference example Problem Solution 1 Solution 2 (RE1) (RE2) suggests suggests avoids contradicts respects = for = against (A1) = drop down list requires less space than radio buttons (A2) = some possible values become obsolete when they are infrequently used (A3) = drop down list shows better then current value than the possible values (A4) = radio buttons are faster and easier to manipulate than drop down list (A5) = radio buttons are recommended in Microsoft Windows style guide (A6) = radio buttons do not allow users to change the values drop down list radio buttons (A4) is contradicted by (A2) and (A3) : the widget should be more used for output than input. (A6) is contradicted by (A3) : it is better to present all possible values than only one at a time (A5) is an autority argument , and can fall in front of (A1)+(A2)+(A3) [Vanderdonckt,1997] (A1) (A2) (A3) (A4) (A5) (A6) Standard compatibility (e.g. Windows) Cognitive respect Minimal actions Dialog representativity Prompting Clarity contradicts

224. Theory or argumentation [Toulmin,1975] [Perelman, 1978] Design problem Design option parameter (parameter, value) Is described by Is solved by Accepted solution Set of admissible solutions Solution 1 Solution 2 Solution n Counter-argument (rebuttal, counter-claim) Argument (ground, typically data) can be rejected because of Can be accepted thanks to Is justified by Design claim Warrant Is reinforced by Qualifier satisfied unsatisfied Is related to corresponds to Is justified by Is qualified by

226. Mixed reality for games [Alterface,2006]

228. Composing the MIS Real CIO Patient head Virtual CIOs Anatomic organs Virtual CIOs Annotations Primary object of interest

232. Plasticity analysis and usability evaluation Plasticity Domains in the MIS Plasticity thresholds and context boundary values Inter-context continuity Perceptive, cognitive, functional intra-context continuity and inter-context continuity Intra-context / inter-context frequency and frequency switch Refined Metrics for Plastic MR systems

233. What do we have now? 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 UsiXML unsupported model UsiXML supported model User S User T Environment T Reification Abstraction Reflexion Translation Platform S Environment S Platform T

235. Evaluation [Skezely,1996] 0 2000 4000 6000 8000 10000 12000 14000 16000 Word KB KB Parser Query Network ops. UI states Presentation Actions Update Interactions Application logic User interface Generated code Models

238. Conclusion: the big picture of MDA UsiXML model: Abstract user interface UsiXML model: Concrete user interface Rendering Final user interface UsiXML models: task, domain Generative programming Graph transformations Graph transformations Derivation rules IdealXML ReversiXML FlashiXML QtkXML JaviXML VisualiXML TransformiXML GrafiXML VisiXML SketchiXML FormiXML KnowiXML MethodiXML

239. The Invisible UI All Applications Adapted from [Palanque,2002] Target Applications, Domains Notations and tools User Interface Interaction Technique No more programming: only models 2020 2006 TODAY 2008 2007 No Interaction Technique Automated, batch systems Nothing Character UIs Business applications Screen definitions Graphical User Interfaces Information systems Entity-relationship Attribute model State-transition diagrams Multi-platform User Interfaces Web, Java applications Task model, context model, UML ,… Virtual Reality User Interfaces 3D Applications Scene model Mixed Reality User Interfaces Command and control systems, games World models Tangible UIs Embodied UIs Physical models Embarked syst

240. Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language http://www.similar.cc European network on Multimodal UIs Special thanks to all members of the team!