Wolkite University

College of Computing and Informatics

Software Engineering Department

Mobile Application Development

Chapter-Two: Factors in Developing Mobile Applications
By: M. Gemechu
 CONTENTS
❖Introduction

❖Mobile Software Engineering

❖Frameworks and Tools

❖Generic UI Development

❖Android User

❖More on UIs

❖Designing the Right UI

❖Multichannel and Multimodal UI

2
Introduction
❖With the increased usage of mobile devices across the world, more
and more applications are being targeted at them.
❖If an application that is developed for computers can also run on the
mobile devices, then the entire paradigm of application usage changes
as it enables the user to run application from wherever he is.
❖There were different standards on which the mobile networks are
based.
❖One of the popular standards is GSM.
❖In this unit, we introduce the GSM architecture.

3
Introduction …

❖GSM (Global System for Mobile Communications) is a set of mobile

communications standards and protocols governing 2G networks, first
developed and deployed in Europe.
❖The GSM architecture consists of three major interconnected
subsystems that interact with themselves and with users through
certain network interface.
❖The subsystems are Base Station Subsystem (BSS), Network
Switching Subsystem (NSS) and Operational Support Subsystem
(OSS).
4
Introduction …

5
Introduction …

❖There were a number of environments under which mobile

applications can be developed.
❖One of the popular environments is Java.
❖We introduce J2ME (Java 2 Micro Edition) in this unit in conjunction
with wireless application development with it.
❖Any application should be tested before being put to full-fledged use.
❖In this unit, Java Device Test Suite is introduced with the help of
which wireless applications can be tested.

6
Introduction …
❖Sun's Java Device Test Suite (JDTS) is the de facto industry-standard
tool for assessing the quality of Java Platform, Micro Edition (Java
ME platform) implementations.
❖This tool performs quality testing for devices using the Java ME
platform.
❖The JDTS helps device manufacturers and service providers ensure
their reputation for quality, while building customer satisfaction and
loyalty.
❖It helps lower engineering costs by standardizing and simplifying the
whole testing cycle.
7
Mobile Software Engineering
❖Mobile application development is the set of processes and
procedures involved in writing software for small, wireless computing
devices, such as smartphones and other hand-held devices.
❖Factors that influence your mobile app development process are:
▪ Distribution Channel
▪ Audience Research
▪ App Idea
▪ App Development Strategy
▪ User interface (UI) and user experience (UX)
▪ Testing, Security, and Monitoring.

8
Distribution Channel
❖As a developer, you must first identify which platform best supports
your grand idea.
❖Though Google Play Store and Apple App Store serve the same
function, they have different guidelines.
❖You can view the description, icon, logo, screenshots or image
gallery, and a snippet or a trailer of the app on both platforms.
❖However, there are few elements that differentiate one from the other.
❖For instance, businesses generate more income when they first release
their app on the App Store than in Google Play Store.

9
Distribution Channel …
❖In terms of description, Google Play Store gets more taps because of their
read more button is in a prominent position.
❖You can find the description hidden above the image gallery and
screenshots.
❖The App Store, on the other hand, optimizes their description for iPhone
screens.
❖You can read the description directly without needing to tap on a button or
scroll down.
❖Moreover, the platforms are also essential when thinking of other factors
such as monetization, security, and the availability of different types of
apps.

10
Audience Research
❖For your idea to become successful, you must first conduct audience
research.
❖Knowing your audience involves understanding the industry and
getting in-depth knowledge about the people that might take an
interest in your apps.
❖It is important because users tend to be diverse.
❖You must track the demographics of the users of your app.
❖If you want your app to solve a problem, you should not base your
decisions on assumptions.

11
App Idea
❖Unfortunately, not all ideas become great and successful once you
turn them into an app.
❖Remember that working on an app development project requires
money, effort, and time.
❖You must first check if your design is unique.
❖Most of all, you must be able to differentiate your idea from the
what’s already available on the platforms.
❖It must also be able to resolve the weaknesses of the existing
competitive apps.

