1 Cascading Dialog Modeling with UsiXML Marco Winckler 1,2,Jean Vanderdonckt 2, Adrian Stanciulescu 2, Francisco Trindade 3 1 IRIT, Université Toulouse 3, France, 118 route de Narbonne, F Toulouse cedex 9 (France), – 2 Université catholique de Louvain (UCL) Louvain School of Management (LSM) - Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI) 3 Federal University of Rio Grande do Sul (UFRGS), Caixa Postal 15064, Porto Alegre (Brazil),

2 Issues for developing multiplatform User Interfaces (UI) Dealt with homogenous cross-platform applications Reuse solutions and specifications Reduce costs would allows to enlarge the number of platforms target A known solution: Provide platform-dependent rendering for platform- independent specifications; Ex. HTML for the Web Increase the abstraction level of UI descriptions

3 Abstraction levels for multi- platform development

4 UsiXML, a General Purpose XML User Interface Description Set of models for describing UI (structure, presentation and dialog) at different abstract levels, including: UI Model Mapping Model Domain Model AUI Model CUI Model Task Model Context Model Transformation Model Resource Model Ex. Transformation Model

5 (selected) issues on model transformation Model transformation can make X from Z… but how can we ensure the usability is not lost in this process? Transform abstract widgets into concrete UI elements (ex. button) is not that difficult but what about the behavior assigned to it? How combine model transformations and designers intention?

6 Outline Issues on dialog modeling Overview of User Interface Description Languages (UIDLs) A method for modeling dialog specification throughout several levels of abstraction A case study of dialog modeling for a multiplatform car rental application Discussion and final remarks

7 Issues on dialog modeling Main goal: represents dynamic aspects of the user interaction with the system including: Relationship between presentation units (e.g. transitions between windows) Relationship between UI elements (e.g. activate/deactivate buttons) – i.e. fine-grained dialog Describe events chain (i.e. including fusion/fission of events when multimodal interaction is involved) Integrate the functional core which requires mapping of events to actions according to predefined constraints enabling/disabling actions at runtime.

8 The meaning of abstraction levels on dialog modeling

9 Dialog Modeling of some UIDLs

10 Limitations of embedded UsiXML dialog specifications Usually focused on some particular aspects (ex. no fine grained interaction, treatment for events) Error prone as developers must go through into the code to see and fix specifications No automated tool for checking the consistency of the dialog

11 A Method for dealing with multi-level dialog specification Key points: Autonomy of the dialog Use of formal description techniques (ex. Statecharts, Petri Nets, etc) Graphical representation for the dialog Combined use of automated and manual transformations No imposed start point for dialog specifications

12 Dialog reification schema Task Model Abstract UI Abstract dialog Transformational approach Step  ?mapping? Transformational approach Concrete UI Concretedialog ?mapping? Transformational approach Step  Final UI Dialog modeling Concrete dialog (revised) Dialog modeling Step   Task modeling

13 S5 S5a S5b Dialog Modeling with SWC (based on Harel’s Statecharts) S2 b) Transient stated) External state S4 S1 a) Static state S3 c) Dynamic state e) Composite XOR- state S6a S6b S6 S6a1 S6b1 S6b2 f) Composite AND-state H g) Shallow history state H*H* h) Deep history state i) End state j) Initial state k) User transition label(user evt/[condition]:action) label(system evt/[condition]:action) l) System transition label( [condition] :action) m) Completion transition States Pseudo States Transitions Stereotypes > n) User defined label or stereotype

14 Mapping scheme between UsiXML and SWC constructs

15 Case study: car rental User goal: book a car Platforms: PDA Desktop-based

16 UsiXML specification of task models for a car rental system UsiXML task Model UsiXML task Model rendered with IdealXML

17 UsiXML specification of abstract models for a car rental system UsiXML task Model UsiXML AUI UsiXML AUI rendered by GraphiXML

18 Dialog options at concrete levels

19 Example 1) Task model 2) Scenario 3) Abstract UI 5) Concrete dialog 6) Concrete UI 4) Abstract dialog

20 Discussion UIDLs are a suitable solutions for developing multiplatform UIs but more study should be done to understand how developers and designers employ them in the practice The goal: proposed designers-centered methods The method presented combines automated model transformation and manual dialog tuning This proposal overcomes the limitations of embedded UsiXML dialog models This work is focused on connecting external dialog specifications and UsiXML

21 Future work Current results limited to relationships between windows it must be extended to include fine-grained interaction Tool support integration of UsiXML tools (ex. GraphiXLM, SketchXML, IdealXML, RenderXML, etc) and Dialog Modeling (SWCEditor) … (in progress) Use hierarchical events for ensuring backward and forward navigation between different abstraction levels

22 Thank you very much for your attention For more information and downloading, User Interface eXtensible Markup Language European network on Multimodal UIs Special thanks to all members of the team!