1

Cascading Dialog Modeling with UsiXML

Marco Winckler1,2,Jean Vanderdonckt2,Adrian Stanciulescu2, Francisco Trindade3

1IRIT, Université Toulouse 3, France, 118 route de Narbonne,F-31062 Toulouse cedex 9 (France), winckler@irit.fr – http://liihs.irit.fr/winckler/

2Université catholique de Louvain (UCL)Louvain School of Management (LSM) - Information Systems Unit (ISYS)

Belgian Laboratory of Computer-Human Interaction (BCHI)http://www.isys.ucl.ac.be/bchi

3Federal University of Rio Grande do Sul (UFRGS), Caixa Postal 15064,91501970 Porto Alegre (Brazil), fmtrindade@inf.ufrgs.br

2

Issues for developing multiplatform User Interfaces (UI)

Dealt with homogenous cross-platform applications Reuse solutions and specifications Reduce costs would allows to enlarge the number of

platforms target A known solution:

Provide platform-dependent rendering for platform-independent specifications; Ex. HTML for the Web

Increase the abstraction level of UI descriptions

3

Abstraction levels for multi-platform development

4

UsiXML, a General Purpose XML User Interface Description Set of models for describing

UI (structure, presentation and dialog) at different abstract levels, including: UI Model Mapping Model Domain Model AUI Model CUI Model Task Model Context Model Transformation Model Resource Model

Ex. Transformation Model

5

(selected) issues on model transformation

Model transformation can make X from Z… but how can we ensure the usability is not lost in this process?

Transform abstract widgets into concrete UI elements (ex. button) is not that difficult but what about the behavior assigned to it?

How combine model transformations and designers intention?

6

Outline

Issues on dialog modeling Overview of User Interface Description

Languages (UIDLs) A method for modeling dialog specification

throughout several levels of abstraction A case study of dialog modeling for a

multiplatform car rental application Discussion and final remarks

7

Issues on dialog modeling

Main goal: represents dynamic aspects of the user interaction with the system including: Relationship between presentation units (e.g. transitions

between windows) Relationship between UI elements (e.g. activate/deactivate

buttons) – i.e. fine-grained dialog Describe events chain (i.e. including fusion/fission of

events when multimodal interaction is involved) Integrate the functional core which requires mapping of

events to actions according to predefined constraints enabling/disabling actions at runtime.

8

The meaning of abstraction levels on dialog modeling

UI Abstraction level Concepts Dialog Components

Task Model (TM) Interactive tasks carried out by the end user & domain objects

Tasks and dependencies between tasks

Abstract User Interface (AUI)

UI definition independent of any modality of interaction

Relationship between logical presentation units (e.g. transition between windows), logical events, abstract actions

Concrete User Interface (CUI)

Concretizes AUI into CIOs (widget sets found in popular graphical and vocal toolkits)

States, (concrete) events, parameters, actions, controls, changes on UI dialog according to events, generic method calls, etc

Final User Interface (FUI)

operational UI that runs on a particular platform either by interpretation or by execution

“Physical” signature of events, platform specific method calls, etc

9

Dialog Modeling of some UIDLsL

an

gu

ag

e

Aspects described

Specification Levels of

abstraction

Formalism/ Notation language

Dynamic behavior described

Data exchange

Control (conditions)

US

IXM

L

Presentation, Dialog,

Structure Embedded

Task Model,

AUI, CUI, FUI

Specific notation for

every abstraction level

transition, method call, ui change

parameters Yes

XU

L Presentation, Dialog,

Structure

XBL Xul binding

language CUI, FUI

Specific notation

transition, method calls

parameters Yes

ICO

Dialog Embedded Generic Petri Net ui changes method

call, event, transition reference Yes

SC

XM

L

Dialog Embedded Generic Statecharts event, method call,

transition, state parameter, reference

Yes

TE

RE

SA-X

ML

Presentation, Dialog,

Structure Embedded

Task model,

AUI, CUI, FUI

Lotus event, ui changes,

transition Parameters Yes

UIM

L Presentation, Dialog,

Structure Embedded CUI, FUI

Specific notation

