Please enable JavaScript.

Coggle requires JavaScript to display documents.

Chapter 3a: Mobile Design Principles, Exercise, Exercise, Chapter 3b:…

- - - - Shrinks web user interface to mobile screen size without considering mobile device characteristics.
      - Ignores the unique environment and features of mobile devices.
      - Fails to take advantage of mobile platform features.
      - Combines drawbacks of web applications with mobile device weaknesses.
      - Spotting Miniaturization:
        
        Avoid Excessive Textfields:
        
        Mobile users prefer not to fill in excessive details in Textfields.
        
        Rely on Social-logins (Google+, Facebook, etc.) to gather information.
        
        Save or cache user data to prevent repeated Textfield entries.
        
        Excessive Textfield inputs discourage mobile app usage.
        
        Reduce Textfield Inputs:
        
        Users only need to input essential details like Student ID and password.
        
        Retrieve other particulars from a server to minimize manual Textfield entries.
        
        Present Information Accessibly:
        
        Design information presentation for easy access and selection on mobile devices.
        
        Consider objective formats over subjective ones for better user interaction.
      - Tips to Avoid Miniaturization:
        
        Display Hints in TextFields:
        
        Provide hints or suggestions within Textfields for easier input.
        
        Split Long Entry Forms:
        
        Break lengthy entry forms into multiple screens for better user attention and interaction.
        
        Utilize Mobile Facilities and Sensors:
        
        Automatically detect country/state from GPS.
        
        Detect language from phone settings.
        
        Use Social Logins for email address retrieval.
    - - Mobilizing targets mobile user needs precisely.
      - Makes the best possible use of technology tailored to mobile environments.
      - Recognizes mobile technology as distinct from desktop environments.
    - - Utilizes Mobile Platform Features:
        
        Multitouch and touch gesture support.
        
        One-handed operation feature for ease of use.
        
        Incorporates sociability features for enhanced interaction.
        
        Enables Location-Awareness & Context Awareness.
        
        Accesses Mobile Device Hardware Sensors for various functionalities.
      - Examples of Mobilizing Application Benefits:
        
        Allows scanning QR codes via the phone camera.
        
        Facilitates remote check-in via QR codes and remote connectivity.
        
        Utilizes GPS/LBS to detect the nearest airport and provide route suggestions.
        
        Enables users to swipe information easily to access map interfaces.
  - - - Features:
        
        Features tightly integrated in a single board, including all sensors and camera.
      - User Interface:
        
        Small screen leads to a single window UI.
        
        UI can fold or slide for space-saving and readability.
      - Proliferation:
        
        Device should reasonably match user's needs, desires, and personality.
      - Form:
        
        Battery-powered with integrated keyboard/keypad or touch screen.
        
        Device must be small for portability.
    - - Mobile users are more available for communication and interaction.
      - Device is always present and switched on.
    - - Users may multitask, limiting sustained focus on the device.
    - - Always-available connections modify social experiences, such as meetings or dinners.
- - - -  Portable, all user need is internet connection and
      - mobile browsers
      -  Uses open W3C Web API
      -  Developers are not tied to a single mobile platform
      -  Easier to develop and manage
    - - Launching on a new platform with a small user base
      - Providing a fallback option for users without native applications
      - Focusing solely on application services and connectivity
      - Separating application from native mobile platform
      - Mobile web applications guaranteed to work on any device with compatible web browsers
  - - - Fast and utilizes Native API
      - Tightly integrated with mobile platform
      - Supports offline use, independent of data connection
      - Accesses hardware sensors and features (Camera, light sensor, Barometer, temperature sensor, etc.)
      - Generally superior to Mobile Web Applications
- - - - Grid-Based Layout
        
        Alternative to standard list-views.
        
        Suited for displaying data sets with images or icons.
        
        Can scroll vertically or horizontally.
        
        Rationale:
        
        Images/icons can catch user attention effectively.
        
        Grid layout can convey more meaning in images.
      - List-based Layout
        
        Most common screen in mobile applications for displaying large data sets.
        
        Rationale:
        
        Mobile phones are vertically oriented, with taller screens.
        
        Horizontal layouts, common on desktop, are not efficient on mobile.
        
        Users find scrolling through lists more natural and efficient.
        
        Allows users to view data at a glance without much effort.
    - - Tab Navigation
        
        Facilitates easy exploration and switching between views.
        
        Used to browse categorized data sets.
        
        Can be scrollable or fixed.
        
        Enables quick navigation between different parts of the application without deep navigation structures.
      - ViewPager Navigation
        
        Similar to tab navigation but lacks labeled tabs, relying on navigation indicators (circles or dots).
        
        Allows users to explore and switch between views or functional aspects of the application with a finger swipe.
        
        Typically presents information in a full-screen view.
        
        Often used in "Walkthrough" pages or "Tutorial" startup screens.
      - Navigation Drawer
        
        A panel located on the left edge of the screen displaying the main navigation options of the app.
        
        Typically hidden and revealed when the user swipes their finger from the left edge of the screen.
        
        Does not consume screen space when hidden.
        
        Offers a quick method for users to navigate between views without using the "Back" button.
      - Dropdown Navigation
        
        Useful when changing content is important but not frequently done.
        
        Preferred for frequent content switching scenarios.
        
        Does not change with the rest of the screen, providing a consistent anchor point for content switching.
        
        Occupies a small area on the toolbar or action bar of an application.
- - - - 5.25”, 6”, 6.5”
    - - 7”, 9” and 10”
    - - 2.5”, 2.75”, 3.2”, 4.2”, 4.5”, 4.75”, 5”
- - - - Vast variety in mobile device screen sizes and ratios.
      - Poor display on mobile screens outside the target group.
      - Graphics may be too large or too small, affecting user experience.
      - Application may appear amateurish and outdated over time due to changing standards.
    - - Faster development and prototyping.
      - Simple to follow, no need to optimize for different screen sizes.
      - Targets the majority of user devices.
  - - - Faster development and prototyping targeting higher DPI devices.
      - Targets higher-end devices while ignoring lower DPI devices.
      - Simplifies development focusing on devices with similar characteristics.
    - - Limited audience as users with lower DPI or less popular devices cannot run the app.
      - Application may become outdated quickly due to changes in screen standards.
  - - - i. ldpi = 120 dpi or less
      - ii. mdpi = between 120-200 dpi
      - iii. hdpi = between 200 – 300 dpi
      - iv. xhdpi = between 300-400 dpi
      - v. xxhdpi = more than 400 dpi
    - - Enables development of a single application for multiple devices.
      - Maximizes support for a wide range of user devices.
    - - Creating multiple graphic assets can be time-consuming.
      - May need to create graphic assets to accommodate uncommon devices.
  - - - Primarily supported in Mobile Web Applications.
      - Requires creation of graphic assets to accommodate uncommon devices.
    - - Enables development of a single application for multiple devices.
      - Enhances the application's ability to support a wide range of user devices.