Mechanism for Dynamic Deployment of Plastic

Mobile Cross-platform User Interfaces

J. E. Girón1 , S. Mendoza1 , C. Torres-Huitzil2
1
Computer Science Department. CINVESTAV-IPN, Mexico D.F., Mexico.
2
Information Technology Laboratory. CINVESTAV-IPN, Cd. Victoria Tamaulipas, Mexico.
Phone (+52 55) 5747 3800 ext 3758 Fax (+52 55) 5747 3757 E-mail: [email protected]

Abstract—New platforms and mobile devices are constantly both plasticity and mobile computing. It is implemented in a
coming to the market but, in an effort to attract more public, sev- client-server architecture, where we define a set of 4 layers
eral manufacturers incorporate special features into their models, that allow the plastic dynamic deployment.
resulting in a lack of uniformity among them. Thus, devices
present different processing, memory, storage, communication As part of this work this mechanism is implemented in a
and displaying capabilities. This heterogeneity causes that the use case, using Web technologies like Javascript, Xml and
application development process becomes not homogeneous for HTML5, and native libraries.
all these devices, increasing not only costs but also the possibility
of creating inconsistent versions of each application (one for each This article is organized as follows. First we show the
device). To cope with this problem, we propose to incorporate
into the application development process for mobile devices a theoretical framework of our research, where we introduce
mechanism to dynamically adapt the Graphical User Interface the reader with the necessary knowledge to understand as-
(GUI) of such applications to changes in the context of use, which pects covered in this paper. Then we describe the proposed
is defined in terms of the user, the environment and the platform. mechanism with its components and methods. Followed by a
Using plasticity as a GUI adaptability technique, we develop a use case where we demonstrate the functionality of the model
mobile cross-platform mechanism to solve this problem.
and finally conclusions and future work of this research.
Keywords: context awareness; graphical models; Graphical
User Interfaces; Human Computer Interaction; mobile com- II. R ELATED WORK
puting;
Several approaches for dynamic user interface adaptation
have been proposed based on models such as roles and
I. I NTRODUCTION
tasks [12], data input and output flows and annotations [10].
In recent years, a wide variety of mobile computer devices These approaches adopt an application based view and do
including mobile smartphones and tablets has emerged, each not yet take cross-application interface fusion into account.
one of these has specific characteristics, i.e., platform, process- Fine grained adaptability of interfaces is the research aim
ing, memory, storage, communication and display capabilities. on plasticity of user interfaces [16]. Bisignano et al. [3]
These characteristics imply that the software development sketch a framework for adapting user interfaces on devices
process becomes not homogeneous. Therefore it is necessary for ubiquitous computing. The authors adapt the GUI and the
to establish the ability to dynamically respond to changes in displayed content but focus only on single applications and do
the environment, i.e., adapt the user interface (UI) across to the not take the whole collection of features provided by different
actually mobile devices and mobile computing platforms. So, applications on mobile devices into account.
we can raise the following question: How can we implement
and validate the UI for d different devices without writing III. C ONTEXT AWARE D EVELOPMENT
p programs, training in l languages and t UI toolkits, and Context-aware UI development refers to the ability to tailor
maintaining l*p architectural models for describing the same and optimize an interface according to the context in which it
UI? is used. Context-aware computing is the ability of computing
For example, if we would like to develop an application that devices to detect and sense, interpret and respond to aspects
covers Android and iOS systems natively we need to consider of a users local environment and the computing devices
the following: 1) we have two different toolkits, 2) we need to themselves [6] .
train in Objective-C and Java for Android, 3) we have a lot of Device-aware applications dynamically adapt their behavior
different devices with Android and at least two with iOS, 4) to the devices current situation, and to changes of context
we have to write at least one program for each different device, of use that might occur at run-time, without explicit user
5) different platform versions and finally 6) maintaining two intervention.
different models.
Using plasticity as a GUI adaptability technique, we develop A. Challenges of Mobile GUI
a mobile cross-platform mechanism to solve this problem.The The user interface is the means communication between the
proposed mechanism considers the dimensions that involve user and the system. When designing for a mobile platform,

