10 User Interface Elements for Mobile Learning

Application Development
Khairul Yusri Zamri Nada Nasser Al Subhi
Department of Computer Science Department of Computer Science
Brunel University London Brunel University London
London, United Kingdom London, United Kingdom
[email protected] [email protected]

Abstract— Mobile learning application is a new fashionable mobile learning apps. As stated by [3], users tend to utilise
trend. More than a thousand learning applications have been mobile apps more than web apps in their daily activities ]
designed and developed. Therefore, the focus on mobile learning because they are more personal, concise and specific
applications needs to be refined and improved in order to concerning time, their content and communication factors.
facilitate users’ interaction and response towards the learning
process. To develop an effective mobile learning application, With the number of apps exceeding one million, there is
one should start from the User Interface (UI) because an huge potential for mobile apps to change. Mobile devices are
effective UI can play a role in constantly making the user focus seen as more convenient in the learning environment, because
on an object and subject. The purpose of this study is to through mobile learning applications, access to information
investigate and identify the best UI elements to use in mobile is not limited to localised and centralised methods. Instead,
learning application development. Four existing UI guidelines apps can be accessed anytime and anywhere without limit.
and 12 selected learning applications were analysed, and we This is why the focus on mobile learning application
identified 10 UI Elements in order to develop the next mobile development needs to be refined and improved to achieve the
learning applications. All the 10 elements are described objectives of the application in order to truly change the
accordingly and they have implications for those designing and "physical relations between teachers, learners and the object
implementing UI in mobile learning applications. of learning” [4]. To develop a good mobile learning app, the
focus should begin with designing the UI to influencing the
Keywords: mobile learning, mobile application, user interface
guidelines, user interface elements
user’s interaction and response towards the learning process
[5]. As mentioned by [6], a good UI is one which can play a
I. INTRODUCTION role in constantly making the user focus on objects and
subjects, and which also identifies the target user and meets
In March 2013, ABI Research [1] reported that at least 56 required specifications [7][8][9].
billion applications (apps) had been downloaded by
Smartphone users. Google dominated with 58% of the Therefore, the purpose of this paper is to investigate and
market, while Apple had 33%, and the remainder was justify the best UI elements to use in mobile learning
covered by Windows and Blackberry. These statistics clearly application development. Four existing UI guidelines were
show that the market share of applications is dominated by referred to and compared and aligned with 12 existing mobile
Google and Apple. Both of these companies are competing in learning applications that were selected and analysed using
the apps and Smartphone markets. the Human-Centered Design Process.
Developers at Google and Apple are constantly
introducing new apps. In addition, they have categorised
developed apps into games, social, entertainment, lifestyle, II. BACKGROUND STUDY
and education categories. This enables users to choose apps A. Mobile learning
which are useful and relevant. In both Google’s and Apple’s
app stores, there are more than 1000 types of application Mobile learning (m-learning) is a new phenomenon in
listed in the education category alone, ranging from beginner education [10] and has created new learning opportunities
up to higher education level. This shows that application which have led to a shift from the traditional learning
development in formal education or mobile learning has a experience to an enhanced learning experience [11][12][13].
place in this industry and it is available in a variety of forms Thus, the existence of mobile learning has improved the
and structures according to the level required. context in which learning takes place and has led to a more
interactive approach to learning in terms of communication
Thus, mobile learning through applications is available and access [14][15][16]. The advancement of mobile learning
and there is a demand in the market for it, but it is seen as technology can improve continuous individual learning [17].
incomplete, as compared to mobile learning through a web
application (web base). According to the NMC Horizon Meanwhile, the benefits of mobile learning are that it is
Report [2] there is a need for development of mobile learning portable, flexible, convenient, and user friendly [18]. Thus,
technology, which leads us towards the development of with the above listed effects of m-learning, the researcher
plans to investigate whether mobile learning supports between the user and the environment [29]. It also indicates
students’ learning outside the four walls of the lecture hall or the ability, credibility and level of the acceptability and
the traditional classroom environment. While the previous usability of an application by every user.
advantages of m-learning are potentially great, there are
many challenges with mobile learning. Specifically there are A good and effective UI enables a user to be constantly
technical issues such as small display size and resolution, aware and attentive towards the object and subject of the
small keyboard size, short battery life, limited performance application [9][12][30]. This implies that the UI is the start of
due to storage, memory size and processor, and multiple every available app by involving all types of media regardless
different browser standards and operating platforms for of whether it is on a computer or mobile device (smartphone,
different devices [19]. However, it is also noted that mobile tablet, etc.) [31].
devices are evolving in that they are decreasing in size, According to [32], mobile learning requires UIs with a
increasing in capability, and declining in cost [20]. As high and consistent interaction (non-repetitive menu, iconic
explained by [21], “technology is becoming increasingly design, clear layout arrangement etc.) because the process
interactive and distributed, such that individual learners have requires focus and speed. The UI must be an effective
available, at rapidly declining cost, the means to participate communication tool towards the objective of the application
incredibly complex networks of information, resources, and in the user’s perception [33].
instruction”.
According to The Eight Golden Rules of User Interface
In terms of design, critical and careful analysis of how [5], a few important criteria required in the development of
existing mobile learning applications could be used to match effective UIs:

