1 / 30

SVG OPEN 2005 Combining SVG and models of interaction to build highly interactive user interfaces

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 IntuiLab. French SME created in 2002 by senior researchers in HCI Activities

caitir
Download Presentation

SVG OPEN 2005 Combining SVG and models of interaction to build highly interactive user interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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}@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. Prototyping Development Modelling Dφ: 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. left left left left tab1 tab3 tab4 tab2 right right right right 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  : (+33) 5 61 00 44 01 E-Mail : contact@intuilab.com Web  : www.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 Boutons Menus

More Related