Integración de calidad y experiencia en el desarrollo

Integración de calidad y experiencia en el desarrollo de interfaces de usuario dirigido por modelos Ph. D dissertation Universidad de Castilla-La Mancha Dep. de Sistemas Informáticos Albacete, 2005 Ph. D Candidate: Francisco Montero Advisors: Dr. Pascual González Dra. María Dolores Lozano

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation Universidad de Castilla-La Mancha Dep. de Sistemas Informáticos Albacete, 2005 Ph. D Candidate: Francisco Montero Advisors: Dr. Pascual González Dra. María Dolores Lozano

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation Table of Contents i. Introduction ii. Literature Review iii. Quality and Experience iv. A methodology v. A tool: IDEALXML vi. An Example Ph. D dissertation vii. Conclusions and Future Work

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation i. Introduction

i. Introduction • Context • Motivation • Working Hypotheses Human. Computer Interaction Software Engineering Ph. D dissertation

i. Introduction • Context • Motivation • Working Hypotheses (Japanese METIA, 2004) Ph. D dissertation

i. Introduction • Context • Motivation • Working Hypotheses Our main goal is to provide support for quality user interface development tasks. usability Ph. D dissertation experience

i. Introduction • Context • Motivation • Working Hypotheses Ph. D dissertation Coupling UI analysis and design to software design more tightly is desirable to create a complete model of an application prior to implementation, thus to avoid as much errors as possible. We can think of models as a way to help bridging the gap between business and technology, a pervasive problem in today’s business environment We strongly believe that the industry will increasingly adopt models as first-class artifacts within an agile software development process The integration of HCI techniques into SE practice is not an easy endeavour, since both fields speak different languages and they deal with software development from different perspectives. A pattern is essentially a model with some holes in it, together with some rules about how each hole may be filled in by some or all of another model. An effective technology for describing and applying patterns enables large models to be constructed from small ones, and models of one kind to be assembled from models of other kinds.

i. Introduction • Context • Motivation • Working Hypotheses How can the quality of user interfaces be improved? What is quality? What is experience and how can we use it? How is possible to integrate quality with experience? Is compatible it with the actual trend of development? Which benefits can we get from using this possibility? How does it works? Ph. D dissertation

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation ii. Literature Review

ii. Literature Review • Introduction • Software Engineering • Human. Computer Interaction • Conclusions Ph. D dissertation The history of software development is a history of raising the level of abstraction.

ii. Literature Review • Introduction • Software Engineering • Human. Computer Interaction • Conclusions Ph. D dissertation Software engineering practices and research have led to several methodologies that are highly adequate for development software.

ii. Literature Review • Introduction • Software Engineering • Human. Computer Interaction • Conclusions Ph. D dissertation

ii. Literature Review • Introduction • Software Engineering • Human. Computer Interaction • Conclusions Ph. D dissertation models

ii. Literature Review • Introduction • Software Engineering • Human. Computer Interaction • Conclusions Ph. D dissertation

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation iii. Quality and Experience

iii. Quality and Experience • Quality • Experience • Q&E Integration What is quality? / What is usability? Usability is about human behaviour. It recognizes that humans are lazy, get emotional, are not interested in putting a lot of effort into, say, getting a credit card and generally prefer things that are easy to do vs. those that are hard to do. (Mc. Quillen, 2003). The ease, speed, and pleasantness with which intended people can use a product. Usability is the measure of a product's potential to accomplish the goals of the user. Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration According to international standards, two different definitions for usability are proposed: – Usability as a high-level quality objective is defined in the ISO 9241 -11 standard as: “the extend 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” – Usability is defined in this way in ISO/IEC 9126 as “a set of attributes of an interactive system that bear on the effort needed for use and on the individual assessment of such use by a stated or implied set of users” Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation ISO/IEC 9126 -1

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation Ergonomic criteria

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation Quality model

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation We have many sources of experience: – Principles – Standards – Guidelines – Patterns - Domain - Design - Task - Interaction / usability

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation Collaboration patterns

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation Design patterns

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation Interaction patterns

