towards supporting the user interfaces design using composition rules sophie lepreux, jean...

Towards supporting the user interfaces design

using composition rules

Sophie Lepreux, Jean Vanderdonckt

{lepreux, vanderdonckt}@[email protected]

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

Proposition

• UsiXML is structured according to the four abstraction levels of the CAMELEON reference framework

UsiXML

Environment T

Final userInterface T

Concrete userInterface T

Task and Domain T

Abstract userInterface T

T=Target context of use

Concrete userInterface S

Final userInterface S

Task and Domain S

Abstract userInterface S

S=Source context of use

Reification

Abstraction

Reflexion

Translation

http://www.plasticity.org

UsiXMLunsupported

model

UsiXMLsupported

model

User S Platform S Environment S Platform TUser T

5

UsiXMLThe CUI Model

6

UsiXMLThe CUI Model

<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">


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>



name="output_text_component_4« …

<inputText id="input_text_component_6"

name="input_text_component_6" isVisible="true« … />

<\box>


<button id="button_component_7"

name="button_component_7"/>

<button id="button_component_8" …/>

<\box>

</box>

</window>

</cuiModel>

Window (id=window, name=window, width="300" height="200")

Box (type=« vertical »)

Button(DefaultContent = Save)

Button(DefaultContent=Close)

Output (Default value =« customer form »)

Box (type = horizontal)Box (type = horizontal)

Output(…)

Input(…)

Box (type = horizontal)

Output(…)

Input(…)







Output(…)

Input(…)


Output(…)

Input(…)

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

PropositionThe operators

9

PropositionDefining the selection operator







Output(…)

Input(…)


Output(…)

Input(…)







Output(…)

Input(…)


Output(…)

Input(…)

10

PropositionDefining the normal union operator

11

PropositionDefining the difference operator

- -

12

Preliminary evaluation

• GOMS : Goals, Operations, Methods and Selection rules

The GOMS model

Physical Movements

Enter one keystroke on a standard keyboard

.28 second Ranges 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 second May 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 second Ranges 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 second A 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 second Ranges from .05 to .1 second, depending on what kind of mental step is being performed.

Choose among methods

1.2 second Ranges 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


• 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

Preliminary evaluation Case study: re-use of existing interfaces

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


• 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

Design without operators Time with operators Time

Case 1 Select and cut the items to extract

Create a new projectPaste the items in the new

projectSelect and copy the items to

duplicatePaste the itemsReorganize the first interfaceReorganize the new interface

18.51s1.275s1.575s1.275s18.51s1.275100s (arb)100s (arb)= 242.42s

Select items to extract (with Selection operator)

DifferenceSelect items to duplicate (with

Selection operator)Union

2.85s2.85s2.85s2.85s=11.4s

Case 2 Select and CutPaste in another UIReorganize the first oneReorganize the second one

18.51s1.275s100s(arb)100s(arb)=219.785

Select items to extractDifferenceUnion

2.85s2.85s2.85s=8.55s

17


• 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

Design without operators Time with operators Time

Case 3 Select all the items of one UIPaste in the otherReorganize the final UI

18.51s1.275s100 (arb)=119.785

Union 2.85s

18

Preliminary evaluationUnion 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

Preliminary evaluationUnion 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/

Thank you for your attention!

Sophie Lepreux, Jean Vanderdonckt

http://www.usixml.org/

{lepreux, vanderdonckt}@[email protected]

towards supporting the user interfaces design using composition rules sophie lepreux, jean...

Documents