mobile-ux

name	mobile-ux
description	Design for mobile — touch targets, thumb zones, gesture patterns, iOS and Material 3 platform conventions, mobile form design, and responsive breakpoints. Use when building mobile-first UI, reviewing a layout for phone/tablet, asked about "touch targets", "thumb zone", "iOS conventions", "Android Material", "mobile form", or "responsive design". Do NOT use for desktop-only UIs — use `ux-heuristics` for general usability.
origin	adapted:ux-ui-mastery
license	MIT © phazurlabs
version	1.0.0
compatibility	Any mobile web, React Native, or responsive frontend.

When to Use

• Use when: designing or reviewing any mobile or responsive layout
• Use when: form feels hard to fill on mobile
• Use when: navigation elements are unreachable with one thumb
• Use when: checking iOS or Android platform-specific conventions before ship
• Do NOT use for: desktop dashboard layouts — use ux-heuristics instead

---

Touch Targets

Platform	Minimum size	Recommended	Min spacing
iOS	44 × 44 pt	48 × 48 pt	8 pt
Android	48 × 48 dp	56 × 56 dp	8 dp
Web	44 × 44 px	48 × 48 px	8 px

Rules:

• Text links: expand clickable area beyond visible text via padding
• Edge targets (floating buttons): add extra padding — grip interferes with accuracy
• Never rely on visual size alone — use min-height/min-width + padding

---

Thumb Zone (Hoober Research)

Based on one-handed phone use patterns:

╔═══════════════╗
║  ┌─────────┐  ║  ← AVOID: top corners (hardest reach)
║  │ Tertiary│  ║
║  │  zone   │  ║
║  ├─────────┤  ║
║  │Secondary│  ║  ← OK: middle and sides
║  │  zone   │  ║
║  ├─────────┤  ║
║  │ PRIMARY │  ║  ← BEST: bottom center
║  │  zone   │  ║
╚══╧═════════╧══╝

• Primary (bottom-center): main actions, tab bar, primary CTA
• Secondary (middle/sides): secondary content, less frequent actions
• Tertiary (top corners): settings, rarely-used controls only

Large phones (6.5"+): top-left is particularly difficult — avoid placing nav here.

---

iOS Human Interface Conventions

Navigation:

• Bottom tab bar — max 5 items (overflow → "More" tab)
• Top navigation bar with back button + swipe-back gesture on all pushed views
• Large titles collapse on scroll
• Bottom sheet modals replace full-screen overlays for most use cases

Grid and spacing:

• Base grid: 8pt
• Standard margins: 16pt left/right
• Safe areas: always respect notch, Dynamic Island, home indicator

Typography:

• System font: SF Pro
• Dynamic Type: mandatory — never disable user font size preferences

Platform expectations:

• Swipe-back on every pushed view
• Haptic feedback on selections, confirmations, errors
• Bottom sheet for contextual menus (not action sheets for everything)

---

Android Material 3 Conventions

Navigation:

• Bottom navigation bar: 3–5 destinations
• Navigation drawer: 5+ destinations (swipe from left edge)
• Single FAB per screen, bottom-right

Grid and spacing:

• Base grid: 4dp
• Standard margins: 16dp
• Edge-to-edge content — respect system bar insets

Typography:

• System font: Roboto or Material Type Scale
• Material You: dynamic color from wallpaper — respect colorScheme tokens

Platform expectations:

• Predictive back gesture support
• Dynamic color adaptation
• FAB elevates above content, not overlapping critical info

---

Mobile Form Design

Layout:

• Single column only — never multi-column on mobile
• Top-aligned labels outperform left-aligned on small screens
• Floating labels save space while maintaining context

Keyboard optimization — match input type:

<input type="email">    <!-- email keyboard -->
<input type="tel">      <!-- phone dial pad -->
<input type="number">   <!-- numeric keyboard -->
<input type="search">   <!-- search keyboard with return key -->

Smart inputs:

• Fixed-length fields auto-advance (OTP, card number segments)
• Input masking for phone, date, card number
• Password visibility toggle — always
• Autofill attributes: autocomplete="email", autocomplete="new-password", etc.

Validation:

• Validate on blur, not on keystroke
• Include success state (green checkmark) — not just error
• Inline errors linked to specific field — not a generic summary at top

Form reduction:

• Collect minimum needed for current step
• Social login where available
• Replace free-text with picker/toggle/slider when input has known valid values

---

Responsive Breakpoints

Mobile-first: write base styles for mobile, enhance upward.

/* Mobile first — no media query needed for base */
/* Small phone    */ @media (min-width: 320px) { }
/* Standard phone */ @media (min-width: 375px) { }
/* Large phone    */ @media (min-width: 428px) { }
/* Tablet         */ @media (min-width: 768px) { }
/* Small desktop  */ @media (min-width: 1024px) { }
/* Desktop        */ @media (min-width: 1440px) { }

Fluid typography — prevents iOS auto-zoom (never below 16px base):

html { font-size: 16px; }
body { font-size: clamp(1rem, 2.5vw, 1.125rem); }

Container queries for component-level responsiveness:

@container (min-width: 400px) { /* component-level breakpoint */ }

---

Anti-Fake-Pass Rules

Before claiming a mobile UI is done, you MUST confirm:

• All interactive elements meet minimum touch target (44px / 44pt)
• Primary actions are in the bottom-center thumb zone
• Forms: single column, keyboard type per field, validation on blur
• iOS or Android conventions respected (whichever is the target platform)
• Base font ≥ 16px (prevents iOS auto-zoom)
• prefers-reduced-motion handled if animations are present

Reference: gates/anti-fake-pass-gate.md | gates/ui-quality-gate.md