Technische Universität München 1 CADUI' June 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)

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

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

Technische Universität München 4 CADUI' June 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

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

Technische Universität München 6 CADUI' June FUNDP Namur G B I FUSE: Architecture

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

Technische Universität München 8 CADUI' June FUNDP Namur G B I FUSE: Architecture

Technische Universität München 9 CADUI' June FUNDP Namur G B I FUSE: Architecture

Technische Universität München 10 CADUI' June FUNDP Namur G B I FUSE: Architecture

Technische Universität München 11 CADUI' June FUNDP Namur G B I FUSE: Architecture

Technische Universität München 12 CADUI' June FUNDP Namur G B I FUSE: Architecture

Technische Universität München 13 CADUI' June FUNDP Namur G B I FUSE: Architecture

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

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

Technische Universität München 16 CADUI' June 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

Technische Universität München 17 CADUI' June 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

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

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

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

Technische Universität München 21 CADUI' June 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

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

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

Technische Universität München 24 CADUI' June 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:

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

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

Technische Universität München 27 CADUI' June 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

Technische Universität München 28 CADUI' June 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

Technische Universität München 29 CADUI' June 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

Technische Universität München 30 CADUI' June 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

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

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

Technische Universität München 33 CADUI' June 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

Technische Universität München 34 CADUI' June FUNDP Namur G B I Conclusion

Technische Universität München 35 CADUI' June 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

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