Every mobile app reinvents the same wheels. Tab bars, pull to refresh, swipe actions—these patterns exist because they work, and users expect them.
This is a reference for the patterns that matter. I'll skip the theoretical stuff and focus on practical implementation.
Navigation patterns
How users move through your app determines how it feels to use.
Bottom tab bar
The default for apps with 3-5 main sections. Instagram, Spotify, and most consumer apps use this.
┌─────────────────────────────────────┐
│ │
│ │
│ Content │
│ │
│ │
├─────────────────────────────────────┤
│ 🏠 🔍 ➕ ❤️ 👤 │
│ Home Search New Activity Profile │
└─────────────────────────────────────┘
Rules that matter:
- 3-5 items max (more gets cramped)
- Icons with labels beat icons alone
- The current tab should be visually distinct
- Tapping the current tab should scroll to top or reset the stack
When to use it: Almost always for consumer apps. It keeps core functions one tap away.
When to skip it: Single-purpose apps (camera, calculator), games, or apps with one primary flow. For a deeper look at how these patterns differ between platforms, see our iOS vs Android design differences guide.
Top tab bar (scrollable tabs)
Good for subcategories within a section. Twitter uses this for different timeline views.
┌─────────────────────────────────────┐
│ For You │ Following │ Lists → → │
├───────────┴───────────┴─────────────┤
│ │
│ Content │
│ │
└─────────────────────────────────────┘
Rules that matter:
- Swipe between tabs should move content
- Visual indicator showing current tab
- Tabs can scroll horizontally if you have many
When to use it: Content that has natural categories but doesn't need bottom nav prominence.
Hamburger menu (nav drawer)
The three-line menu icon that reveals a side panel. Controversial but still common.
┌─────────────────────────────────────┐
│ ☰ App Title 🔔 │
├─────────────────────────────────────┤
│ │
│ Content │
│ │
└─────────────────────────────────────┘
Menu opens:
┌───────────┬─────────────────────────┐
│ Profile │ │
│ Settings │ Dimmed content │
│ Help │ │
│ Sign out │ │
└───────────┴─────────────────────────┘
The controversy: Items in hamburger menus get used less. If something matters, it shouldn't be hidden.
When it works:
- Secondary navigation (settings, help, account)
- Apps with many sections that can't fit in tabs
- Desktop-first apps adapted for mobile
When to avoid it: Don't put primary features here. If users need it regularly, it should be visible.
Stack navigation (push/pop)
Moving deeper into content, then backing out. This is the foundation of most app navigation.
List → Detail → Action
← ← ← (Back at each level)
Rules that matter:
- Back button or swipe gesture to return
- Maintain scroll position when returning to list
- Don't go too deep (3-4 levels max before users feel lost)
When it's essential: Any app with list → detail flows. That's most apps.
Skip the guesswork: Generate app screens with these patterns built in — describe your app and GenDesigns applies the right navigation, input, and content patterns automatically.
Input patterns
How users enter information.
Text fields
Seems simple but easy to mess up.
Do:
- Large tap targets (44pt minimum height)
- Clear placeholder text that disappears on focus
- Appropriate keyboard type (email, phone, number)
- Visible error states with helpful messages
- Auto-capitalize appropriately (names yes, emails no)
Don't:
- Put labels only inside the field (they disappear when typing)
- Use placeholder text as the only label
- Make users scroll to see the submit button while typing
Search
Two approaches: dedicated search screen or inline search.
Search bar approach:
┌─────────────────────────────────────┐
│ 🔍 Search products... │
├─────────────────────────────────────┤
│ Recent searches: │
│ • Running shoes │
│ • Blue jacket │
└─────────────────────────────────────┘
Inline filter approach:
┌─────────────────────────────────────┐
│ 🔍 Filter ⚙️ │
├─────────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ All │ │ New │ │ Sale │ │
│ └──────┘ └──────┘ └──────┘ │
├─────────────────────────────────────┤
│ Results │
└─────────────────────────────────────┘
Rules that matter:
- Show recent searches (users repeat themselves)
- Search as you type when possible
- Clear button to reset
- Empty states when no results
Pickers and selectors
Avoid typing when selection works better.
Date picker: Use the native picker. Users know how it works. Custom date pickers are usually worse.
Option selection:
- 2-5 options: Segmented control or chips
- 5-10 options: Dropdown or action sheet
- 10+ options: Searchable list
Multi-select: Checkboxes with clear selected count. "3 selected" beats users wondering if their taps registered.
Forms
Long forms on mobile are painful. Minimize them.
Strategies:
- Break into steps (1 of 3, 2 of 3...)
- Save progress automatically
- Use smart defaults
- Only ask what's necessary
Progress indicator:
┌─────────────────────────────────────┐
│ Personal Info 1 ━━━━ 2 ─── 3 │
├─────────────────────────────────────┤
│ │
│ First name: [_______________] │
│ │
│ Last name: [_______________] │
│ │
│ [ Continue ] │
└─────────────────────────────────────┘
Content patterns
How information gets displayed.
Cards
The workhorse of mobile UI. Self-contained content blocks that can be stacked, gridded, or swiped.
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ Image │ │
│ ├─────────────────────────────┤ │
│ │ Title │ │
│ │ Subtitle or description │ │
│ │ [Action] [Action] │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Next card │ │
└──┴─────────────────────────────┴───┘
Rules that matter:
- Consistent card structure throughout the app
- Clear visual boundaries (shadow, border, or background)
- Tap target is the whole card for detail views
- Actions within cards should be obviously tappable
Lists
For content without images or when density matters.
┌─────────────────────────────────────┐
│ Item title > │
│ Secondary text │
├─────────────────────────────────────┤
│ Another item > │
│ Secondary text │
├─────────────────────────────────────┤
│ Third item > │
└─────────────────────────────────────┘
Rules that matter:
- Clear separators between items
- Chevron or other indicator for drilldown
- Thumbnail on left if images are relevant
- Action on right if there's a secondary action
Empty states
What users see when there's no content yet.
Do:
- Explain why it's empty
- Tell users how to add content
- Use illustration or icon to soften the void
Don't:
- Show literally nothing
- Use generic "No data" messages
- Miss the opportunity to guide users
┌─────────────────────────────────────┐
│ │
│ (illustration) │
│ │
│ No workouts yet │
│ │
│ Start tracking your first │
│ workout to see it here. │
│ │
│ [ Log Workout ] │
│ │
└─────────────────────────────────────┘
Loading states
Users should always know the app is working.
Skeleton screens: Gray placeholders mimicking content layout. Better than spinners because they show progress.
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ ████████████ │ │
│ │ ██████████████████████ │ │
│ │ ████████ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
Spinners: Fine for short waits (less than 3 seconds) or when content structure isn't predictable.
Progress bars: For long operations where you can show actual progress (file uploads, downloads).
Interaction patterns
How users manipulate content.
Pull to refresh
Standard for feeds and lists with changing content.
Pull down:
┌─────────────────────────────────────┐
│ ↺ Refreshing... │
├─────────────────────────────────────┤
│ Content │
└─────────────────────────────────────┘
Rules that matter:
- Visual feedback during pull
- Threshold before refresh triggers (don't refresh on every small scroll)
- Haptic feedback on iOS when threshold is crossed
Swipe actions
Revealing actions by swiping list items. Email apps made this famous.
Swipe left to reveal:
┌─────────────────────────────────────┐
│ Item content │ 🗑️ │ ⭐ │
└─────────────────────────────────────┘
Rules that matter:
- Swipe should reveal, not immediately execute
- Destructive actions (delete) need confirmation or undo
- Keep actions to 2-3 max per direction
- Partial swipe reveals; full swipe can execute primary action
Long press
Secondary actions without cluttering the UI.
Common uses:
- Context menus
- Reordering items
- Quick actions (iOS home screen style)
Rules that matter:
- Visual feedback that press registered
- Haptic feedback improves discoverability
- Don't hide essential actions behind long press
Bottom sheets
Modal content that slides up from the bottom. More thumb-friendly than centered modals.
┌─────────────────────────────────────┐
│ │
│ Dimmed background │
│ │
├─────────────────────────────────────┤
│ ─── (drag handle) │
│ │
│ Sheet content │
│ Options, forms, details │
│ │
│ [ Primary Action ] │
└─────────────────────────────────────┘
Rules that matter:
- Drag handle to indicate dismissability
- Can be dismissed by swipe down or tapping background
- Don't put critical actions only accessible via sheet
Patterns to use carefully
Carousels
Swiping through a series of items.
Problems:
- Users often miss content past the first card
- No indication of how many items exist
- Easy to accidentally swipe past what you wanted
When they work:
- When all items are roughly equal in importance (featured stories)
- When there's clear visual indication of more content
- When users can tap to see all items
Infinite scroll
Loading more content as users scroll.
Problems:
- Hard to reach footer content
- Users lose their place if they accidentally navigate away
- Can feel endless without a sense of completion
When it works:
- Social feeds where there's genuinely no "end"
- Search results (but show count if possible)
Always provide:
- Loading indicator when fetching more
- Way to jump to top
- Saved scroll position if navigating away
Modals and popups
Interrupting content with overlay.
Use sparingly. Every modal is a user interruption. Ask: does this need to block the rest of the app?
Better alternatives:
- Inline expansion
- Bottom sheets (less intrusive)
- New screen (if complex)
What's dated in 2026
Heavy skeuomorphism. The fake leather and wood textures from iOS 6 era. Nobody misses these.
Hamburger menus for primary nav. Bottom tabs won. Accept it.
Tiny tap targets. We know better now. 44pt minimum.
Full-screen interstitials. Users close them immediately. Don't even try.
Tutorial overlays. Those "coach marks" pointing at every button. Make the UI self-explanatory instead.
Aggressive permission requests on first launch. Ask when the feature is actually needed.
Using AI to implement patterns
GenDesigns knows these patterns. Mention them in your prompts:
Design a recipe app with:
- Bottom tab navigation (Home, Search, Saved, Profile)
- Card-based recipe list with pull to refresh
- Swipe to save recipes
- Bottom sheet for ingredient lists
- Skeleton loading states
The AI will apply standard implementations. You can then iterate on specifics.
Use our mobile app design checklist to make sure you haven't missed any essential elements. Patterns aren't creative challenges. They're conventions that let you focus creative energy on what makes your app different.
Related reading:
- App Onboarding Design Examples - 15 onboarding patterns
- Mobile App Color Schemes 2026 - Color theory for mobile apps
- iOS vs Android Design Differences - Platform-specific patterns