IWWOST’01 Valencia June 01 User Interface Models IV: ( Design Level ) Dialog Model: (X, P)-dialog H H It describes the user-system “conversation”. H H When the user can invoke commands, select or enter information or when the computer can require data from the user and display the output information. H H Purpose: Describe the syntactic structure of the user-system interaction.

IWWOST’01 Valencia June 01 The Dialog Model 1 Dialog Interaction Diagram: Windows and Dialogs the user needs to perform the tasks. Example: RentalCar startexit Select Rent a Car Car RentalReturn Cars Close Select Return a Car Close States: Windows or Dialogs Events: User Selections

IWWOST’01 Valencia June 01 RentalCar startexit Select Rent a Car Car RentalReturn Cars Close Select Return a Car Close

IWWOST’01 Valencia June 01 The Dialog Model 2 Component Specification Diagram: (A, alfa)-dialog Models the contents of every one of the windows and dialogs represented in the previous diagrama. Example: Window or Dialog Component Visualisation Tool Control Tool

IWWOST’01 Valencia June 01 RentaCar DialogControl Show Client Show Car ShowDate Select Client Select Car Close OK Main Window Client SelectionCar Selection Dialog for Renting aCar:

IWWOST’01 Valencia June 01 H Main Window: One component for every user Use Case (User Task)

IWWOST’01 Valencia June 01 The Dialog Model 3 Component Functional Model: Table in which every one of the components and tools represented in the previous diagram are described in detail. Example:

IWWOST’01 Valencia June 01 Functional Model Semantics b Event Calling within Dialog Model Control Tools events and Domain Model event/transactions b Event Calling within Domain Model events and Dialog Model Visualization Tools b Event Calling within Dialog Model Control Tools events and Domain Model event/transactions b Event Calling within Domain Model events and Dialog Model Visualization Tools

IWWOST’01 Valencia June 01 Reification of the two object societies Reification = implementation ; change of granularity (Grit Denker et.al) b Three object types :  abstract object :  Abs : (  object,  object )  building block :  Bas : (  bas,  bas )  middle object :  Ref :(  ref,  ref )   Ref =  Abs +  Bas + {  A,  X } F  A : A * Bas  A abs F  X : X * Bas  X abs b Two reification processes: u Role Refinement into Components u Collaboration view Refinement into Dialog Structures Reification = implementation ; change of granularity (Grit Denker et.al) b Three object types :  abstract object :  Abs : (  object,  object )  building block :  Bas : (  bas,  bas )  middle object :  Ref :(  ref,  ref )   Ref =  Abs +  Bas + {  A,  X } F  A : A * Bas  A abs F  X : X * Bas  X abs b Two reification processes: u Role Refinement into Components u Collaboration view Refinement into Dialog Structures

IWWOST’01 Valencia June 01 INTER-SOCIETIES MORPHISMS: behaviour b Mb: X-dialog  X*- domain  alfa-domain b Dialog Interaction Diagram Sequence Diagram b Mb-inv: X-domain  X*- dialog  alfa-dialog b Sequence Diagram Dialog Interaction Diagram b Mb: X-dialog  X*- domain  alfa-domain b Dialog Interaction Diagram Sequence Diagram b Mb-inv: X-domain  X*- dialog  alfa-dialog b Sequence Diagram Dialog Interaction Diagram

IWWOST’01 Valencia June 01 INTER-SOCIETIES MORPHISM: structure (via behav.) b Ms: (A,alfa)-domain  (A*,alfa)-dialog RolesComp.spec.diagram b Ms: (A,alfa)-domain  (A*,alfa)-dialog RolesComp.spec.diagram

IWWOST’01 Valencia June 01

User Interface Component Window Tool Control ToolVisualisation Tool Combined Tool Screen Abstract Interaction Objects Composing the User Interface at Design Level

IWWOST’01 Valencia June 01 Final UserTask Objective Action User - System Interaction

IWWOST’01 Valencia June 01 Design Specification b New OASIS classes for Abstract Interaction Objects b Event Calling within Domain Model events and Dialog Model Visualization Tools b New OASIS classes for Abstract Interaction Objects b Event Calling within Domain Model events and Dialog Model Visualization Tools

