This paper examines the types of mobile user interface. A methodology for developing user interface for mobile learning applications is proposed. The requirements for mobile user interface are defined and a concrete approach for realisation is suggested. INTRODUCTION Nowadays mobile devices become more widespread and are increasingly used for many purposes. Fewer customers worldwide use mobile devices only as a single function unit. Gradually these devices become a platform for a wide range of applications-shooting and sending photos, listening to music, watching video, receiving GPS information, obtaining information from Internet and others. The mobile devices also provide an opportunity for the realisation of mobile learning. User Interface (Human Machine Interface) includes the methods by which the users interact with a device. The user interface provides two basic options [8]: • Input, through which users can control and interact with a device; • Output, which reflects the users' actions.

ResearchGate Logo

Discover the world's research

  • 20+ million members
  • 135+ million publications
  • 700k+ research projects

Join for free

e-Learning'09

- 145 -

User Interface Design for Mobile Learning Applications

Tsvetozar Georgiev, Evgeniya Georgieva

Abstract: This paper examines the types of mobile user interface. A methodology for developing

user interface for mobile learning applications is proposed. The requirements for mobile user interface are

defined and a concrete approach for realisation is suggested.

Key words: Mobile Learning, User Interface, Human-Computer Interaction

INTRODUCTION

Nowadays mobile devices become more widespread and are increasingly used for

many purposes. Fewer customers worldwide use mobile devices only as a single

function unit. Gradually these devices become a platform for a wide range of

applications - shooting and sending photos, listening to music, watching video, receiving

GPS information, obtaining information from Internet and others. The mobile devices

also provide an opportunity for the realisation of mobile learning.

User Interface (Human Machine Interface) includes the methods by which the

users interact with a device. The user interface provides two basic options [8]:

• Input, through which users can control and interact with a device;

• Output, which reflects the users' actions.

The development of user interface for applications for mobile devices - cell

phones, smart phones, PDAs (Personal Digital Assistants) and super phones deserves

special attention, as they have some limitations, most important of which are less

screen resolution and smaller keyboard than the desktop computers [6, 7]. This is the

reason why the user interface for mobile applications (Fig.1), including these for mobile

learning, should be well designed and implemented.

Fig.1. Mobile user interface

The paper examines a methodology for developing of user interface for mobile

learning applications, the requirements for this interface are determined and a concrete

approach for implementation is suggested.

LAYOUT

1. Types of mobile user interface

At present, two main types of mobile user interface are used:

• Graphical user interface (GUI) takes user's input information through various

mobile computer keyboards (virtual, mini-QWERTY, foldable) and/or pointing

methods which react to the screen. The GUI displays relevant information on

e-Learning'09

- 146 -

the screen of the mobile devices.

• Web-based user interface accepts a user request, transmits it to web server,

receives response and displays the information on the mobile device screen

using mobile web browser.

2. User interface design

User interface design or user interface engineering is the design of computers,

appliances, machines, mobile communication devices, software applications, and

websites with the focus on the user's experience and interaction [8]. The main purpose

of the traditional graphic design is to make a product attractive while the goal of the user

interface design is to facilitate the user-application interactivity and to increase the

effectiveness of the user's work.

Development of user interface for mobile application is a part of the overall process

of design and development of a separate mobile learning application or of complete

mobile learning management system [3]. Most often at this stage a graphic designer, a

user interface designer and a programmer work together.

There are several iterative stages during the development of the user interface for

mobile applications:

• Analysis of potential users;

• Definition of the functional requirements to the user interface depending on the

purpose of the application and the potential needs of the users;

• Development of a navigation scheme of the application;

• Development of a prototype in the form of a simple interactive screens, which

include basic information - text, graphics, audio and video;

• Testing with emulators - testing the prototype with appropriate emulators for

mobile devices (embedded in the development environments or provided by

other developers);

• Usability testing - testing the prototype with real users from different groups [5]

using mobile devices;

• Development of final version of the user interface. The results of testing with the

emulator and/or testing with real users may be taken into account. If it is

necessary the architecture of the application can be changed. In some cases it

may be necessary to develop different graphic templates for different screen

