The Short Answer
Mobile UX is different from web UX because people hold their phones differently, have less attention, and are often distracted.
The golden rule: design for one-handed use. Everything should be reachable by a thumb.
The Thumb Zone
Hold your phone. Notice how your thumb moves.
The thumb naturally covers the lower two-thirds of the screen. The upper corners are the hardest to reach.
Thumb Zone Layout
- Easy to reach (bottom third) — Navigation, primary buttons, search
- Moderate reach (middle third) — Content, secondary actions, forms
- Hard to reach (top third) — Settings, secondary menus, profile info
Touch Target Sizing
| Element | Minimum Size | Recommended |
|---|---|---|
| Buttons | 44x44px | 48x48px |
| Navigation items | 44x44px | 50x50px |
| Links | 24pt height | 44pt height |
| Icon buttons | 36x36px | 44x44px |
Rule: If users tap the wrong thing, make the targets bigger.
Mobile Navigation Patterns
Bottom Navigation Bar
- 3-5 items max
- Icons + labels
- Best for: primary app sections
Hamburger Menu
- Hidden navigation
- Use sparingly — discoverability suffers
- Best for: secondary features
Tab Bar
- Horizontal tabs within a section
- Best for: filtering content types
Gesture Navigation
- Swipe, pinch, long-press
- Always provide an alternative (not everyone knows gestures)
Floating Action Button (FAB)
- Prominent circular button
- Best for: primary action (compose, create, add)
Mobile UX Best Practices
1. Keep It Simple
- One primary action per screen
- Break complex tasks into steps
- Progressive disclosure (show less, reveal more)
2. Optimize for Short Sessions
- Mobile sessions average 3-5 minutes
- Let users save progress and return later
- Use deep links to take users directly to content
3. Handle Offline States Gracefully
- Show “No internet” screens, not errors
- Cache content for offline viewing
- Sync when connection is restored
4. Use Native Patterns
- Follow platform conventions (iOS HIG, Material Design)
- Don’t reinvent the wheel — users know how native interfaces work
5. Optimize Performance
- Load fast (under 3 seconds)
- Use skeleton screens instead of spinners
- Lazy load images
6. Design for Real Contexts
- People use phones on buses, in bright sunlight, with wet fingers
- Test in real conditions: outdoors, one-handed, while walking
Mobile Design Systems
Use established design systems:
- Material Design 3 (Google) — Comprehensive, well-documented
- Apple Human Interface Guidelines (iOS) — Platform standard
- Fluent Design (Microsoft) — Cross-platform
- Base Web — Customizable React components
Mobile Testing Checklist
- Test on real devices (not just simulators)
- Test one-handed use
- Test in bright sunlight
- Test with slow internet
- Test interruptions (calls, notifications)
- Test on both iOS and Android
- Test landscape and portrait orientations
- Test with accessibility settings enabled
The Bottom Line
Mobile UX is about simplicity, thumb reach, and performance. Design for real-world conditions, not a lab. Keep it simple, make it fast, and always test on real devices.