12
App Development Strategy
❖To properly execute your app idea, you must have a solid app development
strategy.
❖It clarifies how much of the design work you will undertake for the app
development.
❖It covers your timeframe for working in the project.
❖It also factors in the technology you will use to develop your app idea.
❖Part of your app development strategy must include the strengths and
weaknesses of each mobile device.
❖If you over or underestimate in any of the factors, your app can end up
becoming a failure.
13
User interface (UI) and user experience (UX)

❖User interface (UI) and user experience (UX) are part of what keeps
users hooked on an app.
❖Users prefer apps that are “handier” compared to those that require
too much effort to operate.
❖Navigation and usability aren’t the only ones that matter to the users.
They are also receptive to several UI/UX factors.
❖For instance, an app with low-res images, slow loading times, broken
sign up/ login functionality and app navigation, and poor connectivity
to social profiles are all signs of poor UI/UX.
14
Testing
❖Developing and designing your mobile app idea is only half of the job
in your mobile app development journey.
❖You must also run a few tests to ensure your design runs smoothly.
❖It’s a way to secure that your mobile app has no exceptions and bugs.
❖You must also look into the app’s integrations and usability.
❖It’s also important to find out if your app is compatible with different
platforms and devices.
❖Most of all, you should test if the app functions properly at the user’s
end before going live.

15
Security

❖Security must be part of your app development process.

❖Users should not have to think of the threat of malware when they use
your app.
❖Thus, you should leverage the security features of the device’s OS.
❖You can also keep the user’s information safe through encryption.
❖You should also restrict your app’s permissions to a minimum.
❖Always prioritize security to ensure your app isn’t vulnerable to
external threats.

16
Monitoring
❖You still have work to do after you publish your mobile app.
❖You must be hands-on with fixes, performance improvements,
changes, and integrating new features.
❖As a developer, you must track crashes and look at technical
information to help you resolve the problems users encounter.
❖You can also check into analytics as well as recommendations and
reviews by users to see how well the market responds to your app.
❖The information you get from these platforms is what you need to
identify trouble spots and make room for improvement.

17
Monitoring …
❖Lifecycle management:
▪ Once an app is deployed, developers must test, host, deploy, maintain and
analyze its usage throughout its lifecycle.
▪ As a result, it’s important for developers to consider the long-term capabilities
and long-term costs of tools.
❖Delivery:
▪ Apps aren’t done when they go into production. They must be dependable.
▪ They must scale. They will need updating based on evolving requirements and
end user feedback.
▪ Developers need to make sure the tool they select will allow for easy upgrades,
updates, availability, scalability and performance.

18
Monitoring …

Mobile App Consideration

19
The main considerations for mobile app design
❖Intended utility of the mobile app:
▪ Consumer engagement with richer user experience.
▪ Productivity through efficient flows.
▪ Driving incremental revenue through user stickiness.
▪ Customer conversion
▪ User loyalty through targeted and personalized offers
❖App Architecture:
▪ Native vs hybrid vs web based on the requirements
▪ Middleware requirement for centralized configuration
▪ Offline vs online capability for storing data

20
The main considerations for mobile app
design…
❖App Development Principles:
▪ User experience through richer controls and interactive components
▪ Compatibility on various devices and platforms
▪ Performance for each screen and task
▪ Security for data o Productivity enhancement tools
❖Target users:
▪ Consumers for B2C apps
▪ Business for Business to Business (B2B) apps
▪ Partners for B2B apps o Employees for Business to Employee (B2E) apps

21
The main considerations for mobile app
design…
❖Testing:
▪ Device testing
▪ Performance testing
▪ Various testing scenarios

22
The main challenges in mobile app strategy
❖Diversity of devices and heterogeneous technologies:
▪ There are various mobile platforms and devices.
▪ The app should provide optimal experience in all the scenarios.
❖Security:
▪ Mobile app should ensure data security during transmission and during storage.
❖User experience:
▪ Mobile app should provide optimal user experience leveraging the device capabilities to
provide highest engagement possible.
❖Network:
▪ Mobile app should be designed to work in regions with network, latency and bandwidth
challenges.
❖Compliance to diverse standards, OS, mobile platforms and devices.

23
Frameworks and Tools

❖Mobile engineers design, develop, and implement software programs

