Inés Pederiva 1, Jean Vanderdonckt 1,2, Sergio España 1, José Ignacio Panach 1 and Óscar Pastor 1 1 Universidad Politécnica de Valencia, Departamento de Sistemas Informáticos y Computación Camino de Vera s/n, Valencia, Spain 2 Université catholique de Louvain, Louvain School of Management, Place des Doyens, 1 – 1348 Louvain-la-Neuve, Belgium {ipederiva, jvanderdonckt, sergio.espana, jpanach, This work has been developed with the support of MEC under the project DESTINO TIN and co-financed by FEDER. We also acknowledge the support of the SIMILAR European network of excellence on multimodal interfaces (FP6-IST 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)

The Beautification Process in Model-Driven Engineering of User Interfaces Introduction and Preliminaries OO-Method

The Beautification Process in Model-Driven Engineering of User Interfaces Introduction and Preliminaries 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 UI 64% Not related to the UI 36%

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

Steps of the Beautification Process The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process 1.Derivation of a Concrete User Interface Model from the Presentation Model

Steps of the Beautification Process The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process 1.Derivation of a Concrete User Interface Model from the Presentation Model 2.Application of the Beautification Operations

Steps of the Beautification Process The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process 1.Derivation of a Concrete User Interface Model from the Presentation Model 2.Application of the Beautification Operations 3.Generation of the Final User Interface

The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process 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

The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process 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

The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process 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

The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process Example 1.Specify(rowHighlightingType) 2.Convert (inputMetricUnit, outputMetricUnit) 3.Specify (buttonPresentationType) 4.Substitute (widgetType) UI Editor

The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process 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 …

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