technische universität münchen 1 cadui'96 - 5-7 june 1996 - fundp namur g b i the...

Technische Universität München1 CADUI'96 - 5-7 June 1996 - FUNDP Namur G BI

The FUSE-System:The FUSE-System:an Integrated User Interfacean Integrated User Interface

Design EnvironmentDesign Environment

Frank LonczewskiSiegfried Schreiber

Institut für InformatikTechnische Universität München

Munich (Germany)


ContentContent

• The FUSE-Sytem : An Overview

• An Example Application modeled with FUSE

• UI Development Stages with FUSE

• Conclusion


The FUSE-System:The FUSE-System: An Overview An Overview


FUSEFUSE(Formal User Interface Specification Environment)(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


FUSE: ArchitectureFUSE: Architecture

Phase inDevelopmentProcess

Requirem.Analysis

Design

Evaluation



Guideline Definition Layer (GDL) Guideline Application Layer (GAL)Phase inDevelopmentProcess

Requirem.Analysis

Design

Evaluation



Guideline Definition Layer (GDL) Guideline Application Layer (GAL)

Problem Do-main Model

User Model Task Model

Application Analysts


Requirem.Analysis

Design

Evaluation

Designer

Formal Spe-cification







Logical UserInterface (Dia-log Style d)


Requirem.Analysis

Design

Evaluation

DialogGuidelineDesigner

Dialog Guide-lines (DialogStyle d)

LayoutGuidelineDesigner

Designer









Layout Guide-lines (LayoutStyle l1,...,ln)


Requirem.Analysis

Design

Evaluation

UI (Dialog Style d,Layout Styles

l1,...,ln)




Designer


GeneratedProgram










Requirem.Analysis

Design

Evaluation




Designer


GeneratedProgram

Interactive ApplicationFunc-tionalCore


l1,...,ln)

UserGuidance

Component







FLUID




Requirem.Analysis

Design

EvaluationInteractive ApplicationFunc-tionalCore


l1,...,ln)

UserGuidance

Component




Designer


Generator

GeneratedProgram







FLUID


BOSS



Requirem.Analysis

Design



l1,...,ln)

UserGuidance

Component




( )DialogDesigner

Designer


Generator

GeneratedProgram







FLUID


BOSS PLUG-IN



Requirem.Analysis

Design



l1,...,ln)

UserGuidance

Component




( )DialogDesigner

Designer


Generator

GeneratedProgram


An Example ApplicationAn Example Applicationmodeled with FUSEmodeled with FUSE


An Example Application:An Example Application:The ISDN Phone SimulationThe ISDN Phone Simulation

Button Interface Menu Interface


PLUG-INPLUG-IN(Plan-based User Guidance for Intelligent Navigation)(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


Dynamic On-Line HelpDynamic 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


Example: ISDN Phone STDExample: ISDN Phone STD


On-Line Help Page ISDN PhoneOn-Line Help Page ISDN Phone


On-Line Help Page ISDN Phone (cont.)On-Line Help Page ISDN Phone (cont.)


Task-Based User GuidanceTask-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


UI Development StagesUI Development Stageswith FUSEwith FUSE


Modeling UIs: Requirements AnalysisModeling UIs: Requirements AnalysisGuideline Definition Layer (GDL) Guideline Application Layer (GAL)




FLUID


BOSS PLUG-IN



Requirem.Analysis

Design

EvaluationInteractive Application

Func-tionalCore


l1,...,ln)

UserGuidance

Component




( )DialogDesigner


Requirements AnalysisRequirements 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:


Excerpts from Task Model of PhoneExcerpts from Task Model of Phone


Modeling UIs: Design PhaseModeling UIs: Design PhaseGuideline Definition Layer (GDL) Guideline Application Layer (GAL)




FLUID


BOSS PLUG-IN



Requirem.Analysis

Design

EvaluationInteractive Application

Func-tionalCore


l1,...,ln)

UserGuidance

Component




( )DialogDesigner


Design Phase (GAL)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


BOSSBOSS(BedienOberflächenSpezifikationsSystem)(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


Hierarchic Interaction graph TemplatesHierarchic Interaction graph Templates (HITs)(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


Dialog Design with BOSSDialog 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


Toplevel View of logical UI Toplevel View of logical UI Example HIT of ISDN Phone (simplified)Example HIT of ISDN Phone (simplified)

LogicalISDNUI

ISDNState

Basic-Functions

ISDNState Advanced-Functions

ISDNState PhoneBookDialPhoneNumber

ISDNState

PhoneBook


Basic Functions Basic Functions View of logical UIView of logical UIExample HIT of ISDN Phone (simplified)Example HIT of ISDN Phone (simplified)

Basic-Functions

ISDNState

start_1st_connection

a ra r

terminate_1st_connection

PC: is_Idle(Line1(ISDNState)) && is_Idle(Line2(ISDNState))

PC: is_Dialing(Line1(ISDNState)) || is_Active(Line1(ISDNState))


Layout Guideline Design with BOSSLayout 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


ConclusionConclusion


ConConFUSEFUSEinging Conclusion 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


Thank you for your attention!

technische universität münchen 1 cadui'96 - 5-7 june 1996 - fundp namur g b i the...

Documents