1. 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

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 Dφ, our participative designing method IntuiKit, our developing environment

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

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

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

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

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 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.

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 : (+33) 5 61 00 44 01 E-Mail : contact@intuilab.com Web : www.intuilab.comcontact@intuilab.comwww.intuilab.com … or come to IHM’05, 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.org

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 Menus Boutons