6 th International Conference on ComputerAided Design of

6 th International Conference on Computer-Aided Design of User Interfaces CADUI´ 2006 June 6 th-8 th, 2006, Bucharest, Romania. A model-based development for 3 D User Interfaces Juan Manuel Gonzalez Calleros 1, Jean Vanderdonckt 1, Jaime Muñoz Arteaga 2 1. Université catholique de Louvain, School of Management (IAG) Information Systems Unit (ISYS) 2. University Autonomous of Aguascalientes www. usixml. org June 6 -8 CADUI Bucharest, Romania

Contents Ø Introduction Ø Related Work Ø Model-based development for 3 D User Interfaces Ø Case Study Ø Conclusion June 6 -8 CADUI Bucharest, Romania 2

Introduction - Problem Ø Actual methods: l l Rarely provide the design knowledge Are more focusing on the implementation Ø Available tools for 3 D UIs are: Toolkits, interface builders, rendering engines June 6 -8 CADUI Bucharest, Romania 3

Introduction – proposal Ø We rely on: l l l A user-centered approach Separation of concerns Model-driven architecture Ø Our goal: Ø “To demonstrate the feasibility of a MDE- compliant method that is user-centered as opposed to contents-centric for developing 3 D UIs” June 6 -8 CADUI Bucharest, Romania 4

Contents Ø Introduction Ø Related Work Ø Model-based development for 3 D User Interfaces Ø Case Study Ø Conclusion June 6 -8 CADUI Bucharest, Romania 5

Related work – 3 D UIs generation Ø Programmatic approach: Open. GL, Direct 3 D, C++, MCNL, VRML, X 3 D, … Ø Toolkit programming: Maya, Max 3 D, Crazy Eddie's GUI System, Anark, Alice Ø Render engines: Microsoft task gallery, infinite 3 D Cube, Sphere XP, looking glass, Clara browser, 3 DNA Ø Model based: onto. WEb (VR-Wise), Con. Gen. IVE (VRIXML), In. TML, Contigra June 6 -8 CADUI Bucharest, Romania 6

Related work – Programmatic Approach, VRML June 6 -8 CADUI Bucharest, Romania 7

Related work – Toolkit Approach, Anark June 6 -8 CADUI Bucharest, Romania 8

Related work – Render Engines, 3 DNA June 6 -8 CADUI Bucharest, Romania 9

Related work – Model-based approach, Co. Gen. IVE-VRIXML Ø Ø Ø Ø Ø <Group. Item > <UISlider param. ID ="10"> <Value min ="0" max="255"/> <Tickstyle orientation =" horizontal“ position =" both " frequency ="16"/> </ UISlider > <Position > <X>1. 0 </X><Y>1. 5 </Y> </ Position > </ Group. Item > June 6 -8 CADUI Bucharest, Romania 10

Contents Ø Introduction Ø Related work Ø Model-based development for 3 D User Interfaces Ø Case Study Ø Conclusion June 6 -8 CADUI Bucharest, Romania 11

We rely on… Ø Cameleon reference Framework Ø Usi. XML Ø UML class diagrams Ø Graph transformations June 6 -8 CADUI Bucharest, Romania 12

Method Outline Task & Concepts AUI: UI definition independent of any modality of interaction Abstract UI User Interface #1 (Usi. XML) FUI: operational UI that runs on a particular platform either by interpretation or by execution Abstract user interface #2 Step 2 Abstract user interface #n … Step 3 … 3 D Concrete User Interface … User Interface #3 (MEL) #2 (Java 3 D) Final UI HTML browser with Cortona player Step 1 CUI production (Transformi. XML) Java 3 D Generator VUIToolkit VRML 97 code Domain model AUI production (Ideal. XML) Abstract user interface #1 CUI: concretizes an AUI Concrete UI into CIOs (widget sets found in popular graphical 3 D Concrete and vocal toolkits) June 6 -8 Task model Maya Development environment VRML 97/X 3 D Generator Java 3 D code VRML 97/ X 3 D code HTML browser with Cortona player CADUI Bucharest, Romania Step 4 13

Software tools - Ideal. XML June 6 -8 CADUI Bucharest, Romania 14

Software tools - AGG June 6 -8 CADUI Bucharest, Romania 15

Software tools - Alice June 6 -8 CADUI Bucharest, Romania 16

Software tools - Maya June 6 -8 CADUI Bucharest, Romania 17

Software tools - VUIToolkit June 6 -8 CADUI Bucharest, Romania 18