IWWOST’01 Valencia June 01 Design Specification b New OASIS classes for Abstract Interaction Objects Specification: u Task/Activity Class: Describes the collaboration among the objects involved in the task. u Resource Class: Represents a domain entity. u User Class: Represents the properties of the different users of the information system. b New OASIS classes for Abstract Interaction Objects Specification: u Task/Activity Class: Describes the collaboration among the objects involved in the task. u Resource Class: Represents a domain entity. u User Class: Represents the properties of the different users of the information system.

IWWOST’01 Valencia June 01 Design Specification b New OASIS classes for Abstract Interaction Objects Specification: conceptual schema Interfaz_de_usuario Class nombre_clase_pantalla aggregation of dynamic relational nombre_clase_ventana towards (1, *) from (1,1); Class nombre_clase_ventana aggregation of static relational nombre_clase_componentes towards (1, *) from (1,1); Class nombre_clase_componente aggregation of static relational nombre_clase_herramienta towards (1, *) from (1,1); Class nombre_clase_componente aggregation of static relational nombre_clase_herramienta towards (1, *) from (1,1); nombre_clase_herramienta_control, nombre_clase_herramienta_visualización static specialization of nombre_clase_herramienta; nombre_clase_herramienta_combinada static specialization of nombre_clase_herramienta_control, nombre_clase_herramienta_visualización; b New OASIS classes for Abstract Interaction Objects Specification: conceptual schema Interfaz_de_usuario Class nombre_clase_pantalla aggregation of dynamic relational nombre_clase_ventana towards (1, *) from (1,1); Class nombre_clase_ventana aggregation of static relational nombre_clase_componentes towards (1, *) from (1,1); Class nombre_clase_componente aggregation of static relational nombre_clase_herramienta towards (1, *) from (1,1); Class nombre_clase_componente aggregation of static relational nombre_clase_herramienta towards (1, *) from (1,1); nombre_clase_herramienta_control, nombre_clase_herramienta_visualización static specialization of nombre_clase_herramienta; nombre_clase_herramienta_combinada static specialization of nombre_clase_herramienta_control, nombre_clase_herramienta_visualización;

IWWOST’01 Valencia June 01

User Interface Models V: Presentation Model: H H It describes the final components in the user screen, its design characteristics and visual dependencies among them. H H Static Part: standard widgets presentation. H H Dynamic Part: Shows the data dependent on the application that change at run time.

IWWOST’01 Valencia June 01 Implementation Phase = UI Visualization Depending on the final platform OASIS-IU Specification Automatic Code Generation Final GUI AIO CIO

IWWOST’01 Valencia June 01 Ontological Model of IDEAS: Semantic Level Syntactic Level Lexical Level Task ModelDomain Model Dialog Model Presentation Model

IWWOST’01 Valencia June 01 Interface Development Environment within OASIS IDEAS

IWWOST’01 Valencia June 01 STDOM Executable System refine Ontological model Executable GUI refine compliant OASIS Specification General view integrate

IWWOST’01 Valencia June 01 Integrating Usability Within IDEAS b b The ISO definition of usability: The ISO 9241 standard defines usability as the "extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use".

IWWOST’01 Valencia June 01 Use cases User requirement Analysis Design and Implementation System Ready Dialog model Presentation model Guidelines and heuristic Interface Evaluation Task model User model Domain models Usability goals Prototype Feedback information Usability Testing Integrating Usability Within IDEAS

IWWOST’01 Valencia June 01 Interaction Patterns for User Interface Design

IWWOST’01 Valencia June 01 Introduction. Definitions b User Centred Design. b Usability b Goal: Diminish the semantic gap between designers and final users. b ¿What mechanisms could be useful to documenting the experience in user interface design? b User Centred Design. b Usability b Goal: Diminish the semantic gap between designers and final users. b ¿What mechanisms could be useful to documenting the experience in user interface design? Style GuidesInteraction Patterns

IWWOST’01 Valencia June 01 Style Guides b Inconvenients: u Too simple and abstract u Difficult to select u Difficult to interpret u Can be conflictive b Style guides are of the form: Do this or Do not do this. b Inconvenients: u Too simple and abstract u Difficult to select u Difficult to interpret u Can be conflictive b Style guides are of the form: Do this or Do not do this.

