SVG OPEN 2005 Combining SVG and models of

SVG OPEN 2005 Combining SVG and models of interaction to build highly interactive user interfaces Stéphane Chatty, Alexandre Lemort, Stéphane Sire {Chattty, Lemort, Sire}@intuilab. com

A few words about Intui. Lab • 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: Intui. Kit

Large display for production supervision EADS + Airbus

Scheduling system for Air Traffic Control Sofréavia + Copenhagen Airport

Task manager for professional vehicles European Commission, M 3 S

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

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)

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

Our solution • Dφ, our participative designing method • Intui. Kit, our developing environment

Dφ: our participative designing method • From the design to the UI development Ergonomics Design Computer science Modelling Prototyping Development

Intui. Kit • Model-driven architecture – User Interface = set of models – Models created with specialized tools – Models compiled and executed by Intui. Kit • Separate models (separate DTDs/schemas) – – Graphics Behaviours Software components Grammars, etc • W 3 C specifications when available

A small example: a car display

Graphics: choice of features • An algebra of shapes • Gradients, transparency • Rhythm support (textures, lines, etc)

Basic behaviour: state machines • Arcs labelled with events • Named states left tab 1 right tab 3 tab 2 right left right tab 4 right

Application = tree of components (1) unselected tab 1 tabs selection tab 2 tab 3 tab 4 FSM

Application = tree of components (2) unselected tab 1 tabs selection tab 2 tab 3 tab 4 FSM

Application to a real project

Low-fidelity prototype

Parallel work

Progressive integration

Final result

Reference condition ~4 person-months, pipeline process, 3. 5 months

Approximate figures reference Departure Manager graphic design 15 p. d. FC code size 15 kloc coding effort 4 p. m. 2. 5 p. m. project time 3. 5 m. phone calls lots! 1. 5 m. much less!

Acknowledgements • Frédéric Lepied (Mandrivasoft), Dominique Ruiz and Patrick Lecoanet (French civil aviation) contributed to the implementation of Tk. Zinc and Intui. Kit • Yves Rinato (Intactile Design) designed the departure manager, which is shown with the kind permission of Sofréavia • W 3 C SVG WG

To contact us Intui. Lab Prologue 1 – La Pyrénéenne 31672 LABEGE Cedex BP 27201 FRANCE Phone E-Mail : (+33) 5 61 00 44 05 : contact@intuilab. com Fax Web : (+33) 5 61 00 44 01 : www. intuilab. com … or come to IHM’ 05, the 17 th French Annual Conference on Human-Computer Interaction (Toulouse, France, September 27 -30, 2005) http: //www. irit. fr/ihm 2005