Journal of Computer and Communications, 2016, 4, 1-9
Published Online July 2016 in SciRes. http://www.scirp.org/journal/jcc
http://dx.doi.org/10.4236/jcc.2016.49001
Context-Based Mobile User Interface
Mao Zheng, Sihan Cheng, Qian Xu
Department of Computer Science, University of Wisconsin-La Crosse, La Crosse, WI, USA
Received 13 May 2016; accepted 16 July 2016; published 19 July 2016
Copyright © 2016 by authors and Scientific Research Publishing Inc.
This work is licensed under the Creative Commons Attribution International License (CC BY).
http://creativecommons.org/licenses/by/4.0/
Abstract
Context awareness is increasingly gaining applicability in interactive ubiquitous mobile compu-
ting systems. Each context-aware application has its own set of behaviors to react to context mod-
ifications. Hence, every software engineer needs to clearly understand the goal of the development
and to categorize the context in the application. We incorporate context-based modifications into
the appearance or the behavior of the interface, either at the design time or at the run time. In this
paper, we present application behavior adaption to the context modification via a context-based
user interface in a mobile application. We are interested in a context-based user interface in a
mobile device that is automatically adapted based on the context information. We use the adap-
tion tree, named in our methodology, to represent the adaption of mobile device user interface to
various context information. The context includes the user’s domain information and dynamic en-
vironment changes. Each path in the adaption tree, from the root to the leaf, presents an adaption
rule. An e-commerce application is chosen to illustrate our approach. This mobile application was
developed based on the adaption tree in the Android platform. The automatic adaption to the
context information has enhanced human-computer interactions.
Keywords
Pervasive Computing, Context-Aware Systems, Mobile User Interface, Adaption Tree
1. Introduction
Our world gets more connected every day. These connections are driven in part by the changing market of
smartphones and tablets. Pervasive computing environments are fast becoming a reality. The term “pervasive”,
introduced first by Weiser [1], refers to the seamless integration of devices into the user’s everyday life. One
field in the wide range of pervasive computing is the so-called context-aware system. Context-aware systems are
able to adapt their operations to the current context without an explicit user intervention and thus aim at increas-
ing usability and effectiveness by taking environmental context into account.
How to cite this paper: Zheng, M., Cheng, S.H. and Xu, Q. (2016) Context-Based Mobile User Interface. Journal of Computer
and Communications, 4, 1-9. http://dx.doi.org/10.4236/jcc.2016.49001
M. Zheng et al.
We are interested in a context-based user interface in a mobile device: the mobile user interface will be auto-
matically adapted based on the context information. The user interface can include many features such as font,
sound level and data entry. Every feature has some variables. For example, for the data entry, it has typing,
voice and tapping. From the designer’s perspective, the adaptability of these features is planned either at the de-
sign time or during the runtime. We use the adaption tree, named in our methodology, to represent the adaption
of mobile device user interface to various context information. The context includes the user’s domain informa-
tion and dynamic environment changes. Each path in the adaption tree, from the root to the leaf, presents an
adaption rule. An e-commerce application is chosen to illustrate our approach. This mobile application was de-
veloped based on the adaption tree in the Android platform. The automatic adaption to the context information
has enhanced human-computer interactions.
With traditional e-commerce applications, the user can browse the products, select a product and view the de-
tails. In the purchase process, the user will add the product to the shopping cart, enter or select payment options
and enter a shipping address. From the application interface perspective, the inputs to the application are mainly
through the user’s tapping, typing and clicking. The outputs of the application are in the forms of text, picture
and video. In the context-based mobile e-commerce application, the mobile application’s input and output have
additional forms: voice input and sound output. We will discuss the categorization of context information in de-
tail later on.
There are two major platforms in the mobile device community: iOS and Android. This project chose Android
development mainly for the reason of its openness. In addition, all the tools in the Android development are free
and no special hardware is required.
This paper is organized as follows: in Section 2, we describe our context-based mobile application, E-com-
merce system. Section 3 presents the rule-based approach and the adaption tree used in our research described in
detail. Section 4 discusses the design of the context-based E-commerce application. Section 5 shows the imple-
mentation details of the application. In Section 6, we discuss the testing conducted in our application. In Section
7, we compare how our views are similar to those of others and how they are different. Section 8 concludes this
research work and outlines the contributions.
2. Context-Based E-Commerce Application
With traditional e-commerce applications, the user can browse the products, select a product and view the de-
tails. In the purchase process, the user will add the product to the shopping cart, enter or select payment options
and enter a shipping address. From the application interface perspective, the inputs to the application are mainly
through the user’s tapping, typing and clicking. The outputs of the application are in the forms of text, picture
and video.
In our context-based mobile e-commerce application, the user interface will automatically adapt to the context
information to improve the usability. We categorized the context information into two categories as shown in
Table 1. We utilize the mobile device’s sensors to collect physical context information. The logical information
is gathered through the user’s registration process. In addition, the mobile application’s input and output have
additional forms: voice input and sound output.
Note: VIP users are those who have made more than 50 orders within three months, or users which purchased
the membership to the system.
Some example behaviors of our context-based mobile e-commerce application are listed below:
1) The user can search a product by simply talking to the device, or saying “check out” to enter the purcha-
sestage.
2) If the user is using the app outdoors on a bright day, either the device will automatically adjust the screen
brightness or sound out the product description.
Table 1. Context information categorization.
Physical context Battery level, light, noise level, Wi-Fi, network speed
Logical context
User profile (age, gender, preferred input/output for the application,
first time using the app or not) user’s category (VIP or non-VIP)
2
M. Zheng et al.
3) If the device is currently running low on battery power or the device is not connected to a Wi-Fi signal, the
app will display the product description in text format instead of picture or video forms.
3. Adaption Tree
Our work depends on the internal sensors of a mobile device, the user profile and the adaption of the mobile user
interface features for both entering and accessing data. The key point of the approach is to capture and represent
the knowledge required for the mobile user interface to self-adapt at run time or to implement the adaption at
design time. The rule-based approach representation is what we are proposing. Figure 1 shows our proposed
approach.
Specifically in our approach, we are using the adaption tree to describe and represent the adaption rules in the
system. The adaption tree is a graph that consists of nodes and edges. Each node represents a single or com-
pound condition, and each edge represents the control flow. A path in the adaption tree is the sequence of edges
starting from the root node to a leaf node. Each path represents an adaption rule. In the adaption tree, the priority
of the conditions is shown as the position of the nodes in the tree. The higher of the node’s position means the
more important the condition. The system will check this condition first before moving to nodes found lower in
the tree.
Figure 2 is the adaption tree for our context-aware e-commerce application. The symbols used in the adaption
tree are explained in detail in Table 2. For example, if a user is a VIP user, he/she will have the option to change
his/her user interface theme (f1). His/her screen will show a VIP account interface (f2) with many pictures of the
products that are available for purchase (g1) for the user to browse. Sample screen shots are shown in Figure 3
and Figure 4. In another scenario, if the device’s battery level is high, but the device is not connected to a Wi-Fi
signal, the product’s video will not be presented (a2) regardless the speed of the network. If the network speed is
low, the picture will not be presented (j2), otherwise the picture will be presented (j1).
Each path in the adaption tree, from the root to the leaf represents how the app will automatically adapt to
context information. However, the user is able to manually override the adaption: set the video, picture, sound or
brightness according to his/her preference or for his/her special request/need at the particular time.
4. Architecture Design
In our E-commerce application, we used Mobile Backend as a Service model (MBaaS), also known as “backend
as a service” (BaaS). It is a model for providing web and mobile app developers with a way to link their applica-
tions to backendcloud storage. These services are provided via the use of custom software development kits
(SDKs) and application programming interfaces (APIs) [12]. APIs provided by backend applications include
features such as user management, push notifications, and integration with social networking services. Figure 5
is the architecture model of BaaS.
In our application, we chose the cloud database provided by Bmob company. This company is the first cloud
Figure 1. Rule-based approach.
3
M. Zheng et al.
Figure 2. The adaption tree for context-aware e-commerce application.
Table 2. The legend of the symbols used in the adaption tree.
GUI features
Action
a.
Video
1. Videos will be present
2. Video will not be present
b.
Media sound
1.
Adjust the sound level to “sound on”
2. Adjust the sound to “sound off”
3. Adjust the sound to auto adjusted
c.
Font
1. Adjust the font to “medium”
2. Adjust the font to “big”
3.
Adjust the font to “small”
d.
Brightness
1. Adjust the brightness level to user preference
2. Adjust the Brightness level to auto adjusted
e.
Voice input
1.
Enabled
2. Not enabled
f.
Background theme
1. Optional theme(Blue, Red)
2.
VIP account interface
3. Unchangeable color—grey
4. Unchangeable color—pink
g.
Homepage
1.
Picture style
2. Plain text style (detailed classification)
h. Tutorial
1. Display
2.
Not display
i.
Item description
1. Sound
2. No sound
j.
Picture
1.
Present picture
2. Not present picture
k. Welcome page
1. Present welcome page when opening the app
l
. Voice command
1. Enabled
2. Not enabled
4
M. Zheng et al.
Figure 3. VIP user.
Figure 4. Picture style for VIP user.
Figure 5. Architecture of BaaS.
5