UI Design Principles, Patterns & Mobile-Specific Interactions

Key Concepts in Mobile UI Design

1. Mobile UI Design Principles

Mobile interfaces differ from desktop/web due to:

• Small screen real estate → Prioritize content, use minimalism.
• Touch interactions → Buttons must be large (48x48dp minimum).
• Contextual awareness → Leverage device sensors (location, camera, motion).
• Performance constraints → Optimize for slow networks and low-end devices.

Visual Hierarchy & Fitts’s Law

• Fitts’s Law: The time to reach a target depends on its size and distance.
  • Example: In Pathao’s app, the "Request Ride" button is large and placed at the bottom for easy thumb access.

    flowchart TD
      A["Large Target"] -->|"Faster to reach"| B["Small Target"]
      C["Close Target"] -->|"Faster to reach"| D["Far Target"]

  • Rule: Buttons should be at least 9mm x 9mm (Android Material Design).

Gesture-Based Interactions

Common gestures in mobile apps:

Worked Example: Khalti’s "Pay Now" button uses a press-and-hold animation to confirm selection (reduces accidental taps).

2. UI Patterns for Mobile Apps

A. Navigation Patterns

Visual Comparison:

graph LR
  A["Bottom Nav"] -->|"Best for"| B["3-5 screens"]
  C["Drawer Nav"] -->|"Best for"| D["Hidden menus"]
  E["Tab Nav"] -->|"Best for"| F["Horizontal grouping"]

B. Form Design

• Single-column layouts (avoid horizontal scrolling).
• Auto-focus on the first input field (e.g., NTC’s login form).
• Error handling: Show inline validation (e.g., Khalti highlights invalid phone numbers in red).

Example: eSewa’s payment form uses a stepper indicator to show progress:

Step 1: Select Bill → Step 2: Enter Amount → Step 3: Confirm Payment

C. Lists & Cards

• Pull-to-refresh (e.g., NEPSE’s stock app).
• Lazy loading (load items as user scrolls).
• Card-based layouts (e.g., Daraz’s product grid).

Visual: Lazy Loading in a List

flowchart TD
  A["User scrolls down"] --> B["Load next 10 items"]
  C["API call"] --> D["Update UI"]

3. Accessibility in Mobile UIs

Key considerations for divyang-friendly apps:

• Color contrast: Minimum 4.5:1 (WCAG standards).
• Text scaling: Support dynamic font sizes (e.g., Android’s "Display Size" settings).
• VoiceOver/TalkBack: Screen reader support (test with Android Accessibility Suite).
• Haptic feedback: Vibrations for button presses (e.g., Pathao’s ride confirmation).

Example: Ncell’s app includes:

• High-contrast mode for visually impaired users.
• Larger tap targets for motor-impaired users.

4. Performance Optimization

A. Reducing Layout Thrashing

• Use ConstraintLayout (Android) or StackLayout (iOS) to avoid nested views.
• Problem: Nested LinearLayouts cause jank (UI stutter).

  // Bad: Nested LinearLayouts (causes thrashing)
  <LinearLayout>
      <LinearLayout>...</LinearLayout>
  </LinearLayout>
  
  // Good: ConstraintLayout
  <androidx.constraintlayout.widget.ConstraintLayout>
      <Button .../>
  </androidx.constraintlayout.widget.ConstraintLayout>
  

B. Image Optimization

• Compress images (use WebP format).
• Use Glide (Android) or SDWebImage (iOS) for lazy loading.
• Example: Daraz’s product images load in low-res first, then high-res.

Visual: Image Loading States

stateDiagram-v2
  [*] --> LowRes
  LowRes --> HighRes: OnScroll
  HighRes --> [*]

C. Offline-First Design

• Cache data using Room Database (Android) or Core Data (iOS).
• Example: eSewa allows bill payments offline; syncs when online.

5. Platform-Specific Guidelines

Android (Material Design)

