Pattern based user interface generation

Dissertação de mestrado em Engenharia InformáticaHuman Computer Interaction (HCI) is one of the most important aspects in software development. In order to produce valuable products, software companies are focusing more on the users and less on the technology behind their products. This calls for new prospects for development cycles. Traditional methodologies are focused on the internals and there is little support to build a User Interface (UI) in a more iterative manner [12]. Model Driven Development (MDD) [21] is a technique that has been used to increase software quality and boost development time. With MDD organizations are able to implement iterative development methodologies that start with high level models that are iteratively transformed into lower level models and ultimately source code in an automated way. High level models have several advantages because they are platform independent, easier to maintain, easier to reuse and ultimately they serve as documentation for the project. Unified Modelling Language (UML) is an industry standard language for modelling software. The problem with UML is that it’s not fit for UI models [4]. The UI requires a new modelling language that is able to represent UI aspects accurately. The HCI community came up with several solutions for this problems, ITS [28], WISDOM [16], Unified Modeling Language for Interactive Applications (UMLi) [4] and USer Interface eXtensible Mark-up Language (UsiXML) [23] are some examples on this matter. This work proposes a method to reuse previous UI knowledge using patterns of high level models. The goal of this work is to improve the way developers build UI’s and maximize re-usability. Patterns are tested and robust solutions that have been used in other contexts and can even persist between different projects and teams. This work integrates in the Forward Engineering method (FEM) developed by the UsiXML community and uses the UsiXML User Interface Description Language (UIDL) to represent patterns of high level UI models. We developed a pattern definition using a set of descriptive fields and UsiXML models. With the information provided by the pattern we are able to perform model transformations from the domain and task models to an Abstract User Interface (AUI) model. This gives developers the ability to reuse the structure of a UI developed in other context with a similar objective. This makes it easier for developers with little knowledge in HCI to develop good UI’s and also helps development teams to maintain consistency across an application.A Human Computer Interaction (HCI) assumiu-se como um dos aspectos mais importantes no desenvolvimento de software. Por forma a criar produtos com maior qualidade, as empresas de software estão a desviar o foco da tecnologia para os utilizadores, exigindo novas abordagens para os ciclos de desenvolvimento. As metodologias tradicionais são mais focadas em aspectos internos e há pouco suporte para construir a User Interface (UI) de forma iterativa [12]. Model Driven Development (MDD) [21] e uma técnica usada para aumentar a qualidade do software e diminuir o tempo de desenvolvimento. Com a MDD as organizações são capazes de implementar metodologias de desenvolvimento iterativo que começam com modelos de alto nível que são transformados, iterativamente, em modelos de nível inferior e, até chegar ao código-fonte. Modelos de alto nível têm várias vantagens porque são independentes de plataforma, mais fáceis de manter, mais fáceis de reutilizar e, finalmente, servem como documentação do projeto. Unified Modelling Language (UML) é uma linguagem padrão da indústria para modelação de software. O problema do UML é que não está apto para modelos de UI [4]. A UI requer uma linguagem de modelação nova, que seja capaz de representar os aspectos próprios da UI com precisão. A comunidade à volta da HCI desenvolveu várias soluções para este problema, ITS [28], WISDOM [16], Unified Modeling Language for Interactive Applications (UMLi) [4] e USer Interface eXtensible Markup Language (UsiXML) [23] são alguns exemplos de projetos dentro desta área. Este trabalho propõe um método para reutilizar conhecimento passado sobre a UI usando padrões de modelos de alto nível. O objetivo deste trabalho consiste em abordar melhorias à forma como se constrõem UI 's e maximizar a sua reutilização. Padrões são soluções testadas e robustas, que foram utilizadas em outros contextos e podem até persistir entre diferentes projetos e equipas. Este trabalho integra-se no método Forward Engineering (FEM) desenvolvido pela comunidade do UsiXML e usa a User Interface Description Language (UIDL) do UsiXML para representar padrões de modelos de UI de alto nível. Neste trabalho desenvolveu-se uma definição de padrão usando um conjunto de campos descritivos e modelos em UsiXML. Com a informação fornecidas pelos padrões e possível realizar transformações de modelos a partir dos modelos de domínio e tarefa e gerar um modelo de Abstract User Interface (AUI). Isto oferece aos engenheiros de software a capacidade de reutilizar a estrutura de uma UI desenvolvida noutro contexto com um objetivo similar. Assim torna-se mais fácil para engenheiros com pouco conhecimento em HCI desenvolver boas UI 's e também ajuda as equipes de desenvolvimento a manter consistência ao longo de uma aplicação