Contents Ø Introduction Ø Related Work Ø Model-based development for 3 D User Interfaces Ø Case Study Ø Conclusion June 6 -8 CADUI Bucharest, Romania 19

Case Study – Virtual polling system June 6 -8 CADUI Bucharest, Romania 20

Case Study – Task and domain definition June 6 -8 CADUI Bucharest, Romania 21

Case Study – Concrete Definition June 6 -8 CADUI Bucharest, Romania 22

Case Study – Concrete Model B June 6 -8 CADUI Bucharest, Romania 23

Case Study – From Abstract to concrete Model NAC LHS : = RHS x>2 June 6 -8 CADUI Bucharest, Romania 24

Case Study – From Abstract to concrete Model “Show Questionnaire” Output (value unknown) Attribute, data type, domain characteristics An output text “Select Answer” Select attribute value + repetitive (selection values not known) Data type, characteristics A dropdown list, a group of option buttons “Send Questionnaire” Control Feedback A trigger “Navigation” Navigation Feedback A trigger June 6 -8 CADUI Bucharest, Romania domain 25

Mock-up of the Concrete User Interface June 6 -8 CADUI Bucharest, Romania 26

Case Study – From Abstract to concrete Model <Group> <Cube. Face id="C 1"> <Sphere. Trigger default. Content="Start" radious="1. 5" solid="True" is. Visible="true" is. Enabled="true"> <Transform scale="8. 23" translation="0. 27 12. 14 18. 30"/> <Touch. Sensor id="TS 1" enabled="True"/> <Appearance name="Button. Appe" id="App 1"> <Material diffuse. Color="0. 8 0. 0" specular. Color="0. 11" emissive. Color="0. 0" shininess="0. 3"/> </Appearance> </Sphere. Trigger> </Group> June 6 -8 CADUI Bucharest, Romania 27

Case Study – Editing the FUI in Maya June 6 -8 CADUI Bucharest, Romania 28

Case Study – Editing the FUI in Alice June 6 -8 CADUI Bucharest, Romania 29

Case Study – FUI generated with Alice June 6 -8 CADUI Bucharest, Romania 30

Case Study – FUI generated with the VUIToolkit June 6 -8 CADUI Bucharest, Romania 31

Case Study – FUI generated with the Maya June 6 -8 CADUI Bucharest, Romania 32

Case Study – FUI generated with the Maya June 6 -8 CADUI Bucharest, Romania 33

Use of the virtual polling system Case Study in a virtual world June 6 -8 CADUI Bucharest, Romania 34

Contents Ø Introduction Ø Related Work Ø Model-based development for 3 D User Interfaces Ø Case Study Ø Conclusion June 6 -8 CADUI Bucharest, Romania 35

Conclusion –Model-based approaches Models t= task, Do = Domain Di = dialog AUI=abstract presentation CUI=concrete user interface U = user, C = context. Inter Model Transformation Bidirectional derivation → Derivation link ≈→ Manual Derivation ≈ Manual Bidirectional der. FUI = Final User Interface FUI target languages *Indicates that it is done manually VR-Wise CUI → FUI VRML, X 3 D Co. Gen. IVE T, Di, CUI ( T, Di, CUI ) FUI C++ In. TML Di, CUI T ≈→ (Di, CUI), (Di, CUI) ≈→ FUI Contigra CUI, Di (CUI, Di) → FUI X 3 D, Behavior 3 D, Audio 3 D Our methodology T, Do, C, AUI, CUI T Do, T AUI, AUI CUI, CUI AUI, T CUI, (T, Do, AUI, CUI) C, CUI≈→ FUI Java, XHTML, Flash, HTML, Voice XML* Java 3 D*, X 3 D*, VRML*. June 6 -8 CADUI Bucharest, Romania 36

Conclusion The method based on graph transformation has been introduced, defined and illustrated Ø We proposed a method for 3 D UI development whose life cycle was divided into four steps ranging from the most abstract to the most concretes according to the principles of Model. Driven Engineering. Ø The feasibility of the approach is much depending on the amount and the quality of the design rules that are encoded in Usi. XML. Ø June 6 -8 CADUI Bucharest, Romania 37

Conclusion Ø Future work. Exploring more design options and encode them in Usi. XML l l June 6 -8 Models Transformational rules Software tools More FUI CADUI Bucharest, Romania 38

Thank you Multumesc! Ø Juan Manuel Gonzalez Calleros Ø Contact: Ø gonzalez@isys. ucl. ac. be www. usixml. org June 6 -8 CADUI Bucharest, Romania 39