Please enable JavaScript.
Coggle requires JavaScript to display documents.
Chapter 5: Mobile Application Development - Coggle Diagram
Chapter 5: Mobile Application Development
SDK Platforms
Several popular Native SDK Platforms.
Android
Advantages:
One of the most popular mobile platforms.
Available under open source and proprietary licenses.
The Application Programmer's Interface (API) is available as Java classes.
Supported under popular desktop operating systems (Microsoft Windows, Mac OS X, & Linux).
Widest OS support.
Disadvantages:
Device Fragmentation
: Too many devices with vastly different hardware specifications and capabilities.
Release Proliferation
: May have to support applications running on different versions of Android simultaneously.
Example: Supporting Android 5.1 (Lollipop) while considering Android 2.3 (Gingerbread) users.
iOS
Advantages:
One of the most popular mobile platforms.
The Application Programmer's Interface (API) is available as Objective-C classes.
Supported across OS X 10.x operating systems.
Has well-defined device specifications (does not suffer from device fragmentation).
Features and functionality are well standardized.
Disadvantages:
Requires OS X platform
: Mobile application development requires the latest release of the OS X operating system running on Apple-certified devices (iMac, MacBook, etc.).
Higher entry-level costs
: Publishing iOS mobile applications is significantly costly compared to other platforms.
Microsoft Windows Mobile
Blackberry
Designing Interaction for Mobile Application
Screen Interface
Structure
App Bar
Navigation Icon:
Can open a Navigation Drawer or act as an up arrow for hierarchical navigation.
Functionality:
Used for branding, navigation, search, and actions.
Reflects the current page with the title.
Can display app title, page title, or page filter.
Icons on the right side represent app-related actions.
Menu Icon opens the overflow menu for secondary actions and settings.
System Bar
Content:
Contains notification icons on the left side.
Displays system icons on the right side.
Icons:
Monochrome icons are used (dark and light variants).
Dark status bar:
Default color is a darker tone of the app bar color.
Can be translucent or reference an element in the layout.
Light status bar:
Features dark icons.
Harmonizes better with light content and serves as an alternative to the dark status bar.
Navigation Bar
Function:
Houses device navigation controls: Back, Home, Recent.
Variants:
Sometimes omitted or relocated by vendors.
Samsung often substitutes navigation bars with physical buttons.
On-Screen Navigation Buttons:
Pros:
Immersive experience.
Buttonless aesthetic.
Allows for gestures.
Flexibility and future-proofing.
Cons:
Consumes screen space.
May require extra steps.
Physical Navigation Buttons:
Pros:
Quick launch.
Always accessible.
Reduces confusion.
Cons:
Slower experience.
Less future-proof.
Menus
Menu:
Part of the App Bar.
Represented by icons on the right side.
Frequently accessed menu items can have individual icons.
Rarely used items are placed in the "Overflow menu," usually indicated by the "Three-dots" icon.
Side Navigation / Navigation Drawer
Common pattern in Android applications.
Slides in from the left.
Displays user-specific menu or account selection screen.
May include
dividers
to separate menu item categories.
"Setting & Support"
item, if present, placed at bottom of scrolling list, in-line with other content.
Screen Visual Feedback
Dialogs / Alerts
Informs users about critical information or requires decisions.
Should be used sparingly due to their interruptive nature.
Forces users to stop current tasks and refocus on dialog content.
Not every choice, interaction, or information warrants interruptions.
Typically consists of text and UI control elements focused on specific tasks.
Examples: Confirming item deletion or choosing settings.
Dismissive actions placed directly to the left of affirmative actions.
Avoid opening additional dialogs within a dialog or using scrolling content.
Alert Dialogs inform users about urgent situations requiring confirmation.
Alerts prevent users from proceeding until a decision is made.
Most alerts don't need titles and should be used sparingly in high-risk situations.
Progress feedback
Informs users that the application is loading content.
Provides visual feedback that the mobile app is still processing data.
Types include Linear & Circular progress indicators.
Two types of indicators:
Determinate: Measurable indicator running from 0 to 100 or any specified range.
Indeterminate: Continuous animation until processing is complete.
Snack Bars and Toasts
Snackbar:
Provides lightweight feedback about an operation.
Brief message displayed at the bottom of the screen.
Animates upwards from the bottom edge.
Automatically disappears after a timeout or user interaction.
Does not block input on the screen.
May contain a single line of text related to the operation.
Can include a text action but no icons.
Action can be performed.
Dismissed by swiping.
Toast:
Primarily used for system messaging.
Similar to Snackbar but for system messages.
Displayed at the bottom of the screen.
Cannot contain actions.
Cannot be dismissed by swiping.
Limited to system messages, not user actions.
Tooltips
Labels appearing on hover and focus.
Provide textual identification for elements.
May include brief helper text about element function.
Label cannot receive input focus.
Display tooltip for 1.5 seconds on hover.
Suitable for interactive imagery.
Do not display rich information like images or formatted text.
Gestures / Haptic Feedback
Scaling (using Pinch):
Zooming in or out.
Pinch-in (closer fingers) for zoom, pinch-out (farther fingers) for unzoom.
Haptic Feedback:
Uses touch sense in UI design.
Implemented as vibrations.
Denotes action performed or button pressed.
Compensates for lack of tactile response of physical buttons.
Scrolling:
Moving viewport.
Dragging (user drags finger) and flinging (quick drag and lift).
Swiping:
Quick left or right finger movement.
Uses: changing view, dismissing items.
Gestures:
Interpret patterns of touches on touch screen.
Two phases: touch event gathering, interpretation.
Types: scrolling, scaling, swiping.
Multicolor Notification Light:
Located at bottom of phone.
Colors: white, green, red, blue, yellow/orange.
Used by apps like WhatsApp, Facebook, Gmail for notifications.
Sensors
Motion Sensor:
Accelerometer: Detects acceleration, tilt, and vibration.
Gyroscope: Identifies up/down, left/right, and rotation around three axes.
Step counter/pedometer: Measures steps.
Position Sensor:
Magnetic field: Detects magnetic north.
Orientation: Determines device orientation.
Proximity: Detects phone proximity to face during calls.
Compass: Determines direction.
Environmental Sensor:
Temperature: Measures ambient temperature.
Light: Detects lighting levels for display adjustment.
Air pressure: Measures atmospheric pressure.
Humidity: Measures humidity levels
Hardware-based Sensors:
Physical components in device.
Derive data by direct measurement.
Software-based Sensors:
Mimic hardware sensors.
Derive data from hardware-based sensors.
Usages:
Accelerometer: Input for movement-based actions in games.
Gyroscope: Stabilizes camera view, assists in panoramic shots.
Pedometer: Calculates steps for activity tracking apps like Google Fit
Device Considerations:
Not all devices have every sensor type.
Some devices may have multiple sensors of the same type.
Sensors enable direct interaction with phones, enhancing user experience.
Factors in deciding the best Mobile Platforms
Market Shares
Market share is a key factor in choosing a mobile platform.
It reflects the potential availability of applications to the general population.
Developing for platforms with higher market share increases application visibility.
Lower market share platforms may have fewer applications available to the general public.
Target users / population
Target users are the second most important factor in choosing a mobile platform.
They determine who will use the application.
Teachers and businesswomen, for example, may have different preferences in applications.
Developers must consider the preferences of their target users wisely.
Different target users may prefer different mobile platforms, such as Blackberry for businesswomen.
Platform features
Determine available features on a platform.
Some platforms offer a wide range of sensors and features, leading to device fragmentation.
Other platforms prioritize compatibility and reduce device proliferation by offering fewer features.
Example:
For instance, some platforms provide NFC and fingerprint sensor options, while others exclude them to maintain platform standards and avoid fragmentation.
Developers interested in NFC-based applications may need to choose a platform that supports NFC features.
Costs
Some platforms may incur slightly higher costs for development or deployment.
Considerations for costs include:
Platform SDK License (though many are free).
Development environment (certain platforms may require specialized operating systems or versions).
3rd party libraries (some platforms heavily rely on them).
Application Distribution cost (official distribution channels like Google Play Store, iTunes App Store, Microsoft App Market often require payment for publishing applications).
Learning Curve
Cross-platform Tools
Hybrid mobile app
Hybrid app combines mobile web and downloadable native app elements.
UI runs partially or entirely in an embedded browser component.
Nearly identical to native apps in appearance.
Downloaded from app stores.
Stored on the device like native apps.
Launched in the same manner as other apps.
Cross Platform tool enables writing applications in one codebase for multiple platforms.
Allows reaching a broader audience pool by developing for various platforms.
Shortens development time for multi-platform projects.
May lead to lower user experience if the ported application isn't adapted to match specific platform presentations.
Benefits
of Cross Platform Mobile Development !
Write once, run anywhere:
Code is written once and can be used across major mobile platforms.
Use of plug-ins
: Developers can utilize plug-ins for platform-independent app development.
Easy to use:
Cross-platform development tools are user-friendly and do not require expertise in complex technologies like C++ or Java.
Cost and time-effective:
Simplifies the development of complex mobile apps, reducing operational time and costs.
Drawbacks
of Cross Platform Mobile Development !
Restrictions for updates:
Cross-platform tools may not align with current mobile development updates, leading to issues with iOS or Android updates.
Restrictive tools:
Cross-platform frameworks limit the use of external tools, constraining developers in app development.
Slower code:
Cross-platform technologies result in longer code render times, slowing down the development process for multiple platforms.
Ineffective codes:
Apps developed using cross-platform technology may exhibit overall performance issues, showing ineffectiveness in functionality.
Notable Cross Platform Tool:
Ionic
Advantages of Ionic:
Open source framework.
Utilizes well-known web technologies like CSS3, HTML, and JavaScript.
Access to mobile features and sensors.
Offers many UI components for developing rich and interactive apps.
Availability of "plugins" for enhanced functionality
Disadvantages of Ionic:
Fragmented platform with old versions still in use.
Performance issues, particularly noticeable with older versions of Android.
Not suitable for heavily graphical tasks like 3D or video games.
PhoneGap
Sencha Touch
Appcelerator
Adobe Air
Intel XDK
Mobile Game Makers:
GameMaker:
Provides core functionalities for game development.
Includes graphic rendering (2D and 3D), AI, sound, physics, and animation.
Website:
http://www.yoyogames.com/gamemaker
Construct 2:
Offers a visual drag-and-drop interface.
Allows game development for Android and iOS.
Provides workflow control and exporting tools.
Website:
https://www.scirra.com/
Unity:
Mobile version of the Unity game engine.
Known as "Unity 5".
Supports iOS and Android platforms.
Requires experience but offers comprehensive features.
Website:
https://unity.com/