Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, and Challenges Jean Vanderdonckt Université ca...
Talk’s outline <ul><li>What is model-based UI design? </li></ul><ul><ul><li>What is a UI model? </li></ul></ul><ul><ul><li...
What is the today’s situation regarding user interfaces? <ul><li>Technological aspects of user interfaces progress signifi...
What is model-based UI design? <ul><li>Classical approch to developing UIs with a UI builder (IDE) </li></ul><ul><ul><li>D...
What is model-based UI design? <ul><li>UI builders offer only partial solution </li></ul>Desired Interface <ul><li>Table w...
What is model-based UI design? <ul><li>UI builders cannot produce their own UI (no bootstrapping) </li></ul>
What is model-based UI design? <ul><li>Classical approch to developing UIs </li></ul><ul><ul><li>Advantages </li></ul></ul...
What is model-based UI design? <ul><li>Model-based UI design consists of </li></ul><ul><ul><li>Describing a UI in a UI mod...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Webster’s definitions: </li></ul></ul><ul><u...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>A simple example for understanding purposes:...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Finding the right model abstractions IS </li...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Finding the right model abstractions IS </li...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Because different evolutions </li></ul></ul>...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Because different evolutions </li></ul></ul>
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Because same widget appears in many differen...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>In order to derive UIs systematically </li><...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>In order to derive UIs systematically </li><...
What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>In order to derive UIs systematically </li><...
What is model-based UI design? <ul><li>What do we need to get a quality UI model? </li></ul><ul><ul><li>Abstractions are a...
What do we have so far? <ul><li>With this first set of abstractions, we go from Final UI (FUI) to Concrete UI (CUI) </li><...
And now what? <ul><li>UIs are not only graphical, but could be vocal, tactile, 3D, haptic, an multimodal </li></ul><ul><li...
What do we have so far? <ul><li>With this second set of abstractions, we go from CUI to Abstract UI (AUI) </li></ul><ul><l...
And now what? <ul><li>UIs, even if they are abstract, are structured according to the target system as opposed to be user-...
What do we have so far? <ul><li>With this third set of abstractions, we go from AUI to Task and Domain (T+D) </li></ul><ul...
Do we need  more models? <ul><li>Users want to determine their path on each platform </li></ul>[Forrester Research,2003]
Do we need more models? Demo FlashiXML
Do we need more models? <ul><li>Multiplicity of contexts of use </li></ul>TV is multi-media family device #1 Family Device...
Do we need more models? <ul><li>Property of plasticity = adaptation to the context of use while satisfying predefined usab...
So what we have now is Concrete user Interface S Final user Interface S Task and  Domain S Abstract user Interface S S=Sou...
Multi-platform for Emergency <ul><li>Three platforms </li></ul><ul><ul><li>Pocket PC </li></ul></ul><ul><ul><li>Desktop PC...
Multi-platform for Emergency <ul><li>Model and method </li></ul><ul><ul><li>Design the reference screen first </li></ul></...
Graceful degradation [Florins & Vanderdonckt,2004]
Transformation rules
Transformation rules Add all >> Add > << Remove all < Remove >> > << < > < Group box Item 1 Item 2 Item 3 Item 4 Item 5 It...
Transformation rules
What do we have now <ul><li>Cameleon Reference Framework </li></ul>Final user Interface T Concrete user Interface T Task a...
Other challenges raised <ul><li>C2: Need to cover </li></ul><ul><ul><li>Semantics: metamodel as a UML Class Diagram </li><...
Towards model-driven engineering <ul><li>Possible definition </li></ul><ul><ul><li>MDA is an OMG initiative that proposes ...
Towards model-driven engineering <ul><li>C5: Keep decision decision as SDLC is evolving </li></ul><ul><ul><li>Support for ...
Example of preference-based design <ul><li>Goal = to input the temperature of a human body </li></ul><ul><ul><li>Solution ...
How to argue for preference? <ul><li>Use the QOC notation </li></ul>Question? [McLean & Belotti,1998] Criteria 1 Criteria ...
Preference example Problem Solution 1 Solution 2 (RE1) (RE2) suggests suggests avoids contradicts respects = for = against...
Theory of argumentation [Toulmin,1975] [Perelman, 1978] Design problem Design option parameter (parameter, value) Is descr...
Towards model-driven engineering <ul><li>C6: Need to support (de)composition </li></ul>Demo FormiXML
Towards Model-Driven Engineering <ul><li>C7: Support for multi-path development </li></ul><ul><li>Different types of engin...
Revisitation [Bouillon,2006]
Towards Model-Driven Engineering <ul><li>C8: Support for multi-fidelity </li></ul>Demo SketchiXML
Towards model-driven engineering <ul><li>Other challenges (C13 -> C16) </li></ul><ul><ul><li>High ceiling </li></ul></ul><...
Towards model-driven engineering <ul><li>Other challenges (C13 -> C16) </li></ul><ul><ul><li>High ceiling </li></ul></ul><...
Towards model-driven engineering <ul><li>C17: Effort incrementality and C19: rendering engines </li></ul><ul><ul><li>UsiXM...
Developed by Donatien Grolaux <ul><li>Problem: how to design a UI that takes care of multiple displays? </li></ul><ul><li>...
Demonstration DistriXML [Grolaux & Vanderdonckt,2005]
Demonstration using two displays from two different computers DistriXML
Example using a Pocket PC DistriXML
UI Migration: DEMIPLAT <ul><li>De tach </li></ul>DistriXML
UI Migration: DEMIPLAT <ul><li>De tach -  Mi grate </li></ul>DistriXML
UI Migration: DEMIPLAT <ul><li>De tach -  Mi grate -  Pl astify </li></ul>DistriXML
UI Migration: DEMIPLAT <ul><li>De tach -  Mi grate -  Pl astify -  At tach </li></ul>DistriXML
This is not a floating toolbar Process DistriXML
This is migration ! Computer B Process Process Computer A DistriXML
Towards model-driven engineering <ul><li>C18: More dynamic aspects </li></ul><ul><ul><li>Mixed reality </li></ul></ul>Mino...
Conclusion <ul><li>What can be really supported? </li></ul>[Skezely,1996] 0 2000 4000 6000 8000 10000 12000 14000 16000 Wo...
Conclusion <ul><li>Successes: </li></ul><ul><ul><li>Work for very-well defined domains </li></ul></ul><ul><ul><li>Really f...
How to participate? <ul><li>Join the UsiXML Consortium today! </li></ul><ul><ul><li>Anybody can be a member: observer, par...
How to participate? <ul><li>Develop web services for UsiXML </li></ul><ul><li>Open positions in UsiXML project (from April...
Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi   http://www.u...
Upcoming SlideShare
Loading in …5
×

Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, and Challenges

2,580 views
2,449 views

Published on

Model-driven engineering (MDE) of user interfaces consists in describing a user interface and aspects involved in it (e.g., task, domain, context of use) in models from which a final interface is produced. With one big win in mind: when the user’s requirements or the context of use change, the models change accordingly and so does the supporting user interface. Models and a method for developing user interfaces based on MDE are presented in this tutorial supporting forward engineering (a new interface is produced), reverse engineering (an existing interface is improved), and lateral engineering (an existing interface is adapted to a new context of use). Software supporting this method will be used based on UsiXML (User Interface eXten-sible Markup Language), a XML-compliant user interface description language.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Hi,

    Have you seen Himalia Project? www.himalia.net

    It was a research project made by me, it might be interesting for you.
    If so, please drop me a line to leovernazza -at- himalia -dot- net.

    Regards
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,580
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
128
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, and Challenges

  1. 1. Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, and Challenges 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 Place des Doyens, 1 – B-1348 Louvain-la-Neuve (Belgium)
  2. 2. Talk’s outline <ul><li>What is model-based UI design? </li></ul><ul><ul><li>What is a UI model? </li></ul></ul><ul><ul><li>What do we need to get a quality UI model? </li></ul></ul><ul><ul><li>How many models do we need to characterize a UI? </li></ul></ul><ul><li>From model-based UI design to model-driven UI engineering </li></ul><ul><ul><li>Three dimensions </li></ul></ul><ul><ul><ul><li>What are the models? Which language? </li></ul></ul></ul><ul><ul><ul><li>What is the methodological approach to manipulate them? </li></ul></ul></ul><ul><ul><ul><li>What is the tool support? </li></ul></ul></ul><ul><ul><li>Promises </li></ul></ul><ul><ul><li>Successes vs failures </li></ul></ul><ul><ul><li>Challenges </li></ul></ul><ul><li>What can we do today together? </li></ul>
  3. 3. What is the today’s situation regarding user interfaces? <ul><li>Technological aspects of user interfaces progress significantly faster than </li></ul><ul><ul><li>Software engineering aspects </li></ul></ul><ul><ul><ul><li>It takes time to develop a user interface with a new device, a new interaction technique </li></ul></ul></ul><ul><ul><ul><li>It takes more time to develop a toolkit </li></ul></ul></ul><ul><ul><ul><li>It takes even more time to rely on a model-driven approach </li></ul></ul></ul><ul><ul><li>Usability engineering aspects </li></ul></ul><ul><ul><ul><li>New user interfaces are shipped with usability problems because </li></ul></ul></ul><ul><ul><ul><ul><li>Little or no experience </li></ul></ul></ul></ul><ul><ul><ul><ul><li>No past, no empirical evidence </li></ul></ul></ul></ul><ul><ul><ul><li>Empirical experiments require a lot of resources if done carefully </li></ul></ul></ul>[Dragicevic et al.,2004]
  4. 4. What is model-based UI design? <ul><li>Classical approch to developing UIs with a UI builder (IDE) </li></ul><ul><ul><li>Describe it, prototype it, code it with trial and errors, repeat </li></ul></ul>
  5. 5. What is model-based UI design? <ul><li>UI builders offer only partial solution </li></ul>Desired Interface <ul><li>Table with dynamic data </li></ul><ul><li>Gantt chart </li></ul><ul><li>Direct manipulation of widgets </li></ul>UI Builder Solution <ul><li>Window </li></ul><ul><li>Menu bar </li></ul><ul><li>Palette (icons) </li></ul><ul><li>Scrollbars </li></ul><ul><li>Other widgets: drop-down list, etc. </li></ul>
  6. 6. What is model-based UI design? <ul><li>UI builders cannot produce their own UI (no bootstrapping) </li></ul>
  7. 7. What is model-based UI design? <ul><li>Classical approch to developing UIs </li></ul><ul><ul><li>Advantages </li></ul></ul><ul><ul><ul><li>UI is graphical by nature </li></ul></ul></ul><ul><ul><ul><li>A UI can be </li></ul></ul></ul><ul><ul><ul><ul><li>Rapidly prototyped </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Easily modified </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Visually demonstrated </li></ul></ul></ul></ul><ul><ul><li>Shortcomings </li></ul></ul><ul><ul><ul><li>No structured method for layout and programming </li></ul></ul></ul><ul><ul><ul><li>Selection of widget can be inappropriate </li></ul></ul></ul><ul><ul><ul><li>Layout of widget can be tedious, repetitive </li></ul></ul></ul><ul><ul><ul><li>Problem of the spaghetti of callbacks </li></ul></ul></ul><ul><ul><ul><li>Any UI modification can lead to unstructured design </li></ul></ul></ul>
  8. 8. What is model-based UI design? <ul><li>Model-based UI design consists of </li></ul><ul><ul><li>Describing a UI in a UI model </li></ul></ul><ul><ul><li>Relying on this UI model to drive the UI development lifecycle </li></ul></ul><ul><ul><li>While pursuing the following goals: </li></ul></ul><ul><ul><ul><li>To provide comprehensive UI development environments </li></ul></ul></ul><ul><ul><ul><li>To deliver robust development lifecycle support </li></ul></ul></ul><ul><ul><ul><li>To improve portability </li></ul></ul></ul><ul><ul><ul><li>To integrate usability with UI development </li></ul></ul></ul><ul><ul><li>A structure in 3 dimensions </li></ul></ul>Models UsiXML Language Step-wise method Software tools support involves described in Development methodology
  9. 9. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Webster’s definitions: </li></ul></ul><ul><ul><ul><li>« One who is employed to display clothes or other merchandise » </li></ul></ul></ul><ul><ul><ul><li>« A set of plans for a building » (good analogy) </li></ul></ul></ul><ul><ul><ul><li>« A system of postulates, data, and inferences presented as mathematical description of an entity or state of affairs » </li></ul></ul></ul><ul><ul><li>Our definition </li></ul></ul><ul><ul><ul><li>A structured set of plans for developing a UI </li></ul></ul></ul><ul><ul><ul><li>A system of postulates, data, and inferences presented as a UI description (or specification) that drives the UI development lifecycle </li></ul></ul></ul>
  10. 10. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>A simple example for understanding purposes: a system login </li></ul></ul><ul><ul><li>Finding the right model abstractions is NOT </li></ul></ul><ul><ul><ul><li>Replicating code in another way </li></ul></ul></ul><ul><ul><ul><li>Capturing all physical properties </li></ul></ul></ul>
  11. 11. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Finding the right model abstractions IS </li></ul></ul><ul><ul><ul><li>Turning important aspects into UI design options </li></ul></ul></ul><ul><ul><ul><ul><li>E.g. LabelAlignement instead of absolute coordinates </li></ul></ul></ul></ul><ul><ul><ul><li>Deriving final properties from these options </li></ul></ul></ul><ul><ul><ul><ul><li>E.g., compute coordinates from LabelAlignement = {left, right, aligned, centred, justified} </li></ul></ul></ul></ul>LabelAlignement = left ButtonPlacement = TotalEquil
  12. 12. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Finding the right model abstractions IS </li></ul></ul><ul><ul><ul><li>Describing UI widgets independently from technology </li></ul></ul></ul><ul><ul><ul><li>Why? </li></ul></ul></ul>Identification label Input text Push button
  13. 13. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Because different evolutions </li></ul></ul>time Platform User Environment Language
  14. 14. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Because different evolutions </li></ul></ul>
  15. 15. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>Because same widget appears in many different technologies </li></ul></ul><ul><ul><li>Because many different ways to reach the same goal (e.g., selector) </li></ul></ul>Check Box (Windows) BoxArray (Garnet) XmToggleButton (OSF-Motif)
  16. 16. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>In order to derive UIs systematically </li></ul></ul>GrafiXML
  17. 17. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>In order to derive UIs systematically </li></ul></ul>GrafiXML
  18. 18. What is model-based UI design? <ul><li>What is a model? </li></ul><ul><ul><li>In order to derive UIs systematically </li></ul></ul>Edit the UsiXML Show attributes A click on the tree highlights the corresponding UsiXML GrafiXML
  19. 19. What is model-based UI design? <ul><li>What do we need to get a quality UI model? </li></ul><ul><ul><li>Abstractions are always limited, but extensible Plateau effect: </li></ul></ul><ul><ul><ul><li>Do not introduce too many, otherwise too complex (<> simple) </li></ul></ul></ul><ul><ul><ul><li>Do not introduce too few, otherwise too simplistic (<> simple) </li></ul></ul></ul><ul><ul><li>C1: Need to ensure quality properties of a model </li></ul></ul><ul><ul><ul><li>Completeness </li></ul></ul></ul><ul><ul><ul><li>Consistency </li></ul></ul></ul><ul><ul><ul><li>Correction </li></ul></ul></ul><ul><ul><ul><li>Expressiveness </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul>CUI Model CIO graphicalCIO graphicalContainer graphicalIndividualComponent
  20. 20. What do we have so far? <ul><li>With this first set of abstractions, we go from Final UI (FUI) to Concrete UI (CUI) </li></ul><ul><li>Consequently, a CUI is independent from </li></ul><ul><ul><li>Any language: (X)HTML, Java, Visual Basic, C++ </li></ul></ul><ul><ul><li>Any computing platform: Windows, Linux, MacOS </li></ul></ul>Concrete user Interface S Final user Interface S
  21. 21. And now what? <ul><li>UIs are not only graphical, but could be vocal, tactile, 3D, haptic, an multimodal </li></ul><ul><li>So, there is a need for more abstraction </li></ul>Abstract Container Abstract Individual Component with Output Abs. Ind. Comp. with Input Abs. Ind. Comp. with Control
  22. 22. What do we have so far? <ul><li>With this second set of abstractions, we go from CUI to Abstract UI (AUI) </li></ul><ul><li>Consequently, a AUI is independent from </li></ul><ul><ul><li>Any interaction modality </li></ul></ul>Concrete user Interface S Final user Interface S Abstract user Interface S
  23. 23. And now what? <ul><li>UIs, even if they are abstract, are structured according to the target system as opposed to be user-centered </li></ul><ul><li>So, there is a need for an abstraction that is computing independent </li></ul><ul><ul><li>Task and domain models (UML Class Diagram) </li></ul></ul>System Login Enter information Check U+P []>> Enter Username Enter Password ||| Check existence Verify correspondence |||
  24. 24. What do we have so far? <ul><li>With this third set of abstractions, we go from AUI to Task and Domain (T+D) </li></ul><ul><li>Consequently, a T+D is independent from any implementation </li></ul>Concrete user Interface S Final user Interface S Task and Domain S Abstract user Interface S
  25. 25. Do we need more models? <ul><li>Users want to determine their path on each platform </li></ul>[Forrester Research,2003]
  26. 26. Do we need more models? Demo FlashiXML
  27. 27. Do we need more models? <ul><li>Multiplicity of contexts of use </li></ul>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
  28. 28. Do we need more models? <ul><li>Property of plasticity = adaptation to the context of use while satisfying predefined usability properties of interest </li></ul>[Grolaux et al.,2002] Demo FlexClock
  29. 29. So what we have now is Concrete user Interface S Final user Interface S Task and Domain S Abstract user Interface S S=Source context of use User S [Calvary et al.,2003] In GrafiXML Platform S Environment S
  30. 30. Multi-platform for Emergency <ul><li>Three platforms </li></ul><ul><ul><li>Pocket PC </li></ul></ul><ul><ul><li>Desktop PC </li></ul></ul><ul><ul><li>Wall Screens </li></ul></ul>
  31. 31. Multi-platform for Emergency <ul><li>Model and method </li></ul><ul><ul><li>Design the reference screen first </li></ul></ul><ul><ul><li>Refine the others screens later </li></ul></ul><ul><ul><ul><li>By applying graceful degradation </li></ul></ul></ul><ul><ul><ul><li>By applying transformation techniques </li></ul></ul></ul>
  32. 32. Graceful degradation [Florins & Vanderdonckt,2004]
  33. 33. Transformation rules
  34. 34. 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
  35. 35. Transformation rules
  36. 36. What do we have now <ul><li>Cameleon Reference Framework </li></ul>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 [Calvary et al.,2003] Environment T Reification Abstraction Reflexion Translation Platform S Environment S Platform T
  37. 37. Other challenges raised <ul><li>C2: Need to cover </li></ul><ul><ul><li>Semantics: metamodel as a UML Class Diagram </li></ul></ul><ul><ul><li>Syntax: UsiXML language </li></ul></ul><ul><ul><li>Stylistics: </li></ul></ul><ul><li>C3: Minimum amount of models </li></ul><ul><li>C4: Maximum amount of models </li></ul>Root insert search criteria view results aux show item details show list items select item insert criteria submit edit edit criteria submit view results show view details view items show select
  38. 38. Towards model-driven engineering <ul><li>Possible definition </li></ul><ul><ul><li>MDA is an OMG initiative that proposes to define a set of non-proprietary standards that will specify interoperable technologies with which to realize model-driven development with automated transformations. Not all of these technologies will directly concern the transformation involved in MDA. MDA does not necessarily rely on the UML, but, as a specialized kind of MDD (Model Driven Development), MDA necessarily involves the use of model(s) in development, which entails that at least one modeling language must be used. Any modeling language used in MDA must be described in terms of the MOF language to enable the metadata to be understood in a standard manner, which is a precondition for any activity to perform automated transformation . </li></ul></ul>
  39. 39. Towards model-driven engineering <ul><li>C5: Keep decision decision as SDLC is evolving </li></ul><ul><ul><li>Support for annotation-based design </li></ul></ul>
  40. 40. Example of preference-based design <ul><li>Goal = to input the temperature of a human body </li></ul><ul><ul><li>Solution n°1: edit box </li></ul></ul><ul><ul><li>Solution n°2: list box </li></ul></ul><ul><ul><li>Solution n°3: drop down list </li></ul></ul><ul><ul><li>Solution n°4: field with scroll bar </li></ul></ul><ul><ul><li>Solution n°5: thermometer </li></ul></ul>
  41. 41. How to argue for preference? <ul><li>Use the QOC notation </li></ul>Question? [McLean & Belotti,1998] Criteria 1 Criteria 2 Criteria j Criteria m Option 1 Option 2 Option i Option n = negatively affects = positively affects
  42. 42. 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
  43. 43. Theory of 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
  44. 44. Towards model-driven engineering <ul><li>C6: Need to support (de)composition </li></ul>Demo FormiXML
  45. 45. Towards Model-Driven Engineering <ul><li>C7: Support for multi-path development </li></ul><ul><li>Different types of engineering </li></ul><ul><ul><li>Forward engineering </li></ul></ul><ul><ul><li>Reverse engineering </li></ul></ul><ul><ul><li>Lateral engineering </li></ul></ul><ul><ul><li>Diagonal engineering (with or without shortcuts) </li></ul></ul><ul><li>Different approaches </li></ul><ul><ul><li>Top-down </li></ul></ul><ul><ul><li>Bottom-up </li></ul></ul><ul><ul><li>Middle-out </li></ul></ul><ul><li>Different development paths </li></ul><ul><ul><li>Example: Round-trip engineering = composition of </li></ul></ul><ul><ul><ul><li>Reification CUI -> FUI </li></ul></ul></ul><ul><ul><ul><li>Reflexion FUI -> FUI </li></ul></ul></ul><ul><ul><ul><li>Abstraction FUI -> CUI </li></ul></ul></ul><ul><ul><ul><li>Reflexion CUI -> CUI </li></ul></ul></ul>
  46. 46. Revisitation [Bouillon,2006]
  47. 47. Towards Model-Driven Engineering <ul><li>C8: Support for multi-fidelity </li></ul>Demo SketchiXML
  48. 48. Towards model-driven engineering <ul><li>Other challenges (C13 -> C16) </li></ul><ul><ul><li>High ceiling </li></ul></ul><ul><ul><li>Low threshold </li></ul></ul><ul><ul><li>Wide walls </li></ul></ul>Capabilities Resources (time, experience,…) 100% 50% Ceiling Threshold First generation Second generation MDA CASE tools Interface builders and integrated environments Resource win for applications supported by MDA-compliant tools Resource win for applications supported by first-generation
  49. 49. Towards model-driven engineering <ul><li>Other challenges (C13 -> C16) </li></ul><ul><ul><li>High ceiling </li></ul></ul><ul><ul><li>Low threshold </li></ul></ul><ul><ul><li>Wide walls </li></ul></ul>Capabilities Resources (time, experience,…) 100% 50% Ceiling Threshold First generation Second generation Third generation Integrated Development Environments UI types Walls
  50. 50. Towards model-driven engineering <ul><li>C17: Effort incrementality and C19: rendering engines </li></ul><ul><ul><li>UsiXML interpreter for </li></ul></ul><ul><ul><ul><li>Graphical user interfaces: XHTML, XUL, Java, Flash, Tcl-Tk </li></ul></ul></ul><ul><ul><ul><li>Vocal user interfaces: VoiceXML </li></ul></ul></ul><ul><ul><ul><li>Multimodal user interfaces: X+V </li></ul></ul></ul><ul><ul><ul><li>Haptic user interfaces: HaptiXML </li></ul></ul></ul><ul><ul><li>Support for </li></ul></ul><ul><ul><ul><li>Distributed user interfaces </li></ul></ul></ul><ul><ul><ul><li>Mixed-reality user interfaces </li></ul></ul></ul>
  51. 51. Developed by Donatien Grolaux <ul><li>Problem: how to design a UI that takes care of multiple displays? </li></ul><ul><li>Solution: Migration = DEMIPLAT </li></ul><ul><li>DistriXML = software architecture for migrating UIs from one platform to another at run-time </li></ul>DistriXML [Grolaux & Vanderdonckt,2005] Pencil Palette Painting Painting tool
  52. 52. Demonstration DistriXML [Grolaux & Vanderdonckt,2005]
  53. 53. Demonstration using two displays from two different computers DistriXML
  54. 54. Example using a Pocket PC DistriXML
  55. 55. UI Migration: DEMIPLAT <ul><li>De tach </li></ul>DistriXML
  56. 56. UI Migration: DEMIPLAT <ul><li>De tach - Mi grate </li></ul>DistriXML
  57. 57. UI Migration: DEMIPLAT <ul><li>De tach - Mi grate - Pl astify </li></ul>DistriXML
  58. 58. UI Migration: DEMIPLAT <ul><li>De tach - Mi grate - Pl astify - At tach </li></ul>DistriXML
  59. 59. This is not a floating toolbar Process DistriXML
  60. 60. This is migration ! Computer B Process Process Computer A DistriXML
  61. 61. Towards model-driven engineering <ul><li>C18: More dynamic aspects </li></ul><ul><ul><li>Mixed reality </li></ul></ul>Minority report
  62. 62. Conclusion <ul><li>What can be really supported? </li></ul>[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
  63. 63. Conclusion <ul><li>Successes: </li></ul><ul><ul><li>Work for very-well defined domains </li></ul></ul><ul><ul><li>Really fosters collaboration </li></ul></ul><ul><ul><li>Supports flexibility, maintainability (Belgium) </li></ul></ul><ul><li>Failures </li></ul><ul><ul><li>Does not work for very complex, dynamic UIs </li></ul></ul><ul><ul><li>Takes a lot of resources for </li></ul></ul><ul><ul><ul><li>Models (some) </li></ul></ul></ul><ul><ul><ul><li>Method (more) </li></ul></ul></ul><ul><ul><ul><li>Tool (even more) </li></ul></ul></ul>Support for mnemonics and shortcuts
  64. 64. How to participate? <ul><li>Join the UsiXML Consortium today! </li></ul><ul><ul><li>Anybody can be a member: observer, participant, developer </li></ul></ul><ul><ul><li>Send an e-mail to [email_address] and/or « Register » on the web site: for this purpose, provide </li></ul></ul><ul><ul><ul><li>Your firstname, last name, affiliation, desired level of membership, and motivations </li></ul></ul></ul><ul><ul><li>Think of your own research in terms of models, e.g., </li></ul></ul><ul><ul><ul><li>Instead of evaluating a Graphical UI for a certain platform, conduct its evaluation on the corresponding CUI model: it is more general, you will gain more audience </li></ul></ul></ul><ul><ul><ul><li>Instead of developing a separate tool, make it UsiXML-compliant: you will gain more audience, the results are more largely applicable </li></ul></ul></ul><ul><li>Output </li></ul><ul><ul><li>UsiXML session at conferences </li></ul></ul><ul><ul><li>UsiXML CD-ROM, etc. </li></ul></ul>
  65. 65. How to participate? <ul><li>Develop web services for UsiXML </li></ul><ul><li>Open positions in UsiXML project (from April 2009) </li></ul><ul><ul><li>PhD students </li></ul></ul><ul><ul><li>Internships for MSc students </li></ul></ul>
  66. 66. 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

×