specific learning objectives is essential to ensure the success
of any mobile learning implementation [18]. One of the main Strive for consistency: information, menu or layout
aspects of this analysis is the ‘users’. A student’s perception in the UI must be consistent. For example,
and evaluation of their own mobile device is important in consistency in color, size, type of font, logo


order to ensure proper use of their device as a supporting tool arrangement, and capitalization.
in the learning environment. Cater to universal usability: the UI must be able to
be used by all levels of user by inserting features
B. Mobile application

which are associated with them.
When mobile learning is applied on a mobile device, there Offer informative feedback: enable user to provide
are two ways to run it, either through web application (web appropriate response regarding the learning


base, mobile website), or a mobile application (m-app). Web environment.
applications require a web browser to browse them, while an Design dialogs to yield closure: sequences of action
m-app uses its own application system. There are four that would direct or aid user during interactions. For
advantages in utilising web applications; 1) optimising a example, during an online purchase, the user would
website is usually cheaper than developing a new app, 2) it is be given instructions starting from the process of


an independent platform; with a single website layout, it can product selection until the payment stage.
be used on any device and OS, 3) they are easy to update, and Prevent error: avoid serious errors, which could
interrupt users’ attention.

4) required technology is easier to develop in- PHP, HTML
and CSS [22]. However, research on the usability of mobile Permit easy reversal of action: interrupted
devices suggests that m-apps are more efficient as the user interaction can be continued without needing to start


performs better with them than with a web application. It is from the beginning stage.
also claimed that m-apps can be better tailored to run on an Support internal locus of control: user has the
individual device [3]. This enables the user to be more permission to control the interface according to their
comfortable while using the application on a mobile device

needs.
than on a web browser. Reduce short-term memory: does not burden the
The concept of Apps was initiated by Apple when they user with unnecessary information.
launched the App Store on July 2008, a year after the The listed eight criteria remind the developer that
appearance of the first generation of the iPhone [23]. Every “interface design is more restrictive than a desktop because
developed app is categorised according to its content and of relatively limited computing and communication power”
objective. Every store or market has a few common
[8]. Another UI guideline which can be referred to is the
categories such as education, games, entertainment,
photography, and news. After five years, more than one Additional Guideline for Mobile Interface Design [8], which

 Design for multiple and dynamic context: allow user

million apps had been posted in App Store (Apple, iOS), Play offer seven different criteria:
Store (Google, Android), Market Place (Microsoft,
Windows), and BB World (Blackberry) [24] and more than to configure output to their needs and preferences
1.2 billion people have utilised apps in their daily life [25]. and the ability for the application to adapt itself

 Design for small device: provide suitable design

automatically to the user's current environment.
C. Designing user interface

 Design for limited and split attention: need to ensure

