1 DSV-IS’2006, 26-28 July 2006 Visual Design of User Interfaces by (De)composition Sophie Lepreux...

1 DSV-IS’2006, 26-28 July 2006

Visual Design of User Interfaces by (De)composition

Sophie Lepreux(1,2), Jean Vanderdonckt(1), Benjamin Michotte(1)

1 - Université catholique de Louvain (UCL)Belgian Lab. of Computer-Human Interaction (BCHI)

http://www.isys.ucl.ac.be/bchi

2 - Université de Valenciennes et du Hainaut-Cambrésis (UVHC)LAMIH – UMR 8530

http://www.univ-valenciennes.fr/LAMIH/

2 DSV-IS’2006, 26-28 July 2006

Presentation Outline

• The visual GUI design• Reusability in the design process and issues• State of the Art• Framework: CAMELEON Reference Framework and UsiXML• Proposition: The CUI and the tree algebra• Case study• Implementation: GrafiXML and the ComposiXML Plug-in• Conclusion

3 DSV-IS’2006, 26-28 July 2006

The visual GUI design

• Method for design– dragging widgets from a palette, – dropping them on a working area, – and editing their properties until the results are satisfactory

• The reuse of part or whole interface needs– incessant sequence of “copy/paste” operations – Copy/paste is realized only at widget level– little or no support for recomposing a new GUI from these elements

• GUI multi-platform– impossible to copy/paste GUI elements from one interface builder to

another one, unless the interface builder is itself multi-platform

=> manipulation of the GUI at logical level should support this task=> the copy/paste level (i.e. reuse level) should be increased

4 DSV-IS’2006, 26-28 July 2006

Reusability in the design process

• Goals of reuse– ensuring consistency– reducing development effort– fitting a particular GUI to the purpose of a given task

=> Proposition of visual design of GUI following 3 steps– Decomposition: disassembles an existing GUIs into individual or

composite elements that can be further reused for other designs – Composition: assembles individual and composite elements to

form a new GUI that fits the purpose of a given task – Recomposition: performs a suite of decompositions and

compositions to support re-design of existing GUIs for new contexts of use

5 DSV-IS’2006, 26-28 July 2006

State of the Art

Composable User Interfaces[Leventhal et al., 2004]

A set of applications to

use

A set of applications to

use

The interfaces are composed in only

one

The interfaces are composed in only

one

6 DSV-IS’2006, 26-28 July 2006

State of the Art

• Main approaches:– are often language- or platform- dependent– do not identify independent high-level design primitives– are usually supported at the physical level– consider decomposition merely for screen constraints or multi-

platform support

• Our goal: facilitate the design and the reuse with– the (de)composition means, which allow

• the GUI manipulation at a logical level• the multi-language and multi-platform design• the flexibitity

7 DSV-IS’2006, 26-28 July 2006

Reference framework

• Cameleon reference framework

• Supported by UsiXML http://www.usixml.org– USer Interface exTensible Markup Language– XML-compliant specification language for user interfaces suitable for any

interface

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI

Source platform Target platform

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


8 DSV-IS’2006, 26-28 July 2006

Reference framework

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


textInput button button

Window

AICfacet=control

AICfacet=control

AICfacet=control

AbstractIndividualContainer

textInput button button

Window

AICfacet=control

AICfacet=control

AICfacet=control

AbstractIndividualContainer

9 DSV-IS’2006, 26-28 July 2006

The 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(…)

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(…)

10 DSV-IS’2006, 26-28 July 2006

Tree algebra to manipulate the CUI model

• The tree algebra [El Bekai et al., 2005, Jagadish et al., 2001] is used to performs operations on tree such as: – Unary: projection, selection, cut, complementary– Binary:

• Equivalence, similitude and sub-set• Fusion, normal union, unique union, difference (left or right)

• It is defined to DB management so it must be adapted to HCI– How selection can be applied on one interface?– What is an equivalence of two interfaces?– How union of two interface is realised?– …

11 DSV-IS’2006, 26-28 July 2006

Operators to support the decomposition

• Selection

• Also: Cut, Projection, Complementary

Selection ( , output) =

12 DSV-IS’2006, 26-28 July 2006

Operators to support the composition

• Fusion = repetition of common parts

Fusion( , )=

algorithm: The two trees T1 and T2 are merge at the %level R+1 to form the T3 window.IF (direction = vertical) Then Add box (vertical B’)

%Modify the window size:T3.height = T1.height + T2.heightT3.width = T1.width

IF (direction = horizontal) Then Add box (horizontal B’).

%Modify the window size: T3.height = T1.heightT3.width = T1.width + T2.width

Add T1(R+1) in box B’, Add T2(R+1) in box B’.

13 DSV-IS’2006, 26-28 July 2006

Operators to support the composition

• Normal union (horizontal) = no repetition of common parts

• Also: Unique union, Difference…

=

