1. 1 DSV-IS’2006, 26-28 July 2006 Visual Design of User Interfaces by (De)composition Sophie Lepreux (1,2), Jean Vanderdonckt (1), Benjamin Michotte (1) 1 - Université catholique de Louvain (UCL) Belgian Lab. of Computer-Human Interaction (BCHI) http://www.isys.ucl.ac.be/bchi 2 - Université de Valenciennes et du Hainaut-Cambrésis (UVHC) LAMIH – UMR 8530 http://www.univ-valenciennes.fr/LAMIH/

2. 2 DSV-IS’2006, 26-28 July 2006 Presentation Outline The visual GUI design Reusability in the design process and issues State of the Art Framework: CAMELEON Reference Framework and UsiXML Proposition: The CUI and the tree algebra Case study Implementation: GrafiXML and the ComposiXML Plug-in Conclusion

3. 3 DSV-IS’2006, 26-28 July 2006 The visual GUI design Method for design –dragging widgets from a palette, –dropping them on a working area, –and editing their properties until the results are satisfactory The reuse of part or whole interface needs –incessant sequence of “copy/paste” operations –Copy/paste is realized only at widget level –little or no support for recomposing a new GUI from these elements GUI multi-platform –impossible to copy/paste GUI elements from one interface builder to another one, unless the interface builder is itself multi-platform => manipulation of the GUI at logical level should support this task => the copy/paste level (i.e. reuse level) should be increased

4. 4 DSV-IS’2006, 26-28 July 2006 Reusability in the design process Goals of reuse –ensuring consistency –reducing development effort –fitting a particular GUI to the purpose of a given task => Proposition of visual design of GUI following 3 steps –Decomposition: disassembles an existing GUIs into individual or composite elements that can be further reused for other designs –Composition: assembles individual and composite elements to form a new GUI that fits the purpose of a given task –Recomposition: performs a suite of decompositions and compositions to support re-design of existing GUIs for new contexts of use

5. 5 DSV-IS’2006, 26-28 July 2006 State of the Art Composable User Interfaces [Leventhal et al., 2004] A set of applications to use The interfaces are composed in only one

6. 6 DSV-IS’2006, 26-28 July 2006 State of the Art Main approaches: –are often language- or platform- dependent –do not identify independent high-level design primitives –are usually supported at the physical level –consider decomposition merely for screen constraints or multi-platform support Our goal: facilitate the design and the reuse with –the (de)composition means, which allow the GUI manipulation at a logical level the multi-language and multi-platform design the flexibitity

7. 7 DSV-IS’2006, 26-28 July 2006 Reference framework Cameleon reference framework Supported by UsiXML http://www.usixml.org –USer Interface exTensible Markup Language –XML-compliant specification language for user interfaces suitable for any interface

8. 8 DSV-IS’2006, 26-28 July 2006 Reference framework

9. 9 DSV-IS’2006, 26-28 July 2006 The CUI model <window id="window_component_0" name="window_component_0" width="300" height="200"> <outputText id="output_text_component_2" name="output_text_component_2« … <outputText id="output_text_component_3" name="output_text_component_3« … \> <inputText id="input_text_component_5" name="input_text_component_5" isVisible="true" isEnabled="true" textColor="#000000" maxLength="50" numberOfColumns="15" isEditable="true"/> <outputText id="output_text_component_4" name="output_text_component_4« … <inputText id="input_text_component_6" name="input_text_component_6" isVisible="true« … /> <button id="button_component_7" name="button_component_7"/>

10. 10 DSV-IS’2006, 26-28 July 2006 Tree algebra to manipulate the CUI model The tree algebra [El Bekai et al., 2005, Jagadish et al., 2001] is used to performs operations on tree such as: –Unary: projection, selection, cut, complementary –Binary: Equivalence, similitude and sub-set Fusion, normal union, unique union, difference (left or right) It is defined to DB management so it must be adapted to HCI –How selection can be applied on one interface? –What is an equivalence of two interfaces? –How union of two interface is realised? –…

11. 11 DSV-IS’2006, 26-28 July 2006 Operators to support the decomposition Selection Also: Cut, Projection, Complementary Selection (, output) =