The User Interface (UI) is an important and critical according the screen size.
element for every application [26]. UI is the mediator of the
interaction between the user and the application [27][28], and that it is designed specifically to reduce distraction.
  Design for speed and recovery: application should considered as the two top Smartphones in the world when this
be up running quickly and allow application to stop, study was conducted.


start or resume with little effort.
The search keywords “Higher Education” were used in
Design for "top down" interaction: presenting both stores, App Store and Play Store, to browse for suitable

necessary and important information. mobile learning applications. Initially, more than 400 free
Allow for personalization: personalize device and and paid applications related to education were identified. Of

app to his/her preferences. these 400 applications, 56 relating to student management
Design for enjoyment: attractive and interactive UI. systems were selected by reference to the differences in UIs
Another set of guidelines is 7 Usability Guideline for and descriptions as well as their reviews, before downloading
Website on Mobile Device [34], which can be related to the them into the Smartphones. Out of the 56 downloaded
UI’s usability features. The seven criteria are: applications, 12 were chosen for this study (6 in Android and


6 in iOS) based on observations on their UI, menu, content,
Meet users’ need quickly; just in time information.

and first-time interaction when the applications were
Do not repeat navigation on every page; consistent accessed.


navigation and make it easier to access.
The six applications downloaded into the iOS were
Clearly distinguish selected item; focus on the
Northumbria University (NU), Newcastle University (NCU),

desired item/text with ease.
University of California (UCSD), Kensington and Chelsea
Make user input as simple as possible; provide
College (KCC), Miami University (MU) and University of

selection instead entering text input.
Southampton (US). The six downloaded into the Android

Only show essential information. were University of Alabama (UA), Deakin University (DU),

Place basic browsing controls on the page. High Point University (HPU), University High School
Design a mobile-friendly page layout with a well- (UHS), University of Kansas (UK) and The University of
managed layout and content arrangement. Newcastle Australia (UNC).
These guidelines clearly cited significant points in terms B. Context of use
of designing effective UIs. They all agree that it is important
to have a consistent approach to colour, size, logo, etc. and The twelve apps were assessed based on five aspects,
they emphasise the importance of personalisation, where the namely 1) user group (Table I), 2) task, 3) technical
user can enjoy using the UI by personalising it to reflect their environment, 4) physical environment and 5) organisational
interest. In addition, the information should be straight to the environment, all combined in one table (Table II). These five
point and essential facts and information should be easy to aspects were divided into a few suitable elements according
view. Indeed, designers have to meet users’ requirements by to the basis of this research, which is to observe and obtain
providing concise information and only focusing on the UI features from the available applications.
relevant item. However, these guidelines have a clear gap, From the results of Table I and Table II, it can be
which will be covered in this paper considering educational summarised that each application has some similarities in
domain. The following section presents the methodology appearance in menus, news, events, maps, university
used and the analysis. information and the use of iconic design landing pages.
Below are 10 major points for UI characteristics based on the
results of Table I and Table II:
III. METHODOLOGY AND ANALYSIS 1. At least 6 to16 main menu items are required on the
This study was implemented in two stages by utilizing the landing page of each application.
Human-Centered Design Process model (HCD) (ISO, 1999) 2. Icons are the main choice in terms of a main menu’s
as reference and the HCD classification model by [35]. The design.
first stage of the study involved planning and scoping, 3. Content must use simple and compact (straight to
context of use and requirements, which focused on the the point) language.
available planning, structure analysis, opinion and the effect 4. Do not use many levels of sub-menu.
of guidelines on the chosen application. The second stage 5. The integration of news, events, social apps (FB,
focused on the design and evaluation of the 10 UI elements Twitter, YouTube etc.) is necessary in the UI.
for the use of mobile learning apps which were created in the 6. Priorities design pattern in the form of spring board
first stage. Stage one will be discussed in this paper while the and list menu to facilitate the process of learning
second stage will be published in a future paper. activity.
7. A combination general knowledge and application
A. Planning and scoping knowledge is required.
This research involved two types of Smartphones; HTC 8. Integration with web apps or third party software
M8 with Android 4.2.2 OS (Super LCD3 1080x1920px, 4.7 need to be considered
inch screen, 32 GB internal memory), and iPhone 5s with iOS 9. Notification is an important element which needs to
6.1.3 OS (LED-backlit IPS LCD, 640x1136px, 4.0 inch be highlighted
screen, 32 GB internal memory). These were selected based 10. The need for two way communication between
on their OS's ability in mobile application management and a application and user has to be strengthen
research on Smartphone market reported that they were
 TABLE I. USER GROUP User Group Focuses