Integrating HCI concerns into a UML based software engineering course

Software Engineering (SE) and HCI (Human Computer Interaction) are not the same age, do not have the same history, background or foundations, and did never share design principles and design models. The separation principle, by encouraging separate concerns and techniques to design the interactive and the computational layers of a software system - despite being absolutely correct from several SE crucial design principles, like modularity, separation of concerns, encapsulation, context independence and so on -, has sometimes been misjudged and mistakenly used. Therefore, instead of bridging the gap between the two separate de- signs, it helped widening that gap. However, the principle does not mention and does not impose any restrictions on how the integration should be done. In the context of a software engineering course the authors have been involved with for some years, the need has arisen to provide students with HCI skills. Several attempts at integrating HCI into software engineering can be found in the literature. However, none seemed amenable to application in the context of the course, basically because none of them could be taught and learnt in such a way (methodology) that could easily be blent into the software engineering design process. We present a methodological process that we have been teaching that aims at shortening the gap that software engineering students face when trying to adapt SE techniques to the interactive layer

MODELING USER INTERFACES WITH THE XIS UML PROFILE

Abstract: This paper discusses different UIs design approaches. We describe how to design user interfaces, based on a MDD approach, by applying the XIS language. XIS is a coherent UML profile focused on model interactive systems. XIS integrates best practices and principles of the MDA/MDD paradigm to improve the UI design, such as separation of concerns, model-to-model and model-to-code transformations. In that way, we discuss some issues regarding the transformation processes, from XIS-based models into software systems artifacts

MODUS: model-based user interfaces prototyping

Model-based methodologies, supported by automatic generation, have been proposed as a solution to reduce software development costs. In the case of interactive computing systems specific challenges arise. On the one hand, a high level of automation requires the use of detailed models, which is contrary to the iterative development process, based on the progressive refinement of user interface mockups, typical of user centered development processes. On the other hand, layered software architectures imply a distinction between the models used in the business logic and in the user interface, raising consistency problems between the models at each level. This article proposes a tool supported approach to user interface generation directly from the architectural models of the business logic. In many situations, user interfaces provide similar features inside a specific domain. The identification of the application domain is thus a key factor in supporting the automation of the generation process.This work was financed by the ERDF – European Regional Development Fund through the Operational Programme for Competitiveness and Internationalisation - COMPETE 2020 Programme, and by National Funds through the FCT – Fundação para a Ciência e a Tecnologia (Portuguese Foundation for Science and Technology) within project POCI-01-0145- FEDER-006961.info:eu-repo/semantics/publishedVersio

Collaborative explicit plasticity framework: a conceptual scheme for the generation of plastic and group-aware user interfaces

The advent of new advances in mobile computing has changed the manner we do our daily work, even enabling us to perform collaborative activities. However, current groupware approaches do not offer an integrating and efficient solution that jointly tackles the flexibility and heterogeneity inherent to mobility as well as the awareness aspects intrinsic to collaborative environments. Issues related to the diversity of contexts of use are collected under the term plasticity. A great amount of tools have emerged offering a solution to some of these issues, although always focused on individual scenarios. We are working on reusing and specializing some already existing plasticity tools to the groupware design. The aim is to offer the benefits from plasticity and awareness jointly, trying to reach a real collaboration and a deeper understanding of multi-environment groupware scenarios. In particular, this paper presents a conceptual framework aimed at being a reference for the generation of plastic User Interfaces for collaborative environments in a systematic and comprehensive way. Starting from a previous conceptual framework for individual environments, inspired on the model-based approach, we introduce specific components and considerations related to groupware

