Mobile App Design (iOS & Android)

Read with the relevant design-system summary (04-design-systems/) when matching platform conventions closely.

Try it — where can one thumb actually reach? Turn on the reach map, then move the primary action into the thumb zone. Zones follow Hoober's observational studies (~2013) of how people really hold phones — an approximation of a right-thumb, one-handed grip, not a measurement. Cells carry letters (E/S/H) as well as color, because color alone can't convey meaning — the library's own rule (WCAG 1.4.1).

This demo needs JavaScript. It shows a phone outline with a 4×7 grid of tap targets marked E/S/H for easy, stretch, and hard one-handed thumb reach: easy at the bottom center-right, hard at the top-left. A "Pay" button can be moved from the hard top-right into the easy bottom-right zone.

Show reach map Move primary action to thumb zone

2025 design-language shifts (both platforms redesigned)

Apple "Liquid Glass" (WWDC, June 2025; the iOS/iPadOS/macOS/watchOS/ tvOS/visionOS 26 generation): a translucent, refractive material for controls and navigation that floats as a distinct layer above content; tab bars shrink on scroll and re-expand on scroll-up; sidebars refract underlying content. Structural guidance is unchanged — tab bars, navigation stacks, and the 44-pt touch-target minimum all still stand.
Material 3 Expressive (Google I/O, May 2025; rolling out from Android 16 QPR1, Sept 2025 onward): springier motion physics, bolder type and shape variety, and a set of new/updated components. Google cites large-scale internal research behind it — treat the specific study numbers as vendor claims.
Practical takeaway for both: build on standard system components so your app inherits these refreshes; heavily custom chrome now dates faster.

Ergonomics of the hand

Hurff/Hoober's research on grips: most phone use involves the thumb; the bottom of the screen is the easy-reach zone, top corners are hardest (Hoober's observational studies, ~2013; Hurff's thumb-zone maps). Hence the industry shift of primary navigation and actions toward the bottom (iOS tab bars, Material navigation bar, bottom sheets, FABs).
Place primary actions in thumb reach; destructive actions out of accidental-tap paths; top area for status/context, not frequent controls.

Touch targets & spacing

Minimums: 44×44 pt (Apple HIG — unchanged in the iOS 26 HIG), 48×48 dp with ≥8 dp separation (Material). Research basis: finger contact patches and Fitts's law; MIT Touch Lab work often cited for ~10 mm fingertip averages — treat exact mm claims cautiously, but the platform minimums are the enforceable standard. WCAG 2.2 SC 2.5.8 adds a 24-px legal-ish floor; aim for the platform numbers.
Visual size can be smaller than the hit area — pad the target, not necessarily the artwork.

Platform conventions that matter (don't blend them blindly)

Navigation: iOS = tab bar (2–5 items) + navigation stack with back at top-left and edge-swipe back; Android = navigation bar/drawer + system back (gesture/button) that must always behave predictably.
Controls: iOS switches/action sheets/SF Symbols vs. Material switches/ bottom sheets/Material Symbols; date pickers, dialogs, and typography all differ. Cross-platform frameworks should still respect each platform's navigation, back behavior, and system integrations (both HIG and Material say this explicitly).

Edge-to-edge & safe areas

Both platforms now assume content draws behind system bars. Android 15 enforces edge-to-edge once an app targets SDK 35 — apps must handle window insets or controls get obscured. iOS uses safe areas: respect the home indicator, status bar, and Dynamic Island/cutouts.
Pattern: let scrollable content extend under bars; keep interactive elements inside safe/inset areas and out of system gesture zones (edge-swipe back, home swipe).

Foldables & large screens

Design to window size classes (compact/medium/expanded — see Responsive Web Design), not device names; the same app may change class mid-session when a foldable opens or a window resizes.
Don't letterbox or stretch phone layouts: use canonical adaptive layouts (list-detail, supporting pane, feed) per Material adaptive guidance and iPadOS conventions (sidebar + multicolumn, Stage Manager windows).
State must survive configuration change (fold/unfold, rotate, resize) — losing scroll position or form input on unfold is the signature failure.
Large-screen users add hardware keyboards, trackpads, and styluses: support shortcuts, pointer hover, and drag-and-drop where relevant (Android large-screen quality guidelines; iPadOS HIG).

Mobile-specific principles

One primary task per screen; deep and narrow beats broad and cluttered.
Defer sign-up and permission prompts until value is shown; ask for permissions in context with the reason (Apple HIG; Android runtime- permission guidance says the same).
Design for interruption: sessions are short and fragmented — autosave everything, restore state perfectly, make re-entry instant.
Offline & flaky networks: show cached content, queue actions, sync transparently; never dead-end on a network error.
Minimize typing: pickers, autofill, biometrics, camera/scan input, social/passkey auth; correct keyboard types per field (email/number/phone).
Gestures: standard gestures only (swipe-to-delete, pull-to-refresh, pinch); custom gestures need visible alternatives — gestures are invisible, so they can accelerate but never be the only path (HIG).
Notifications: opt-in-worthy, bundled, actionable, user-configurable by category; respect Do Not Disturb/Focus.
Text size settings: support Dynamic Type (iOS) / sp scaling (Android); layouts must survive 200% text.
Lightweight entry: App Clips (iOS) remain a supported pattern for instant, install-free task completion. Google Play Instant was shut down in December 2025 — on Android, use deep links into a fast-onboarding full app instead.

Haptics

Use the platforms' semantic haptic APIs (iOS feedback generators / Core Haptics; Android HapticFeedbackConstants / VibrationEffect) rather than raw vibration — durations and strengths then match system conventions.
Haptics confirm and texture (selection ticks, success/warning, detents); fire them synchronized with the visual event, sparingly — constant buzzing trains users to disable them. Never make haptics the only feedback channel; respect the system toggle.

Performance & feedback

Instant touch feedback (<100 ms) on every tappable; skeletons for content loads; optimistic UI for likely-success actions with graceful rollback; 60 fps scrolling as the floor (120 Hz on ProMotion/high-refresh devices). Battery and data are UX: avoid gratuitous location/refresh.

Sources

Apple Human Interface Guidelines — iOS (Layout, Navigation, Gestures, Onboarding, Notifications) (developer.apple.com/design); Apple Newsroom, "Apple introduces a delightful and elegant new software design" (June 2025) — Liquid Glass announcement.
Material Design 3 — components, touch targets, adaptive layout (m3.material.io); Google blog — Material 3 Expressive launch (2025); Android developer guides: edge-to-edge (Android 15 behavior changes), large-screen quality guidelines (developer.android.com).
Hoober, S. (2013). "How Do Users Really Hold Mobile Devices?" UXmatters; Hurff, S. thumb-zone work; Clark, J. Designing for Touch (A Book Apart, 2015).
W3C WCAG 2.2 — SC 2.5.8 Target Size (Minimum).
Nielsen Norman Group — mobile UX research collection (nngroup.com).