App
s Language
User Group Focuses Learning Affordances Clarity of purpose
App skill required
s Language second page (swipe). Menu: background. Up to
Learning Affordances Clarity of purpose
skill required
cloud connection and Straight to the date integration
Content:
social feeds menu on point (cloud and feed).
9 main menus (icon) Simple and A simple UI,
the landing page.
on landing page, compact and straight to the point,
10 main menus on An attractive,
general information, easy to does not involve
NU the landing page. 4 in modern and
more interactions on understand many sub menus
the bottom interface dynamic UI.
the introduction and Menu: (maximum 3 levels Content:
and the rest in the Youngsters student
general news Simple and of menu) Compact and
middle. Have news, would be like this
direct UNC simple Menu:
information for app. Easy to interact
10 Main menus on Content: A simple UI which Clear and
social up to date and with content and
the left of the page. Simple and is very straight simple
location guide menu this app have a clear
Does not include in easy to forward. Must click
NCU to guidance students direction in term
depth learning understand. on the left of the
in the university. interactivity.
interaction. More of Menu: page to menu
16 sliding iconic A heavy UI.
a general application. Simple selection
menus in the middle Content: Interaction looks
Content: A very straight
of landing page and 4 Compact and messy and unclear
17 main menus Simple and forward UI. The
shortcut menu in the lengthy interactivity. Well
(icon) on the landing easy to advantage; has a UK
bottom. Hidden Menu: organized for social
UCS page. Information is understand. social menu feature
menu on the left side Simple but interaction besides
D more about the Menu: such as twitter,
which is the same as confusing not suitable for UI
university’s Simple but it maps, dining and
the middle menu. design pattern.
environment. is a little shuttles which can
3 parts menu appears
confusing. be used any time.
on the left of the
Content:
The UI is different page. Recent news Content:
5 main menus (icon) Simple and A heavy UI for first
with others. A nice are on the landing Lengthy and
on the bottom bar. compact also time users. The
US feature of this app is page to provide compact.
Video and event on easy to UHS information space is
available on the current news for Menu: Clear
landing page. understand filled with recent
"search" engine. students when they and straight to
Menu: simple news
access this app. the point.
An attractive and Minimal information
8 main menu (icon), modern UI. Involves & content.
Content:
attractive on the a few sub menus,
Simple and
landing page, which are quite
easy to TABLE II. TASK, TECHNICAL, PHYSICAL & ORGANIZATION
attractive social lengthy. Social
KCC understand.
integration which information, gallery U
Menu: N K H U U
provides user with and learning feature N C U M U D U
Simple and Description C C P N H
social feature besides is good and enable U S S U A U K
meaningful. U C U C S
informative facility. learner to focus for D
a long time. Task
6 main menus on the A modern UI which
Content: A news menu for
landing page, 7 slide facilitates
Simple and user to follow x x x x x x x x x x
menus to facilitate interaction.
easy to current happenings
interaction. Unique Interactive map
MU understand. An event menu
and does not need directories. A
Menu: event for
many sub menu and compact content x x x x x x x x x x
Simple and university/school
can access any menu which focuses on its
meaningful activities
when needed. objective.
A notification to
Standard UI spring x
Content: alert students
board design pattern
Simple and App related to
12 main menus on with logo on landing x x x x x x x x x x x x
easy to explicit knowledge
the landing page and page. Dynamic
UA understand App related to
additional 5 menus interaction with
Menu: student x x x x x x x x x x x
on second page. black and white
Straight to the management
basic colour plus red
point App takes x x x x x x x x x x x
for the contrast.
A simple UI with an App takes >10
advantage in sharing seconds to load
12 main menus x
Content: information to landing page with
(icon) on landing wifi connectivity
Simple and widen the
page and 5 menus
easy to university’s scope. Technical Environment: Social intergration ability
which are fixed at the
HPU understand. Integration of live Facebook x x x
bottom of the page.
Menu: map with other You Tube x x x x x x x x
Have multimedia and
Simple and multimedia Twitter x x x x x x
sharing information
meaningful components made Flick, Picas etc. x x
(social integration).
this app looks very Google map etc. x x x x x x x x x
dynamic. Contact
18 selected menus; 9 Content: A dynamic and information (form, x x x x x x x x x x
DU on the landing page Simple and modern UI with number etc.)
and the other 9 on meaningful graphical image
 U Elements Characteristics
