Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean...
-
Upload
whitney-mcdonald -
Category
Documents
-
view
216 -
download
0
Transcript of Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean...
![Page 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.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/1.jpg)
Towards supporting the user interfaces design
using composition rules
Sophie Lepreux, Jean Vanderdonckt
{lepreux, vanderdonckt}@[email protected]
![Page 2: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/2.jpg)
2
Contents
• Introduction• Proposition
– Choice of a formalism – Operator definitions
• Preliminary evaluations– The GOMs model– Case studies
• Conclusion et future works
![Page 3: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/3.jpg)
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)
![Page 4: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/4.jpg)
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
![Page 5: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/5.jpg)
5
UsiXMLThe CUI Model
![Page 6: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/6.jpg)
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">
<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>
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(…)
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(…)
![Page 7: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/7.jpg)
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
![Page 8: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/8.jpg)
8
PropositionThe operators
![Page 9: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/9.jpg)
9
PropositionDefining the selection operator
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(…)
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(…)
![Page 10: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/10.jpg)
10
PropositionDefining the normal union operator
![Page 11: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/11.jpg)
11
PropositionDefining the difference operator
- -
![Page 12: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/12.jpg)
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]
![Page 13: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/13.jpg)
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
![Page 14: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/14.jpg)
14
Preliminary evaluation Case study: re-use of existing interfaces
![Page 15: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/15.jpg)
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
![Page 16: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/16.jpg)
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
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
![Page 17: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/17.jpg)
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
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
![Page 18: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/18.jpg)
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
![Page 19: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/19.jpg)
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
![Page 20: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/20.jpg)
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/
![Page 21: Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux, vanderdonckt}@isys.ucl.ac.be Sophie.lepreux@univ-valenciennes.fr.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e7f5503460f94b8403b/html5/thumbnails/21.jpg)
Thank you for your attention!
Sophie Lepreux, Jean Vanderdonckt
http://www.usixml.org/
{lepreux, vanderdonckt}@[email protected]