iii. Quality and Experience • Quality • Experience • Q&E Integration Pattern Language Markup Language (PLML) (pronounced "Pell. Mell" ) At the "CHI-03 workshop on HCI Patterns: Concepts and Tools", the participants created a first version of a pattern template that can be used to unify the appearance of the different pattern languages that evolved so far. Connecting the different pattern languages is a challenging task and the translation of the different collections into a unified representation was one first step to solve this problem. Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation Pattern Language Markup Language (PLML)

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration Quality factor 1 factor 2 . . . factori criteria level criterion 1 criterion 2 . . . criterionj sub-criteria level sub-criterion 1 sub-criterion 2 . . . Independent model experience (models) evaluation process metrics PIM{domain, task, user, abs. Pres} development process Dependent level Ph. D dissertation PSM 1 -{con. Pre´, dialog} PSMn-{con. Pre´´, dialog´} Code level code 1 coden top-down experience and metric level quality model top-down factor level

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation

iii. Quality and Experience • Quality • Experience • Q&E Integration Ph. D dissertation

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation iv. A methodology

iv. A methodology • Methodology • Language • Road Map Ph. D dissertation

iv. A methodology • Methodology • Language • Road Map Ph. D dissertation USer Interface e. Xtensible Markup Language (Usi. XML) is a XMLcompliant markup language that describes the UI for multiple contexts of use (Limbourg, 2004). Usi. XML consists of a User Interface Description Language (UIDL), that is a declarative language capturing the essence of what a UI is or should be independently of physical characteristics. Usi. XML describes at a high level of abstraction the constituting elements of the UI of an application: widgets, controls, containers, modalities, interaction techniques, . . .

iv. A methodology • Methodology • Language • Road Map Interaction patterns MDE Collaboration patterns Design patterns a&d analysis domain Ph. D dissertation develop model task [inspect] implement view Quality model maintain

iv. A methodology • Methodology • Language • Road Map (analysis) Interaction patterns MDE Collaboration patterns Design patterns a&d analysis domain Ph. D dissertation develop model task [inspect] implement view Quality model maintain

iv. A methodology • Methodology • Language • Road Map (design) Interaction patterns MDE Collaboration patterns Design patterns a&d analysis domain Ph. D dissertation develop model task [inspect] implement view Quality model maintain

iv. A methodology • Methodology • Language • Road Map (implement) Interaction patterns MDE Collaboration patterns Design patterns a&d analysis domain Ph. D dissertation develop model task [inspect] implement view Quality model maintain

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation v. A tool: IDEALXML

v. A tool: IDEALXML Management environment and specification environment Ph. D dissertation

v. A tool: IDEALXML Ph. D dissertation

v. A tool: IDEALXML Ph. D dissertation

v. A tool: IDEALXML Transformi. XML IDEALXML Grafi. XML Visi. XML Modelos usi. XML tareas y dominio Trans. Modelos usi. XML Interfaz de usuario abstracta Interfaz de usuario final Ph. D dissertation Sketchi. XML Formi. XML Rendering Visuali. XML Generative Reversi. XML Derivation Knowi. XML Trans. Modelos usi. XML Interfaz de usuario concreta Qtk. XML Javi. XML Flashi. XML

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation vi. An Example Ph. D dissertation

vi. An example login Root Customer First Level of refinement close Task collaction show* task view help forgot new Interaction patterns login Client password close submit login pass forgot status submit Login new nombre: String apellido: String show. UI() email: String remember() password: String validate() new. User() Ph. D dissertation <> Collaboration patterns <> Design patterns Second Level of refinement

vi. An example State. B Client Second Level of refinement Design patterns Context state 0. . * show. UI() State 0. . * state. show() close. B Task. B* show() collaction. B show. B* State. A State. B State. A view show. A* Ph. D dissertation view collaction. A task. A show() show. Status() task() collaction() Task. A* show() task() close. A collaction() close() Interaction patterns task. B