N K H U U
N C U M U D U
Description C C P N H Providing necessary information [22], Only show
U S S U A U K
U C U C S Informative essential information [34], Offer informative
D
Enable social feedback [5]
x x x x Navigation should be simple and clear [22],
sharing
Web base Interactivity Permit easy reversal of actions [5], Place basic
x x x x x x x x x browsing controls on the page [34]
integration
3 rd
party Design mobile friendly page layout [34],
x x x x x x x x x User friendliness Application should be user friendly [22], Design
integration
for enjoyment [8]
Can be used online x x x x x x x x x x x x
Cater to universal usability [5], Design for
Can be used offline Conprehensiveness
multiple and dynamic contexts [8]
Hanging, broken
x x Strive for consistency [5], Don't repeat the
link etc.
navigation on every page [34], Similar actions
Physical environment Continuity
and information need to be located in similar
UI design pattern: positions [22]
Springboard (SB), Allows personalization [8], User control of the
List menu (LM), Personalization learning application [22], Support internal locus
Tabs (T), Gallery of control [5]
(G), Dashboard S S S S S S S S A Flexibility on the display and Reduce frequent
(DB), Metaphor L Internal scrolling [22], Design for small device [8],
B B B B B B B B P
L M L
(M), Mega menu ,
M
,
,
, , , , , , ,
M
Prevent errors [5]
(MM), Page L L L L L L L L L
T
M M M M M M M M M
carousel (PC), IV. RESULT AND DISCUSSION
Image Carousel
(IC), Expending The variation of characteristics in the UIs can be clearly
list (EL), Anti seen in our analysis. There are two principal outcomes of
pattern (AP) the analysis; 1) the results of research on existing mobile app
Uses icon represent UIs, and 2) the results of categorisation of existing UI
x x x x x x x x x x
menu
guidelines. The positive impact of these outcomes can
App can be used
with one hand
x x x x x x x x x x x x provide a new dimension to the UI itself, especially in the
Organizational environment development of new UIs. Once the categorisation was
Two way
completed by taking into account the two findings, the 10 UI
communication Elements were highlighted for future UI development. Each
x x x x x x
between user and element has its own characteristic and they promise
app flexibility based on the context of use in the development of
Content structure UIs. These 10 UI Elements will be able to be used as a
x x x x x x x x x x
organized and tidy guideline to create a new dimension of future UI
App’s term and
policy of use
x x x x developments (Table IV).

C. Requirement TABLE IV. 10 UI ELEMENTS