resolutions.

3. Designing for different screen resolutions

Development of user interface for personal computers is easier than for mobile

devices because of the following reasons:

• PCs support higher resolution (at least 1024x768 pixels);

• PCs have a full size keyboard;

• The users can use mouse as a pointing device.

The great diversity of supported screen resolutions (Fig.2) - from 128x160 pixels to

480x800 pixels, and methods by which the users can interact with applications and to

input information in mobile devices is observed.

If a web-based user interface is developed one solution is to provide recognition of

the web-browser and the resolution of the device and to implement adaptation of the

information for the purpose of appropriate visualization. It is also recommended to group

some resolutions to reduce the number of supported resolutions and to reduce the

complexity in the development of different design of user interface [1].

e-Learning'09

- 147 -

320x480

240x320

176x220

128x160

Fig.2. Mobile devices main screen resolutions

Development of a graphical user interface of a mobile application for all platforms

and resolutions at this time is a difficult task. In general a mobile application for concrete

platform and resolution is developed.

4. Mobile navigation paradigms

At present a variety of navigation schemes for e-learning systems are applied.

Very often a tabbed navigation and/or menus navigation located in left and right sides of

the main content (Fig.3a) are used. They are suitable for use in PCs, Notebook and

Netbook computers that have high screen resolution, full sized keyboard and mouse.

a) b)

Fig.3. Most used navigational schemes

a) for personal computers; b) for mobile devices

These popular schemes are not applicable to mobile devices since they have a

small screen, small keyboard and limited methods of navigation.

Preferred method during the development of mobile navigation schemes for mobile

phones is using a numbered vertical list of options which are associated with the

corresponding numbers (0-9) from the phone's keypad [1].

e-Learning'09

- 148 -

During the development of navigation for PDAs or smart phones more modern

methods of navigation can be applied. However, the orientation of the screen should be

taken into account, as most of mobile devices still work in a vertical mode and they

cannot display text in several columns. It is recommended that the navigation scheme

support two fields with navigation - at the top and bottom of the screen (Fig.3b) and the

information is visualised between them [1].

5. Requirements for realisation of user interface for mobile learning

applications

The following requirements to the user interface of mobile learning applications

can be defined:

Regarding the navigation:

• The navigation should be intuitive, located at the top and/or bottom of the

screen and must support work with mobile device keyboards.

• To reduce re-visualization of the main menu and submenus of each screen

(page) it is appropriate to place them on individual screens and the navigation

must support links to these screens.

• The navigation buttons should be large enough to work with them using stylus

or touch screen.

• The navigation elements should be visualised in the same way on mobile

devices with different screen resolution.

• It is better to provide a choice of several options, rather than to enter the text

[6].

Regarding the multimedia elements:

• The length of the text must be consistent with the size of the screen and not

more than 3 times the height of the screen [6].

• Horizontal scrolling of the text must be avoided.

• A possibility to change the font size must be provided. This will give an

opportunity to users to increase or decrease the font size when it is needed, as

the text with small font size is difficult to read [4].

• Due to the lower screen resolution serif text fonts should be used.

• The text should be easily reading and for this purpose it should be contrast on

the background.

• The size of graphic images (in pixels) must be consistent with the size of the

screen.

• It is appropriate to separate graphics from the text - for example on separate

screens (pages) which to be displayed only by user's request. This will increase

the speed of loading pages containing mainly text information.

• If the application includes audio and it is intended to be controled by the user, it

is appropriate to provide a separate screen on which the control elements to be

arranged.

• If the application includes video a separate screen for its reproduction also has

to be provided.

Regarding the verification of users' knowledge:

• In the implementation of tests is appropriate that the questions and tasks to

appear on separate screens.

• It is best to use "true-false" or "multiple choice" questions types. If "fill in the

blank" type is used, the text that users must type in should not be too long.

• If during the tests a specific time for their completion is given, it must be greater

e-Learning'09

- 149 -

of the time that is given to the same tests, but performed on personal

computers. In literature source [2] is determined that the text entry speed in

mobile devices is about 3 times lower than that of PCs.

6. Realisation of user interface for mobile learning applications