Authorized licensed use limited to: ANURAG GROUP OF INSTITUTIONS. Downloaded on January 10,2025 at 08:41:37 UTC from IEEE Xplore. Restrictions apply.
we face challenges that we don not encounter when the user deploying applications is to know the specific device attributes
is stationary and he can be sitting quietly in front of a large and capabilities (Device-aware).
screen and keyboard. Developing for mobile devices, we have many options:
• Tiny screen sizes Native, web applications, application frameworks and hybrid
• Variable screen widths App (widgets) as we can see in Fig. 2.
• Touch screens
• Difficulty of typing text
• Challenging physical environments
• Social influences and limited attention

The functionality of an interface is part of what makes a

system good for a task and what makes a user able to use
a system.

B. Adaptation Technique: Plasticity

The term plasticity is inspired from materials that expand
and contract under natural constraints without breaking, thus
preserving continuous usage. Applied to Human-Computer
Interaction (HCI), plasticity is the capacity of an interactive
system to withstand variations in contexts of use while pre-
serving usability [15].
A plastic user interface is specified once to serve multiple
sources of physical variations, thus minimizing development Fig. 2: Kinds of mobile development.
and maintenance costs.
Our goal is to use a cross-platform development to standard-
ize our mechanism to different platforms in the actual market
where cross platform frameworks can overcome the program-
ming language barriers in different ways: Web technologies,
interpretation and cross compilation.
V. M ECHANISM FOR DYNAMIC D EPLOYMENT OF P LASTIC
C ROSS - PLATFORM U SER I NTERFACES
One of the biggest paradigm shift that designers and
implementers of mobile applications have to undergo is to
understand the necessity of 1)finding the best user interface(s)
for an application, 2)define the system architecture to
accommodate the suitable user interface(s), 3)implementing
them, and 4)keeping in mind that a new user interface may
be required at any time.
In this section we will describe the main properties and
Fig. 1: Plasticity’s techniques. methods that use our proposed plastic mechanism for the
dynamic UI display, which is represented in Fig. 4.

System adaptation to context of use can take multiple forms. Firstly we want to introduce how we established a relation
Adaptation can use one or a combination of the following between the mobile and plastic dimensions, as we can appreci-
techniques: UI remoulding, UI distribution, and UI migration ate in the Fig. 3. From this relation we started the development
as shown in Fig. 1. of our proposal.
In this paper we use UI remoulding where reconfiguration
of the user interface results from the application of one or In mobile computing and plasticity of user interfaces are
several transformations on all or parts of the user interface. certain properties that allow us to differentiate them from
other study areas, which are called dimensions. From these
IV. M OBILE DEVELOPMENT dimensions, we select those that allow us to address the
There is a wide selection of platforms with which we can problem of adapting user interfaces on mobile devices.
realize our mobile vision. Mobile developers need to use • Platform proliferation: strengthens the importance of
platform specific tools and APIs and to write code in different designing and developing devices independent from the
languages on different platforms. The largest challenge of platform, so we link this mobile dimension with the

Authorized licensed use limited to: ANURAG GROUP OF INSTITUTIONS. Downloaded on January 10,2025 at 08:41:37 UTC from IEEE Xplore. Restrictions apply.
 teraction elements, such as buttons and links [5]. With this
model we recommend using an XML file to define the graphic
elements of each user interface.
This mechanism is implemented as a client-server architec-
ture, where we define a set of 4 layers that allow a plastic
dynamic deployment of user interfaces. These layers are data,
control, adaptation and application.

Fig. 3: Relation between mobile and plasticity dimensions.

dimensions of context of use and UI deployment of

plasticity, where the characteristics of each device will
be the requested profile as the context of use and the Fig. 4: Mechanism for Dynamic Deployment of Plastic UI’s.
deployment of the user interface will take place in real-
time according to this context.
The activity of each layer is described below:
• Limited devices capabilities: Mobile applications have
• Data layer This layer handles the exchange of informa-
to be designed to optimize the use of data storage and
processing power of the device in terms of the application tion with the user, i.e., storing, updating and modification
used by the user, so we have to take into account the of data stored in a database on the server.
• Control layer This layer is responsible for selecting
resources needed according to the processing required to
adapt each interface, UI component granularity allow where it will take place the process of adaptation of UI’s,
us to determine from the number of components of the which are defined in the abstract interface by means of a
UI which is more appropriate to perform the adaptation XML file. To determine whether the adaptation of a user
process. interface is performed on the server or on the mobile
• Support for a wide variety of UI: Each UI is developed device, it is necessary to evaluate two conditions: the
with certain characteristics, so to perform an adaptation granularity of the components in the abstract interface
it is necessary to perform a process to modify these and device profile as shown in Fig. 5.
properties, using the dimension of adaptation means
we can perform this action following certain rules for
each case.

