Chapter Two

Factors in Developing Mobile Applications

 Factors in Mobile application development
• These factors are crucial in creating a mobile application that is functional, secure, user-friendly,
and commercially viable.

• Key factors typically considered in mobile app development include:

• Mobile Software Engineering

• Frameworks and Tools

• UI Development

• These factors collectively determine the app's performance, usability, scalability, and overall
quality, contributing to a smooth development process and satisfying user experience

24/12/2024 2
 Mobile Software Engineering
• Mobile software engineering is a specialized field that focuses on the design, development, testing, and
deployment of software applications specifically for mobile devices.

• It involves a unique set of challenges and considerations compared to traditional software engineering due to
the constraints and capabilities of mobile devices.

• It involves the application of engineering principles to mobile app development, focusing on performance,
usability, and resource efficiency such as :
• Agile Development: Agile methodologies help adapt to changing requirements and allow for rapid,
iterative development.
• User Centered Design: Focusing on user needs throughout development ensures that the app is
intuitive and meets user expectations.
• Quality Assurance: Regular testing for compatibility, performance, and security ensures robust app
functionality.
24/12/2024 3
 Cont…
Key Principles:

• Modularity: Divide functionality into reusable components.

• Scalability: Design apps that can scale to handle increased data and user loads.

• Resource Optimization: Minimize memory and battery usage, given mobile devices' limited
resources.

24/12/2024 4
 Cont…
Key Challenges and Considerations:

• Platform Diversity: Mobile apps must be developed for multiple platforms (iOS, Android, etc.), each
with its own development tools, programming languages, and user interface guidelines.

• Limited Resources: Mobile devices have limited processing power, memory, and battery life, which
necessitates efficient resource management.

• User Experience (UX): Mobile apps must provide a seamless and intuitive user experience, often
requiring innovative design approaches and touch-based interactions.

• Network Connectivity: Mobile apps may operate in various network conditions, from stable Wi-Fi to
unreliable cellular networks, requiring robust error handling and offline functionality.

• Security: Mobile devices are susceptible to security threats, so developers must implement strong
security measures to protect user data.
24/12/2024 5
 Frameworks and Tools
• Frameworks and tools are essential for efficient and effective mobile app development. They provide a structured
approach, reusable components, and automation capabilities.

• Frameworks and tools streamline the development process, providing reusable code, components, and features.

• Android Studio: The official IDE for Android development, with tools for coding, debugging, and performance
profiling.

• SDKs: Android SDK provides libraries for accessing hardware and software resources

• Cross-Platform Frameworks:

• Flutter: Google’s UI toolkit for creating natively compiled applications from a single codebase.
• React Native: Uses JavaScript to build cross-platform apps with native UI components.

• Testing and Debugging Tools:

• Android Emulator: Simulates various devices to test apps on different screen sizes and configurations.
• JUnit: For unit testing, ensuring individual functions perform as expected.

24/12/2024 6
 Cont..
• Flutter is an open-source UI software development kit created by Google, designed to help developers build natively
compiled applications for mobile (iOS and Android), web, and desktop from a single codebase.

• It uses the Dart programming language, which allows for fast development cycles due to its hot reload feature.

• Here’s a rundown of what makes Flutter ideal for mobile app development:

1. Single Codebase
• Flutter enables developers to write code once and deploy it across multiple platforms, including iOS and Android. This reduces
development time and makes it easier to maintain applications.

2. Widget-Based Architecture

• Flutter apps are built from a rich set of customizable widgets, which allows for a high degree of control over how the app looks and
feels. Widgets are compassable, meaning developers can create complex UIs by nesting and customizing them.
• widgets are interactive components or mini-applications that provide users with quick access to specific app functionalities or information directly
on the home screen or lock screen, without opening the full app.

3. High Performance

• Flutter’s engine is written in C++, making it very fast. It directly communicates with the platform without relying heavily on

intermediaries,
24/12/2024 leading to a smoother, near-native experience. 7
 Cont…
4. Hot Reload