Thus defined requirements are used in the realisation of the user interface for

mobile applications for teaching the course "Multimedia systems and technologies".

These applications are developed using Adobe Flash.

Fig.4 shows screens of a mobile multimedia application for training on theme

"Audio". On Fig.4a and Fig.4b is shown the ability to change text font size. On the same

screens there is a link to other screen (Fig.4c) on which the user can see the image

associated with the text.

a) b) c)

Fig. 4. Screens from multimedia mobile learning application "Audio"

Fig.5 shows relevant screens for audio control (Fig.5a), for video control (Fig.5b)

and for testing students' knowledge (Fig.5c).

a) b) c)

Fig. 5. Screens from multimedia mobile learning application "Audio"

CONCLUSIONS AND FUTURE WORK

The user interface for mobile devices is crucial in the development of mobile

learning applications. The well designed user interface of a mobile application can

e-Learning'09

- 150 -

attract customers while the good functionality and learning content can keep them to

use it.

The proposed methodology and the defined requirements can be used for

development of a graphical user interface as well as for development of web-based

interface for mobile learning applications.

They are practically implemented during the development process of series of

multimedia mobile applications for training students at the University of Ruse in the

subject "Multimedia Systems and Technologies".

REFERENCES

[1] Cremin, R. et al. DotMobi Mobile Web Developer Guide, mTLD, Ireland, 2007.

[2] Georgiev, T., E.Georgieva. Investigation of the Text Entry Speed and Accuracy

in Mobile Devices, Proceedings of the CompSysTech'2009, Rousse, Bulgaria, June 18-

19, 2009.

[3] Georgieva, E., A.Smrikarov, M.Teodosieva. Mobile Learning Systems

Development Methodology. Proceedings of the Second International e-Learning

Conference, September 6-7, Berlin, Germany, 2005. Gent, Belgium, 2005, pp.135-147.

[4] Gong, J., P.Tarasewich. Guidelines for Handheld Mobile Device Interface

Design, http://www.ccs.neu.edu/home/tarase/GuidelinesGongTarase.pdf

[5] Hussain, Z. et al. User Interface Design for a Content-aware Mobile Multimedia

Application: An Iterative Approach, MoMM 2007 & iiWAS 2007 Workshops

Proceedings, pp.115-120.

[6] Tobar, L.M. et al. WebA Mobile (Web Analysis Mobile): Assistance Tool for the

Design and Evaluation of Websites for Mobile Devices. New Trends on Human–

Computer Interaction, Springer-Verlag, 2009, pp.127-139.

[7] Tselios, N. et al. Design for Mobile Learning in Museums, Handbook of

Research on User Interface Design and Evaluation for Mobile Technology, Volume 1,

Information Science Reference, USA, 2008, pp.253-269.

[8] User Interface and Design, http://www.scribd.com/doc/2409206/User-Interface-

Design

ABOUT THE AUTHORS

Assoc. Prof. Tsvetozar Georgiev, PhD, Department of Computing, University of

Rousse, Phone: +359 82 888 827, Е -mail: TGeorgiev@ecs.ru.acad.bg

Evgeniya Georgieva, MSc, Department of Computing, University of Rousse,

Phone: +359 82 888 577, E-mail: EGeorgieva@ecs.ru.acad.bg

... Smartphones are becoming an essential tool and play an important role in our daily lives. Georgiev and Georgieva have argued that mobile devices are becoming more common and are increasingly used for many purposes [10], [11]. Saracevic et al. also addressed that the mobile phones can be used anywhere, therefore it can be used as a medium for learning [12]. ...

... In this part, the user interface of the BKK Bus Stop is detailed briefly. As stated by Georgiev and Georgieva [10], the most important aspect of interface design is to make it simple and clear for users. The screen sequence is also important as it leads the users through the different screens needed to get to the important information [17]. ...

