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
Source platform Target platform
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
Source platform Target platform
Task & Concepts
Abstract UI
Concrete UI
Final UI
Task & Concepts
Abstract UI
Concrete UI
Final UI
Source platform Target platform
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">
<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(…)
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
management application)
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
management application)
Difference (Tourist application, Event
management application)
18 DSV-IS’2006, 26-28 July 2006
Case studies: Fusion
Fusion (Tourist application, Event
management application, horizontal)
Fusion (Tourist application, Event
management application, horizontal)
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
management application, horizontal)
The duplicates are deleted once
Normal Union (Tourist application, Event
management application, horizontal)
The duplicates are deleted once
20 DSV-IS’2006, 26-28 July 2006
Case studies: Unique Union
Unique Union (Tourist application, Event
management application, horizontal)
the duplicates are deleted
Unique Union (Tourist application, Event
management application, horizontal)
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!
Top Related