IWWOST’01 Valencia June 01 User Interface Models IV: ( Design Level ) Dialog Model: (X, P)-dialog...

IWWOST’01 Valencia June 01

User Interface Models IV:User Interface Models IV:( Design Level )( Design Level )

User Interface Models IV:User Interface Models IV:( Design Level )( 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.


The Dialog ModelThe Dialog Model11 Dialog Interaction Diagram:Dialog Interaction Diagram:

Windows and Dialogs the user needs to perform the tasks. Windows and Dialogs the user needs to perform the tasks. Example:Example:

The Dialog ModelThe Dialog Model11 Dialog Interaction Diagram:Dialog Interaction Diagram:

Windows and Dialogs the user needs to perform the tasks. Windows and Dialogs the user needs to perform the tasks. Example:Example:

RentalCar

start exit

Select Rent a Car

Car Rental Return Cars

Close

Select Return a

Car Close

States: Windows

or Dialogs

Events: User

Selections


RentalCar

start exit

Select Rent a Car

Car Rental Return Cars

Close

Select Return a Car

Close


The Dialog ModelThe Dialog Model22 Component Specification Diagram: (A, alfa)-dialogComponent Specification Diagram: (A, alfa)-dialog

Models the contents of every one of the windows and dialogs represented in the Models the contents of every one of the windows and dialogs represented in the previous diagrama. Example:previous diagrama. Example:

The Dialog ModelThe Dialog Model22 Component Specification Diagram: (A, alfa)-dialogComponent Specification Diagram: (A, alfa)-dialog

Models the contents of every one of the windows and dialogs represented in the Models the contents of every one of the windows and dialogs represented in the previous diagrama. Example:previous diagrama. Example:

Ren t a C arDialog Control

Sho w Client

Sho w Car

Sho w Date

SelectClient

SelectCar

Close

OK

MainWin dow

Client Selection Car Selection

Dialog for Renting a Car:

Window or Dialog

Component

Visualisation Tool

Control Tool


Rent a CarDialog Control

Show Client

Show Car

Show Date

SelectClient

SelectCar

Close

OK

MainWindow

Client Selection Car Selection

Dialog for Renting a Car :


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

ApplicationControl

Exit

SelectRental

Rent a Car

Sale a Car

Main Window

Rent a Car

Select Sales

Sale a Car


The Dialog ModelThe Dialog Model33 Component Functional Model:Component Functional Model:

Table in which every one of the components and tools represented in the previous Table in which every one of the components and tools represented in the previous diagram are described in detail.diagram are described in detail.

Example: Example:

The Dialog ModelThe Dialog Model33 Component Functional Model:Component Functional Model:

Table in which every one of the components and tools represented in the previous Table in which every one of the components and tools represented in the previous diagram are described in detail.diagram are described in detail.

Example: Example:

Component Control Tool Visualisation ToolRent a Car Select_Client: Allows the

selection of a Client or theintroduction of a new one.Select_Car: Allows theselection of a car from thedatabase.

Show_Client: Shows the clientselected through the control tool.Show_Car: Shows the carselected through the control tool.Show_date: Shows the systemdate corresponding to the rentaldate.

DialogControl

Ok: Allows the user tointroduce a new rental inthe system.Close: Close the dialog andreturns the user to the mainwindow.


Functional Model SemanticsFunctional Model SemanticsFunctional Model SemanticsFunctional 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


Reification of the two object Reification of the two object societiessocietiesReification of the two object Reification of the two object societiessocieties

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

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


INTER-SOCIETIES INTER-SOCIETIES MORPHISMS: behaviourMORPHISMS: behaviourINTER-SOCIETIES INTER-SOCIETIES MORPHISMS: behaviourMORPHISMS: 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

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


INTER-SOCIETIES MORPHISM: INTER-SOCIETIES MORPHISM: structure (via behav.)structure (via behav.)INTER-SOCIETIES MORPHISM: INTER-SOCIETIES MORPHISM: structure (via behav.)structure (via behav.)

Ms: (A,alfa)-domain (A*,alfa)-dialog• Roles Comp.spec.diagram

Ms: (A,alfa)-domain (A*,alfa)-dialog• Roles Comp.spec.diagram


User Interface

Component

Window

Tool

Control Tool Visualisation Tool

Combined Tool

Screen

Abstract Interaction ObjectsAbstract Interaction Objects Composing the User Interface Composing the User Interface at Design Levelat Design Level


Final User Task

Objective

Action

User - System InteractionUser - System InteractionUser - System InteractionUser - System Interaction


Design SpecificationDesign SpecificationDesign SpecificationDesign Specification

New OASIS classes for Abstract Interaction Objects

Event Calling within Domain Model events

and Dialog Model Visualization Tools


Design SpecificationDesign SpecificationDesign SpecificationDesign 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.


Design SpecificationDesign SpecificationDesign SpecificationDesign 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ónstatic specialization of nombre_clase_herramienta;

nombre_clase_herramienta_combinada static specialization of nombre_clase_herramienta_control, nombre_clase_herramienta_visualización;


User Interface Models V:User Interface Models V:User Interface Models V: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.


Implementation Phase = UI Implementation Phase = UI VisualizationVisualization

Implementation Phase = UI Implementation Phase = UI VisualizationVisualization

Depending on the final platform

OASIS-IU Specification

Automatic Code Generation

Final GUI

AIO CIO


Ontological Model of IDEAS:Ontological Model of IDEAS:Ontological Model of IDEAS:Ontological Model of IDEAS:

SemanticLevel

SyntacticLevel

LexicalLevel

Task Model Domain Model

Dialog Model

Presentation Model


Interface Development Interface Development Environment within OASISEnvironment within OASIS

IDEASIDEAS


STD OM

Executable System

refine

Ontologicalmodel

ExecutableGUI

refine refine

refine

refinecompliant

OASISSpecification

General viewGeneral view

integrate


Integrating Usability Within Integrating Usability Within IDEASIDEASIntegrating Usability Within Integrating Usability Within IDEASIDEAS

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


Use cases

User requirement

Analysis

Design and Implementation

System Ready

Dialog modelPresentation modelGuidelines and heuristic

Interface Evaluation

Task modelUser modelDomain modelsUsability goals

Prototype

Feedback information



Usability Testing

Integrating Usability Within IDEASIntegrating Usability Within IDEASIntegrating Usability Within IDEASIntegrating Usability Within IDEAS


Interaction Patterns for Interaction Patterns for User Interface DesignUser Interface Design

Interaction Patterns for Interaction Patterns for User Interface DesignUser Interface Design


Introduction. DefinitionsIntroduction. DefinitionsIntroduction. DefinitionsIntroduction. 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?

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


Style GuidesStyle GuidesStyle GuidesStyle 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.

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.


Patterns and Pattern Patterns and Pattern LanguagesLanguagesPatterns and Pattern Patterns and Pattern LanguagesLanguages

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

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


Interaction PatternsInteraction PatternsInteraction PatternsInteraction 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


Interaction PatternsInteraction PatternsInteraction PatternsInteraction 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.

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.


Patterns within IDEASPatterns within IDEASPatterns within IDEASPatterns within IDEAS


ProposalProposalProposalProposal

Replace style guides with interaction patterns.

Associate pseudoidioms to the defined interaction patterns using XML based

languages.

Replace style guides with interaction patterns.

Associate pseudoidioms to the defined interaction patterns using XML based

languages.


Why Markup Languages?Why Markup Languages?Why Markup Languages?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)

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)


Conclusions :Conclusions :Conclusions :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.


Conclusions II:Conclusions II:Conclusions II: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)


Conclusions III: Conclusions III: Conclusions III: 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.

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.

IWWOST’01 Valencia June 01 User Interface Models IV: ( Design Level ) Dialog Model: (X, P)-dialog...

Documents

Transcript of IWWOST’01 Valencia June 01 User Interface Models IV: ( Design Level ) Dialog Model: (X, P)-dialog...