for smartphones and other mobile devices.
❖They often specialize in a certain type of operating system, such as
Android or iOS.
❖In the field of mobile applications, we primarily develop apps and
programs for the following platforms:
▪ iOS
▪ Android

24
Frameworks and Tools …

25
Flutter
❖Flutter is Google’s open-source framework for developing native
Android and iOS apps using a single codebase.
❖It is an unmatched and highly reliable mobile UI framework for
creating stunning apps quickly by speeding up the development
process.
❖Flutter is a complete framework that includes widgets, a rendering
engine, testing and integrating APIs and tools to help developers build
and deploy aesthetically pleasing mobile apps.
❖Examples of applications built using Flutter development include
Google, Alibaba, and Abbey Road Studios.
26
React Native

❖Developed and maintained by Facebook, React Native is an open-

source, cross-platform app development framework that has quickly
become the developers’ top choice.
❖React Native helps develop Android and iOS mobile apps seamlessly.
❖Mobile apps of top brands such as Tesla, Airbnb, Skype, and Amazon
Prime are the best examples of React Native apps.
❖Faster development and deployment are the primary reasons behind
the universal popularity of React Native.

27
Ionic

❖Ionic is an open-source framework built with Apache Cordova

(PhoneGap) and Angular, allowing developers to build Android and
iOS apps for seamless mobile performance.
❖Ionic’s most significant advantage is that it allows the developers to
use several UI elements, such as filters, forms, views, navigation
menus, and action sheets, in the application design.
❖Ionic is a complete framework that enables developers to build
Progressive Web Apps (PWAs) and hybrid and cross-platform mobile
applications.
28
Xamarin

❖Xamarin is a Microsoft-owned open-source framework for

developing native and high-performance Android, iOS, macOS, tvOS,
and watchOS apps leveraging .NET and C# programming languages.
❖The framework empowers businesses to provide native performance
and unique user experiences to end-users.
❖The framework allows the developers to build an ecosystem with
APIs, back-end, components, etc., using tools, libraries, and
programming languages supported by an active community.

29
Native Script

❖This open-source framework is preferred to reduce the time and code

of the app loads.
❖This framework is adept at creating mobile apps that are Typescript,
CSS, Vue.js, Javascript, and Angular enabled.
❖Leading companies prefer Native Scripts because it has features like
appropriate backend support, business support, complete access to iOS
APIs and Android, cross-platform application, and a native user
interface without web views.

30
Apache Cordova

❖Formerly known as PhoneGap, Apache Cordova is a leading mobile

app development framework that is developer-friendly.
❖It is a cross-platform app development framework that leverages
CSS3, HTML5, and JavaScript to build mobile applications.
❖Cordova plugins enable the developers to access device hardware
capabilities such as GPS, camera, and accelerometer to deliver a
native-like app experience.
❖Apache Cordova’s notable features include a faster development
process with a single codebase and third-party app management tools.
31
Framework7
❖Framework7 is an open-source framework that is very easy to learn
and use.
❖It allows the developers to build Android, iOS, and desktop apps with
a native-like look and feel using popular web technologies such as
HTML5, JavasScript, and CSS3.
❖Another attractive feature of Framework7 is its stunning UI elements,
including features such as an action sheet, list view, popup, side
panels, layout grid, and more.
❖Framework7 makes the development process easy, convenient, and
fast.
32
JQuery Mobile
❖JQuery Mobile is a hybrid mobile app development framework that
helps build platform-independent apps.
❖The framework uses JavaScript library and HTML to build responsive
websites on various devices such as smartphones, tablets, and
desktops.
❖JQuery leverages the HTML5-based framework and the ThemeRoller
to offer highly customizable themes for mobile apps and web
applications.
❖JQuery Mobile comes in two variants, namely, a customized
framework and a stable version.
33
Sencha Ext JS

❖Sencha Ext JS is a modern web and mobile app development

framework for creating extremely fluid, cross-platform applications.
❖It’s the most comprehensive JavaScript framework and is preferred by
the development community to accelerate the development of data-
intensive HTML5 applications.
❖Developers get access to over 140 pre-integrated UI components and
an array of user extensions and tools, including, but not limited to,
forms, lists, HTML5 calendars, grids, menus, and toolbars.

