User Interface Models IV: ( Design Level )

1. User Interface Models IV:( Design Level ) Dialog Model: (X, P)-dialog • It describes the user-system “conversation”. • 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. • Purpose: Describe the syntactic structure of the user-system interaction.

2.   start exit RentalCar Select Rent a Car Select Return a Car Close Close Car Rental Return Cars The Dialog Model1Dialog Interaction Diagram:Windows and Dialogs the user needs to perform the tasks. Example: States: Windows or Dialogs Events: User Selections

3.   start exit RentalCar Select Rent a Car Select Return a Car Close Close Car Rental Return Cars

4. Window or Dialog Component Visualisation Tool Control Tool The Dialog Model2Component Specification Diagram: (A, alfa)-dialogModels the contents of every one of the windows and dialogs represented in the previous diagrama. Example:

5. Dialog for Renting a Car : Dialog Control Rent a Car Show Client OK Show Car Show Date Close Select Select Car Client Main Window Client Selection Car Selection

6. Main Window: One component for every user Use Case (User Task)

7. The Dialog Model3Component Functional Model:Table in which every one of the components and tools represented in the previous diagram are described in detail. Example:

8. Functional Model Semantics • Event Calling within Dialog Model Control Tools events and Domain Model event/transactions • Event Calling within Domain Model events and Dialog Model Visualization Tools

9. Reification of the two object societies Reification = implementation ; change of granularity (Grit Denker et.al) • Three object types : • abstract object : Abs : ( object ,object ) • building block : Bas : ( bas ,bas ) • middle object : Ref :(ref ,ref) • Ref = Abs + Bas+ {A , X } • A : A*Bas Aabs • X : X*Bas Xabs • Two reification processes: • Role Refinement into Components • Collaboration view Refinement into Dialog Structures

10. INTER-SOCIETIES MORPHISMS: behaviour • Mb: X-dialog  X*- domain  alfa-domain • Dialog Interaction Diagram Sequence Diagram • Mb-inv: X-domain  X*- dialog  alfa-dialog • Sequence Diagram Dialog Interaction Diagram

11. INTER-SOCIETIES MORPHISM: structure (via behav.) • Ms: (A,alfa)-domain  (A*,alfa)-dialog • Roles Comp.spec.diagram

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

14. User - System Interaction Objective Final User Task Action

15. Design Specification • New OASIS classes for Abstract Interaction Objects • Event Calling within Domain Model events and Dialog Model Visualization Tools

16. Design Specification • New OASIS classes for Abstract Interaction Objects Specification: • Task/Activity Class: Describes the collaboration among the objects involved in the task. • Resource Class: Represents a domain entity. • User Class: Represents the properties of the different users of the information system.

17. Design Specification • 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 staticspecialization of nombre_clase_herramienta; nombre_clase_herramienta_combinada staticspecialization of nombre_clase_herramienta_control, nombre_clase_herramienta_visualización;

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

20. Implementation Phase = UI Visualization Depending on the final platform OASIS-IU Specification Automatic Code Generation AIO CIO Final GUI

21. Semantic Task Model Domain Model Level Syntactic Dialog Model Level Lexical Presentation Model Level Ontological Model of IDEAS:

22. Interface Development Environment within OASISIDEAS

23. OASIS Specification General view Ontological model refine refine Executable GUI refine compliant integrate refine refine STD OM Executable System

24. Integrating Usability Within IDEAS • 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".

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

26. Interaction Patterns for User Interface Design

27. Introduction. Definitions • User Centred Design. • Usability • Goal: Diminish the semantic gap between designers and final users. • ¿What mechanisms could be useful to documenting the experience in user interface design? Style Guides Interaction Patterns

28. Style Guides • Inconvenients: • Too simple and abstract • Difficult to select • Difficult to interpret • Can be conflictive • Style guides are of the form: Do this or Do not do this.

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

30. 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

31. Interaction Patterns • 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). • The first one aims reuse and the second one aims usability.

32. Patterns within IDEAS

33. Proposal • Replace style guides with interaction patterns. • Associate pseudoidioms to the defined interaction patterns using XML based languages.

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

35. Conclusions : • 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. • Use of Declarative Models to describe the different aspects of the user-system interaction. • Automatic Code Generation starting from the models. • Formal and Methodological Support. • Usability criteria within the development process.

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

37. Conclusions III: • Patterns and Language Patterns to facilitate the communication between designer and final user. • Allows the user to be involve in the design of the User Interface • Includes usability criteria. • Portability to different devices.