A difficult hurdle for the cross platform approach is created

by the different User Interface (UI) and User eXperience
(UX) patterns that prevail on individual platforms, so this
mechanism provides a methodology that allows to perform
cross-platform software development using a single pattern for
all mobile platforms and devices where we want to use our
software.
Using an abstract interface, we define the structure of our Fig. 5: Control layer: select where it will take place the process of
mobile application where we establish the components that adaptation of UI’s.
will contain the different interfaces. The proposed abstract
interface design follows some object-oriented design principles When the processing required to perform the adaptation
and focuses on perceivable objects defining how navigation of UI’s exceeds the capabilities of the mobile resources,
views should be displayed and augmented with further in- it is necessary that the process takes place on the server.

Authorized licensed use limited to: ANURAG GROUP OF INSTITUTIONS. Downloaded on January 10,2025 at 08:41:37 UTC from IEEE Xplore. Restrictions apply.
 This is to provide the user with a better performance on user needs to enter the departure and return dates and the place
the mobile device. of origin and destination to travel. Using the mechanism for
• Adaptation layer This layer is responsible for carrying dynamic deployment of plastic UI we show the different views
the adaptation of UI’s according to the mobile device of the same UI.
profile (see Fig. 6). This layer is present on both the All the components and structure of the UI was defined
server and the client device. The duplicity of this layer is in the XML file (abstract interface), through the process
because not all mobile devices have sufficient resources established in the mechanism and the information provided by
to implement operations necessary for processing the each device. The program written in Javascript performs the
adaptation of the interface. deployment of components in different graphic user interfaces
according to the presented context.
• In the Fig. 7 we can observe the distribution of the
components full mode. This case is present when we
access from a Desktop PC.

Fig. 6: Adaptation Layer: adapt a UI’s according to the mobile device.

In this layer we implement the adaptation of UI’s using

plasticity by remolding, this technique has the following
transformations:
– Suppression of the UI components that become Fig. 7: Case: Desktop View. Full View
irrelevant in the new situation/context;
– Insertion of new UI components to provide access • In Fig. 8 we access from an iPad, so as we can
to new services relevant to the new situation/context; appreciate in the picture, UI suffers a transformation,
– Substitution of UI components when UI compo- where a set of grouped elements is transformed
nents are replaced with new ones. Substitution can be into a single graphic element that allows the selection
viewed as a combination of suppression and insertion of any of them to perform a display of each (Combobox).
of UI components;
– Reorganization of UI components by revisiting
their spatial layout and/or their temporal dependency.
Reorganization may result from the suppression,
insertion, or substitution of UI components. On the
other hand, switching from a portrait to a landscape
view requires spatial reorganization only.
According to the mobile device profile, we can select one
or more of these transformation to perform the adaptation
of a UI.
• Application layer This layer defines the elements that
allow to define the behavior and interaction with the
user application, i.e., structure, navigation, interactivity
and architecture.

Each layer performs a process according to the adaptation

mechanism, until the abstract interface is transformed into
a graphical user interface and displayed on the mobile
device dynamically. Fig. 8: Case: Ipad 1024 x 768 px

VI. I MPLEMENTATION
• In Fig. 9 we show how the program transform the UI to
This use case is an application for an airport. In this an iPhone, therefore this device has a smaller interface
application a user performs a flight reservation. Therefore the screen size (320 x 480 px). The components of the GUI

Authorized licensed use limited to: ANURAG GROUP OF INSTITUTIONS. Downloaded on January 10,2025 at 08:41:37 UTC from IEEE Xplore. Restrictions apply.
 are grouped into two tabs that are easy to access by the As part of future work it is intended to develop different