34
Onsen UI
❖Onsen UI is one of the best application development frameworks for
building complex web applications that deliver native-like experiences
across platforms with the same source code.
❖It’s easy to learn using Onsen UI as the software provides lots of
learning resources on its website and is compatible with Angular JS 1,
Angular2+, React, and Vue.
❖As a modern and developer-friendly application development
framework, Onsen UI provides a great collection of UI components,
such as tabs, stack navigation, and lists, that further streamline
development and accelerate time to market.
35
Generic UI Development

❖A good User Interface (UI) focuses on making user’s interactions

simple and efficient.
❖User would appreciate a website with intuitive user interface that
leads them towards their task in most engaging way.
❖User Interface (UI) design focuses on thinking of a user, what they
might need to do when they visit website and ensure that the interface
has elements that are easy to access and understand.
❖Being a UI designer, one need to understand the goals, skills,
preferences and tendencies of the user to make a better interface.
36
Generic UI Development …
❖The Generic User Interface (Generic UI, GUI) framework allows you to
create UI screens using Java and XML.
❖XML is optional but it provides a declarative approach to the screen layout
and reduces the amount of code which is required for building the user
interface.
❖Vaadin Framework is a Java web application development framework that
is designed to make creation and maintenance of high quality web-based
user interfaces easy.
❖Vaadin supports two different programming models: server-side and client-
side. The server-driven programming model is the more powerful one.

37
Generic UI Development …

38
Generic UI Development …
❖The application screens consist of the following parts:
▪ Descriptors:
➢ XML files for declarative definition of the screen layout and data components.
▪ Controllers:
➢ Java classes for handling events generated by the screen and its UI controls and for
programmatic manipulation with the screen components.
❖The code of application screens interacts with visual component
interfaces (VCL Interfaces).
❖These interfaces are implemented using the Vaadin framework
components.

39
Generic UI Development …
▪ Visual Components Library (VCL) contains a large set of ready-to-use components.
▪ Data components provide a unified interface for binding visual components to entities
and for working with entities in screen controllers.
▪ Infrastructure includes the main application window and other common client
mechanisms.
❖A screen is a main unit of the generic UI.
❖It contains visual components, data containers and non-visual components.
❖A screen can be displayed inside the main application window either in the
tab or as a modal dialog.

40
Generic UI Development …

❖The main part of the screen is a Java or Groovy class called controller.
❖Layout of the screen is usually defined in an XML file called
descriptor.
❖In order to show a screen, the framework creates a new instance of the
Window visual component, connects the window with the screen
controller and loads the screen layout components as child
components of the window.
❖After that, the screen’s window is added to the main application
window.
41
Generic UI Development …

❖A fragment is another UI building block which can be used as part of

screens and other fragments.
❖It is very similar to screen internally, but has a specific lifecycle and
the Fragment visual component instead of Window at the root of the
components tree.
❖Fragments also have controllers and XML descriptors.
❖A screen controller is a Java or Groovy class that contains the screen
initialization and event handling logic

42
Generic UI Development …

❖Normally, the controller is linked to an XML descriptor which defines

the screen layout and data containers, but it can also create all visual
and non-visual components programmatically.
❖All screen controllers implement the Frame Owner marker interface.
❖The name of this interface means that it has a reference to a frame,
which is a visual component representing the screen when it is shown
in the main application window.
❖There are two types of frames:

43
Generic UI Development …
▪ Window:
➢ a standalone window that can be displayed inside the main application window in a tab or
as a modal dialog.
▪ Fragment:
➢ a lightweight component that can be added to windows or other fragments.
❖Controllers are also divided into two distinct categories according to
the frames they use:
▪ Screen:
➢ a base class of window controllers.
▪ Screen Fragment:
➢ a base class of fragment controllers.

44
Generic UI Development …

Controllers and Frames

45
Generic UI Development …

❖Most of these user interactions are touch-based and happen on