12. 12 DSV-IS’2006, 26-28 July 2006 Operators to support the composition Fusion = repetition of common parts Fusion(, )= algorithm: The two trees T1 and T2 are merge at the %level R+1 to form the T3 window. IF (direction = vertical) Then Add box (vertical B’) %Modify the window size: T3.height = T1.height + T2.height T3.width = T1.width IF (direction = horizontal) Then Add box (horizontal B’). %Modify the window size: T3.height = T1.height T3.width = T1.width + T2.width Add T1(R+1) in box B’, Add T2(R+1) in box B’.

13. 13 DSV-IS’2006, 26-28 July 2006 Operators to support the composition Normal union (horizontal) = no repetition of common parts Also: Unique union, Difference…  =

14. 14 DSV-IS’2006, 26-28 July 2006 The GrafiXML editor tourist application (preview in English) Case study Event management application (preview in spanish)

15. 15 DSV-IS’2006, 26-28 July 2006 Selection / projection Projection (outputText, button, Tourist application) Selection (set of elements, Tourist application)

16. 16 DSV-IS’2006, 26-28 July 2006 Case studies: intersection Intersection (Tourist application, Event management application) Intersection (Event management application, Tourist application) Choice of different part, horizontal Intersection (Event management application, Tourist application) Choice of different part, horizontal

17. 17 DSV-IS’2006, 26-28 July 2006 Case studies: difference Difference (Event management application Tourist application) Difference (Tourist application, Event management application)

18. 18 DSV-IS’2006, 26-28 July 2006 Case studies: Fusion Fusion (Tourist application, Event management application, horizontal) Fusion (Tourist application, Event management application, vertical)

19. 19 DSV-IS’2006, 26-28 July 2006 Case studies: Normal Union Normal Union (Tourist application, Event management application, horizontal) The duplicates are deleted once Normal Union (Tourist application, Event management application, horizontal) The duplicates are deleted once

20. 20 DSV-IS’2006, 26-28 July 2006 Case studies: Unique Union Unique Union (Tourist application, Event management application, horizontal) the duplicates are deleted Unique Union (Tourist application, Event management application, horizontal) the duplicates are deleted

21. 21 DSV-IS’2006, 26-28 July 2006 Developed by Benjamin Michotte GrafiXML consists of a user interface builder for designing a graphical user interface (GUI) independently of the platform and save it in UsiXML format language. Features Exports GUI in –Java source (using Swing) –XHTML 1.0 Strict –XUL Works on Windows, Linux and MacOs X Available in English, French and Spanish Based on plugins –Export –Import –Project management –Graceful degradation of user interfaces Allows creating context models

22. 22 DSV-IS’2006, 26-28 July 2006 Design Tab Design window Components toolbar Components options

23. 23 DSV-IS’2006, 26-28 July 2006 Localisation of UIs GrafiXML allows the user to create multi-language GUI Support for mnemonics and shortcuts

24. 24 DSV-IS’2006, 26-28 July 2006 XML Editor GrafiXML contains a XML editor which shows the UsiXML specification of your work You can edit yourself some part of the XML Edit the UsiXML Show attributes A click on the tree highlights the corresponding UsiXML

25. 25 DSV-IS’2006, 26-28 July 2006 Plugins GrafiXML works with plugins –Install / remove using the plug-in manager –Updated if needed using one click Click on « add » to open the downloader Choose the plugins you want install And install them Double-click on a plugin And look at the plugin informations

26. 26 DSV-IS’2006, 26-28 July 2006 New Plug-in: ComposiXML Associated with UsiXML version 1.6.4 Allows to use tree algebra operators Demo intersection Unique Union Normal Union Fusion Difference (right) Difference (left) Equivalence setselectionCut or extract projection

27. 27 DSV-IS’2006, 26-28 July 2006 Conclusion Logical operators to manipulate part or whole GUI Manipulation at a large grain more simple than at the widget level Manipulation of 1 widget or UI fragments Operations logically applied vs. physically applied –Re-positioning, re-sizing, re-arrangement are immediate Future Works: –Evaluate the saving of time brought by the operators and composiXML –Allow the user to create template of set of (de)composition –Extend this principle to the execution time (e.g. to compose Web-services or to implement plasticity)

28. 28 DSV-IS’2006, 26-28 July 2006 Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language CD Release 1 is available… http://www.similar.cc European network on Multimodal UIs Special thanks to all members of the team!