• One of Flutter's standout features, hot reload allows developers to make real-time changes to the code, which reflects immediately
in the app. This feature speeds up development and enhances productivity by enabling rapid experimentation and bug fixing.

5. Flexible and Expressive UI

• Flutter allows developers to create highly flexible and expressive UIs. The framework includes Material Design and Cupertino
widgets, allowing developers to create native-looking applications for both Android and iOS.

6. Access to Native Features and SDKs

• Flutter provides plugins that allow developers to access device functionalities like GPS, camera, and Bluetooth. Developers can
also write platform-specific code to integrate with native SDKs if required.

7. Community and Ecosystem

• The growing Flutter community is continually adding packages and libraries, which makes it easier to implement features without
starting from scratch. Flutter has also been adopted by large organizations, increasing its reliability and community support.

24/12/2024 8
 Cont…
• React Native is a popular open-source framework developed by Facebook that allows developers to build mobile
applications for iOS and Android using JavaScript and React. Here are some key points about React Native for mobile
application development:

1. Single Codebase for Multiple Platforms

• With React Native, developers can write code once and deploy it on both iOS and Android, reducing development time and
effort. While some platform-specific code might be necessary, most of the code can be shared.

2. Component-Based Structure

• React Native uses a component-based structure, similar to React, allowing developers to build reusable components. This
modular approach makes it easier to maintain and scale applications.

3. Native Performance

• React Native components translate to native widgets, which means that apps developed using React Native are highly
performant and have a near-native experience. This makes it a preferred choice for companies aiming to deliver high-
quality apps across platforms.
24/12/2024 9
 Cont…
4. Live and Hot Reloading

• React Native supports both live and hot reloading, allowing developers to see code changes in real time without losing the app's state.

This feature improves productivity by enabling rapid iteration and debugging.

5. Large Ecosystem of Libraries and Plugins

• React Native has a vast ecosystem of third-party libraries and plugins that add functionality without the need to write platform-specific

code from scratch. Many native functionalities, like camera access and GPS, are supported through official and community-maintained
plugins.

6. JavaScript as the Primary Language

• Since React Native is based on JavaScript, web developers with React experience can quickly adapt to mobile development. This can

reduce the learning curve and make it easier for teams to transition between web and mobile projects.

7. Access to Native Modules

• While React Native provides a high level of abstraction, developers can still write native code when necessary. This is useful for

implementing performance-sensitive features or accessing specific device functionalities that are not yet supported in React Native.

24/12/2024 10
 Comparison between Flutter and React Native for mobile application development

Feature Flutter React Native

Programming Language • Dart • JavaScript

Performance • Near-native performance due to compiled native code • Near-native, relies on JavaScript bridge

Hot Reload • Yes, with fast hot reload • Yes, with live and hot reload
• Rich set of custom widgets, adheres to Material • Uses native components, adheres more closely to native
UI Components
Design and Cupertino for iOS iOS/Android UI

Code Reusability • Write once, run on iOS and Android (high reusability) • Write once, run on iOS and Android (high reusability)

Popular Apps Using Framework • Google Ads, Alibaba, Reflectly, eBay Motors • Facebook, Instagram, Bloomberg, Tesla
• Better for complex UIs and animations due to its own • Good, but relies on JavaScript bridge which can slow
Performance Optimization
rendering engine down heavy animations
Plugins & Packages • Wide variety of plugins, growing ecosystem • Mature and extensive library ecosystem
• Limited (more focused on mobile, but community
Desktop & Web Support • Yes (still in development stages)
projects exist)
App Size • Typically larger due to built-in widgets • Smaller, as it uses native components

Customization & Flexibility • High flexibility due to custom rendering • Good customization but limited to native components

Testing Tools • Built-in testing tools for unit, integration, and UI tests • Limited built-in testing, relies on third-party tools

• Lower, especially for teams experienced in JavaScript

Cost of Development • Can be higher due to Dart's learning curve
and React

24/12/2024 11
 Generic UI Development
• User Interface (UI) Design shapes the user’s digital experience. From websites to mobile apps, UI
design encompasses the visual and interactive elements that users engage with.

