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. 2 Contents Introduction Proposition –Choice of a formalism –Operator definitions Preliminary evaluations –The GOMs model –Case studies Conclusion et future works

3. 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. 4 Proposition UsiXML is structured according to the four abstraction levels of the CAMELEON reference framework UsiXML Environment T 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 Reification Abstraction Reflexion Translation http://www.plasticity.org UsiXML unsupported model UsiXML supported model User S Platform SEnvironment SPlatform T User T

5. 5 UsiXML The CUI Model

6. 6 UsiXML 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"/>

7. 7 Proposition 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 Choice of a formalism

8. 8 Proposition The operators

9. 9 Proposition Defining the selection operator

10. 10 Proposition Defining the normal union operator

11. 11 Proposition Defining the difference operator - -

12. 12 Preliminary evaluation GOMS : Goals, Operations, Methods and Selection rules The GOMS model Physical Movements Enter one keystroke on a standard keyboard.28 secondRanges from.07 second for highly skilled typists doing transcription, to.2 second for an average 60-wpm typist, to over 1 second for a bad typist. Random sequences, formulas, and commands take longer than plain text. Use mouse to point at object on screen 1.5 secondMay be slightly lower – but still at least 1 second – for a small screen and a menu. Increases with larger screen, smaller objects. Move hand to pointing device or function key.3 secondRanges from.21 second for cursor keys to.36 second for a mouse. Mental actions Retrieve a simple item from a long-term memory 1.2 secondA typical item might be a command abbreviation (“dir”). Time is roughly halved if the same item needs to be retrieved again immediately. Execute a mental “step”.075 secondRanges from.05 to.1 second, depending on what kind of mental step is being performed. Choose among methods 1.2 secondRanges from.06 to at least 1.8 seconds, depending on complexity of factors influencing the decision. [Olson et al., 90 ; Lewis et al., 1993]

13. 13 Preliminary evaluation 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 Example of GOMS using

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

15. 15 reuse the existing interfaces 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 Calculus of duration (in second) The operators allow to delete but not to transform => Loss of time … => Reuse with operators is better than without

16. 16 Preliminary evaluation 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 Case study: the re-design Designwithout operatorsTimewith operatorsTime Case 1Select and cut the items to extract Create a new project Paste the items in the new project Select and copy the items to duplicate Paste the items Reorganize the first interface Reorganize the new interface 18.51s 1.275s 1.575s 1.275s 18.51s 1.275 100s (arb) = 242.42s Select items to extract (with Selection operator) Difference Select items to duplicate (with Selection operator) Union 2.85s =11.4s Case 2Select and Cut Paste in another UI Reorganize the first one Reorganize the second one 18.51s 1.275s 100s(arb) =219.785 Select items to extract Difference Union 2.85s =8.55s

17. 17 Preliminary evaluation Two interfaces (which are linked with a same task) contain few elements –Case 3: All the elements are gathered into a single interface Case study: the re-design Designwithout operatorsTimewith operatorsTime Case 3Select all the items of one UI Paste in the other Reorganize the final UI 18.51s 1.275s 100 (arb) =119.785 Union2.85s

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

19. 19 Preliminary evaluation Union of two interfaces with operator …Payment Union of policies =>The sub-tree of the other interface is inserted here

20. 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