Key Insight
Mobile design must account for thumb reachability, variable context, and touch precision—placing primary actions in easy-reach zones and providing visible alternatives to gesture-based interactions.
Key Points
- •Thumb zones: the bottom-center of the screen is the easiest area to reach; top corners and edges are hardest—place primary actions accordingly
- •Avoid placing small or critical targets near screen edges where grip interference causes mis-taps
- •Tab bars (iOS) and bottom navigation (Android) should contain 3–5 items with both icon and text label for maximum clarity
- •Hamburger menus hide navigation and reduce feature discoverability by up to 50%—use only for secondary or infrequent items
- •Gestures (swipe, pinch, long-press) add efficiency but must always have visible button alternatives for discoverability and accessibility
- •Pull-to-refresh and long-press for secondary actions are platform conventions users expect—leverage them but don't make them the only path
Guidelines
- ✓Place primary action buttons in the bottom third of the screen within natural thumb reach
- ✓Use at minimum 44×44px touch targets with at least 8px spacing between adjacent targets
- ✓Provide visual affordances for swipe actions (edge peek, subtle animation hints) so users discover them
- ✓Design for one-handed use as the default; two-handed interactions should be optional enhancements
- ✓Account for context: mobile users are often distracted, in motion, or in bright sunlight—prioritize clarity
- ✓Test on real devices held naturally, not just in desktop browser dev tools
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall — strengthens long-term retention