IWWOST’01 Valencia June 01 Patterns and Pattern Languages b Pattern. u Should present and solve a problem. u Should have a context of use where the solution is reachable. u Should be useful in the treatment of similar problems in other situations. u Should teach about the problem solution. u Should have an identification name to identify the pattern. u Nevertheless, patterns are no as restrictive as style guides. b Pattern Languages: Common Ground, Lingua Franca b Pattern. u Should present and solve a problem. u Should have a context of use where the solution is reachable. u Should be useful in the treatment of similar problems in other situations. u Should teach about the problem solution. u Should have an identification name to identify the pattern. u Nevertheless, patterns are no as restrictive as style guides. b Pattern Languages: Common Ground, Lingua Franca

IWWOST’01 Valencia June 01 Interaction Patterns “Now, my understanding of what you are doing with patterns... It is a kind of a neat format, and that is fine. The pattern language that we began did have other features, and I don’t know whether those have translated into your discipline. I mean, there was at root behind the whole thing a continuous mode of preoccupation with under what circumstances is the environment good. In our field that means something” Christopher Alexander, OOPSLA’96 “Now, my understanding of what you are doing with patterns... It is a kind of a neat format, and that is fine. The pattern language that we began did have other features, and I don’t know whether those have translated into your discipline. I mean, there was at root behind the whole thing a continuous mode of preoccupation with under what circumstances is the environment good. In our field that means something” Christopher Alexander, OOPSLA’96

IWWOST’01 Valencia June 01 Interaction Patterns b The difference between design patterns and interaction patterns is in their application domain. The first one are intended for object domain implementation (OO software design) whereas interaction pattern are intended for user interface objects (GUI objects). b The first one aims reuse and the second one aims usability. b The difference between design patterns and interaction patterns is in their application domain. The first one are intended for object domain implementation (OO software design) whereas interaction pattern are intended for user interface objects (GUI objects). b The first one aims reuse and the second one aims usability.

IWWOST’01 Valencia June 01 Patterns within IDEAS

IWWOST’01 Valencia June 01 ProposalProposal b Replace style guides with interaction patterns. b Associate pseudoidioms to the defined interaction patterns using XML based languages. b Replace style guides with interaction patterns. b Associate pseudoidioms to the defined interaction patterns using XML based languages.

IWWOST’01 Valencia June 01 Why Markup Languages? b Describe user interface in a canonical way. b Separates presentation from content. (XUL, UIML) b Help non-expert people to design UI. b Web Oriented. b Allows UI design reuse in different devices. b Universal language and device-independent (UIML) b Describe user interface in a canonical way. b Separates presentation from content. (XUL, UIML) b Help non-expert people to design UI. b Web Oriented. b Allows UI design reuse in different devices. b Universal language and device-independent (UIML)

IWWOST’01 Valencia June 01 Conclusions : u Model-Based User Interface Development Environment: Object Oriented Approach tackled in parallel to the system modeling and covering the phases of Analysis, Design and Implementation. u Use of Declarative Models to describe the different aspects of the user-system interaction. u Automatic Code Generation starting from the models. u Formal and Methodological Support. u Usability criteria within the development process. u Model-Based User Interface Development Environment: Object Oriented Approach tackled in parallel to the system modeling and covering the phases of Analysis, Design and Implementation. u Use of Declarative Models to describe the different aspects of the user-system interaction. u Automatic Code Generation starting from the models. u Formal and Methodological Support. u Usability criteria within the development process.

IWWOST’01 Valencia June 01 Conclusions II: b With this User Interface Model we answer the following questions: u Who are the potential users of the interface? ( User Model) u What tasks perform the users interacting with the system? (Task Model) u What domain objects can be accessed through the Interface?(Domain Model) u What commands and actions can the user perform with the system interface? (Dialog Model) u How are the components of the UI presented to each user? (Presentation Model) b With this User Interface Model we answer the following questions: u Who are the potential users of the interface? ( User Model) u What tasks perform the users interacting with the system? (Task Model) u What domain objects can be accessed through the Interface?(Domain Model) u What commands and actions can the user perform with the system interface? (Dialog Model) u How are the components of the UI presented to each user? (Presentation Model)

IWWOST’01 Valencia June 01 Conclusions III: b Patterns and Language Patterns to facilitate the communication between designer and final user. b Allows the user to be involve in the design of the User Interface b Includes usability criteria. b Portability to different devices. b Patterns and Language Patterns to facilitate the communication between designer and final user. b Allows the user to be involve in the design of the User Interface b Includes usability criteria. b Portability to different devices.