32 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/mobile-patterns.json.
Place primary actions in the bottom third of the screen where thumbs naturally rest. The top of the screen is the stretch zone — reserve it for less-frequent actions or information display. The "thumb zone" principle applies to all one-handed mobile usage.
Minimum 48x48dp (Material Design) or 44x44px (WCAG 2.5.8). Small targets cause mis-taps, especially for users with motor impairments. The most common mobile usability failure.
Make entire rows, cards, and list items tappable — not just the text or icon inside them. Users expect the full surface to be interactive. Tapping dead space next to a link and getting no response frustrates users.
Maintain at least 8px of non-interactive space between adjacent touch targets. Without spacing, users accidentally trigger the wrong action — the "ghost touch zone" problem, especially common in dense lists and toolbars.
Floating Action Button — a circular primary action button fixed at the bottom-right corner. Use for a single promoted action (compose, add, create). Limit to one per screen.
Text inputs need 48px minimum height and `font-size: 16px` to prevent iOS Safari from auto-zooming. iOS zooms the viewport when focused inputs have font-size below 16px, breaking layout.
A fixed bar at the bottom of the screen with 3-5 navigation tabs, each showing an icon and label. The dominant mobile navigation pattern — used by every major app. More than 5 tabs becomes cramped.
A side panel (typically 80vw wide) that slides in from the left or right, containing navigation links. Best for apps with 5+ sections or deep hierarchies. Always closeable via X button, backdrop tap, and swipe.
A left-pointing chevron or arrow in the top-left corner that navigates to the previous screen. The universal mobile "go back" gesture. Must align with both Android back button and iOS swipe-back expectations.
A header that shrinks from a tall layout (56px with title/subtitle) to a compact bar (44px with title only) as the user scrolls down, maximizing content space. Restores when scrolling back up.
A panel that slides up from the bottom to 40-60% of the screen height, with a drag handle for resize and swipe-down dismiss. Used for contextual options, filters, and secondary content without full navigation.
Swipe horizontally on a list item to reveal actions — swipe left for destructive actions (delete, archive) in red, swipe right for affirmative actions (complete, favorite) in green. An 80px threshold prevents accidental triggers.
Drag down from the top of a scrolled-to-top list to trigger a content refresh. Show a spinner animation pulled below the header. 64px pull threshold. The most recognized mobile gesture after tap and scroll.
A 500ms press-and-hold reveals a context menu of actions for the touched element. On mobile, render as a bottom sheet rather than a positioned dropdown to keep options in the thumb zone.
Two-finger pinch gesture to zoom into images, maps, or charts. Intuitive for visual content exploration. Always provide +/- button alternatives for single-finger and keyboard users.
Swipe a toast, notification, or card horizontally to dismiss it. Uses velocity-based calculation — fast flicks dismiss even with small displacement. The standard dismissal gesture for transient UI.
Vibration feedback confirming touch interactions — 10ms for success/selection, 100-50-100ms pattern for error/warning. Enhances perceived responsiveness. Must be opt-out respecting user settings.
CSS environment variables that account for hardware obstructions — the iPhone notch, Dynamic Island, Android camera cutouts, and home indicator bar. Without these, UI gets hidden behind device chrome.
Use `100dvh` instead of `100vh` for full-screen layouts. On mobile browsers, `100vh` includes the space behind the URL bar, causing content to overflow. `dvh` adjusts dynamically as the URL bar shows/hides.
Arrange screen content in a reverse pyramid: critical interactive elements at the bottom (easy to reach), informational content at the top (readable but rarely tapped). Optimizes for one-handed phone use on larger screens.
iOS Safari auto-zooms the viewport when a focused input has `font-size` below 16px. This breaks layout and disorients users. The fix is CSS, not meta tags — never use `user-scalable=no`.
Full-screen vertical cards that auto-advance every 5-7 seconds. Tap right side to advance, left to go back, hold to pause. Progress indicators at the top show position. The dominant format for ephemeral mobile content.
A transient notification banner that slides down from the top of the screen, mimicking native push notification styling. Auto-dismisses after 4 seconds. Tappable to navigate to related content.
Placeholder shapes matching the real content layout, animated with a shimmer effect while loading. Heights must match actual content to prevent layout shift. More effective than spinners for perceived performance.
A vertical sequence of timestamped events connected by a visual line, showing chronological activity (user actions, order updates, project milestones). Each entry has a node marker, timestamp, title, and optional detail.
A 1-5 star rating input or display. For input: tap a star to set rating (tapping the same star toggles it off). Each star must be an individually tappable 44px+ target. Display ratings with filled/half/empty stars.
A multi-step process with a visual progress indicator showing completed, current, and upcoming steps. On mobile, the full stepper collapses to a compact "Step 2 of 5" label to save horizontal space.
A three-state toggle (System / Light / Dark) that respects `prefers-color-scheme` by default and saves user overrides to localStorage. System option follows OS preference and updates live.
A button that appears after scrolling 400-600px, smoothly scrolling to the top of the page when tapped. Essential for long-scrolling mobile pages where reaching the header requires excessive thumb effort.
A bottom-mounted list of share targets or actions triggered by a share button. Uses the native Web Share API when available for OS-level sharing, with a custom fallback bottom sheet listing copy-link, email, and social options.
A deck of cards where the top card can be swiped left (reject) or right (accept) — the Tinder-style interaction pattern. Cards behind are slightly scaled down to create depth. Used for decision-making interfaces.
A horizontally scrolling container where items snap to alignment points, creating a carousel-like experience without complex JavaScript. Used for image galleries, product rows, and category browsing.