user. In turn we can appreciate that the combobox takes use cases that demonstrate each of the different adaptations
the style of IOS. that can be done with the implementation of this mechanism.
Besides we want to extend each of the case studies for the
different mobile platforms that are in today’s market
R EFERENCES
[1] A LLEN , S., G RAUPERA , V. and L UNDRIGAN , L., Pro Smartphone Cross-
Platform Development: iPhone, Blackberry, Windows Mobile and Android
Development and Distribution, Apress, 2010.
[2] B’FAR , R., Mobile Computing Principles, Cambridge University Press,
2005.
[3] B ISIGNANO , M. , M ODICA , G. and T OMARCHIO , O. , Dynamic User
Interface Adaptation for Mobile Computing Devices, Proceedings of
the SAINT-W 05, pages 158161, Washington, DC, USA, 2005. IEEE
Computer Society.
[4] G. C ALVARY, J. C OUTAZ, O. DAASSI, V. G ANNEAU, L. Balme, A.
Demeure and J.-S. S OTTET,Métamorphose des IHM et Plasticité: Article
Fig. 9: Case: Iphone 320 x 480 px de synthése, Ergo IA 2006, pp. 11-18, 2006.
[5] C ASTELEYN , S., DANIEL , F., D OLOG , P. and M ATERA , M., Engineering
Web Applications, Springer-Verlag, Berlin Heidelberg, 2009.
• Finally in Fig. 10 with a device with screen size of 320 [6] D EY, A.K. and A BOWD , G.D., CybreMinder: A context-aware system for
by 240 px, the components of the GUI are grouped into supporting reminders. Proceedings of the 2nd International Symposium
4 tabs. By this transformation, we maintain the usability on Handheld and Ubiquitous Computing (HUC2K), 172186, 2000.
[7] F LING , B., Mobile Design and Development, O Reilly Media, 2009.
of the same interface with a small screen size. [8] F IRTMAN , M., Programming the Mobile Web, O‘Reilly Media, 2010.
[9] K UNIAVSKY, M., Smart Things: Ubiquitous Computing User Experience
Design , ELSEVIER, USA, 2010.
[10] N ILSSON , E. G., F LOCH , J., H ALLSTEINSEN , S. , and S TAV, E., Model-
based user interface adaptation, Mobile Computing and Ambient Intel-
ligence: The Challenge of Multimedia, Dagstuhl Seminar Proceedings,
2005.
[11] O EHLMAN , D. and B LANC , S., Pro Android Web Apps, Apress, 2011.
[12] P ENNER , R. R. and S TEINMETZ , E. S., Dynamic User Interface
Adaptation Based on Operator Role and Task Models, In Proc. of the
2000 IEEE International Conference on Systems, Man, and Cybernetics,
volume 2, pages 11051110, 2000.
[13] P OSLAD , S., Ubiquitous Computing: Smart Devices, Environments and
Interactions , Queen Mary, University of London, WILEY, UK, 2009.
Fig. 10: Case: 320 x 240 px View [14] S TARK , J., Building iPhone Apps with HTML, CSS, and JavaScript ,
O‘Reilly Media, USA, 2010.
[15] T HEVENIN , D. and C OUTAZ , J., Plasticity of User Interfaces: Frame-
This use case was programmed using Web technologies work and Research Agenda., Proc. Interact99, Edinburgh , A. Sasse and
and native libraries conforming a hybrid approach. Using a C. Johnson Eds, IFIP IOS Press Publ. , 1999, pp.110-117.
[16] T HEVENIN , D., Adaptation en Interaction Homme-Machine : le cas de
multi-platform development, we employed a framework called la Plasticite?, PhD thesis, Universite? Joseph Fourier, December 2001.
PhoneGap, where a web page was used as the user interface
and compiled in the platform native libraries. This allowed us
to access the hardware properties of the mobile device.
VII. C ONCLUSION AND F UTURE WORK
This mechanism is a response to a wide range of mobile
devices in the market and as an option to homogenize the
application development process by implementing and com-
bining a cross-platform development and plasticity technique.
The use of web technologies involved in the mechanism
allow us a fast development cycle and extending it to more
than one platform in the market. Using this mechanism allows
us to implement and validate UI’s for different devices. At
the same time with cross-platform development we can use
the same code for multiple platforms and we only have to
training in a single language or toolkit. And finally we have a
single architectural model for all the versions of our software.
As we have shown in the implementation section this model
is appropriate to be used in the development of software for
mobile devices with different characteristics.

Authorized licensed use limited to: ANURAG GROUP OF INSTITUTIONS. Downloaded on January 10,2025 at 08:41:37 UTC from IEEE Xplore. Restrictions apply.