Inés Pederiva 1, Jean Vanderdonckt 1,2, Sergio España 1, José Ignacio Panach 1 and Óscar Pastor...

Inés Pederiva1, Jean Vanderdonckt1,2, Sergio España1, José Ignacio Panach1 and Óscar Pastor1

1Universidad Politécnica de Valencia, Departamento de Sistemas Informáticos y Computación

Camino de Vera s/n, 46071 Valencia, Spain2Université catholique de Louvain, Louvain School of Management,

Place des Doyens, 1 – 1348 Louvain-la-Neuve, Belgium{ipederiva, jvanderdonckt, sergio.espana, jpanach, opastor}@dsic.upv.es,

[email protected]

This work has been developed with the support of MEC under the project DESTINO TIN2004-03534 and co-financed by FEDER. We also acknowledge the support of the SIMILAR European network of

excellence on multimodal interfaces (FP6-IST1-2003-507609 - www.similar.cc)

The Beautification Process in Model-Driven Engineering of

User Interfaces

…

The Beautification Process in Model-Driven Engineering of User Interfaces Agenda

• Introduction and Preliminaries• Motivations • Proposal

• Beautification Operations • The Beautification Process

– The Beautification Process in OO-Method – Steps of the Beautification Process– Example

• Conclusions and Further Work

The Beautification Process in Model-Driven Engineering of User Interfaces

Introduction and Preliminaries

User Interfaces (UIs) Requirements in Model-Driven Engineering (MDE)

Users’ requirements to be addressed

Users’ requirements supported by MDE

Users’ requirements unsupported by MDE

M2M and M2C transformations

Automatically generated

UI

Final UIUI beautificationCode

tweakingUI

editing



OO-Method

MODEL COMPILATION

SYSTEM ANALYSIS

REQUIREMENTS ELICITATION

SOURCE CODE

INTERFACE TIER

APPLICATION TIER

PERSISTENCE TIER

CONCEPTUAL MODEL

OBJECT MODEL

DYNAMIC MODEL

FUNCTIONAL MODEL

PRESENTATION MOD.

PLATFORM INDEPENDENT

MODEL

PLATFORM SPECIFIC MODEL

CODE MODEL

COMPUTATION INDEPENDENT

MODEL

MDA proposal

OO-Method REQUIREMENTS MODEL

USE CASES

FUNCTION REF. TREE

MISSION STATEMENT

APPLICATION MODEL



OO-Method ´s

Presentation Model

The Beautification Process in Model-Driven Engineering of User Interfaces Motivations

• Manual modifications leads to:– Problems to understand generated code

– Inconsistencies: user interface vs. model

– Endanger quality features guaranteed by MDE

• Problem with re-generated UIs: lost changes

• Round-trip engineering

Manual modifications made to address unsupported user requirements

Related to the UI64%

Not related to the UI36%

The Beautification Process in Model-Driven Engineering of User Interfaces Proposal

• Framework of Beautification Operations

• Beautification in Computer Graphics

• User Interface Beautification– The whole process of improving the

automatically generated UI with beautification operations to address unsupported user requirements while preserving the qualities provided by MDE

The Beautification Process in Model-Driven Engineering of User Interfaces Beautification Operations

Beautification Operations

• Why there is a need to define them? Manual Modification – Beautification Operation – Modelling Operation

• How were them identified? – Observed in most applications – Occurred with significant frequency – Realistic in terms of implementation – At least moderate importance

The Beautification Process in Model-Driven Engineering of User Interfaces Beautification Operations

Beautification Operations• Classification: Nielsen´s linguistic model of

interaction 1- Goal 5- Lexical 2- Pragmatic 6- Alphabetic 3- Semantic 7- Physical 4- Syntactic

• Examples– Syntactic: Substitute(widgetType)– Semantic: Specify(conditionalDisplay)

The Beautification Process in OO-Method

The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process


MODEL


CODE

CONCEPTUAL MODEL

OBJECT MODEL

DYNAMIC MODEL

FUNCTIONAL MODEL

PRESENTATION MODEL

SOURCE CODE

USER INTERFACE TIER

APPLICATION TIER

PERSISTENCE TIER

MDA proposal

ON Metamodel

UI Metamodel

Is an instance of

MODEL TO MODEL TRANSFORMATION

UI MODEL

APPLICATION MODEL

MODEL TO CODE TRANSFORMATION

UI MODEL

APPLICATION MODEL

CONCRETE UI MODEL

UI TEMPLATES

TEMPLATE EDITOR

User Interface TemplateDialog TemplatePresentation Template

Style TemplateLayout Template

Is an instance of

OO-Method Development Process

USER INTERFACE EDITOR

Population PatternPopulation Pattern

Steps of the Beautification Process


1. Derivation of a Concrete User Interface Model from the Presentation Model


MODEL


CODE

CONCEPTUAL MODEL

OBJECT MODEL

DYNAMIC MODEL

FUNCTIONAL MODEL

PRESENTATION MODEL

SOURCE CODE

USER INTERFACE TIER

APPLICATION TIER

PERSISTENCE TIER

MDA proposal


UI MODEL

APPLICATION MODEL


UI MODEL