vi. An example Design patterns Client Context request() state 0. . * state. event() State 0. . * show() State. A State. B show() close() collaction() Second Level of refinement show() collaction() close componentes asociados a task Ph. D dissertation close componentes asociados a task Interaction patterns

vi. An example ok ok info check Third level of refinement (GUI) edit info link check info edit ok edit info ok edit Ph. D dissertation info edit ok edit

vi. An example info ok edit Third level of refinement (mobile) info check info Ph. D dissertation edit

Quality and experience integration in the model-driven user interfaces development process Ph. D dissertation vii. Conclusions and Future Work

vii. Conclusions and Future Work • Conclusions • Outcomes • Future Work Ph. D dissertation We have explored issues related to integration, management, and use of multi-disciplinary system design knowledge. We need repositories and other points of exchange for system design knowledge, and conceptual catalysts to support valueadded integration of the results from multidisciplinary design research and practice. This thesis provides a process that guides teams through a complex project. It uses IDEALXML tools to help to manage information. It includes abstraction paths that help the team to understand the whole problem before they divide it. A method for the early phases of the user-centred design lifecycle is proposed. Experience facilitates the developers to carry out the user-centred activities of a software project. We presented how different kinds of patterns can assist in bridging the gap between requirements and design in software development, and the research challenges posed by their use.

vii. Conclusions and Future Work • Conclusions • Outcomes • Future Work This thesis extends Tidwell's approach by defining a formal approach to user interface design pattern modeling with implications for use case (task) modelling, UI design, UI implementation, and the teaching of HCI techniques. This thesis presents an approach that shows how user-centred requirements analysis can be cost effectively integrated to use case-driven requirements engineering. In summary: This thesis introduces a framework where quality and experience are defined and integrated. Patterns from different scopes are successfully used to interactive applications development. Ph. D dissertation

vii. Conclusions and Future Work • Conclusions • Outcomes • Future Work I did a research stay at the Université catholique de Louvain Relationships with: - the Belgian Laboratory of Computer-Human Interaction (BCHI) Université catholique de Louvain - the Software Engineering and Information Systems Research Group (ISSI) Universidad Politécnica de Valencia - the Laboratorio de Información y Formación en Informática Avanzada (LIFIA) Universidad Nacional de La Plata European research activity: - The SIMILAR Network of Excellence - COST Action 294 - Spanish CICYT project TIN 2004 -08000 -C 03 -01 - the PCB-03 -003 project from the Consejería de Educación Ph. D dissertation

vii. Conclusions and Future Work • Conclusions • Outcomes • Future Work Papers: - on patterns: - on quality models: - on IDEALXML: Montero, F. , López-Jaquero, V. , Molina, J. P. , Lozano, M. Improving e-shops environments by using usability patterns. 2 nd workshop on software and usability cross-polination. The role of usability patterns. September, 1 -2, 2003, Zürich, Switzerland. 2003 Montero, F. , Lozano, M. , González, P. , Ramos, I. Designing web sites by using design patterns. The second latin american conference on pattern languages of Programming. Itaipava- Rio de Janeiro, Brasil. 5 a 7 de agosto de 2002. (ISBN: 85 -87837 -07 -9) Montero, F. , Lozano, M. , González, P. , Ramos, I. A first approach for design web sites by using patterns. First Nordic conference on Pattern Languages of Program. Hojstrupgard, Dinamarca. 20 a 22 de septiembre de 2002. (ISBN: 87 -7849 -769 -8) Montero, F. , Lozano, M. , González, P. Patrones de interacción: Taxonomía y otros problemas. Congreso Internacional de Interacción 2002. Universidad Carlos III, Madrid, 8 a 10 de mayo de 2002. Ph. D dissertation