colorful touch screen displays that are bursting with high-level
interactions.
❖Naturally, basic mobile UI design principles differ from those of a
traditional desktop UI.
❖After all, users are, by definition, on the move; control is limited,
giving new meaning to the phrase ‘all thumbs.
❖Actions and information need to be big, bold, clear, and simple.

46
Generic UI Development …

❖As mobile adoption continues to rise year-by-year, it’s time to develop

a mobile-first strategy, embraced by the likes of Facebook or other
social networks, who make sure their iOS and Android apps offer a
polished user experience on hand-held devices.
❖After all, when users have more choice and freedom to find mobile
applications that work for them, a poor user experience can easily
devalue your brand, hurt your revenue, and disengage your users.

47
Generic UI Development …

❖Aside from investing in mobile applications, many ecommerce stores

see the increase of purchases coming from mobile.
❖If an online store doesn’t optimize checkout experience, usability or
their mobile app design, they may lose market share or even render
themselves obsolete.

48
Android User

❖Android is the most popular operating system in the world, with over
2.5 billion active users spanning over 190 countries.
❖Created by Andy Rubin as the open-source alternative to iPhone and
Palm OS, Android quickly became the favorite operating system for
most mobile manufacturers in the early 2010s.
❖With titans of the industry such as Samsung, LG, Motorola and HTC
all launching phones running Android, it quickly became the most
popular mobile OS, hitting over one billion active users by 2014.

49
Android User …

50
More on UIs

❖User interface (UI) design is the process designers use to build

interfaces in software or computerized devices, focusing on looks or
style.
❖Designers aim to create interfaces which users find easy to use and
pleasurable.
❖UI design refers to GUI and other forms—e.g., voice-controlled
interfaces.
❖User interfaces are the access points where users interact with
designs.
51
More on UIs …

❖They come in three formats:

▪ Graphical user interfaces (GUIs):
➢ Users interact with visual representations on digital control panels.
➢ A computer’s desktop is a GUI.
▪ Voice-controlled interfaces (VUIs):
➢ Users interact with these through their voices.
➢ Most smart assistants—e.g., Siri on iPhone and Alexa on Amazon devices—are VUIs.
▪ Gesture-based interfaces:
➢ Users engage with 3D design spaces through bodily motions: e.g., in virtual reality (VR)
games.

52
More on UIs …

❖To design UIs best, you should consider:

▪ Users judge designs quickly and care about usability and likeability.
▪ They don’t care about your design, but about getting their tasks done easily
and with minimum effort.
▪ Your design should therefore be “invisible”:
➢ Users shouldn’t focus on it but on completing tasks: e.g., ordering pizza on Domino’s
Zero Click app.
▪ UIs should also be enjoyable (or at least satisfying and frustration-free).
▪ UIs should communicate brand values and reinforce users’ trust.
▪ Good design is emotional design.

53
More on UIs …

❖A user interface can be judged by three main properties:

▪ Ease-of-use.
➢ How easy it is to use a certain user interface.
▪ Efficiency for inputting information.
➢ How fast information can be input through the user interface.
▪ Efficiency for outputting information.
➢ How fast the user can process the information coming back from the system.

54
VUIs and Mobile Apps, Text-to-Speech
Technique
❖Voice user interfaces are user interfaces that are used through speech.
❖Typical examples of voice user interfaces include smart speakers and
voice assistants.
❖Voice UIs employ speech recognition and natural language
understanding technologies to transform user speech into text and
meaning.
❖Speech is a tool for enhancing traditional touch user interfaces into
multimodal voice user interfaces.

55
VUIs and Mobile Apps, Text-to-Speech
Technique …
❖Voice user interfaces are highly intuitive as they use the most natural
way for us to communicate: speech.
❖They are significantly faster than typing to input information but
significantly slower than reading or seeing to output information from
the computer system back to the user.
❖The first voice user interfaces were IVR, Interactive Voice Response,
systems that enabled users to interact with a phone system by using
speech.
❖Typically, IVRs recognized only digits, but nonetheless they were
early voice user interfaces
56
VUIs and Mobile Apps, Text-to-Speech
Technique …
❖The first applications of voice UIs were interactive voice response
(IVR) systems that came into existence already back in the 80s.
❖These were systems that understood simple commands through a
telephone call and were used to improve efficiency in call centers.
❖Current voice user interfaces can be a lot smarter and can understand
complex sentences and even combinations of them.
❖For example, Google Assistant is perfectly fine with something like
“Turn off the living room light and turn on the kitchen light”.

