towards supporting the user interfaces design using composition rules
Download
Skip this Video
Download Presentation
Towards supporting the user interfaces design using composition rules

Loading in 2 Seconds...

play fullscreen
1 / 21

Towards supporting the user interfaces design using composition rules - PowerPoint PPT Presentation


  • 57 Views
  • Uploaded on

Towards supporting the user interfaces design using composition rules. Sophie Lepreux, Jean Vanderdonckt. {lepreux, vanderdonckt}@isys.ucl.ac.be [email protected] Contents. Introduction Proposition Choice of a formalism Operator definitions Preliminary evaluations

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Towards supporting the user interfaces design using composition rules' - tiponya-gonzalez


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
towards supporting the user interfaces design using composition rules

Towards supporting the user interfaces design using composition rules

Sophie Lepreux, Jean Vanderdonckt

{lepreux, vanderdonckt}@isys.ucl.ac.be

[email protected]

contents
Contents
  • Introduction
  • Proposition
    • Choice of a formalism
    • Operator definitions
  • Preliminary evaluations
    • The GOMs model
    • Case studies
  • Conclusion et future works
introduction
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)
proposition

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

usixml
UsiXML

The CUI Model

usixml1

<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

proposition1
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

proposition2
Proposition

The operators

proposition3
Proposition

Defining the selection operator

proposition4
Proposition

Defining the normal union operator

proposition5
Proposition

Defining the difference operator

-

-

preliminary evaluation
Preliminary evaluation

The GOMS model

[Olson et al., 90 ; Lewis et al., 1993]

  • GOMS : Goals, Operations, Methods and Selection rules
preliminary evaluation1
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
preliminary evaluation2
Preliminary evaluation

Case study: re-use of existing interfaces

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

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

preliminary evaluation3
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
preliminary evaluation4
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
preliminary evaluation5
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

preliminary evaluation6
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

conclusion et future work
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

Thank you for your attention!

Sophie Lepreux, Jean Vanderdonckt

http://www.usixml.org/

{lepreux, vanderdonckt}@isys.ucl.ac.be

[email protected]

ad