• A well-crafted UI not only enhances usability but also communicates the brand’s identity and
values

• UI primarily carries out two tasks:

• Accepting user input.

• Showing the results.

• User Interface (UI) defines the way humans interact with the information systems.

• User Interface (UI) is a series of pages, screens, buttons, forms, and other visual elements that are
used to interact with the device.

24/12/2024 12
 Cont…
• Every app and every website has a user interface.

• User Interface (UI) Design is the creation of graphics, illustrations, and the use of photographic
artwork and typography to enhance the display and layout of a digital product within its various
device views.

• Interface elements consist of:

• Input controls (buttons, drop-down menus, data fields),

• Navigational components (search fields, slider, icons, tags), and

• Informational components (progress bars, notifications, message boxes)

24/12/2024 13
 Cont…
• Generic UI development in mobile applications refers to creating reusable and adaptable UI
components that can work across different platforms (iOS, Android, Web, and Desktop) with
minimal or no changes.

• This approach allows developers to maintain a single codebase while achieving a consistent look
and feel across different devices and operating systems.

Key Techniques:

• Responsive Design: Designing layouts that adjust to different screen sizes and orientations.

• Adaptive Design: Creating different layouts for specific screen sizes and devices.

• Fluid Grids: Using flexible grid systems to structure content.

• Responsive Images: Optimizing images for different screen densities.

24/12/2024 14
 Cont….
Key Principles for Generic UI Development

• Component-Based Architecture: Break down the UI into small, reusable components (e.g., buttons, text fields, headers)
that can be assembled to form screens. This approach simplifies the maintenance and customization of the UI.

• Responsive and Adaptive Design: Implement designs that adapt to different screen sizes, orientations, and resolutions.
Use percentage-based dimensions, aspect ratios, or auto-layout systems to ensure your app looks good on all devices.

• Platform-Specific Adaptations: Use platform-specific styling and behaviours where necessary. For example, Material
Design for Android and Cupertino design for iOS, while keeping the core UI logic generic.

• Theming and Styling: Use themes to create a consistent look and feel across the app. You can define global styles and
dynamically switch themes based on user preferences (e.g. light/dark mode) or platform requirements.

• Abstraction of Platform-Specific Code: Where possible, abstract platform-specific code (e.g. native modules) into
separate components, allowing the main UI code to remain generic.

24/12/2024 15
 Cont…
Steps to Build a Generic UI for Mobile Apps

1. Define Component Library: Identify core, reusable UI components (e.g., buttons, headers).

2. Create Theme System: Set up a centralized theme for colours, fonts, and styles.

3. Use Responsive Layout: Design layouts that adapt to various screen sizes and orientations.

4. Optimize for Performance: Avoid unnecessary re-renders and use lazy-loading where possible.

5. Add Platform-Specific Adjustments: Use platform checks for minor variations in UI (iOS vs
Android).

6. Support Localization & Accessibility: Ensure components are translatable and accessible.

7. Test on Multiple Devices: Regularly test on different devices to ensure consistency across
platforms.
24/12/2024 16
 Android User Interface Design
• Android gives some key components that can be used to create user interface that follows the pattern we
talked about before. All the Android user interface are built using these key components:

• View: It is the base class for all visual components (control and widgets). All the controls present in an
android app are derived from this class. A View is an object that draws something on a smartphone screen
and enables a user to interact with it.

