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,

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

Large display for production supervision EADS + Airbus

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

Task manager for professional vehicles European Commission, M3S

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 IntuiKit, our developing environment

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

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

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 tab1 tab2 tab3tab4 left right

Application = tree of components (1) unselected selection tabs FSM tab1 tab2 tab3 tab4

Application = tree of components (2) unselected selection tabs FSM tab1 tab2 tab3 tab4

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 graphic design FC code size phone calls coding effort project time 15 p.d. 15 kloc 4 p.m. lots! 3.5 m. reference Departure Manager 15 p.d. 15 kloc 2.5 p.m. much less! 1.5 m.

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

To contact us IntuiLab Prologue 1 – La Pyrénéenne LABEGE Cedex BP FRANCE Phone : (+33) Fax : (+33) Web : … or come to IHM’05, the 17th French Annual Conference on Human-Computer Interaction (Toulouse, France, September 27-30, 2005)

Thank you

IntuiKit Architecture

2D graphics TkZinc an open source toolkit

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

Touch screens and gesture recognition Recognition for simple gestures and signs Specific set of widgets for touch screens Menus Boutons