vii. Conclusions and Future Work • Conclusions • Outcomes • Future Work Ph. D dissertation Papers: - on patterns: - on quality models: - on IDEALXML: Montero, F. , González, P. , Lozano, M. , Vanderdonckt, J. Quality Models for Automated Evaluation of Web Sites Usability and Accessibility. Towards the Maturation of IT Usability Evaluation (MAUSE). Interact 2005 Short Paper. Roma, Italy, September 2005, Lecture Notes in Computer Science, Springer Verlag. Montero, F. , Lozano, M. , López-Jaquero, V. , González, P. A Quality Model For Testing The Usability Of The Web Sites. 10 th International Conference on Human Computer Interaction (HCI, 2003). 22 a 27 de Julio, Creta, Grecia. 2003. Human. Computer Interaction: Theory and Practice (part 1). J. Jacko, C. Stephanidis (Eds. ). Lawrence Erlbaum Associates. Londrés, Reino Unido, 2003. (ISBN: 0 -8058 -4931 -9) Montero, F. , López-Jaquero, V. , Lozano, M. , González, P. Usability and Web Site Evaluation: Quality Models and User Testing Evaluations. ICEIS (1) 2003: 525 -528 Montero, F. , Lozano, M. , González, P. Calidad en interfaces de usuario. Capítulo 5 del libro Calidad en el desarrollo y mantenimiento del software. Coordinadores: Mario G. Piattini, Felix O. García. Editorial Ra-Ma. 2003. (ISBN: 84 -7897 -544 -6).

vii. Conclusions and Future Work • Conclusions • Outcomes • Future Work Ph. D dissertation Papers: - on patterns: - on quality models: - on IDEALXML: Montero, F. , Lozano, M. , González, P. : IDEALXML: an Experience-Based Environment for User Interface Design and pattern manipulation. Technical Report DIAB-05 -01 -4. Universidad de Castilla-La Mancha, Albacete (2005) Montero, F. , López-Jaquero, V. , Lozano, M. , González, P. A user interfaces development and abstraction mechanisms. Artículo seleccionado en el V Congreso Interacción Persona Ordenador para su publicación en Springer-Verlag, Berlin, 2005. (to appear) Montero, F. , López-Jaquero, V. , Vanderdonckt, J. , Gonzalez, P. , Lozano, M. D. , Solving the Mapping Problem in User Interface Design by Seamless Integration in Ideal. XML. 12 th International Workshop on Design, Specification and Verification of Interactive Systems (DSV-IS’ 2005), Newcastle upon Tyne, England, July 13 -15, 2005. Springer-Verlag, Berlin, 2005 (to appear) Montero, F. , López-Jaquero, V. , Ramírez, Y. , Lozano, M. , González. P. Patrones de Interacción: para usuarios y para diseñadores. VI Congreso de Interacción Persona. Ordenador. 13 -16 de septiembre, Granada, España. 2005 (por aparecer).

vii. Conclusions and Future Work • Conclusions • Outcomes • Future Work Future works are related with methodological and operational aspects. Methodological aspects are about: Traditionally, collaboration tasks are not considered in patterns or task analysis. We want to deal with these subjects and consider what requirements (functional and non-explicitly functional) these considerations demand. Adaptation, adaptativity and new paradigm of interaction The contribution of satisfaction to the usability equation is receiving increasing attention. We want to dedicate an research effort in this direction. Ph. D dissertation

vii. Conclusions and Future Work • Conclusions • Outcomes • Future Work Future works are related with methodological and operational aspects. Operational aspects are about IDEALXML. The definition of precise rules for model transformation Simulating and prototyping Other future work is the consideration of the notion of graceful degradation (Florins et al. , 2004). Ph. D dissertation

Acknowledgments I want to thank everyone who has helped me to reach this goal and in particular my advisors Pascual González and María Lozano. Special thanks to Jean Vanderdonckt for his help and support. Finally, I would like to dedicate this achievement to my family, my girlfriend Yolanda and my friends. This work was supported by the Spanish CICYT project TIN 200408000 -C 03 -01 and the PCB-03 -003 project from the Consejería de Educación de la Junta de Comunidades de Castilla-La Mancha. Ph. D dissertation

Questions for Discussion Quality and experience integration in the model-driven user interfaces development Ph. D dissertation Universidad de Castilla-La Mancha Dep. de Sistemas Informáticos Ph. D dissertation Albacete, 2005