• Viewgroup: A ViewGroup can contain one or more Views and defines how these Views are placed in the
user interface (these are used along with Android Layout managers.

• Fragments: Introduced from API level 11, this component encapsulates a single piece of UI.

• They are very useful when we have to create and optimize our app user interface for multiple devices or
multiple screen size.

• Activities: Usually an Android app consists of several activities that exchange data and information. An
Activity takes care of creating the user interface.
24/12/2024 17
 Types of UI Design
• There are several types of User Interface (UI) depending upon the interaction between users and computers or
electronic devices in different ways. Some common types of User Interface(UI) are:

• GUI (Graphical User Interface): Visual user interface output (keyboard and monitor) with a tactile user interface
input.

• Menu Driven Interface: A UI that uses a menu of options to navigate a program or website is known as a menu-
driven UI. For instance, ATMs have user interfaces that are menu-driven and simple to use.

• Form Based Interface: Form-based user interfaces provide a small number of options for users to choose from
when entering data into a program or application. For instance, a device’s settings menu is form-based.

• Touch user interface: Haptic or tactile user interface. Haptic input is used by most smartphones, tablets, and other
devices with touch screens.

• Voice user interface: Auditory commands are used to communicate between humans and machines. GPS, talk-to-
text gadgets, and virtual assistants are a few examples.

24/12/2024 18
 Cont..
• As the User Interface can make or break the incoming users, it’s important to take care of below points when designing
a UI:

• Keep the interface simple: Clear and simple interface are best. Avoid unnecessary elements. Best interfaces are visible
to user.

• Be consistent and use common UI elements: Using common elements, users feel more comfortable and are able to
get things done more quickly. Create pattern to facilitate efficiency.

• Placement of items: To draw attention to most important pieces of information careful placement of items is necessary.
This can improve users readability and engage them.

• Use of right color: To direct attention towards something take advantage of color, light, shade, contrast and texture.
It’s important to make use of good color combination as a bad color combination can easily distract or irritate a user.

• Anticipate: Make the user to work less by having pre-chosen fields, reduce the burden on the user, anticipate the goals
of the users who come to your site. The things which can be mostly searched by the users are presented so that the users
need not to work to search for it.
24/12/2024 19
24/12/2024 20
 Designing for Voice User Interfaces (VUI)
• The evolution of Voice User Interfaces (VUIs) has witnessed a revolutionary paradigm whereby
users can now communicate with devices and applications by issuing commands using
conversational language.

• The advancement of the internet coupled with the evolution of big data, e-commerce, social media,
AI technologies, and mobile internet usage has resulted in today’s digital marketing.

• VUIs give not only speech tools but also keys to interact with devices intuitively and access info
without hands. Users can get tasks done faster and easier through these methods.

• This transition towards the voice control system has led to a shift in the paradigm of human-
computer interaction (HCI) where the dialogue style becomes the focus of the interface and the
complexities of understanding the user demand in that context.

24/12/2024 21
 Cont…
• It allow users to interact with applications through spoken language, creating a more natural and hands-free experience.

• Designing effective VUIs requires a different approach than traditional UIs, focusing on conversation design, accessibility, and
usability to make the experience seamless and intuitive.

• Key Principles of VUI Design

• Clarity and Simplicity: VUIs should use clear, concise language to avoid confusion. Instructions should be straightforward to ensure
users understand available options.

• Context Awareness: Recognize the user's context, such as location, previous actions, and device state. This enables more relevant and
personalized responses.

• Conversational Flow: Design natural-sounding prompts and responses. A good conversational flow minimizes the number of steps
required and reduces cognitive load.

• Error Handling: Anticipate misunderstandings by providing clear prompts for recovery. For example, if a user’s response is unclear,
respond with an easy-to-understand follow-up question rather than generic errors.

• User Control: Allow users to feel in control by giving them the option to interrupt, skip, or cancel actions and by offering alternative
phrases for each command.

24/12/2024 22
 Tools and Technologies for VUI Development
• Speech Recognition APIs:

• Google Speech-to-Text API: Converts spoken language into text for processing and interaction.

• Amazon Alexa Skills Kit: Offers tools and frameworks to design VUIs for Amazon Alexa.

• Natural Language Processing (NLP):

• Dialogflow: Google’s NLP tool that aids in creating conversational agents for various platforms.

• Microsoft Bot Framework: Offers NLP integration to understand intent and manage dialog flow.

• Voice Prototyping Tools:

• Voiceflow: Helps design and prototype VUI experiences with tools for flow mapping, testing, and
deployment.
• Adobe XD with Voice Prototyping: Allows designers to create and test VUI flows within the
Adobe ecosystem.
24/12/2024 23
 Elements of Effective Voice User Interface (VUI) Design
• Prompt Design: Use clear, concise prompts to guide users.

• Open Prompts allow for flexible responses (e.g., "How can I help you?").

• Directed Prompts provide specific options (e.g., "Say 'yes' to confirm").

• Managing Turn-Taking: Ensure a smooth exchange between the user and the VUI.

• Support barge-in so users can interrupt prompts.

• Use visual cues (e.g., blinking lights) to indicate when the system is listening or responding.

• Voice Tone and Personality: Align the VUI's tone with the brand's personality and use friendly, neutral responses to appeal broadly.

• Handling Errors and Misunderstandings: Provide clear recovery options.

• Explicit Reprompts (e.g., "Please repeat that") guide users back on track.

• Contextual Suggestions offer alternate options after multiple misunderstandings.

• Confirmation and Feedback: Ensure users know their input was registered correctly.

• Implicit Confirmation (e.g., rephrasing user input in responses) works for non-critical actions.

• Explicit Confirmation is essential for high-stakes actions, like confirming deletions.

24/12/2024 24
 Multichannel and Multimodal UIs
• Multichannel and multimodal UIs provide users with flexible ways to interact with applications, enhancing
accessibility and user experience.

• While multichannel UIs deliver a consistent experience across different platforms (e.g., mobile, desktop, and web),
multimodal UIs support multiple input methods (e.g., voice, touch, gesture) within a single platform.

• Together, these approaches allow users to switch between channels and input modes seamlessly.

• A multichannel UI allows users to engage with an application or service across multiple platforms. For example, a
banking app might offer mobile, desktop, and web experiences.

• Each channel should offer consistent functionality and design but also be optimized for the specific platform.

• Benefits of Multichannel UIs:

• Increased Flexibility: Users can interact with an app from different devices and platforms, enhancing accessibility.

• Improved User Retention: Consistent, accessible experiences across channels increase user satisfaction and retention.

• Wider Reach: Supporting multiple channels allows the app to reach a broader audience with varying device preferences.

24/12/2024 25
 Cont…
• Multimodal UIs support multiple types of input within the same interface, allowing users to switch or
combine methods as needed. This flexibility can enhance accessibility, efficiency, and user engagement.

• Common modes include:

• Touch and Gesture: Interaction through tapping, swiping, or pinching on touch screens.

• Voice: Commands or questions spoken by the user, processed through a voice recognition system.

• Keyboard and Mouse: Conventional input methods used mostly in desktop environments.

• Visual (Eye Tracking, Facial Recognition): Advanced modalities using eye-tracking or facial
recognition to detect user engagement or attention.

• Wearables and Sensors: Interaction through wearable devices or environmental sensors, especially in
IoT applications.

24/12/2024 26
Key Principles of Multichannel and Multimodal UI Design
• Consistency Across Channels: Users should experience a uniform look and feel across devices
and platforms, making it easy to switch between channels without a learning curve.

• Adaptability to Context: Multimodal UIs adapt to users’ immediate needs and environmental
factors, allowing users to interact using whichever mode is most convenient.

• Seamless Interaction: Users should be able to switch modes and channels smoothly without
disrupting their experience. For example, a user can start an action by voice command and finish it
via touch.

• User-Centered Design: Different channels and modes should cater to users’ preferences,
accessibility needs, and device constraints, making the UI intuitive and flexible.

24/12/2024 27
Challenges in Designing Multichannel and Multimodal UIs
• Consistency vs. Optimization: Achieving a balance between consistent experiences and platform-
specific optimizations is challenging.

• Contextual Awareness: Determining which input mode is most effective for different contexts
(e.g., noisy environments for voice) requires thoughtful design.

• Technical Integration: Combining multiple input modes requires seamless interaction between
hardware and software, which can be complex to implement.

• Usability Testing: Testing multimodal interactions across various channels and modes is complex
and may require specialized tools and user testing methods.

24/12/2024 28
 Thank You!!!

24/12/2024 29