Mobile UX Patterns Every Founder Should Know
Mobile UX has different constraints than web. Here are the patterns that work on small screens.
Mobile isn’t just a smaller screen—it’s a different context. Users are on the go, one-handed, distracted. Touch is imprecise. Screen real estate is precious. Designing for mobile requires understanding these constraints.
Here are the patterns that work.
Core Mobile Constraints
Touch targets must be large. Apple recommends minimum 44×44 points. Fingers aren’t pixels.
Attention is fragmented. Users check phones in 1-2 minute bursts. Get to the point.
Context varies. Bright sunlight, walking, noisy environments. Design for the worst case.
Vertical space is limited. Think in terms of what’s visible without scrolling.
Typing is harder. Minimize text input. Use selection over free-form when possible.
Navigation Patterns
Tab Bar Navigation
The most common mobile pattern. Tabs at the bottom provide quick access to main sections.
When to use:
•
3-5 top-level sections
•
Frequent switching between sections
•
Flat information architecture
Best practices:
•
Keep to 5 tabs maximum
•
Use icons + labels (icons alone are ambiguous)
•
Highlight current tab clearly
•
Keep actions consistent
Drawer Navigation
Hidden menu accessed via hamburger icon. Common on Android, less on iOS.
When to use:
•
Many top-level sections (6+)
•
Secondary navigation
•
Settings and account access
Cautions:
•
Out of sight, out of mind—users forget what’s there
•
Requires extra tap to access
•
Don’t hide primary navigation in drawers
Stack Navigation
Push and pop screens in a hierarchy. The standard for flows.
When to use:
•
Linear flows (checkout, onboarding)
•
Drilling into detail views
•
Any parent-child relationship
Best practices:
•
Always provide back button
•
Maintain context (where did I come from?)
•
Use consistent transitions
Modal Navigation
Full-screen overlays for focused tasks.
When to use:
•
Creating new content
•
Focused tasks that shouldn’t be interrupted
•
Temporary state changes
Best practices:
•
Provide clear close/cancel option
•
Consider swipe-to-dismiss
•
Don’t nest modals
Input Patterns
Smart Keyboards
Show appropriate keyboard for the input type:
•
Email: <input type="email"> shows @ key
•
Phone: <input type="tel"> shows number pad
•
Numbers: <input type="number"> shows number pad
•
Search: <input type="search"> shows search key
Pickers and Selectors
For constrained choices, use native pickers:
•
Date picker for dates
•
Time picker for times
•
Dropdown/wheel picker for lists
Don’t make users type what they can select.
Form Design
Reduce fields: Every field is friction. Only ask what you need.
Stack vertically: One field per line. Don’t put labels beside inputs.
Show progress: For long forms, show steps and progress.
Autofill support: Enable autofill for addresses, payment, etc.
Inline validation: Show errors immediately, not after submit.
Sticky submit button: Keep primary action visible without scrolling.
Content Patterns
Cards
Group related content in card containers. Cards:
•
Create visual separation
•
Can be tapped as a single unit
•
Work well in lists
•
Adapt to different screen sizes
Lists
The fundamental mobile pattern. Lists:
•
Scroll naturally
•
Work for any amount of content
•
Can be pulled to refresh
•
Support swipe actions
List best practices:
•
Clear visual hierarchy within items
•
Primary action on tap
•
Secondary actions via swipe or long-press
•
Pull to refresh for live data
•
Infinite scroll or pagination for long lists
Empty States
What users see when there’s no content:
•
Explain what will appear here
•
Provide action to create content
•
Keep it friendly, not sad
Loading States
•
Skeleton screens (outlines of content)
•
Progress indicators for long operations
•
Pull-to-refresh spinner
Never show blank screens while loading.
Gesture Patterns
Tap
Primary interaction. Use for:
•
Buttons
•
List item selection
•
Links
Swipe
Secondary actions. Use for:
•
Revealing actions (delete, archive)
•
Dismissing modals
•
Navigating between views (with caution)
Long Press
Contextual menus. Use for:
•
Additional options
•
Editing mode
•
Share sheets
Pull to Refresh
Refresh content. Only use when:
•
Content updates frequently
•
User expects manual refresh
•
Automatic refresh isn’t appropriate
Pinch/Zoom
For content that benefits from zooming:
•
Images
•
Maps
•
Documents
Don’t disable zoom on text—it’s an accessibility issue.
iOS vs Android
While converging, platforms still differ:
iOS Patterns
•
Tab bar at bottom
•
Navigation bar at top with back arrow
•
Edge swipe to go back
•
Modal sheets from bottom
•
Rounded corners and depth
Android Patterns
•
Bottom navigation (similar to tabs)
•
Top app bar with navigation drawer
•
System back button
•
FAB (Floating Action Button)
•
Material Design surface elevation
What to Do
For most startups: Use cross-platform frameworks (React Native, Flutter) with platform-specific tweaks for feel. Don’t force iOS patterns on Android or vice versa.
Thumb Zones
Users hold phones differently. Design for one-handed use:
Easy reach: Bottom and middle of screen. Put primary actions here.
Hard reach: Top corners. Put secondary actions here.
The “thumb zone” concept: Most important actions should be reachable without shifting grip.
Performance as UX
On mobile, performance is UX:
•
First load under 3 seconds
•
Interaction responses under 100ms
•
Smooth 60fps animations
•
Offline support where possible
Slow apps feel broken, regardless of features.
Testing Mobile Design
Device Testing
Test on real devices, not just simulators:
•
Different screen sizes
•
Different OS versions
•
Different performance tiers
Usage Testing
Watch users interact:
•
Where do they tap?
•
Where do they hesitate?
•
What do they miss?
Context Testing
Test in realistic conditions:
•
One-handed while standing
•
In bright light
•
With interruptions
Common Mobile Mistakes
Desktop patterns forced onto mobile: Hover states, right-click menus, tiny text.
Too many tabs: Five maximum. More requires different navigation.
Text-heavy interfaces: Walls of text don’t work on mobile.
No touch feedback: Users need to know their tap registered.
Breaking platform conventions: iOS users expect swipe-back. Android users expect the back button.
Ignoring the notch: Design around safe areas.
Key Takeaways
•
Design for thumb reach—primary actions at bottom
•
Touch targets minimum 44×44 points
•
Use tab bar or bottom navigation for main sections
•
Minimize typing with pickers, selection, and smart keyboards
•
Performance is UX—slow is broken
•
Test on real devices in realistic contexts
•
Respect platform conventions while maintaining brand
Put your context to work.
Keep your project’s decisions, next steps and proof together as your agents work.
Explore the agent workflow →