Towards Applying a Model Driven Approach to Generate Gamified
Graphical User Interfaces
Sarra Roubi
IMI Laboratory, Polydisciplinary Faculty of Taroudant, Ibn Zohr University, Agadir, Morocco
Keywords:
Model Driven Approach, Gamification, Graphical User Interface, Tranformation, Code Generating.
Abstract:
Context: Model Driven approaches were introduced to help provide models, transformations between different
levels, and code generators to deal with several issues in software development. These approaches help reduce
time in the coding phase along with targeting higher level of abstractions to deal with all the cases. Along
with developement in software areas, gamified graphical user interfaces are used in several domain, including
business. Indeed, it helped reaching new goals such as descovering new talents or even motivating employees.
Objective : In this paper, we present a new model driven approach, starting from a high abstraction level
which is platform independent models to reach code genenrating of gamified graphical user interface. Starting
from a high level, such as Platform Independent Model (PIM), helps software developers to focus mostly on
business knowledge and less about technical details of the targeted platform. Results: The paper presents an
end-to-end approach including proposed metamodel and mappings between their elements developed using
Eclipse Modeling Framework (EMF) tools and Acceleo for code generation.
1 INTRODUCTION
Gamification were introduced as a new e-business
strategy for employee engagement journey. In addi-
tion to that, it is used recently in healthcare, Ecom-
merce, banking, education ... because of its remar-
quable benefits. It helps including better analytics,
predictions and management reporting. Besides, as
explained by (Wang, 2011), gamified applications in
e-business/ecommerce promise new additions even
when studies are so diverse, by promoting the discov-
ery, design patterns, dynamics of games, and several
other elements and characteristics that provide a more
positive user experience.
Online games have become a significant part of
our ever-daily life (Mochocki, 2011) gamification is
a trending phenomenon that aims to influence peo-
ple, by developing a game design in different business
contexts (Deterding et al., 2011). Thus, the develop-
ment of enhancing business applications with game
design has been entitled as “gamification” (Dicheva
et al., 2015).
When software is designed correctly, gamification
has a substantial business impact, and become an im-
portant means for organizations, to engage, and mo-
tivate them to modify behaviors, develop skills, or
solve problems (Burke, 2013). This goes along with
the fact that behavioural scientists have a specific goal
in helping people attain better outcomes. Indeed, all
new design interventions including gamification ele-
ments tends to get people engaged in activities such
that their probability of completion is increased.
We can say that gamification consists on apply-
ing game design principles and mechanics into ”non-
game-oriented” environments. It encourage users to
engage in desire behaviors and taking advantage of
innate reflexe of play. For the specific case of busi-
ness, they are turning to gamification for both engag-
ing their customers and motivating their emloyees.
That is why we concluded that gamified user inter-
faces are mostly used and are integrated in all areas.
That is why in this paper we present a new metamodel
for graphical user interface that gathered some of the
most common gamification elements. This approach
will help reaching the goal of gamified applications
using less effort on technical side and be more fo-
cused on the gamification part.
In the last decades, applications and software de-
veloppement have known an exponential growth and
became very challenging to keep up with that evolu-
tion. Many approaches were introduced to help soft-
ware developper and Model Driven Engineering was
a revolutionaly one. indeed, Model Driven Develop-
ment has shown its contributions and efficiency to the
332
Roubi, S.
Towards Applying a Model Driven Approach to Generate Gamified Graphical User Interfaces.
DOI: 10.5220/0007389903320336
In Proceedings of the 7th International Conference on Model-Driven Engineering and Software Development (MODELSWARD 2019), pages 332-336
ISBN: 978-989-758-358-2
Copyright
c
2019 by SCITEPRESS – Science and Technology Publications, Lda. All rights reserved
field of engineering and helps improving the quality
of applications as well as time saving and increasing
the productivity. It focuses on modeling the system
in different levels of abstraction and relate elements
through mappings and transformation.
In this paper we present a new model driven ap-
proach for modeling and generating graphical inter-
faces for applications taking into consideration gam-
ification elements. The input model contains meta
classes with their attributes and parametrs and are re-
lated to gamification concepts. These elements are
related to mechanics in gamification and will be gen-
erated automatically. The whole process would help
generating corresponding graphic elements regarding
the user wishes.
2 RELATED WORK
Several works were introduced dealing with model-
ing and generating graphical interfaces. An approach
for RIA was proposed to generate the application fo-
cusing on graphical part and respecting the MVC pat-
tern. Also, a new modeling language for graphical
interfaces was normalized by the Object Management
Group (Brambilla et al., 2014a). It is true that this lan-
guage covers the graphical and interaction part, but
still does not cover all the aspects of applications.
That is why this language was extended for mobile
applications (Brambilla et al., 2014b) and for RIA
also to improve its coverage (Roubi et al., 2016).
In addition, some works argue for the use of
gamedesign patterns and mechanics, such as rewards,
points, badges, leaderboards or storytelling, as build-
ing blocks (Kumar, 2013), and assume that the com-
bination of these elements can invoke engaging chal-
lenges and motivate goal-directed behavior.
For gamification area, we can say that it is still
rising in popularity and several researches and studies
have been interested on gamification and introducing
game elements in several areas. First, in business, in
(Kumar, 2013) authors explain how designing engag-
ing business software could help impoving employees
rendering .
This position, however, reflects mainly its use in
business contexts. The penetration of the gamification
trend in educational settings seems to be still climbing
up to the top as indicated by the amount and annual
distribution of the reviewed works.
In educational context, the term “serious games”
was first established for learning software with mul-
timedia elements and small educational games. A
meta-analysis of serious games (Wouters et al., 2013)
provides a good overview and summarize the research
on the effects of serious games on learning and moti-
vation.
Furthermore, in (Muntean, 2011) authors expose
how gamification can be applied in the context of an
e-learning course and defined some metrics fo that
purpose.
In our study, being aware of gamification benefits
and improvement to software, we used model driven
prinicples along with including gamification concepts
and elements into user interfaces independently from
a specific platform. This approach can be applied to
any of the areas presented above.
3 GAMIFICATION CONCEPTS
Gamification is particularly related to web and mobile
software, in order to encourage people to adopt the
applications and enhance their use. Gamification aims
at combining intrinsic motivation and extrinsic one, in
order to raise engagement. Intrinsic motivation come
from within, the user/actor decides whether to make
an action or not, some examples are: altruism, com-
petition, cooperation, sense of belonging, love or ag-
gression. Extrinsic motivation, on the other hand, oc-
cur when something or someone pushes the user to
make an action for example: classifications, levels,
points, badges, awards, missions (Viola, 2011).
Those concepts were gathered in the gamification
framework MDA for Mechanics, Dynamics and Aes-
thetics (or Emotions in some works). Indeed, not
all elements are used for all purposes, but rather we
choose the adequate elements for each case. In other
words, some mechanics can be used for education and
not for business, or the dynamics of the user in busi-
ness context is not similar in a banking one. The
MDA framework helps the designers to analyse the
gamified experiences in more detailed way (Hunicke
et al., 2004).
Figure 1: Gamification Framework: Mechanics, Dynamics
and Aesthetics.
Towards Applying a Model Driven Approach to Generate Gamified Graphical User Interfaces
333
We can say that game mechanics are certainly the
most related part in gamification concepts to user in-
terfaces. Indeed, the user interacts with such elements
give control over the application and guide user ac-
tions. That is why we focused on this part in this pa-
per.
3.1 Game Dynamics and Aesthetics
Dynamics shape the behavior of users and players to-
wards mechanics acting on inputs outputs over time.
Since it is related to a person behavior and actions
it is hard to predict; designers do not know exactly
what will happen (Hunicke et al., 2004). That is why
the challenge for designers remains in anticipating
diffrent types of dynamics that can emerge and to de-
velop approriate mechanics.
Related to dynamics, we find aesthetics or emo-
tions that are a product of how players interact with
the mechanics and then generate dynamics. This part
is also a very crucial since the players will not con-
tinue to play if they do not enjoy themselves. So, cre-
ating player enjoyment represents one of most impor-
tant player engagement goal for gamification.
3.2 Game Mechanics
Game mechanics have therefore managed to change
the way graphical interfaces for applications are de-
signed, for the better and ensure how to specify the
goals, the rules, the settings, the context, the types
of interactions. The basic mechanics of gamification
are closely related to the mechanics of game design:
addressing the human desire for socializing, learn-
ing, mastery, competition, achievement, status, self-
expression, altruism, or closure (Schell, 2014).
We can devide mechanics into three different
types : setup mechanics, rule mechanics, and progres-
sion mechanics and all of them are remarkably im-
portant not only for games, but also for gamified ex-
periences as defined and explained in (Robson et al.,
2015) throught (Elverdam and Aarseth, 2007).
In our work, we focused on setup and progression
mechanics since they are closely related to graphical
interfaces we want to elaborate. We defind the fol-
lowing elements :
Points: are a tool for measurment in gamification
and the way the system keeps count of the player’s
actions because they provide instant feedback to
the player.
Badges: as a result of accumulating a cer-
tain number of points, players may be awarded
badges. Badges are a form of virtual achievement
by the player. They address positive reinforce-
ment and drive collection and achievement.
Leaderboards: bring in the social aspect of
points and badges and display the players on a list
and are ranked regarding their number of points
collected in descending order.
Constraints: used basically to encourage and
motivate the player such as deadlines.
Progress: refers to providing feedback to the user
on where she is in the journey, and encouraging
her to take the next step.
4 ALIGNING MODEL DRIVEN
APPROACH WITH
GAMIFICATION CONCEPTS
AND MECANICS
As presented, we can say that including game ele-
ments remains a good tool to reduce perception bar-
riers for user’s interaction with software. That is why
gamification has been coupled with several areas and
have shown its efficiency. However, the developement
of such application, especially the graphical part, can
be very tedious and time consuming.
Since Model Driven approaches have been intro-
duced in several areas dealing with diffrent problems
espacially, for software applications and generate the
whole application from models, we align the model
driven principles by presenting new metamodel and
transformation engine to generate easily a first part of
gamified graphical user interface.
In addition, icons and images related to the game
are important to design gamified graphical interfaces.
For our work, we opted for the use of the google
material icons library (Google, 2014). Indeed, Ma-
terial design system icons are very simple yet modern
and join perfectly gamification aspects and are used
commonly throughout a user interface. The use of
these library makes the task easier for designing an
ergonomic interface with all elements included.
4.1 Proposed Metamodel and Its
Instances
When we adopt a model driven approach, the first step
is to define metamodels for the concepts we will work
with and choose the appropriate level to work with. In
our case, we began with platform independent model
to represent gamification elements that will be gath-
ered with previous metamodels for user interfaces as
presented in our previous works.
MODELSWARD 2019 - 7th International Conference on Model-Driven Engineering and Software Development
334
We present a new simplified metamodel that
model and describe mechanics to be introduced in the
intefrace with several information. We integrated me-
chanics in the metamodel to cover the components of
the game at the level of representation, along with ba-
sic component and activities that constitute the graph-
ical part of the application.
The major element is Mecanics meta class that
gathers several children as diffrent types. Every one
of these elements has its own properties that define
how it will be included in the interface along with
common properties.
Figure 2: Exerpt of proposed metamodel.
Once we developped our entry metamodel, we
generated the modeling artefacts using Eclipse mod-
eling framework. This permits to define input models
respecting the metamodel in an abstract level, without
needing to know how code source should be written.
We present in figure 3 the model part for progression
bar and badges for rewarding user and how it will be
generated automatically.
Figure 3: Input model instance: Progression bar.
As mentionned, the input model gathers a num-
ber of necessary elements for transformation engine
to generate the code for gamified graphics and the
whole interface also in the desired language. These
abstract elements that we propose describe efficiently
mecanics to be integrated in the interface and can be
used for several platforms, the transformation should
be re writen only.
4.2 Transformation Engine
Once we defined metamodel that describes the gam-
ification elements to be included into the user inter-
faces, we coupled it with our metamodel already pre-
sented in previous works . Aftrwards, the transfor-
mation phase remains crucial in any model driven ap-
proach. Indeed, we defined transformation rules and
transformation engines that allow to generate code of
the application.
We present an exerpt of Acceleo templates to gen-
erate graphics for gamified elements such as progres-
sion bar and its parameters:
...
[file (’index’+’.html’, false, ’UTF-8’)]
[for(theMecanic:Mecanics |
aGamifiedPack.mechanics)]
[generateMecanics(theMecanic)/]
[/for]
[/file]
[/template]
[template public generateMecanics(
aMecanic : Mecanics)]
<div class = "[aMecanic.type/] style = "" >
<div class = "[aMecanic.type/]-bar
role ="[aMecanic.type/]"
aria-valuenow = "[aMecanic.
oclIsTypeOf(Level).actualValue]"
area-valuemin = "[aMecanic.
oclIsTypeOf(Level).minValue/]"
</div>
[/template]
...
All mecanics we defined in the metamodel are
coupled with the metamodel of graphical interface
that we presented in our previous works for MVC ap-
plication (Roubi et al., 2015) and also its extension
for Interaction Flow Modeling Language as defined.
The proposed model driven approach is an entry to to
cover the generation of end-to-end gamified interfaces
that will be the subject of our futur work.
Figure 4: Generated User Interface with gamified element
from input models.
For our input model, we get the generated source
code for gamified elements that we integrated into the
HTML page. These elements were associated with an
Towards Applying a Model Driven Approach to Generate Gamified Graphical User Interfaces
335
adequate CSS to place them and add style. In figure 4
we find elements that were generated using our input
models.
5 CONCLUSION
Gamification is introduced in several areas and do-
mains, health, education, banking ... and have shown
its efficiency. Gamification framework gathers three
major principles that are mechanics, dynamics and
emotions. Since Mechanics are the most visible part
of it and tend to be the primary focus, we presented
a new model driven approach to model and generate
gamified applications, focusing on the graphical part.
We presented the motivations behind our work and
presented metamodel along with their input models
and transformationss using Acceleo. This proposed
model driven approach helps designers to integrate
gamified elements into the software interfaces. The
case we applied on our proposed approach gives the
possibility to generate a first gamified web applica-
tion and is oriented to student for motivation in taking
courses and quizes.
We are fully aware that our proposed approach
still needs to cover other aspects of gamification to
cover the whole framework. In future works, we will
complete metamodels proposed and their transforma-
tion to cover more gamification elements and raise the
abstraction level. This would help choosing the ideal
elements for generating the more adequat graphical
elements to add.
ACKNOWLEDGEMENTS
I would like to thank my friends Mohammed Berehil
and Karim Arrhioui for knowledge sharing, technical
support and encouragement.
REFERENCES
Brambilla, M., Fraternali, P., et al. (2014a). The interaction
flow modeling language (ifml).
Brambilla, M., Mauri, A., and Umuhoza, E. (2014b). Ex-
tending the interaction flow modeling language (ifml)
for model driven development of mobile applications
front end. In International Conference on Mobile Web
and Information Systems, pages 176–191. Springer.
Burke, B. (2013). The gamification of business.
Forbes/Tech. Recuperado de http://www. forbes.
com/sites/gartnergroup/2013/01/21/the-gamification-
of-business.
Deterding, S., Dixon, D., Khaled, R., and Nacke, L. (2011).
From game design elements to gamefulness: defin-
ing gamification. In Proceedings of the 15th inter-
national academic MindTrek conference: Envisioning
future media environments, pages 9–15. ACM.
Dicheva, D., Dichev, C., Agre, G., and Angelova, G. (2015).
Gamification in education: A systematic mapping
study. Journal of Educational Technology & Society,
18(3).
Elverdam, C. and Aarseth, E. (2007). Game classification
and game design: Construction through critical analy-
sis. Games and Culture, 2(1):3–22.
Google (2014). Material icons. Website.
Hunicke, R., LeBlanc, M., and Zubek, R. (2004). Mda: A
formal approach to game design and game research.
In Proceedings of the AAAI Workshop on Challenges
in Game AI, volume 4, page 1722.
Kumar, J. (2013). Gamification at work: Designing en-
gaging business software. In International conference
of design, user experience, and usability, pages 528–
537. Springer.
Mochocki, M. (2011). Reality is broken: Why games make
us better and how they can change the world. jane mc-
gonigal. 2011. new york: Penguin press, ss. 388. Cza-
sopismo ludologiczne Polskiego Towarzystwa Bada-
nia Gier, page 239.
Muntean, C. I. (2011). Raising engagement in e-learning
through gamification. In Proc. 6th International Con-
ference on Virtual Learning ICVL, volume 1. sn.
Robson, K., Plangger, K., Kietzmann, J. H., McCarthy, I.,
and Pitt, L. (2015). Is it all a game? understand-
ing the principles of gamification. Business Horizons,
58(4):411–420.
Roubi, S., Erramdani, M., and Mbarki, S. (2015). A model
driven approach to generate graphical user interfaces
for rich internet applications using interaction flow
modeling language. In Intelligent Systems Design and
Applications (ISDA), 2015 15th International Confer-
ence on, pages 272–276. IEEE.
Roubi, S., Erramdani, M., and Mbarki, S. (2016). Modeling
and generating graphical user interface for mvc rich
internet application using a model driven approach.
In Information Technology for Organizations Devel-
opment (IT4OD), 2016 International Conference on,
pages 1–6. IEEE.
Schell, J. (2014). The Art of Game Design: A book of lenses.
AK Peters/CRC Press.
Viola, F. (2011). Gamification-I Videogiochi nella Vita Quo-
tidiana. Fabio Viola.
Wang, R. (2011). Demystifying enterprise gamification for
business. Retrieved from Constellation Research.
Wouters, P., Van Nimwegen, C., Van Oostendorp, H., and
Van Der Spek, E. D. (2013). A meta-analysis of the
cognitive and motivational effects of serious games.
Journal of educational psychology, 105(2):249.
MODELSWARD 2019 - 7th International Conference on Model-Driven Engineering and Software Development
336