Towards Applying a Model Driven Approach to Generate Gamiﬁed

Graphical User Interfaces

Sarra Roubi

IMI Laboratory, Polydisciplinary Faculty of Taroudant, Ibn Zohr University, Agadir, Morocco

Keywords:

Model Driven Approach, Gamiﬁcation, 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, gamiﬁed 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 gamiﬁed 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

Gamiﬁcation 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 beneﬁts. It helps including better analytics,

predictions and management reporting. Besides, as

explained by (Wang, 2011), gamiﬁed 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 signiﬁcant part of

our ever-daily life (Mochocki, 2011) gamiﬁcation is

a trending phenomenon that aims to inﬂuence 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 “gamiﬁcation” (Dicheva

et al., 2015).

When software is designed correctly, gamiﬁcation

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 speciﬁc goal

in helping people attain better outcomes. Indeed, all

new design interventions including gamiﬁcation ele-

ments tends to get people engaged in activities such

that their probability of completion is increased.

We can say that gamiﬁcation 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 reﬂexe of play. For the speciﬁc case of busi-

ness, they are turning to gamiﬁcation for both engag-

ing their customers and motivating their emloyees.

That is why we concluded that gamiﬁed 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 gamiﬁcation elements. This approach

will help reaching the goal of gamiﬁed applications

using less effort on technical side and be more fo-

cused on the gamiﬁcation 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 efﬁciency to the

332

Roubi, S.

Towards Applying a Model Driven Approach to Generate Gamiﬁed 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

ﬁeld 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-

iﬁcation elements. The input model contains meta

classes with their attributes and parametrs and are re-

lated to gamiﬁcation concepts. These elements are

related to mechanics in gamiﬁcation 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 gamiﬁcation area, we can say that it is still

rising in popularity and several researches and studies

have been interested on gamiﬁcation 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, reﬂects mainly its use in

business contexts. The penetration of the gamiﬁcation

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 ﬁrst 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 gamiﬁcation can be applied in the context of an

e-learning course and deﬁned some metrics fo that

purpose.

In our study, being aware of gamiﬁcation beneﬁts

and improvement to software, we used model driven

prinicples along with including gamiﬁcation concepts

and elements into user interfaces independently from

a speciﬁc platform. This approach can be applied to

any of the areas presented above.

3 GAMIFICATION CONCEPTS

Gamiﬁcation is particularly related to web and mobile

software, in order to encourage people to adopt the

applications and enhance their use. Gamiﬁcation 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: classiﬁcations, levels,

points, badges, awards, missions (Viola, 2011).

Those concepts were gathered in the gamiﬁcation

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

gamiﬁed experiences in more detailed way (Hunicke

et al., 2004).

Figure 1: Gamiﬁcation Framework: Mechanics, Dynamics

and Aesthetics.

Towards Applying a Model Driven Approach to Generate Gamiﬁed Graphical User Interfaces

333

We can say that game mechanics are certainly the

most related part in gamiﬁcation 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 ﬁnd 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 gamiﬁcation.

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 gamiﬁcation

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 gamiﬁed ex-

periences as deﬁned 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 deﬁnd the fol-

lowing elements :

• Points: are a tool for measurment in gamiﬁcation

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

gamiﬁcation has been coupled with several areas and

have shown its efﬁciency. 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 ﬁrst part of

gamiﬁed graphical user interface.

In addition, icons and images related to the game

are important to design gamiﬁed 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 gamiﬁcation 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 ﬁrst step

is to deﬁne 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 gamiﬁcation 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 simpliﬁed 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 deﬁne

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 deﬁne input models

respecting the metamodel in an abstract level, without

needing to know how code source should be written.

We present in ﬁgure 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 gamiﬁed graphics and the

whole interface also in the desired language. These

abstract elements that we propose describe efﬁciently

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 deﬁned metamodel that describes the gam-

iﬁcation 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 deﬁned 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 gamiﬁed 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/]-bar

role ="[aMecanic.type/]"

aria-valuenow = "[aMecanic.

oclIsTypeOf(Level).actualValue]"

area-valuemin = "[aMecanic.

oclIsTypeOf(Level).minValue/]"

</div>

[/template]

...

All mecanics we deﬁned 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 deﬁned.

The proposed model driven approach is an entry to to

cover the generation of end-to-end gamiﬁed interfaces

that will be the subject of our futur work.

Figure 4: Generated User Interface with gamiﬁed element

from input models.

For our input model, we get the generated source

code for gamiﬁed elements that we integrated into the

HTML page. These elements were associated with an

Towards Applying a Model Driven Approach to Generate Gamiﬁed Graphical User Interfaces

335

adequate CSS to place them and add style. In ﬁgure 4

we ﬁnd elements that were generated using our input

models.

5 CONCLUSION

Gamiﬁcation is introduced in several areas and do-

mains, health, education, banking ... and have shown

its efﬁciency. Gamiﬁcation 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

gamiﬁed 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

gamiﬁed elements into the software interfaces. The

case we applied on our proposed approach gives the

possibility to generate a ﬁrst gamiﬁed 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 gamiﬁcation to

cover the whole framework. In future works, we will

complete metamodels proposed and their transforma-

tion to cover more gamiﬁcation 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

ﬂow modeling language (ifml).

Brambilla, M., Mauri, A., and Umuhoza, E. (2014b). Ex-

tending the interaction ﬂow 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 gamiﬁcation of business.

Forbes/Tech. Recuperado de http://www. forbes.

com/sites/gartnergroup/2013/01/21/the-gamiﬁcation-

of-business.

Deterding, S., Dixon, D., Khaled, R., and Nacke, L. (2011).

From game design elements to gamefulness: deﬁn-

ing gamiﬁcation. 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).

Gamiﬁcation in education: A systematic mapping

study. Journal of Educational Technology & Society,

18(3).

Elverdam, C. and Aarseth, E. (2007). Game classiﬁcation

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). Gamiﬁcation 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 gamiﬁcation. 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 gamiﬁcation. 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 ﬂow

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). Gamiﬁcation-I Videogiochi nella Vita Quo-

tidiana. Fabio Viola.

Wang, R. (2011). Demystifying enterprise gamiﬁcation 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