Mobile UI Patterns

Implement polished, standard mobile UI patterns users expect.

Usage

1. Identify the interaction pattern your feature needs
2. Choose the platform-appropriate implementation (native component vs custom)
3. Follow platform conventions: iOS (HIG) prefers bottom actions, Android (Material) uses FABs
4. Implement proper loading, empty, and error states for every screen
5. Add haptic feedback for destructive actions and confirmations

Examples

• Pull-to-refresh: Use UIRefreshControl (iOS), SwipeRefreshLayout (Android), RefreshIndicator (Flutter) — never build custom pull-to-refresh, users expect native feel
• Infinite scroll: Load next page when user scrolls within 3 items of the bottom, show loading indicator at list end, handle empty/error states for failed page loads
• Swipe actions: Reveal delete/archive buttons on horizontal swipe (iOS UISwipeActionsConfiguration, Android ItemTouchHelper), use red for destructive, blue/green for non-destructive
• Bottom sheet: Present contextual options in a draggable bottom sheet rather than a full-screen modal — supports half-expanded and full-expanded states with snap points
• Skeleton loading: Show animated placeholder shapes matching the layout while data loads — reduces perceived wait time by 30% compared to spinners

Guidelines

• Follow platform conventions: iOS users expect swipe-back navigation, Android users expect the system back button
• Every screen needs four states: loading, content, empty, and error — design all four
• Use optimistic updates for user actions (likes, saves) — revert on failure
• Keep touch targets 44pt minimum, with 8pt spacing between adjacent targets
• Implement keyboard avoidance for all form screens — test with both software and hardware keyboards
• Add subtle animations (200-300ms) for state transitions to feel polished, not sluggish