User interfaces metamodel based on graphs

• A metamodel for user interfaces of information systems.
• The metamodel consolidates a set of user interface patterns identified in several information systems.
• Each user interface pattern has a graphical representation.
• The metamodel is also described graphically using a graph-based visual language.
• The underlying graph representation allows many types of analysis on the user interface.

Information systems are widely used in all business areas. These systems typically integrate a set of functionalities that implement business rules and maintain databases. Users interact with these systems and use these features through user interfaces (UI). Each UI is usually composed of menus where the user can select the desired functionality, thus accessing a new UI that corresponds to the desired feature. Hence, a system normally contains multiple UIs. However, keeping consistency between these UIs of a system from a visual (organisation, component style, etc.) and behavioral perspective is usually difficult. This problem also appears in software production lines, where it would be desirable to have patterns to guide the construction and maintenance of UIs. One possible way of defining such patterns is to use model-driven engineering (MDE). In MDE, models are defined at different levels, where the bottom level is called a metamodel. The metamodel determines the main characteristics of the models of the upper levels, serving as a guideline. Each new level must adhere to the rules defined by the lower levels. This way, if anything changes in a lower level, these changes are propagated to the levels above it. The goal of this work is to define and validate a metamodel that allows the modeling of UIs of software systems, thus allowing the definition of patterns of interface and supporting system evolution. To build this metamodel, we use a graph structure. This choice is due to the fact that a UI can be easily represented as a graph, where each UI component is a vertex and edges represent dependencies between these components. Moreover, graph theory provides support for a great number of operations and transformations that can be useful for UIs. The metamodel was defined based on the investigation of patterns that occur in UIs. We used a sample of information systems containing different types of UIs to obtain such patterns. To validate the metamodel, we built the complete UI models of one new system and of four existing real systems. This shows not only the expressive power of the metamodel, but also its versatility, since our validation was conducted using different types of systems (a desktop system, a web system, mobile system, and a multiplatform system). Moreover, it also demonstrated that the proposed approach can be used not only to build new models, but also to describe existing ones (by reverse engineering).