APPLICATION MODEL

CONCRETE UI MODEL


USER INTERFACE

EDITOR

Steps of the Beautification ProcessPLATFORM

INDEPENDENT MODEL


CODE

CONCEPTUAL MODEL

OBJECT MODEL

DYNAMIC MODEL

FUNCTIONAL MODEL

PRESENTATION MODEL

SOURCE CODE

USER INTERFACE TIER

APPLICATION TIER

PERSISTENCE TIER

MDA proposal


UI MODEL

APPLICATION MODEL


UI MODEL

APPLICATION MODEL

CONCRETE UI MODEL


USER INTERFACE

EDITOR



2. Application of the Beautification Operations

Steps of the Beautification ProcessPLATFORM

INDEPENDENT MODEL


CODE

CONCEPTUAL MODEL

OBJECT MODEL

DYNAMIC MODEL

FUNCTIONAL MODEL

PRESENTATION MODEL

SOURCE CODE

USER INTERFACE TIER

APPLICATION TIER

PERSISTENCE TIER

MDA proposal


UI MODEL

APPLICATION MODEL


UI MODEL

APPLICATION MODEL

CONCRETE UI MODEL


USER INTERFACE

EDITOR



2. Application of the Beautification Operations

3. Generation of the Final User Interface


Step 1 – Derivation of a Concrete User Interface Model from Presentation Model

• Concrete User Interface (CUI) – Abstraction of a final UI in terms of

Concrete Interaction Objects– UsiXML

• Concrete Interaction Object(CIO)– Decorator: separator – Graphical Individual Component:

inputText or radioButton– Graphical Container: window or

tabbedDialogBox– Attributes, data types, values

CONCEPTUAL MODEL

OBJECT MODEL

DYNAMIC MODEL

FUNCTIONAL MODEL

PRESENTATION MODEL

SOURCE CODE

USER INTERFACE TIER

APPLICATION TIER

PERSISTENCE TIER


UI MODEL

APPLICATION MODEL


UI MODEL

APPLICATION MODEL

CONCRETE UI MODEL

USER INTERFACE

EDITOR


Step 2 – Application of the Beautification Operations

• Beautification Operations can be applied to the CUI with a UI Editor

• Each CIO is subject to Beautification Operations

• UI Editor – Detects which Beautification Operations

can be applied to each CIO – Gives a preview of the designed UI – Is constrained with parameters

CONCEPTUAL MODEL

OBJECT MODEL

DYNAMIC MODEL

FUNCTIONAL MODEL

PRESENTATION MODEL

SOURCE CODE

USER INTERFACE TIER

APPLICATION TIER

PERSISTENCE TIER


UI MODEL

APPLICATION MODEL


UI MODEL

APPLICATION MODEL

CONCRETE UI MODEL

USER INTERFACE

EDITOR


Step 3 – Generation of the Final User Interface

Once all the Beautification Operations have been applied, the CUI Model is completed and sent to the Model Compiler so as to perform the model-to-code transformation

CONCEPTUAL MODEL

OBJECT MODEL

DYNAMIC MODEL

FUNCTIONAL MODEL

PRESENTATION MODEL

SOURCE CODE

USER INTERFACE TIER

APPLICATION TIER

PERSISTENCE TIER


UI MODEL

APPLICATION MODEL


UI MODEL

APPLICATION MODEL

CONCRETE UI MODEL

USER INTERFACE

EDITOR


Example

1. Specify(rowHighlightingType)

2. Convert (inputMetricUnit, outputMetricUnit)

3. Specify (buttonPresentationType)

4. Substitute (widgetType)

UI Editor


Example• The same Final User Interface after applying more

Beautification Operations

The Beautification Process in Model-Driven Engineering of User Interfaces Conclusions

• This work has examined in detail the process of UI Beautification applied at the level of automatic software generation

• This work has – Identified the most frequently demanded UI modifications – Defined a Concrete User Interface (CUI) model that

allows refining UI – Defined operations over the elements of the CUI model – Defined a Constrained UI Editor that allows editing the

CUI model

The Beautification Process in Model-Driven Engineering of User Interfaces Conclusions

• Further work – UI Editor implementation – Empirical validation of the proposed modifications in

OO-Method• Improvements on the whole production process

• Benefits of use - Final user satisfaction and UI usability

The Beautification Process in Model-Driven Engineering of

User Interfaces

…

http://www.upv.es/

The Beautification Process in Model-Driven Engineering of User Interfaces State of the Art

• Techniques: design patterns, framework-specific modelling languages, model reconciliation – Do not exploit the full potential of UI models

• HCI – Support for propagating manual modifications to underlying models, but not specifically for UI beautification

• MECANO project • DynaMo-AID design process • Model-based tools and techniques: MOBI-D,

TEALLACH, WISDOM• Commercial software: Genova, JaxFront,

OlivaNova

Inés Pederiva 1, Jean Vanderdonckt 1,2, Sergio España 1, José Ignacio Panach 1 and Óscar Pastor...

Documents

Transcript of Inés Pederiva 1, Jean Vanderdonckt 1,2, Sergio España 1, José Ignacio Panach 1 and Óscar Pastor...