Mobile is no longer a smaller version of desktop — it's a different interaction model with its own conventions, constraints, and patterns. This guide covers the patterns that consistently produce usable mobile UI.
Core Constraints
Constraint
Spec
Why
Tap target
44pt / 48dp / 48 CSS px min
Thumb accuracy
Body font
16px min (prevents iOS zoom on focus)
Readability + UX
Thumb zone
Bottom half of screen for primary actions
One-handed reach
Safe area
env(safe-area-inset-*)
Notches, indicators
Viewport
width=device-width, initial-scale=1
Correct rendering
Color contrast
WCAG AA 4.5:1 text
Outdoor visibility
The Reliable Patterns
Bottom navigation for primary destinations (3-5 items). Always visible, thumb-reachable.
Sticky action bar for primary CTAs at the bottom of long content.
Full-screen modals instead of small floating dialogs. Easier to read, easier to dismiss.
Card lists over dense tables. Tap targets are bigger and content layout flexes.
Pull-to-refresh for feed-style content. Conventional and discoverable.
Bottom sheets for secondary actions, filters, or pickers — friendlier than full-screen modals for partial interactions.
The Antipatterns
Tiny tap targets crammed together.
Inputs smaller than 16px that trigger iOS zoom on focus.
Hamburger menus hiding all primary navigation.
Tooltips and hover-only interactions (no hover on touch).
Steven Hoober's research at UXmatters mapped how people actually hold phones: about 49% one-handed, 36% cradled with two hands but using one thumb, and only 15% two-thumbed. The implication is that the bottom third of the screen is the comfort zone, the middle two thirds are the "stretch" zone, and the top corner opposite the dominant hand is the "no-fly" zone. Primary actions belong at the bottom; destructive or rarely-used controls belong at the top.
Eight patterns that earn their place
Bottom navigation for 3–5 top-level destinations. Switch to a side drawer above five.
Floating action button (FAB) for the single most-used action on a screen, not a junk drawer.
Pull-to-refresh only on lists where new content arrives passively. Do not use on stable settings screens.
Bottom sheets for context menus and short forms — they replace the modal pop-up everywhere except for confirmations.
Swipe actions on list rows — reveal secondary actions, but always also offer the same action via a tap-to-open detail view.
Skeleton screens instead of spinners for any wait over 400 ms. Perceived speed improves measurably.
Sticky CTAs at the bottom of long scrolls (checkout, sign-up). Do not also stick a header — pick one.
Progressive disclosure in forms: ask for the minimum, then reveal more fields as the user progresses.
Touch target sizing — the numbers
Apple HIG recommends 44 × 44 pt, Google Material recommends 48 × 48 dp, the WCAG 2.5.5 success criterion sets 24 × 24 CSS pixels as the legal minimum. In practice, design to 48 px with 8 px gaps. Anything smaller will be tapped wrong on a regular basis, especially in landscape with the device tilted.
Common mistakes
Hiding navigation behind a hamburger when there are only four destinations — visibility beats minimalism.
Using hover states as the primary cue for affordance — there is no hover on touch devices.
Auto-advancing carousels — users miss content and accessibility suffers.
Tiny "X" buttons in modal corners — make dismissal generous, ideally also via swipe-down or backdrop tap.
Test on actual devices. Chrome's device emulator is fine for layout, useless for ergonomics. Hand a build to someone with small hands and watch them try to reach the top-right.
Frequently Asked Questions
44×44 pt (iOS) or 48×48 dp (Material). For web, 48×48 CSS pixels minimum.
env(safe-area-inset-*) gives space around notches and home indicators.
Bottom nav for 3-5 destinations. Hamburger for secondary. Bottom nav drives more engagement.
No — accessibility failure. Users with low vision need to zoom.