Towards supporting the user interfaces design using composition rules

1. Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr

2. Contents • Introduction • Proposition • Choice of a formalism • Operator definitions • Preliminary evaluations • The GOMs model • Case studies • Conclusion et future works

3. Introduction • The design step takes a long time • Specification, mock-up, prototype • Validation => modifications: • Minor, e.g. add a field with a new information • Major, e.g. displace a part of an interface into another one • Goal: adaptation of the environment to facilitate the major modifications • Issue: composition of the HCI at the upper level as the other existing work • Means: • Operators • UIDL (User Interface Description Language)

4. Platform S Environment S Platform T Environment T Reification Abstraction Reflexion Translation Proposition UsiXML • UsiXML is structured according to the four abstraction levels of the CAMELEON reference framework S=Source context of use T=Target context of use User S User T Task and Domain S Task and Domain T UsiXML supported model http://www.plasticity.org Abstract user Interface S Abstract user Interface T UsiXML unsupported model Concrete user Interface S Concrete user Interface T Final user Interface S Final user Interface T

5. UsiXML The CUI Model

6. <cuiModel id="FicheClient-cui_3" name="FicheClient-cui"> <window id="window_component_0" name="window_component_0" width="300" height="200"> <box id="box_1" name="box_1" type="vertical"> <outputText id="output_text_component_2" name="output_text_component_2«  … <box id="box_2" name="box_1" type=« horizontal"> <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"/> <\box> <box id="box_3" name="box_1" type=« horizontal"> <outputText id="output_text_component_4" name="output_text_component_4«  … <inputText id="input_text_component_6" name="input_text_component_6" isVisible="true«  … /> <\box> <box id="box_4" name="box_1" type=« horizontal"> <button id="button_component_7" name="button_component_7"/> <button id="button_component_8" …/> <\box> </box> </window> </cuiModel> UsiXML The CUI Model

7. Proposition Choice of a formalism • TAX: Tree Algebra for XML [Jagadish, 2001] • A data tree is a rooted, ordered tree, such that each node carries data (its label) in the form of a set of attribute-value pairs. • Each node has a special, single valued attribute called tag whose value indicates the type of element. • A node may have a content attribute representing its atomic value. • Each node has a virtual attribute called pedigree drawn from an ordered domain. The pedigree carries the history of “where it came from”. Pedigree plays a central role in grouping, sorting and duplicate elimination. • Operators are adapted to Databases => Adaptation to HCI

8. Proposition The operators

9. Proposition Defining the selection operator

10. Proposition Defining the normal union operator

11. Proposition Defining the difference operator - -

12. Preliminary evaluation The GOMS model [Olson et al., 90 ; Lewis et al., 1993] • GOMS : Goals, Operations, Methods and Selection rules

13. Preliminary evaluation Example of GOMS using • To modify the title of a window: • Step 1. Right click on the window: 1.5s • Step 2. Move hand to keyboard: 0.3s • Step 3. Type the title which costs: 0.28s by letter • Step 4. Click on “validate”: 1.8s to use mouse • Step 5. Report goal is accomplished: 0.075s • Total: 6.195s • The methods to use an operator are: • Step 1. Move to and click on icon: 1.5s • Step 2. Choice among methods: 1.2s • Step 3. Report goal is accomplished: 0.075s • Total: 2.775s

14. Preliminary evaluation Case study: re-use of existing interfaces

15. Without operators: Modifying of the title: 6.195 Modifying of 5 items from input to output Point the input: 1.5+0.075 Right Click with the mouse to delete: 1.2+0.075 Select output: 1.5+0.075 Place the Output: 1.5+0.075 Click: 1.5+0.075+0.3 Type: 0.28*10+0.075 Validate: 0.3+1.5+0.075 Delete of 5 items Point the input: 1.5+0.075 Right Click with the mouse to delete: 1.2+0.075 Total: 6.195 + 63.125 +14.25 = 83.57 With operators: Modifying of the title: 6.195 Modifying of 5 items from input to output Selection: 2.775 Difference: 2.775 Select output: 1.5+0.075 Place the Output: 1.5+0.075 Click: 1.5+0.075+0.3 Type: 0.28*10+0.075 Validate: 0.3+1.5+0.075 Delete of 5 items Selection: 2.775 Difference: 2.775 Total: 6.195 + 58.125 + 5.55 = 69,87 The operators allow to delete but not to transform => Loss of time … reuse the existing interfaces Calculus of duration (in second) => Reuse with operators is better than without

16. Preliminary evaluation Case study: the re-design • The interface contains too much information • Case 1: A set of elements is placed into a new interface (for example : creating of a new window) • Case 2: A part of elements is placed into another existing interface

17. Preliminary evaluation Case study: the re-design • Two interfaces (which are linked with a same task) contain few elements • Case 3: All the elements are gathered into a single interface

18. Preliminary evaluation Union of two interfaces without operator 1) These elements must be displaced 3) The elements must be pasted 4) They are reorganized 2) The elements must be copied 5) They are reorganized

19. Preliminary evaluation Union of two interfaces with operator <box id="box_0" name="box_0" type="vertical"> <box id="box_15" name="box_15" type="horizontal"> <outputText defaultContent="polices d'assurance:" /> <outputText defaultContent="Tarif" /> </box> <box id="box_9" name="box_9" type="horizontal"> <box id="box_13" name="box_13" type="vertical"> <outputText defaultContent=« Vehicule category: Car"/> <outputText defaultContent="type: MRE5312AP526"/> <outputText defaultContent="puissance fiscale: 5cv"/> <outputText defaultContent="marque: Renault"/> <outputText defaultContent="famille: Megane"/> <outputText defaultContent=« registration number: 564 NY" /> <outputText defaultContent=« beginner date: 2006.01.01"/> </box> <box id="box_10" name="box_10" type="vertical"> <outputText defaultContent="500 euros" isVisible="true"/> </box> …Payment </box> Union of policies=>The sub-tree of the other interface is inserted here

20. Conclusion et future work • Tree algebra is an asset to manipulate a UI when the work granularity is • at a upper level of a coherent set of elements (i.e. at the container level) • at the leaf level if the set of leaf elements is not logically linked together (e.g. all the buttons…) • But the tree algebra is not adapted to • manipulate leaf elements that are independent • transform elements • So the operators can be separated into two groups coming from: • the tree algebra to manipulate the structures and set of elements • the set theory to manipulate the leaf elements (future work) • The composiXML plug-in will be added to GrafiXML: http://www.usixml.org/

21. Thank you for your attention! Sophie Lepreux, Jean Vanderdonckt http://www.usixml.org/ {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr