A modeldriven environment for user interface designers

1
SVG OPEN 2005Combining SVG and models of
interaction to build highly interactive user
interfaces
Stéphane Chatty, Alexandre Lemort, Stéphane
Sire Chattty, Lemort, Sire_at_intuilab.com
2
A few words about IntuiLab

• French SME created in 2002 by senior researchers
  in HCI
• Activities
• Interface design and development
• Research and consulting, future interaction
  technologies, software architecture for UI
• Production of a user interface design
  environment IntuiKit

3
Large display for production supervision
EADS Airbus
4
Scheduling system for Air Traffic Control
Sofréavia Copenhagen Airport
5
Task manager for professional vehicles
European Commission, M3S
6
Why focus on User Interfaces ?

• The user has no access to the interior of the
  system except though the UI
• Consequences
• For many users the UI is the system
• Users judge a system mainly by its UI
• A poor UI can make a system difficult (and
  possibly dangerous) to use
• A good UI can be easy to learn and make a system
  pleasant to use

7
Requirement set 1 design

• User-centered design methodologies
• Brainstorming,
• Iterative design,
• Usability engineering,
• Participatory design
• Etc..
• Multidisciplinary design
• Graphical design (visuals, animations)
• Dialogue design (behaviours, grammars, etc)
• Software design (classes, components, etc)

8
Requirement set 2 industrial processes

• Compatibility of tools along the chain
• Same graphics for prototypes and final product
• Avoid duplication of work
• No recoding of graphics or behaviours
• Support and rules for collaboration
• Allowing taks splitting and parallel work
• No programmers waiting for graphic designers
• Support for project management
• Milestones understandable by everyone

9
Our solution

• Df, our participative designing method
• IntuiKit, our developing environment

10
Df our participative designing method

• From the design to the UI development

Ergonomics
Design
Computer science
11
IntuiKit

• Model-driven architecture
• User Interface set of models
• Models created with specialized tools
• Models compiled and executed by IntuiKit
• Separate models (separate DTDs/schemas)
• Graphics
• Behaviours
• Software components
• Grammars, etc
• W3C specifications when available

12
A small example a car display
13
Graphics choice of features

• An algebra of shapes
• Gradients, transparency
• Rhythm support (textures, lines, etc)

14
Basic behaviour state machines

• Arcs labelled with events
• Named states

15
Application tree of components (1)
unselected
tab1
selection
tabs
tab2
tab3
tab4
FSM
16
Application tree of components (2)
unselected
tab1
selection
tabs
tab2
tab3
tab4
FSM
17
Application to a real project
18
Low-fidelity prototype
19
Parallel work
20
Progressive integration
21
Final result
22
Reference condition

• 4 person-months, pipeline process, 3.5 months

23
Approximate figures
Departure Manager
reference
15 p.d.
graphic design
15 p.d.
15 kloc
15 kloc
FC code size
coding effort
4 p.m.
2.5 p.m.
project time
1.5 m.
3.5 m.
phone calls
lots!
much less!
24
Acknowledgements

• Frédéric Lepied (Mandrivasoft), Dominique Ruiz
  and Patrick Lecoanet (French civil aviation)
  contributed to the implementation of TkZinc and
  IntuiKit
• Yves Rinato (Intactile Design) designed the
  departure manager, which is shown with the kind
  permission of Sofréavia
• W3C SVG WG

25
To contact us
IntuiLab Prologue 1 La Pyrénéenne 31672 LABEGE
Cedex BP 27201 FRANCE Phone (33) 5
61 00 44 05 Fax   [phone]
01 E-Mail contact_at_intuilab.com
Web  www.intuilab.com
or come to IHM05, the 17th French Annual
Conference on Human-Computer Interaction
(Toulouse, France, September 27-30,
2005) http//www.irit.fr/ihm2005
26
Thank you
27
IntuiKit Architecture
28
2D graphics

• TkZinc an open source toolkit http//www.tkzinc.or
  g

29
Animations

• Describe path and rythm
• Functions like  slow-in, slow-out 
• Available on items, colours, clipping

30
Touch screens and gesture recognition

• Recognition for simple gestures and signs
• Specific set of widgets for touch screens

Boutons
Menus