ui changes method call, event, transition

parameters, reference

Yes

SW

C

Dialog Embedded Generic Statecharts ui changes method

call, event, transition, state

Parameters Yes

10

Limitations of embedded UsiXML dialog specifications

Usually focused on some particular aspects (ex. no fine grained interaction, treatment for events)

Error prone as developers must go through into the code to see and fix specifications

No automated tool for checking the consistency of the dialog

11

A Method for dealing with multi-level dialog specification

Key points: Autonomy of the dialog Use of formal description techniques (ex.

Statecharts, Petri Nets, etc) Graphical representation for the dialog Combined use of automated and manual

transformations No imposed start point for dialog specifications

12

Dialog reification schema

Task Model

Abstract UI Abstract dialog

Transformational approach

Step

? mapping ?

Transformational approach

Concrete UI

Concrete dialog

? mapping ?

Transformational approach

Step

Final UI

Dialog modeling

Concrete dialog (revised)

Dialog modeling

Step

Step

Task modeling

13

S5S5a

S5b

Dialog Modeling with SWC (based on Harel’s Statecharts)

S2

b) Transient state d) External state

S4S1

a) Static state

S3

c) Dynamic state

e) Composite XOR-state

S6a S6b S6

S6a1S6b1

S6b2

f) Composite AND-state

H

g) Shallow history state

H*

h) Deep history state

i) End state j) Initial state

k) User transition

label(user evt/[condition]:action)

label(system evt/[condition]:action)

l) System transitionlabel( [condition] :action)

m) Completion transition

States

Pseudo States

Transitions

Stereotypes << Stereotype name >>n) User defined label or stereotype

14

Mapping scheme between UsiXML and SWC constructs

Abstraction level of UI

UsiXML Construct SWC Constructs Description of Constructs

Task Model

(TM)

Task

Relationships (e.g. enabling)

-

-

User tasks

Relationships between tasks

Abstract User Interface

(AUI)

abstractContainer

abstractIndividualComponent

control

compound states

basic states

transitions

High level containers for UI components

UI containers (ex. presentation units)

Relationships between containers

Concrete User Interface (CUI)

window

behavior

event

action

methodCall / transition / uichange

-

parameters

-

-

-

-

-

basic state

transition

event

action

action type

condition

parameters

user transitions

system transitions

transient states

history states

end states

UI components featuring containers

Definition of relationships between containers

Events raising

Behavior associated to events

Action executed when event is triggered

Pre-condition associated to actions

Data exchange format

User initiated actions

System initiated actions (ex. timed transitions)

Non-deterministic behavior of functional core

Memory for recent states

Notification of end of system execution

15

Case study: car rental

User goal: book a car Platforms:

PDA Desktop-based

16

UsiXML specification of task models for a car rental system

UsiXML task Model

UsiXML task Model rendered with IdealXML

17

UsiXML specification of abstract models for a car rental system

UsiXML task Model

UsiXML AUI

UsiXML AUI rendered by GraphiXML

18

Dialog options at concrete levels

19

Example1) Task model

2) Scenario

3) Abstract UI

5) Concrete dialog

6) Concrete UI

4) Abstract dialog

20

Discussion

UIDLs are a suitable solutions for developing multiplatform UIs but more study should be done to understand how developers and designers employ them in the practice The goal: proposed designers-centered methods

The method presented combines automated model transformation and manual dialog tuning

This proposal overcomes the limitations of embedded UsiXML dialog models

This work is focused on connecting external dialog specifications and UsiXML

21

Future work

Current results limited to relationships between windows it must be extended to include fine-grained interaction

Tool support integration of UsiXML tools (ex. GraphiXLM, SketchXML, IdealXML, RenderXML, etc) and Dialog Modeling (SWCEditor) … (in progress)

Use hierarchical events for ensuring backward and forward navigation between different abstraction levels

22

Thank you very much for your attention

For more information and downloading,http://www.isys.ucl.ac.be/bchi

http://www.usixml.orgUser Interface eXtensible Markup Language

http://www.similar.ccEuropean network on Multimodal UIs

Special thanks to all members of the team!