Research on GUI application development support

制度:新 ; 文部省報告番号:甲1665号 ; 学位の種類:博士(情報科学) ; 授与年月日:2002/6/20 ; 早大学位記番号:新3399 ; 理工学図書館請求番号:272

Closing the Gap Between Designers and Developers in a Low-Code Ecosystem

Digital systems play an important role in the strategy of companies nowadays as they are crucial to achieve their business goals as well as gain a competitive advantage. This is particularly true for systems designed for the end-users market. Not only has the number of such systems been growing steadily but the requirements and expectations of users regarding usability and performance have also increased. Developing software systems is a complex process that comprises several stages and involves multiple professionals responsible for different tasks. Two stages of the process are the design and implementation of User Interfaces. UX and UI designers produce artifacts such as mockups and prototypes using design tools describing what should be the systems behavior, interactivity and look and feel. Next, Front-end and Back-end developers implement the system according to the specifications defined by designers. Designers and developers use different methodologies, languages, and tools. This introduces a communication gap between both groups, and hence collaboration between them is not always smooth. This ends up causing less efficient processes, rework and loss of information. Developers sometimes overlook the importance of User Experience and Front-end De velopment. The corresponding project stages suffer when collaboration between groups is not optimal. Problems are particularly striking during the transition from design arti facts to front-end code. The procedures for doing this are often manual, very error-prone, and time-consuming for developers that end-up completely re-doing the designers’ work in the target web technology. The aim of this dissertation is to improve the efficiency of collaboration between de signers and front-end developers in the OutSystems ecosystem. This was carried out by developing a tool that transforms UX/UI design artefacts into low-code web-technology using model transformation and meta-modelling techniques. The approach has been evaluated in practice by a team of professional designers and front-end developers. Re sults show savings between 20 and 75% according to the project complexity in the effort invested by development teams in the above mentioned process.Os sistemas digitais têm um papel muito importante hoje em dia na estratégia das empresas, uma vez que as ajudam a atingir os seus objetivos de negócios assim como a ganhar vantagem competitiva face às demais. Isto é particularmente verdade para os sistemas destinados ao mercado dos utilizadores finais. Não só aumentou significativamente o número de tais sistemas como aumentaram também os requisitos e expectativas dos seus utilizadores. O desenvolvimento de sistemas de software é um processo complexo que envolve um número alargado de profissionais com diferentes perfis. Duas das fases são o design de interfaces e a sua implementação. Os UI e UX designers produzem um conjunto de ficheiros utilizando ferramentas de design descrevendo o comportamento, interação e aparência do sistema. Os Front-end e Back-end developers implementam as funcionalidades do sistema com base nas especificações dos designers. Designers e developers trabalham utilizando diferentes metodologias, linguagens e ferramentas. Isto introduz uma lacuna entre os grupos e dificulta a sua colaboração, originando processos menos eficientes, trabalho refeito e perda de informação. Os engenheiros de software por vezes negligenciam disciplinas tais como a Experi ência do Utilizador e o Front-end. Estas fases dos projetos são prejudicadas quando a colaboração entre os grupos não é ótima. Os problemas são particularmente evidentes durante a transição entre design e Front-end. Os procedimentos são manuais, altamente propensos a erros e demorados para os developers, que acabam por refazer o trabalho dos designers na tecnologia web desejada. O objetivo desta dissertação é melhorar a eficiência da colaboração entre designers e front-end developers no ecossistema OutSystems. Isto foi levado a cabo desenvolvendo uma ferramenta capaz de transformar artefactos de UX/UI em low-code utilizando transformações de modelos e técnicas de meta-modeling. A abordagem foi avaliada em prática por uma equipa profissional de designers e front-end developers. Os resultados obtidos mostram poupanças entre os 20 e os 75% de acordo com a complexidade do projeto no esforço investido pelas equipas de desenvolvimento no processo mencionado acima