=Paper=
{{Paper
|id=Vol-1380/paper6
|storemode=property
|title=Model-driven UI Development Integrating HCI Patterns
|pdfUrl=https://ceur-ws.org/Vol-1380/paper6.pdf
|volume=Vol-1380
|dblpUrl=https://dblp.org/rec/conf/eics/YigitbasM015
}}
==Model-driven UI Development Integrating HCI Patterns==
https://ceur-ws.org/Vol-1380/paper6.pdf
Model-driven UI Development integrating HCI Patterns
Enes Yigitbas Bastian Mohrmann Stefan Sauer
University of Paderborn University of Paderborn University of Paderborn
s-lab – Software Quality Lab basti86@mail.upb.de s-lab – Software Quality Lab
eyigitbas@s-lab.upb.de sauer@s-lab.upb.de
ABSTRACT the lack of usability of automatically generated user
An important criterion for user acceptance of interactive interfaces. However, this solution entails two problems.
systems is software ergonomics. Therefore, a variety of HCI
or usability patterns has been defined in the past. Although The first is that HCI patterns are mostly described informally
HCI patterns promise reusable best-practice solutions, the in practice (1). However, model-driven approaches are based
lack of formalization and effective tool support hinder their on formalisms like MOF meta-models or XML schemes.
usage in a model-driven development process. To overcome These formalisms are needed for automatized model-to-
this deficit, we propose a model-driven user interface model and model-to-code transformations. The second
development (MDUID) process that integrates HCI patterns. problem is that there is barely no tool support for applying or
For showing the feasibility of our approach, we formalized instantiating HCI patterns, particularly GUI patterns in
and implemented a set of GUI patterns, a particular category practice (2). In [3] it is reasoned that the lack of tools
of HCI patterns, based on IFML. We present our pattern “hinders the use of HCI patterns within fully automated
application concept and our tool-support based on a processes”, like the MDUID approach.
customized MDUID process for generating rich internet In this work, we design and implement a customized
applications (RIAs). MDUID process that integrates GUI patterns. The remainder
Author Keywords of this paper is structured as following: First, we describe
HCI, Model-driven UI Development, Pattern, GUI Pattern related work in the area of MDUID and HCI pattern
integration approaches. Then we present our GUI pattern
ACM Classification Keywords catalog and its formalization based on the abstract user
H.5: Information interfaces and presentation (e.g., HCI): interface language IFML. Afterwards we explain the
H.5.2: User Interfaces. implementation of our approach and the corresponding tool-
INTRODUCTION support. In the end, we conclude our own contributions and
An important criterion for user acceptance and user outline future research activities.
experience, particularly in the context of interactive systems, RELATED WORK
is software ergonomics. Therefore, a variety of HCI and Focusing on the topic of model-driven UI development
usability patterns has been defined in the past [1]. Similar to (MDUID) integrating HCI patterns, multiple aspects have to
software development patterns, HCI patterns are reusable be taken into account. Therefore our work is related to and
best-practice solutions. The difference is that HCI patterns influenced by a broad range of research fields in order to
address the usability domain and the improvement of overcome the gap between HCI and MDUID. In the
software ergonomics rather than general software following we will briefly sum up existing MDUID
architecture or code structure. One particular category of approaches and pattern integration approaches and set them
HCI patterns are GUI patterns. In [2] GUI patterns are in relation to our own solution.
described as patterns that “specify one or more abstract
interaction objects, their relationships, and their interactive MDUID Approaches
behavior” and that these patterns “are primarily aimed at MDUID brings together two subareas of software
good usability”. The integration of GUI patterns in the development, which are model-driven development (MDD)
MDUID process appears to be a promising way to overcome and user interface development (UID). The core idea behind
MDUID is to automatize the development process of UI
development by making the models the primary artifact in
Workshop on Large-scale and model-based Interactive Systems: the development process rather than application code. An
Approaches and Challenges, June 23 2015, Duisburg, Germany.
Copyright © 2015 for the individual papers by the papers’ authors. Copying MDUID process usually involves multiple UI models on
permitted only for private and academic purposes. This volume is published different levels of abstractions that are stepwise transformed
and copyrighted by its editors. to the final user interfaces by model transformations.
The CAMELEON Reference Framework (CRF) [4] provides
a unified reference framework for MDUID differentiating
between the abstraction levels Task & Concept, Abstract
User Interface (AUI), Concrete User Interface (CUI) and
Final User Interface (FUI).
There are various state-of-the-art modeling languages for patterns by representing them in automatic model
covering the different abstraction levels of the CRF. For transformations.
example MARIA XML (Model-based lAnguage foR
Interactive Applications) [5] and IFML (Interaction Flow
PATTERN INTEGRATION CONCEPT
Modeling Language) [6] provide both an AUI modeling In order to overcome the previously mentioned problems (1)
language and a tool-support to create and edit AUI models. and (2), a general concept for integrating patterns in MDUID
Based on these AUI models further transformations can be was developed that aims at increasing the usability of
performed to transform them into platform-specific CUI generated user interfaces. The main goal of this concept is
models which eventually are needed for generating the final the automatized application of GUI patterns within a model-
user interfaces (FUI). The described MDUID approaches driven process. Therefore, the CRF was extended by
enable the specification and also support the generation of instantiation parameters and application conditions of GUI
UIs, but they do not offer explicit mechanisms for specifying patterns like depicted in figure 1. Let us start with a short
HCI patterns like GUI patterns. Therefore the existing explanation concerning these two terms.
MDUID tools show a lack of pattern formalization,
instantiation and tight integration in the development
process.
Pattern Integration Approaches
Engel [7] presents the concept of the PaMGIS (Pattern-Based
Modeling and Generation of Interactive Systems) framework
for pattern-based modeling. The PaMGIS framework
combines model-based and pattern-based approaches on
different levels of abstraction. The core component of the
framework is the pattern repository, a collection of
``different types of patterns and pattern languages''. Within
the repository, the patterns are described by the PPSL Figure 1. Overview of the pattern integration concept
(PaMGIS Pattern Specification Language). Beside the
definition of HCI patterns, their meaning, their idea etc.,
Following the concepts of Wendler [12] and Radeke et al.
PPSL also provides means to define relations between
[8], GUI patterns consist of a static and a dynamic part. The
pattern models and other models. Such relations contain
static part of a pattern describes the core solution idea of the
information about the particular pattern, the related FUI,
pattern and can contain information about navigation, user
(hierarchical) relationships to other patterns and back links
interface elements or layout. It does not change among
to other object-oriented models, e.g. an AUI or CUI model
application scenarios. The dynamic part, however, depends
of the interactive system. This information is necessary for
on the prevailing pattern application context and therefore
model-to-model and model-to-code transformations.
has to be set during the user interface modelling process.
However, the PaMGIS approach leaves two issues open.
Since these dynamic parts determine the instantiation of a
First, it does not become completely clear if the mentioned
pattern, Wendler defines them as the instantiation
model-to-code transformation can be defined on the model
parameters. The second important aspect is given by the
level or has to be defined for each instance over and over
conditions under which a pattern is advisable. In order to
again. Secondly, no concepts for data binding have been
decide, when which pattern shall be applied, so-called
discussed in this approach.
pattern application conditions are helpful. Pattern application
Radeke [8] proposes in his work a pattern application conditions are formal and describe situations in which a
framework that describes a general concept of how patterns specific GUI pattern is reasonable. The advantage of
can be integrated in model-based approaches. This formalised conditions is that they can be validated
framework relies on three phases. In the first phase the user automatically, e.g. in the model-driven transformation
selects the pattern from the pattern repository that he wants process. Such a validation determines if a pattern is applied
to apply. The pattern repository contains hierarchically or not. After introducing the relevant terms, we will now
structured patterns and sub-patterns defined in a common explain the concept.
pattern language. The generic part of the pattern is
instantiated in the pattern instantiation phase with regard to Referring again to figure 1, the pattern integration concept
the context of use. The outcome is an instantiated pattern that based on the CRF is depicted. It contains three abstract
can be integrated in the development process. Although this components: An MDUID process implementation with its
approach suggests an interesting pattern instantiation different meta-models (AUI, CUI, Platform), an
concept, it integrates HCI patterns in a model-based rather instantiation parameter extension for the AUI meta-model,
than model-driven way. We overcome this deficit in our and an application condition extension for the model-to-
approach through a tight integration of the formalized GUI model transformation. These components have to be
specified when the pattern integration concept is
implemented. As explained above, instantiation parameters
depend on a pattern’s application context. Because of that,
they have to be set during the initial user interface
specification. In our case, the user interface is initially
specified on the AUI layer and hence the instantiation
parameters are integrated in the AUI meta-model by
additional types and/or features. The application conditions
are integrated in the transformation from the AUI to the CUI
model by means of transformation rules. They are validated
on the AUI model and therefore reusable for any target
platform, like the AUI model itself. If the conditions are
valid, the pattern is applied and the according platform-
dependent CUI elements are generated.
GUI PATTERN CATALOG
The developed pattern integration concept was implemented
for a choice of GUI patterns. Therefore, the abstract
components introduced in the previous section were
instantiated. The resulting customized MDUID process is
depicted in figure 2. The AUI layer is realized with IFML
and the model-to-model transformation is realized with an
ATL [13] plugin. In order to integrate GUI patterns, a choice
of GUI patterns was identified and then formalized by
Figure 2. Architecture of the customized MDUID process
instantiation parameters and application conditions
conforming to the extended components, the IFML meta- Instantiation Parameters
model and the ATL plugin. The formalized patterns are From the above description we can derive the following
represented by the extension components in figure 2. instantiation parameter when a task is separated into several
All integrated patterns were documented in a pattern catalog decision steps: The amount of steps, the order of steps and
comprising the pattern’s general meaning, its formalized the content of the particular steps. Like illustrated in figure
instantiation parameters and application conditions. The 3, a step is formalised as a Step class that inherits from the
formalisation of the instantiation parameters is described by ViewContainer class. Hence, the amount of steps and any
means of an extension of IFML while the formalization of view elements, like Events, Fields or Lists that are the
application conditions is described by means of content of a step can be defined. Furthermore, the inherited
transformation rules extending the ATL model-to-model outInteractionFlow association enables the definition of
transformation. Currently, the pattern catalog includes seven NavigationFlows between steps and thus the order of the
GUI patterns that were chosen based on their frequent use in steps. In the related figure, the coloured classes are part of
interactive applications and their occurrence in pattern the IFML meta-model while the white class is a custom
catalogs [1]. Further, the patterns in the pattern catalog are extension.
structured according to pattern categories taken from [9] and
presented in a defined description scheme.
In the following, we want to present the Wizard pattern entry
according to this description scheme in order to give an
example of the pattern formalization:
Wizard
Description
The Wizard pattern is used when a user “wants to achieve a
single goal but several decisions need to be made before the
goal can be achieved completely” ([11]). Regarding a
complex task inside a software system that is performed
rather rarely and that is too long to fit into a single page, the
Wizard pattern suggests to separate the complex task into Figure 3. Simplified Wizard extension
several steps that are organized in a prescribed order. The
user can deal with each of these steps in a discrete mental
space and therefore has a simplified view on this task ([10]
p.55).
Pattern Application Condition applications. The RIACUI.ecore enables to describe user
The Wizard pattern is applied whenever a ViewContainer interface as they are perceived by the end user including the
element with at least two containing Steps is modelled. All layout, colors and concrete interaction types. On the FUI
contained Steps must be connected with NavigationFlows, so layer, the user interface is finally represented by
their order can be determined. Below, these conditions are JavaServerPages, JavaScript code and CSS style sheets. The
implemented by means of an ATL transformation rule code Transformation Workflow component manages the model-
snippet with a source pattern and a guard. to-model and the model-to-code transformation. As can be
seen in figure 2, the model-to-model transformation is
realized with ATL and produces a RIA-specific CUI model
from an IFML model and the related UML 2.0 domain
model. ATL provides a feature called rule inheritance. Rule
inheritance helps to reuse transformation rules and is similar
to inheritance relations in the object oriented domain.
IMPLEMENTATION AND TOOL-SUPPORT
Subsequently, the model-to-code transformation, realized in
In this section, the implementation of the pattern integration
Xtend [16], generates application code from a previously
approach and the corresponding tool-support is presented in
produced RIA-specific CUI model. The advantage of Xtend
detail. The implementation is in a state where it already could
is, since it is based on Java, a statically-typed programming
be successfully applied in an industrial setting. The
language which employs template-based text generation.
architecture of the implemented approach is depicted in
This is particularly helpful when it comes to code generation
figure 2. This architecture partially implements the four
for application code organised in different files and
abstraction layers (Task & Concept, AUI, CUI, FUI) of CRF
programming languages as it is the case for the FUI of rich
indicated by the colored rectangles. The UML 2.0 language
internet applications.
on the Task & Concept layer enables the modeling of the
application’s domain, e.g. by a class diagram. As can be seen, The tool support is given by a graphical editor that is an
the AUI layer is realized by IFML. In particular, we reused extension to the IFML open source editor based on EMF [15]
the IFML-metamodel.ecore, an implementation of the IFML and the Sirius [14] framework. The editor is available at
standard, which can be downloaded from the official website Github and was extended within this work by graphical
and extended this meta-model by a choice of specific AUI representations and create/read/update/delete operations for
elements and GUI pattern instantiation parameters. IFML the IFML extensions. Figure 4 depicts a screenshot of the
provides dedicated extension points for this purpose. We editor showing the working area, the palette and the
realized the CUI layer with a custom meta-model, properties tab. This editor is an eclipse plug-in [17]. In the
RIACUI.ecore, which is specific for rich internet working area the current IFML model is displayed,
Figure 4. Screenshot of the extended IFML editor
represented in its concrete syntax. The use of meaningful 5. Fabio Paterno', Carmen Santoro, and Lucio Davide
icons and graphical representations helps for a better and Spano. 2009. MARIA: A universal, declarative,
faster understanding of the editor. The user can create new multiple abstraction-level language for service-oriented
IFML model elements via Drag & Drop from the palette on applications in ubiquitous environments. ACM Trans.
the right hand side. The palette is structured in multiple Comput.-Hum. Interact. 16, 4, Article 19 (November
sections where different ViewElements like List, Window 2009), 30 pages.
and NavigationFlow are available. The Step entry in the 6. IFML Spec. Retrieved April 2, 2015 from
palette also indicates that instantiation parameters of GUI http://www.omg.org/spec/IFML/
patterns are configurable. The editing of IFML model
elements mostly takes place in the properties tab located at 7. Jürgen Engel. 2010. A model- and pattern-based
the bottom. Here, all attributes and associations of model approach for development of user interfaces of
elements can be set, modified or deleted. Once such an IFML interactive systems. In Proceedings of the 2nd ACM
model is specified, it serves as the input of the transformation SIGCHI symposium on Engineering interactive
chain which can be triggered manually from the editor’s computing systems (EICS '10). ACM, New York, NY,
context menu. The outcome is a RIA-specific CUI model in USA, 337-340.
XML format and the FUI represented by multiple 8. Frank Radeke and Peter Forbrig. 2007. Patterns in task-
JavaServerPages, JavaScript files and CSS style sheets. based modeling of user interfaces. In Proceedings of the
6th international conference on Task models and
CONCLUSION AND OUTLOOK
diagrams for user interface design (TAMODIA'07),
In this paper, we presented the design and implementation of Marco Winckler, Philippe Palanque, and Hilary Johnson
a customized MDUID process that integrates GUI patterns. (Eds.). Springer-Verlag, Berlin, Heidelberg, 184-197.
As a basis of our solution concept we first described our 9. Marco Brambilla and Piero Fraternali. Interaction Flow
general pattern integration concept. Then we presented our Modeling Language: Model-Driven UI Engineering of
GUI pattern catalog and its formalization based on the Web and Mobile Apps with IFML. Morgan Kaufmann,
abstract user interface language IFML. The feasibility of our 2014.
approach was then shown by a tool-support which extends 10. Jenifer Tidwell. Designing interfaces – patterns for
the existing IFML editor by integrated GUI patterns. The effective interaction design (2. ed.). O’Reilly, 2011.
implementation of the customized MDUID process and the
practical usage of the tool-support was shown in the context 11. Matijn Van Welie. A pattern library for interaction
of generating rich internet applications (RIAs). With regard design. Retrieved April 2, 2015 from
to future work we intend to evaluate our implemented http://www.welie.com/patterns/
solution in an industrial case study. In the evaluation we will 12. Stefan Wendler, Danny Ammon, Ilka Philippow, and
especially focus on the influence of the integrated GUI Detlef Streitferdt. A factor model capturing
patterns to the usability of the automatically generated RIAs. requirements for generative user interface patterns. In
PATTERNS 2013, the Fifth Int. Conf. on Pervasive
REFERENCES
Patterns and Applications, Valencia, Spain, IARIA,
1. HCI Patterns. Retrieved April 2, 2015 from Lecture Notes in Computer Science, pages 34–43, 2013.
http://www.hcipatterns.org/patterns 13. ATL. Retrieved April 2, 2015 from
2. Christian Märtin, Christian Herdin, and Jürgen Engel. https://eclipse.org/atl/
2013. Patterns and Models for Automated User Interface 14. Sirius. Retrieved April 2, 2015 from
Construction – In Search of the Missing Links, in: M. https://eclipse.org/sirius/
Kurosu (Ed.), Human-Computer Interaction, Part I, 15. EMF. Retrieved April 2, 2015 from
HCII 2013, LNCS 8004, 401-410. https://www.eclipse.org/modeling/emf/
3. Kai Breiner, Marc Seissler, Gerrit Meixner, Peter 16. Xtend. Retrieved April 2, 2015 from
Forbrig, Ahmed Seffah, and Kerstin Klöckner. 2010. https://eclipse.org/xtend/
PEICS: towards HCI patterns into engineering of
interactive systems. In Proc. of the 1st International 17. Eclipse. Retrieved April 2, 2015 from
Workshop on Pattern-Driven Engineering of Interactive https://eclipse.org/
Computing Systems (PEICS '10).
4. Gaëlle Calvary, Joëlle Coutaz, David Thevenin, Quentin
Limbourg, Laurent Bouillon, and Jean Vanderdonckt.
2003. A Unifying Reference Framework for Multi-
target User Interfaces. In: Interacting with Computers,
289-308.