• Components: Floating Action Button (FAB), Bottom Sheets, Snackbars.
• Theming: Use Theme.MaterialComponents for consistency.
• Example: NTC’s app uses Material Design’s elevation for cards.

iOS (Human Interface Guidelines)

• Components: Navigation Bars, Tab Bars, UIAlertController.
• Example: Khalti’s iOS app uses SF Symbols for icons.

Comparison Table:

In the Real World

1. eSewa’s Bill Payment Flow

   • Uses a stepper UI pattern to guide users through:
     1. Select Bill Type (Electricity, Phone, etc.).
     2. Enter Consumer Number.
     3. Confirm Amount.
   • Why it works: Reduces cognitive load by breaking the task into clear steps.

2. Pathao’s Ride Request

   • Implements Fitts’s Law with a large "Request Ride" button at the bottom.
   • Uses haptic feedback when a ride is confirmed (vibration + sound).

3. Daraz’s Product Grid

   • Uses lazy loading to improve scroll performance.
   • Card-based layout with images compressed to WebP format.

Worked Example: Designing a Mobile Login Screen

Scenario: Design a login screen for a Nepali banking app (e.g., NMB Bank).

Step 1: Wireframe (Low-Fidelity)

[Bank Logo]
[Input Field: Phone Number] __________
[Input Field: Password] __________
[Forgot Password? Text]
[Login Button (Large, Blue)]
[OR]
[Sign Up Button]

Step 2: High-Fidelity Design (Android XML)

<androidx.constraintlayout.widget.ConstraintLayout>
    <EditText
        android:id="@+id/phoneInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Phone Number"
        app:layout_constraintTop_toTopOf="parent"/>

    <EditText
        android:id="@+id/passwordInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="password"
        app:layout_constraintTop_toBottomOf="@id/phoneInput"/>

    <Button
        android:id="@+id/loginButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Login"
        app:layout_constraintWidth_percent="0.8"
        app:layout_constraintTop_toBottomOf="@id/passwordInput"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Accessibility Checks

• Color contrast: White text on dark blue background (meets WCAG AA).
• Tap targets: Buttons are 56x56dp (minimum size).
• Screen reader support: Labels for all interactive elements.

Step 4: Performance Optimization

• Debounce input: Delay API calls until user stops typing (e.g., after 300ms).
• Biometric login: Add "Fingerprint" or "Face ID" option (iOS/Android).

Visual: Login Screen States

stateDiagram-v2
  [*] --> Idle
  Idle --> Typing: User enters phone
  Typing --> Validating: 300ms delay
  Validating --> Loading: API call
  Loading --> Success: Login granted
  Loading --> Error: Invalid credentials

Exam Tip

1. Diagrams are worth marks!

   • Draw wireframes for navigation flows (e.g., bottom nav vs. drawer).
   • Sketch gesture interactions (e.g., swipe-to-refresh).

2. Compare Android vs. iOS

   • Questions often ask: "Which platform uses X component?"
   • Memorize key differences (e.g., ConstraintLayout vs. StackView).

3. Real-world mapping

   • Relate UI patterns to Nepali apps (e.g., "How does Daraz use lazy loading?").
   • Explain why a design choice works (e.g., "Bottom nav in Pathao reduces tap errors").

4. Code snippets

   • Be ready to write XML for a button or Swift/Kotlin for gesture handling.
   • Example:

     // Android: Handle swipe gesture
     view.setOnTouchListener { v, event ->
         when (event.action) {
             MotionEvent.ACTION_DOWN -> { /* Start swipe */ }
             MotionEvent.ACTION_UP -> { /* End swipe */ }
         }
         true
     }
     

5. Accessibility is a hot topic

   • Always mention color contrast, tap targets, and screen reader support in answers.

Final Note: Mobile UI design is iterative. Test your designs with real users (e.g., friends or family) and refine based on feedback. Tools like Figma or Adobe XD can help prototype before coding.