Patterns

Mobile App

Phone-frame patterns for bottom-navigation shells, list-and-detail navigation, and multi-step forms optimized for touch.

App Shell with Bottom Nav

Standard mobile structure: top bar, scrollable feed, and a four-item bottom navigation bar with active state indicators.

Feed
A

Alice

2m ago

Sample post content from Alice.

14 3
B

Bob

1h ago

Sample post content from Bob.

28 7
C

Carol

3h ago

Sample post content from Carol.

9 1

List & Detail

Tap a list item to push a detail view. The back button restores the list — no separate routes needed on mobile.

Locations

Multi-Step Form

Chunked input across steps with a progress bar, step count, and a sticky footer CTA. Tap Continue to advance.

Create account

Step 1 of 3

Create your account

Best Practices

Do

  • Use 44×44 px minimum touch targets for all interactive elements.
  • Use bottom nav for 3–5 primary actions — it is thumb-friendly.
  • Show progress indicators on multi-step flows to reduce abandonment.
  • Stick CTAs to the bottom of the screen so they remain reachable.

Don't

  • Do not use hover-only interactions — touch has no hover state.
  • Do not place more than 5 items in bottom nav without overflow.
  • Do not put destructive actions in the primary CTA position.
  • Do not rely on horizontal swipe without visible affordance cues.

Accessibility

  • All icon-only nav buttons carry aria-label for screen reader announcement.
  • Active nav item uses a color change — pair with a visually-hidden "current page" text.
  • Progress bars should carry role="progressbar" with aria-valuenow / aria-valuemax.
  • Test with VoiceOver (iOS) and TalkBack (Android) before shipping.