This phase assessed and categorised four existing UI Elements Characteristics
guidelines according to their common characteristics, namely
Meet users need quickly, Speed and recovery,
1) The Eight Golden Rules of Interface Design [5], 2) User Connectivity
Notification, Communication
Interface Design Principle [22], 3) 7 Usability Guideline for Reduce memory load, Minimalism information,
Mobile Device [34], and 4) Additional Guideline for Mobile Simplicity
Limited and split attention, Simple user input
Device Design [8]. These were used as a point of reference Directional
Top down interaction, Sequences of action,
and compared with the selected 12 applications. Thirty Clearly interaction, Iconic design
characteristics were obtained from these four guidelines and Informative necessary and essential, feedback
were divided into 10 elements according to the four Simple and clear navigation, easy reversal of
guidelines’ common points. The 10 elements are presented in Interactivity
actions, 6-16 main menu, Easy to navigate
the following Table (III). User friendliness Layout, Application, Language required
Universal usability, dynamic contexts,
TABLE III. 10 UI ELEMENTS BASED ON 4 EXISTING UI GUIDELINES Comprehensiveness
integration
Consistency, Do not repeat the navigation,
Elements Characteristics Continuity
Similar actions and positions
Meet users need quickly [34] , Design for speed
Connectivity Personalization User control, Support internal locus of control
and recovery [8]
Reduce short-term memory load [5], Decrease Flexibility on the display, Design for small
textual information [22], Design for limited and Internal device, Reduce scrolling frequently, Prevent
Simplicity
split attention [8], Make user input as simple as errors
possible [34]
Design for top down interaction [8], Design
Directional dialogs to yield closure [5], Clearly distinguish The first element is connectivity, which is the ability to
selected item [34] access information quickly within a short time frame. It also
enables the application to be stopped, started and resumed V. CONCLUSION AND FUTURE WORK
with little or no effort [8]. The systematic analysis followed in this research helped
The second element is simplicity, which encompasses to verify the characteristics of a mobile learning UI by
three characteristics. The first characteristic is to reduce analysing and aligning the four existing UI guidelines in
memory load by use of a simple design arrangement (content, relation to twelve existing mobile learning applications. The
menu etc.) which makes the application easy to remember findings present ten UI elements which will help designers to
and enables better focus by the user. The second is a minimal design and develop a mobile learning application using the
information feature with compact information, which is new sets of guidelines. In order to prove the effectiveness of
concise so that the user does not need much time to read it. the 10 UI elements, further studies need to focus on the
The third characteristic is divided attention; the UI should not development of prototype applications using these elements
have a very complex design because “users of mobile devices as a guideline. Then analysis of the applications will be
often need to focus on more than one task” [36]. needed by collecting learners’ and experts’ views and
comments. This study was limited to the examination of only
The third element is directional, which means the twelve applications. By considering a greater variety and
ability of an application to navigate the user through a step- number of applications, further study will examine the
by-step process or menu, or any procedure which requires applicability, utilisation and generalisation of the 10 UI
related information to be retrieved via the application. elements in other domains.
The fourth element is informative. It is a crucial
requirement to convey necessary and essential information
and it is one of the most valuable features in UI. Indeed, REFERENCES
widespread information can be conveyed if it is combined
with a suitable structure [37].
[1] ABI Research, “Android Will Account For 58% Of Smartphone App
The fifth element is interactivity; the communication Downloads In 2013, With iOS Commanding A Market Share Of 75%
between a human and a computer. There are a few relevant Tablet Apps,” 2013. [Online]. Available:
http://www.abiresearch.com/press/android-will-account-for-.
characteristics within this element. One of them is simple and [Accessed: 18-Jun-2015].
clear navigation as asserted by [22]. This requirement enables [2] L. Johnson, B. S. Adam, M. Cummins, V. Estrada, A. Freeman, and H.
users to use the app in any situation. In addition, the number Ludgate, “NMC Horizon Report: 2013 Higher Education Edition,”
of menus on the landing page also needs to be considered in Austin, Texas, 2013.
order not to make the landing page too cramped and cause the [3] J. Nielsen, “Mobile Site vs Apps: The Coming Strategy Shift,” 2012.
loss of the interactivity element. [Online]. Available: http://www.nngroup.com/articles/mobile-sites-
vs-apps-strategy-shift/. [Accessed: 16-Jun-2015].
The sixth element is user friendliness. This element [4] D. Laurillad, “Pedagogical forms for mobile learning,” in Mobile
needs specific attention in every developed app. For effective learning: towards a research agenda, 2007th ed., N. Pachler, Ed.
learning it is essential to create a user friendly UI to obtain a London: WLE Centre, 2007, pp. 153–175.
good and trustworthy user experience [38]. [5] B. Shneiderman and C. Plaisant, Designing the user interface: strategis
for effective human-computer interaction, 5th ed. USA: Addison-
The seventh element is comprehensiveness. The Wesley, 2009.
application is required to form a comprehensive set of [6] S. Bodker, Through the interface : a human activity approach to user
elements which facilitates transformation of content [5]. This interface design. New Jersey: Lawrance Erlbaum Associates, Inc.,
gives the user an opportunity to manage the app according to 1991.
the user’s own ability and understanding. [7] P. H. Bloch, “Seeking the ideal form: product design and consumer
response,” J. Mark., vol. 59, no. 3, pp. 16–29, 1995.
The eighth element is continuity. A good UI is a [8] J. Gong and P. Tarasewich, “Guidelines for handheld mobile device
consistent in its interactions [32]. Consistency will help users interface design,” in Proceedings of DSI 2004 Annual Meeting, 2004,
to form their perception and interpretation of the app [33], pp. 3751–3756.
and will provide a large space for information dissemination. [9] N. Z. B. Ayob, A. R. C. Hussin, and H. M. Dahlan, “Three layers
design guideline for mobile application,” in Proceedings - 2009
The ninth element is personalisation. "Experienced International Conference on Information Management and
users strongly desire the sense that they are in charge of the Engineering, ICIME 2009, 2009, pp. 427–431.
interface and that the interface responds to their actions" [5]. [10] N. Safie, “The use of short messaging system (SMS) as a
Thus it will give them control in the form of discretion to supplementary learning tool in Open University Malaysia (OUM),” in
18th Annual Conference Association Of Asian Open Universities
organise and conduct their learning activities. (AAOU), 2004, pp. 1–11.
The last element is internal. Every UI needs a few [11] S. B. Wegner, K. C. Holloway, and E. M. Garton, “The effects of
Internet-based instruction on student learning,” J. Asynchronous
important criteria before it is developed. It needs to be Learn. Networks, vol. 3, no. 2, pp. 98–106, 1999.
classified according to the device ability and the ability of the
[12] D. S. K. Seong, “Usability guidelines for designing mobile learning
developed application. Error prevention is one of the portals,” Proc. 3rd Int. Conf. Mob. Technol. Appl. Syst. - Mobil. ’06, p.
characteristics of the internal element. Every error which 25, 2006.
could occur is required to be tracked or predicted in advance. [13] A. Moura and A. A. Carvalho, “Mobile Learning: Teaching and
Learning with Mobile Phones and Podcasts,” 2008 Eighth IEEE Int.
Conf. Adv. Learn. Technol., pp. 631–633, 2008.
[14] R. Hellas, “Mobile communication and intermediality,” Mob. Media
Commun., vol. 1, no. 1, pp. 14–19, 2013.
[15] W. Ng and H. Nicholas, “A framework for sustainable mobile learning the international ACM SIGGROUP conference on Supporting group
in schools,” Br. J. Educ. Technol., pp. 1–21, 2012. work - GROUP ’99, 1999, pp. 276–285.
[16] M. Sharples, “The design of personal mobile technologies for lifelong [37] D. Laurillad, Rethinking University Teaching: A Framwork For The
learning,” Comput. Educ., vol. 34, pp. 177–193, 2000. Effective Use Of Learning Technologies, 2nd ed. London: Routledge,
[17] M. Sharples, D. Corlett, and O. Westmancott, “The design and 2002.
implementation of a mobile learning resource,” Pers. Ubiquitous [38] T. R. Chang, E. Kaasinen, and K. Kaipainen, “Making place to make
Comput., vol. 6, no. 3, pp. 220–234, 2002. IT work: Empirical explorations of HCI for mobile CSCW,” in 11th
[18] S. H. Kim, C. Mims, and K. P. Holmes, “An Introduction to Current International Conference On Mobile And Ubiquitous Multimedia,
Trends and Benefits of Mobile Wireless Technology Use in Higher 2012.
Education,” AACE J., vol. 14, no. 1, pp. 77–100, 2006.
[19] A. Kukulska-Hulme, “Mobile usability in educational context: what
have we learnt?,” Int. Rev. Res. open distance Learn., vol. 8, no. 2, pp.
1–16, 2007.
[20] T. Wilen-Daugenti, Edu: technology and learning environments in
higher education. New York: Peter Lang Publishing, 2009.
[21] C. J. Bonk and D. J. Cunningham, “Searching for Learner-Centred,
Constructivist, and Sociocultural Components of Collaborative
Educational Learning Tools,” in Electronic Collaborators. Learner-
centered Technologies for Literacy, Apprenticeship, and Discourse,
1998th ed., C. J. Bonk and K. S. Kings, Eds. New Jersey: Lawrence
Erlbaum Associates, 1998, pp. 25–50.
[22] M. Seraj and C. Y. Wong, “A Study of User Interface Design Principles
and Requirements for Developing a Mobile Learning Prototype,” 2012
Int. Conf. Comput. Inf. Sci., pp. 1014–1019, 2012.
[23] D. Harnish, C. Ling, and R. Shehab, “Leveraging the use of mobile
applications to increase knowledge retention in a classroom lecture,”
Proceeding Hum. Factors Ergon. Soc. Annu. Meet., vol. 56, no. 1, pp.
610–614, 2012.
[24] Canalys, “Top iOS and Android Apps Largely Absent On Windows
Phone and BlackBerry 10: App quality not quantity now needs to be
the priority for Microsoft and BlackBerry,” 2013. [Online]. Available:
http://www.canalys.com/newsroom/top-ios-and-android-apps-largely-
absent-windows-phone-and-blackberry-10. [Accessed: 17-Jun-2015].
[25] P. Research, “Fast Growth Of Apps User Base In Booming Asia Pacific
Market,” 2013. [Online]. Available:
http://www.portioresearch.com/en/blog/2013/fast-growth-of-apps-
user-base-in-booming-asia-pacific-market.aspx. [Accessed: 18-Jun-
2015].
[26] P. Tarasewich, “Designing mobile commerce applications,”
Communications of the ACM, vol. 46, no. 12. p. 57, 2003.
[27] L. Vertelney and S. Booker, “Designing the whole product user
interface,” in The art of human-computer interface design, 1st ed., B.
Laurel and S. Mountford, Eds. New York: Addison-Wesley Longman
Publishing Company, 1990, pp. 57–63.
[28] P. H. J. Chong, P. L. So, P. Shum, X. J. Li, and D. Goyal, “Design and
implementation of user interface for mobile devices,” IEEE Trans.
Consum. Electron., vol. 50, no. 4, pp. 1156–1161, 2004.
[29] G. Marchionini, Information seeking in electronic environments, 9th
ed. Cambridge University Press, 1997.
[30] J. Forlizzi and K. Battarbee, “Understanding Experience in Interactive
Systems Understanding Experience in Interactive Systems,” Human-
Computer Interact. Inst., no. Paper 46, pp. p261–268, 2004.
[31] S. Kim, “Logical User Interface Modeling for Multimedia Embedded
Systems,” in Multimedia, Computer Graphic and Broadcasting (Part
2), Berlin: Springer, 2011, pp. 1–8.
[32] Y. E. Lee and I. Benbasat, “Interface design for mobile commerce,”
Communications of the ACM, vol. 46, no. 12. p. 48, 2003.
[33] W. O. Galitz, The essential guide to user interface design: an
introduction to GUI design principles and techniques, 3rd ed. New
York: Wiley Computer Pub, 2007.
[34] A. Warsi, “7 Usability guidelines for websites on mobile devices,”
2007. [Online]. Available: http://ulabasia.com/wp-
content/uploads/2010/05/7-usability-guidlines-for-websites-on-
mobile-devices.pdf. [Accessed: 17-Jun-2015].
[35] M. Maguire, “Methods to support human-centred design,” Int. J. Hum.
Comput. Stud., vol. 55, no. 4, pp. 587–634, 2001.
[36] S. Kristoffersen and F. Ljungberg, “Making place to make IT work:
Empirical explorations of HCI for mobile CSCW,” in Proceedings of