UI Design Principles, Layouts & Mobile Interaction Patterns

TAKEAWAYS:

• Mobile UI principles (Fitts’s Law, Hick’s Law, and the 3-second rule) dictate how users interact with touchscreens and expect instant feedback.
• Layout systems (ConstraintLayout, RelativeLayout, GridLayout) enable responsive designs that adapt to screen sizes and orientations.
• Interaction patterns (gestures, swipe actions, and modal dialogs) must align with platform conventions (Material Design for Android, Human Interface Guidelines for iOS).
• Accessibility (color contrast, screen readers, and dynamic text) ensures apps are usable by all, including users with disabilities.
• Performance optimization (view recycling, lazy loading) is critical for smooth animations and fast response times.
• Cross-platform tools (Flutter, React Native) abstract UI differences but require careful handling of platform-specific behaviors.

Core UI Design Principles for Mobile

Mobile interfaces differ from desktop due to smaller screens, touch input, and limited attention spans. Three key principles guide design:

1. Fitts’s Law & Touch Targets

Fitts’s Law states that the time to reach a target depends on its size and distance. For mobile:

• Minimum touch target size: 48×48 dp (density-independent pixels) to avoid accidental taps.
• Thumb zones: Design for the left (thumb) and right (index finger) zones to reduce strain.

mindmap
  root((Fitts's Law for Mobile))
    Target Size
      Minimum: 48×48 dp
      Example: Buttons, icons
    Distance
      Proximity to thumb zones
    Thumb Zones
      Left: ~10-15% of screen
      Right: ~85-90% of screen

Example: In eSewa, payment buttons are large (56×56 dp) and placed in the bottom-right corner for easy thumb access.

2. Hick’s Law & Reducing Choices

Hick’s Law: More options = longer decision time. Mobile UIs must:

• Limit menu items to 3-5 primary actions.
• Use progress indicators (e.g., Pathao’s ride status bar) to reduce cognitive load.

mindmap
  root((Hick's Law in Mobile))
    Problem: Too many options
    Solution
      Fewer menu items
      Progressive disclosure (e.g., hamburger menus)
    Example: WhatsApp (3 main tabs: Chats, Status, Calls)

3. The 3-Second Rule

Users expect instant feedback (e.g., button press, swipe action). Delays >3 seconds feel unresponsive.

• Optimize: Use skeleton screens (placeholder UI) during loading (e.g., YouTube’s buffering animation).

Responsive Layouts & Adaptive Design

Mobile screens vary in size (e.g., Ncell’s 5.5" phone vs. a tablet). Key techniques:

1. ConstraintLayout (Android)

A flexible system that defines relative positions between views (no nested hierarchies).

<androidx.constraintlayout.widget.ConstraintLayout>
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Visualization: ConstraintLayout Example

graph TD
    A["Parent Layout"] --> B["Button 1"]
    A --> C["Button 2"]
    B -->|"Top"| A
    B -->|"Start"| A
    C -->|"Top"| B
    C -->|"End"| A

2. Safe Areas & Notches

Modern phones (e.g., iPhone X, OnePlus) have notches or punch-hole cameras. Use:

• Android: ViewCompat.getSafeOnScreen() (API 28+).
• iOS: safeAreaLayoutGuide in SwiftUI.

3. Dynamic Text & Font Scaling

Users adjust display size (Settings > Accessibility). Ensure:

• Text scales smoothly (avoid px; use sp for scalable pixels).
• Test with: Configuration.fontScale = 1.5f (Android) or UIContentSizeCategory (iOS).

Interaction Patterns & Gestures

Mobile apps rely on gestures (swipe, pinch, tap) and platform-specific conventions.

1. Common Gestures

2. Modal Dialogs vs. Sheets

• Dialogs: Block interaction (e.g., "Are you sure?" in Pathao).
• Bottom Sheets: Non-modal (e.g., filters in eSewa).

flowchart TD
    A["User Taps Button"] --> B{"Dialog or Sheet?"}
    B -->|"Blocking"| C["Modal Dialog"]
    B -->|"Non-blocking"| D["Bottom Sheet"]
    C --> E["User must dismiss"]
    D --> F["User can scroll"]

3. Pull-to-Refresh

A gesture-based reload (e.g., Twitter, Facebook).

swipeRefreshLayout.setOnRefreshListener {
    fetchData()
    swipeRefreshLayout.isRefreshing = false
}

Accessibility in Mobile Apps

1 in 4 Nepalis has a disability (per UN). Key features:

• Color contrast: Minimum 4.5:1 for text (WCAG AA).
• Screen readers: Support contentDescription (Android) and accessibilityLabel (iOS).
• Dynamic text: Test with Configuration.fontScale = 2.0f.

Example: NTC’s website uses high-contrast mode for visually impaired users.

Performance Optimization

1. View Recycling (Android)

Reuse RecyclerView items instead of recreating them.

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.bind(data[position]) // Reuse views
}

2. Lazy Loading (Images)

Load images on-demand (e.g., Glide, Picasso).

Glide.with(context)
    .load("https://example.com/image.jpg")
    .into(imageView)

Visualization: Lazy Loading Flow

sequenceDiagram
    User->>App: Scrolls down
    App->>Network: Loads image (if visible)
    Network-->>App: Returns image
    App->>UI: Displays image

In the Real World

1. eSewa

   • Principle: Thumb zones (payment buttons at bottom-right).
   • Gesture: Swipe left to delete a transaction history item.
   • Accessibility: High-contrast mode for low-vision users.

2. Pathao

   • Layout: ConstraintLayout for adaptive ride status bars.
   • Performance: Lazy loading of driver locations on the map.

3. Ncell’s MyNcell App

   • Dynamic Text: Supports font scaling for elderly users.
   • Modal Dialogs: Confirmation for top-up requests.

Exam Tip

• Theory (30%): Know Fitts’s Law, Hick’s Law, and the 3-second rule. Compare ConstraintLayout vs. RelativeLayout.
• Practical (50%): Write XML/JSON for a responsive layout (e.g., a login screen with adaptive buttons).
• Scenario (20%): Given a user flow (e.g., "Design a Daraz order confirmation screen"), justify:
  • Button placement (thumb zones).
  • Gesture (swipe to dismiss).
  • Accessibility (color contrast, screen reader support).

Common Pitfalls:

• Ignoring safe areas (notches).
• Using fixed px instead of sp for text.
• Overloading modal dialogs (use bottom sheets instead).

Key Formula to Remember: $$\text{Touch Target Size}\ge 48\text{ dp}\text{(Minimum for accessibility)}$$