Technische Universität München 1 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I The FUSE-System: an Integrated User Interface Design Environment Frank Lonczewski.

Präsentation zum Thema: "Technische Universität München 1 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I The FUSE-System: an Integrated User Interface Design Environment Frank Lonczewski."—  Präsentation transkript:

1 Technische Universität München 1 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I The FUSE-System: an Integrated User Interface Design Environment Frank Lonczewski Siegfried Schreiber Institut für Informatik Technische Universität München Munich (Germany)

2 Technische Universität München 2 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Content The FUSE-Sytem : An Overview An Example Application modeled with FUSE UI Development Stages with FUSE Conclusion

3 Technische Universität München 3 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I The FUSE-System: An Overview

4 Technische Universität München 4 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE (Formal User Interface Specification Environment) Tool–based support for all phases of UI develop- ment process Generation of working prototypes in early phases of development process Standardization of UIs by formal specification of UI styleguides Generated UIs are very flexible (layout style can be changed at runtime) User Guidance & On-Line Help for end-user

5 Technische Universität München 5 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

6 Technische Universität München 6 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

7 Technische Universität München 7 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

8 Technische Universität München 8 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

9 Technische Universität München 9 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

10 Technische Universität München 10 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

11 Technische Universität München 11 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

12 Technische Universität München 12 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

13 Technische Universität München 13 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I FUSE: Architecture

14 Technische Universität München 14 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I An Example Application modeled with FUSE

15 Technische Universität München 15 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I An Example Application: The ISDN Phone Simulation Button Interface Menu Interface

16 Technische Universität München 16 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I PLUG-IN (Plan-based User Guidance for Intelligent Navigation) static hypertext on-line help in HTML format task-based user guidance dynamic hypertext on-line help generated at runtime PLUG-IN supports the user of interactive applications with

17 Technische Universität München 17 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Dynamic On-Line Help based on possible states and transitions of user interface (set of State Transition Diagrams (STDs)) set of STDs can be generated with FLUID PLUG-IN can visualize STDs STDs are used to generate –dynamic on-line help pages –animation sequences on the fly

18 Technische Universität München 18 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Example: ISDN Phone STD

19 Technische Universität München 19 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I On-Line Help Page ISDN Phone

20 Technische Universität München 20 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I On-Line Help Page ISDN Phone (cont.)

21 Technische Universität München 21 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Task-Based User Guidance uses specifications of Task Model & logical UI elements of User Guidance Component - Plan Recognizer determines current tasks of user - Plan Completer accomplishes remaining actions of identified task - Plan Generator generates dynamic on-line help pages generates animation sequences - Plan Simulator visualizes animation sequences on UI

22 Technische Universität München 22 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I UI Development Stages with FUSE

23 Technische Universität München 23 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Modeling UIs: Requirements Analysis

24 Technische Universität München 24 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Requirements Analysis Problem Domain Model (PDM) –functions and conceptual objects are represented as an algebraic specification User Model (UM) –static and dynamic properties model user stereotypes and individual users Task Model (TM) –decomposition of tasks into subtasks, actions and associated functions of problem domain model Goal: define requirements for the UI by creating the following specifications:

25 Technische Universität München 25 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Excerpts from Task Model of Phone

26 Technische Universität München 26 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Modeling UIs: Design Phase

27 Technische Universität München 27 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Design Phase (GAL) 1st step: Dialog Design –generate logical UI automatically with FLUID (by using dialog guidelines) or –create / modify logical UI by hand with BOSS 2nd step: Layout Design –generation of UI in particular layout style(s) by automatic application of Layout Guidelines Goal: develop UI that meets the requirements defined in the PDM, UM & TM

28 Technische Universität München 28 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I BOSS (BedienOberflächenSpezifikationsSystem) main tool for supporting design–phase of UI development process offers integrated graphical development environment uses encompassing specification technique (HIT) for the specification of logical UIs and Layout Guidelines

29 Technische Universität München 29 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Hierarchic Interaction graph Templates (HITs) based on Dynamic Attribute Grammars and Dataflow Diagrams can be transformed into efficient C++ code using standard techniques from compiler generation HIT specification consists of a set of HIT templates HIT template  class in OOP

30 Technische Universität München 30 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Dialog Design with BOSS create / modify specification of logical UI logical UI is a composition of views containing –user interactions –system interactions –problem domain objects for one or more tasks each view is specified by one HIT template

31 Technische Universität München 31 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Toplevel View of logical UI Example HIT of ISDN Phone (simplified)

32 Technische Universität München 32 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Basic Functions View of logical UI Example HIT of ISDN Phone (simplified)

33 Technische Universität München 33 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Layout Guideline Design with BOSS Layout Guidelines define mapping from logical UI to UI in particular layout style(s) Layout Guidelines consists of –presentation-templates (PTs) and –refinement templates (RTs) PTs & RTs are specified as HITs UI layout is computed at runtime layout style can be changed at runtime

34 Technische Universität München 34 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Conclusion

35 Technische Universität München 35 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I ConFUSEing Conclusion Shortcomings –currently integration in FUSE only exists between BOSS and PLUG-IN –more practical experience has to be gained Advantages –tool-based support across whole UI development process –generated UIs are very flexible –powerful on-line help and user guidance incorporated –UIs from different problem domains modeled with FUSE Plans –course in UI Design & Specification at TU Munich

36 Technische Universität München 36 CADUI'96 - 5-7 June 1996 - FUNDP Namur G B I Thank you for your attention!

37