57
VUIs and Mobile Apps, Text-to-Speech
Technique …
❖However, as these smart speakers always wait until the end of the user
utterance and only then process the information and act accordingly,
they will fail if the user hesitates with their speech or says something
wrong.

58
Designing the Right UI

❖In mobile app development, the UI (user interface) and UX (user

experience) play the most significant roles in a mobile app’s success.
❖From the perspective of a designer, an exceptional UI for mobile app
can only be ensured when you follow some tried and tested UI design
principles.
❖It is always advisable to stick to certain principles that are accepted by
the designers’ community.
❖Such UIs not only attract the user, but also help in retaining them in
the long run.
59
Designing the Right UI …

❖UI principles:
▪ Consistency of the design layout.
▪ Unambiguous Interactive Elements.
▪ Single Trial Learning Experience.
▪ Anticipate and Answer Users’ Queries.
➢ Use Toast in Android and notifications in iOS so users will be notified when a process has
completed.
▪ Layered User Experience:
➢ The UX should be layered.
➢ Layered here refers that all the features of an app must not be exposed at once.

60
Designing the Right UI …
▪ Uniqueness
➢ There is no point in creating something that already exists.
▪ Structure
➢ User interfaces for mobile applications should be organized in such a way that users will
find it helpful and meaningful.
▪ Context
➢ Before moving on, you need to find out in what context your app will be used and then
build the interface according to this information.
▪ Gestures
➢ Let’s say if the user is holding the handrail on a public transport with one hand and trying
to work an app with the other hand, it might be annoying if there are no other gestures but
to pinch to expand, since this gesture requires two hands.

61
Designing the Right UI …
▪ Tolerance
➢ Tolerance means allowing users to make mistakes and giving them the opportunity to
revoke changes.
▪ Consistency
➢ Consistency means tidiness and it is certainly a must-have in every app, which is why in
the majority of mobile app design companies there’s a rule to create a UI kit for every
project.
▪ Communication
➢ The core idea here is to let users know your app registered the action and processing it
even if it is not possible to give an immediate result.
➢ From a psychological perspective, people need to get acknowledgment for their actions,
and it is especially important in the banking sphere.

62
Designing the Right UI …

63
Multichannel and Multimodal UI

❖One of the breakthroughs users can benefit of is that automatic speech

recognition (ASR) improved highly significant over the last years.
❖ASR now works good for dictation tasks.
❖However, dictation is a highly specific use case which does not
require the extraction of semantics from the utterances.
❖Some applications use speech input for form filling.
❖However, filling each single slot by speech is often not more efficient
than typing.

64
Multichannel and Multimodal UI …
❖The question arises: What are important challenges in using speech as
a “mainstream” modality?
❖While ASR made significant efforts within the last years, e.g., partly
driven by the successful application of deep neural networks, the
identification of the intended semantic for a further processing by the
dialog manager is still a rather difficult process.
❖ASR capabilities are easy to integrate into new user interfaces by
making use of available programming APIs.
❖On the technical side one of the next challenges is therefore to realize
conversational speech interaction in many applications.
65
Multichannel and Multimodal UI …

❖This requires to simplify the usage of NLP methods for information

extraction, dialog processing and presentation, so that developers can
easily deploy speech interfaces.
❖Since the Internet is mobile nowadays and conversational speech is
the most convenient interaction mode of complex applications that
require more than simple gestures, this will enable even more services
at the hand of the users.

66
Multichannel and Multimodal UI …

❖In that matter it is important to better understand the specific benefits

that emerge for individual users.
❖Information about these benefits can be revealed by observing the
users’ modality choice behavior.
❖Understanding the factors influencing users’ modality choice will
enable interface designers to adapt applications to the advantage of the
user, and to inform the user about extra possibilities of interaction.

67
Thank you!
Any questions?

Good day!