The main objective of this work is to develop a mobile application for bus routes on the iPhone for travelers who are unfamiliar with bus routes in Bangkok and the nearby provinces. The application, referred to as "BKK Bus Stop", is designed to facilitate users with information, such as bus maps, bus schedules, and bus numbers. If the application can detect the current location of the user, then it displays the user's location on the map. Bus stops information of each bus number is provided in the application when passengers enter the destination and select a particular bus. Moreover, details of the application development on iOS is presented as well as the Parse-server application, which stores bus route databases of the Bangkok Mass Transit Authority (BMTA) and supports mobiles to ensure that the application works efficiency. Additionally, a user satisfaction survey concerning the use of the application was conducted on 30 users. The survey results indicate that the overall satisfaction of the application is good since it supports all of the required objectives.

... Mobile app development is a discipline of software development where applications conforming to the screen-size, computing power, battery power, and complex user-device interface is created [16]. Ever changing user requirements further impede the production of a quality app within the estimated budget [17]. Interface designing is a significant issue in mobile app development due to the inadequate data entry process, small screen size, and low resolution [18]. ...

The software development industry is largely influenced by the growing popularity of mobile applications (apps). Mobile apps are dynamic; therefore, classical software development approaches cannot be applied in this context. Specific needs of the customers, technology up-gradation, battery economics, and other factors force app developers to introduce new apps into the market regularly. But due to the unavailability of formal and customized practices for app development, various issues occur in mobile apps. These issues may adversely affect the user acceptance of the end product. In this paper, we identify twelve critical issues in mobile apps. We further apply interval type-2 fuzzy sets (IT2FS)-DEMATEL (Decision Making Trial and Evaluation Laboratory) method to analyze and divide these issues into cause and effect groups. It is evident from the results that various issues in mobile app development are interconnected and one issue can be the cause/effect of one or more issues. The compatibility issue is found to be the main causal issue initiating the impacts in other issues too. The next in the list is feature request and network connection issues. The objective of this research paper is twofold, firstly to identify the diverse issues related to the mobile apps, and secondly to successfully identify the severe issues where app development professionals and project managers could focus on. The results obtained by using the IT2FS-DEMATEL method are found to be consistent with other variants of DEMATEL.

  • Manjit Singh Sidhu Manjit Singh Sidhu

In this article, a study was done to compare the preferences of UNITEN students in using augmented reality technology user interface applications to solve selected engineering problems. Cross sectional study design and a Wilcoxon-Signed Rank Test approach was adopted to analyze the difference in the rankings of the engineering applications. Within a controlled environment, this research further applies "Trials within the same session but with breaks between tasks" an affirmed reliable method in measuring learnability that has been rarely explored by any related works locally. The results were captured through descriptive statistical analysis. The findings provided reliable evidences that multiple function user interface (MFIT) is more effective than the tangible user interface (TUI) for engineering students. Simultaneously, this research also presents evidences that MFIT is better than TUI in the engineering problem solving statistically.

  • Ankita Podder
  • Tanushree Bhadra
  • Rajeev Chatterjee Rajeev Chatterjee

User-interface plays an important role in e-learning. Good and user-friendly interfaces help in better understanding of the system and reduces the cognitive load of a learner during the process of learning. The advancement in mobile technology has influenced a number of users to learn using mobile and handheld device that provides not only flexibility of learning but also allow them for learning at any-time and any-where or on the go. This has already created a requirement of a user-interface design framework for mobile devices that can help the designers to design e-learning interface for the same. This paper proposes a user-interface design framework after understanding of the requirements at the level of a user for the mobile and handheld devices.

The paper presents an investigation of the Bulgarian and English text entry speed and accuracy in mobile devices. For this purpose specialised software was developed and used. A comparison with hand writing and text entry using a personal computer is made. The obtained results are compared with those of similar investigations. The appropriate conclusions are made.

Mobile phones have become full-featured mobile computers. Applications providing good user experience and taking full advantage of the increasing capabilities of mobile phones are still rare. One such application is audio and video on mobile phones which is expected to become a killer application in the near future. A lot of valuable audio and video content is hidden in archives of content providers. We are developing an application that enables a user to perform content-based search for audio and video content in large databases and play it on a mobile phone virtually anywhere, at any time. Our approach to application development focuses on the adoption of agile software development methodologies and user-centered design, emphasizing iterative user-interface development involving usability engineers and non-technical users. Thus, the application evolves according to the needs of the end user, providing maximized usability and customer satisfaction.

  • Jun Gong
  • Peter Tarasewich

