Mobile Interaction Design Patterns

Mobile Design
Patterns 2025

An updated reference guide for interaction designers. Covers pages, components, widgets, input methods, and the new patterns that emerged between 2013 and 2025. Click any pattern for full detail.

4Sections
1Guideline
80+Patterns
22New since 2013
8Deprecated
📐
01 — Pages
Pages & Composition
The page is the primary canvas — what's visible in the viewport at any given state. Grids, templates, and wrapper elements define what's fixed, what floats, and what scrolls. Cultural reading conventions and information hierarchy guide placement. Users are mobile and distracted; they want information fast and easy to manipulate.
Composition
🧩
02 — Components
Components
Components are sections of a designed interactive space — as large as the viewport or appearing in front of other information. They display images, ordered data, expandable lists, and notifications, and enable primary interactions. Combined with widgets, they give the designer nearly unlimited compositional options.
Displaying Information
Control & Confirmation
Revealing More Information
🔲
03 — Widgets
Widgets
Small, reusable display and interactive elements — buttons, links, icons, indicators, tabs, tooltips. Their functions: display small amounts of related information, offer alternative views organically, provide access to controls or settings, show device state, and give quick access to indexed content. Combined with components, they offer nearly unlimited design options.
Lateral Access
Drilldown
Labels & Indicators
Information Controls
⌨️
04 — Input & Output
Input & Output
User preferences depend on natural tendencies, comfort levels, and context of use. Input ranges from physical keys and handwriting to gestures and voice. Output extends beyond the screen — some users rely on an eyes-off-screen approach through haptics and audible notifications. Designers must offer interfaces that appeal to all these needs.
Text & Character Input
General Interactive Controls
Input & Selection
Audio, Haptics & Biometrics
📏
05 — Guidelines
Guidelines 2025
Principles grounded in human factors, physiology, and ergonomics — unique to mobile due to screen size, portability, connectivity, and touch interaction. Covers visual acuity, touch target science, and cognitive load. Updated to include modern safe areas, device sizes, and platform conventions from iOS and Android.
Touch Target Sizes
TargetSmall Phone (< 5")Standard Phone (5–7")Tablet (9–13")
Text (min readable)11pt / 3.9mm13pt / 4.6mm16pt / 5.6mm
Icons (visual)20pt / 7mm24pt / 8.5mm28pt / 10mm
Touch target (min)44pt / 15.5mm44pt / 15.5mm44pt / 15.5mm
Touch target (preferred)48pt / 17mm48pt / 17mm56pt / 20mm
Spacing (center-to-center)28pt / 10mm32pt / 11mm36pt / 13mm
Safe Areas & Notches (2025)
AreaiOS (Dynamic Island)Android (Punch-hole)Recommendation
Top safe area59pt24–32ptNever place interactive content in status bar zone
Bottom safe area34pt0–16ptBottom nav must clear home indicator
Side margins16pt min16pt minUse safeAreaInsets API, never hardcode
Bottom nav height83pt (nav+safe)56pt standardAdd safe area on top of component height
Thumb Zone (Steven Hoober 2022 Research)