14 DSV-IS’2006, 26-28 July 2006

The GrafiXML editor

The GrafiXML editor

tourist application (preview in

English)

tourist application (preview in

English)

Case study

Event management application (preview in

spanish)

Event management application (preview in

spanish)

15 DSV-IS’2006, 26-28 July 2006

Selection / projectionProjection

(outputText, button, Tourist application)

Projection (outputText, button, Tourist application)

Selection (set of elements, Tourist

application)

Selection (set of elements, Tourist

application)

16 DSV-IS’2006, 26-28 July 2006

Case studies: intersection

Intersection (Tourist application, Event

management application)

Intersection (Tourist application, Event


Intersection (Event management

application, Tourist application)

Intersection (Event management

application, Tourist application)

Intersection (Event management application,

Tourist application)Choice of different part,

horizontal

Intersection (Event management application,

Tourist application)Choice of different part,

horizontal

17 DSV-IS’2006, 26-28 July 2006

Case studies: difference

Difference (Event management

application Tourist application)

Difference (Event management

application Tourist application)

Difference (Tourist application, Event


Difference (Tourist application, Event


18 DSV-IS’2006, 26-28 July 2006

Case studies: Fusion

Fusion (Tourist application, Event

management application, horizontal)

Fusion (Tourist application, Event


Fusion (Tourist application, Event management application, vertical)

Fusion (Tourist application, Event management application, vertical)

19 DSV-IS’2006, 26-28 July 2006

Case studies: Normal Union

Normal Union (Tourist application, Event


The duplicates are deleted once

Normal Union (Tourist application, Event


The duplicates are deleted once

20 DSV-IS’2006, 26-28 July 2006

Case studies: Unique Union

Unique Union (Tourist application, Event


the duplicates are deleted

Unique Union (Tourist application, Event


the duplicates are deleted

21 DSV-IS’2006, 26-28 July 2006

Developed by Benjamin Michotte

GrafiXML consists of a user interface builder for designing a graphical user interface (GUI) independently of the platform and save it in UsiXML format language.

Features• Exports GUI in

– Java source (using Swing)– XHTML 1.0 Strict– XUL

• Works on Windows, Linux and MacOs X• Available in English, French and Spanish• Based on plugins

– Export– Import– Project management– Graceful degradation of user interfaces

• Allows creating context models

22 DSV-IS’2006, 26-28 July 2006

Design Tab

Design windowDesign window

Components toolbar

Components toolbar

Components options

23 DSV-IS’2006, 26-28 July 2006

Localisation of UIs

GrafiXML allows the user to create multi-language GUI

Support for mnemonics and

shortcuts

Support for mnemonics and

shortcuts

24 DSV-IS’2006, 26-28 July 2006

XML Editor

GrafiXML contains a XML editor which shows the UsiXML specification of your work

• You can edit yourself some part of the XML

Edit the UsiXML

Edit the UsiXML

Show attributes

Show attributes

A click on the tree highlights the

corresponding UsiXML

A click on the tree highlights the

corresponding UsiXML

25 DSV-IS’2006, 26-28 July 2006

Plugins

GrafiXML works with plugins– Install / remove using the plug-in manager– Updated if needed using one click

Click on « add » to open the

downloader

Choose the plugins you want install

And install them

Double-click on a plugin

And look at the plugin

informations

26 DSV-IS’2006, 26-28 July 2006

New Plug-in: ComposiXML

• Associated with UsiXML version 1.6.4• Allows to use tree algebra operators

• Demo

intersectionUnique Union

Normal Union

Fusion

Difference (right)

Difference (left)

Equivalence

set selection Cut or extract

projection

27 DSV-IS’2006, 26-28 July 2006

Conclusion

• Logical operators to manipulate part or whole GUI• Manipulation at a large grain more simple than at the widget

level• Manipulation of 1 widget or UI fragments• Operations logically applied vs. physically applied

– Re-positioning, re-sizing, re-arrangement are immediate

• Future Works:– Evaluate the saving of time brought by the operators and

composiXML– Allow the user to create template of set of (de)composition– Extend this principle to the execution time (e.g. to compose Web-

services or to implement plasticity)

28 DSV-IS’2006, 26-28 July 2006

Thank you very much for your attention

For more information and downloading,http://www.isys.ucl.ac.be/bchi

http://www.usixml.orgUser Interface eXtensible Markup LanguageCD Release 1 is available…

http://www.similar.ccEuropean network on Multimodal UIs

Special thanks to all members of the team!



http://www.usixml.org/

http://www.usixml.org/

http://www.similar.cc/

http://www.similar.cc/

1 DSV-IS’2006, 26-28 July 2006 Visual Design of User Interfaces by (De)composition Sophie Lepreux...

Documents

Transcript of 1 DSV-IS’2006, 26-28 July 2006 Visual Design of User Interfaces by (De)composition Sophie Lepreux...