While there has been much successful work in developing rules to guide the design and implementation of interfaces for desktop machines and their applications, the design of mobile device interfaces is still relatively unexplored and unproven. This paper discusses the characteristics and limitations of current mobile device interfaces, especially compared to the desktop environment. Using existing interface guidelines as a starting point, a set of practical design guidelines for mobile device interfaces is proposed.

  • Luis Mena Tobar
  • Pedro Latorre Andrés
  • Elena Lafuente Lapena

This chapter presents Mobile WebA (Assistance tool for the design and evaluation of sites for mobile devices), a new module of the WebA application developed by the Aragonese Usability Laboratory. This module facilitates the evaluation of usability and accessibility through the completion of the guidelines that are recommended by the best practices in the "W3C Mobile Web 1.0 Initiative," in addition to allowing the completion and analysis of relevant tests of user satisfaction.

Mobile Learning Systems Development Methodology

  • E Georgieva
  • A Smrikarov
  • M Teodosieva

Georgieva, E., A.Smrikarov, M.Teodosieva. Mobile Learning Systems Development Methodology. Proceedings of the Second International e-Learning Conference, September 6-7, Berlin, Germany, 2005. Gent, Belgium, 2005, pp.135-147.

Design for Mobile Learning in Museums, Handbook of Research on User Interface Design and Evaluation for Mobile Technology

  • N Tselios

Tselios, N. et al. Design for Mobile Learning in Museums, Handbook of Research on User Interface Design and Evaluation for Mobile Technology, Volume 1, Information Science Reference, USA, 2008, pp.253-269.

User-Interface-Design ABOUT THE AUTHORS Assoc. Prof. Tsvetozar Georgiev, PhD, Department of Computing

  • User Interface
  • Design

User Interface and Design, http://www.scribd.com/doc/2409206/User-Interface-Design ABOUT THE AUTHORS Assoc. Prof. Tsvetozar Georgiev, PhD, Department of Computing, University of Rousse, Phone: +359 82 888 827, Е-mail: TGeorgiev@ecs.ru.acad.bg Evgeniya Georgieva, MSc, Department of Computing, University of Rousse, Phone: +359 82 888 577, E-mail: EGeorgieva@ecs.ru.acad.bg

Mobile Learning Systems Development Methodology Proceedings of the Second International e-Learning Conference Guidelines for Handheld Mobile Device Interface Design

  • T Georgiev
  • E Georgieva Georgieva
  • A Smrikarov
  • M Teodosieva
  • P Tarasewich

Georgiev, T., E.Georgieva. Investigation of the Text Entry Speed and Accuracy in Mobile Devices, Proceedings of the CompSysTech'2009, Rousse, Bulgaria, June 18- 19, 2009. [3] Georgieva, E., A.Smrikarov, M.Teodosieva. Mobile Learning Systems Development Methodology. Proceedings of the Second International e-Learning Conference, September 6-7, Berlin, Germany, 2005. Gent, Belgium, 2005, pp.135-147. [4] Gong, J., P.Tarasewich. Guidelines for Handheld Mobile Device Interface Design, http://www.ccs.neu.edu/home/tarase/GuidelinesGongTarase.pdf [5] Hussain, Z. et al. User Interface Design for a Content-aware Mobile Multimedia Application: An Iterative Approach, MoMM 2007 & iiWAS 2007 Workshops Proceedings, pp.115-120.

DotMobi Mobile Web Developer Guide, mTLD, Ireland

  • R Cremin

Cremin, R. et al. DotMobi Mobile Web Developer Guide, mTLD, Ireland, 2007.

WebA Mobile (Web Analysis Mobile): Assistance Tool for the Design and Evaluation of Websites for Mobile Devices

  • L M Tobar

Tobar, L.M. et al. WebA Mobile (Web Analysis Mobile): Assistance Tool for the Design and Evaluation of Websites for Mobile Devices. New Trends on Human-Computer Interaction, Springer-Verlag, 2009, pp.127-139.