Mobile UI/UX: Design Principles for Great Apps
Mobile UI/UX design is the practice of creating interfaces that are intuitive, efficient, and delightful on mobile devices. Unlike desktop applications, mobile apps must work within the constraints of small screens, touch input, varying network conditions, and interrupted usage patterns.
This guide covers the core principles of mobile design, from navigation patterns and touch interactions to responsive layouts and accessibility.
Design Principles
Clarity
Users should understand the interface immediately. Every element should communicate its purpose without ambiguity. Use clear labels, recognizable icons, and consistent visual language.
Apple’s Human Interface Guidelines and Google’s Material Design both emphasize clarity as a foundational principle. Text should be legible at all sizes, icons should include labels where possible, and navigation should follow platform conventions.
Fitts’s Law
Fitts’s Law states that the time to acquire a target is a function of the distance to it and its size. On mobile, this means important interactive elements — buttons, links, navigation controls — should be large enough (at least 44x44 points on iOS, 48x48dp on Android) and positioned where thumbs naturally rest.
The bottom of the screen is the most accessible zone for thumb interaction. Place primary actions there, not at the top. This is why tab bars and bottom navigation are so effective.
Thumb Zone
Studies show that mobile users primarily hold their phone in one hand and navigate with their thumb. The screen can be divided into zones:
- Easy zone: Bottom and center — comfortable thumb reach
- Stretch zone: Middle areas — require slight thumb extension
- Hard zone: Top — requires changing grip or using the other hand
Place primary actions in the easy zone, secondary actions in the stretch zone, and rarely-used actions in the hard zone.
Hick’s Law
Hick’s Law states that the time it takes to make a decision increases with the number and complexity of choices. On mobile, present users with no more than 5-7 options at a time. Break complex decisions into sequential steps. Use progressive disclosure — show advanced options only when needed. A focused interface reduces cognitive load and improves task completion rates.
Navigation Patterns
Tab Bar / Bottom Navigation
The tab bar is the most common navigation pattern. It shows 3-5 top-level destinations at the bottom of the screen. Users can switch between sections instantly.
// SwiftUI tab bar example
TabView {
HomeView().tabItem { Label("Home", systemImage: "house") }
SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") }
ProfileView().tabItem { Label("Profile", systemImage: "person") }
---Stack Navigation
Stack (or hierarchical) navigation pushes and pops screens onto a navigation stack. It is ideal for drill-down experiences like settings, email threads, or product details.
The back button should always return to the previous screen. Long-pressing the back button on Android shows a history stack. Combine stack navigation with tab navigation for complex apps — each tab maintains its own navigation stack.
Gesture Navigation
Modern apps use gestures for navigation — swipe back on iOS, swipe to delete, pull to refresh. These gestures should have visual hints and be discoverable. Avoid requiring users to memorize complex gesture sequences. Provide fallback buttons for every gesture interaction.
Bottom Sheet Navigation
Bottom sheets overlay content from the bottom of the screen without leaving the current context. Use them for secondary actions, filters, or sharing options. Bottom sheets can be persistent (always visible) or modal (dismissed by tapping outside). The bottom sheet pattern preserves context and reduces navigation depth.
Touch Interactions
Visual Feedback
Every touch interaction should produce immediate visual feedback. A button should highlight when pressed. A list item should show a background tint. This confirms to the user that the system received their input.
/* Button press feedback */
.button:active {
opacity: 0.7;
transform: scale(0.97);
---Touch Targets
Minimum touch target size is 44x44 points. Smaller targets frustrate users and cause errors. Even if a visual element is small (like an information icon), extend its hit area to meet the minimum.
Gesture Conflicts
Be careful when combining gestures. A horizontal swipe to navigate back can conflict with a horizontal swipe to reveal actions. On iOS, the back swipe only triggers from the left edge of the screen, leaving the rest for app-specific gestures. Android’s back gesture (swipe from left or right edge) can conflict with navigation drawers — use the drawer’s edge swipe zone strategically.
Haptic Feedback
Haptic feedback provides tactile confirmation for interactions. Use light impacts for button taps, medium impacts for successful operations, and heavy impacts for destructive actions. iOS provides UIImpactFeedbackGenerator with three intensity levels. Android offers similar haptic constants through HapticFeedbackConstants. Use haptics sparingly — too much feedback becomes noise.
Responsive Layouts
Mobile devices come in many sizes — from small phones to tablets. Your layout must adapt.
Auto Layout / Constraint-Based Layout
On iOS, use Auto Layout with constraints that adapt to different screen sizes. On Android, use ConstraintLayout. In Flutter, use LayoutBuilder to respond to available space.
// Flutter responsive layout
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return WideLayout();
} else {
return NarrowLayout();
}
},
);Adaptive Typography
Text sizes should scale with the device. Use dynamic type on iOS (preferredContentSizeCategory) and sp units on Android. Never hardcode point sizes for body text. Support accessibility text sizes — users with visual impairments often increase text size system-wide.
Breakpoints for Mobile Design
Design for three breakpoints: small phone (320-375dp), large phone (376-428dp), and tablet (600dp+). Use grid systems with flexible columns that reflow at each breakpoint. Test on real devices at each breakpoint rather than relying solely on the simulator.
Accessibility
Mobile accessibility means designing for everyone, including users with visual, motor, or hearing impairments.
Screen Reader Support
Ensure all interactive elements have meaningful labels for screen readers like VoiceOver (iOS) and TalkBack (Android).
// Accessibility label in SwiftUI
Button(action: playSong) {
Image(systemName: "play.fill")
---
.accessibilityLabel("Play")Touch Accommodations
Support touch accommodations like touch exploration (explore by touching, not tapping), dwell control (tap by hovering), and switch control (scan and select). Ensure all actions can be performed without precise tapping.
Color and Contrast
Ensure sufficient color contrast between text and background. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Do not rely solely on color to convey information — use icons, patterns, and text labels as well.
Dynamic Type and Scaling
Support Dynamic Type on iOS and font scale on Android. Test your layouts at the largest accessibility text size. Ensure text does not truncate or overlap buttons at maximum scale. Use auto-layout to accommodate text growth.
Testing Designs
Test your designs with real users. Observe where they hesitate, tap incorrectly, or ask for help. A/B test different navigation patterns. Collect analytics on drop-off points and error rates. Use heatmaps and session recordings to understand user behavior. Run usability tests early in the design process — finding issues in sketches is much cheaper than finding them in production code.
Conclusion
Great mobile design is invisible — users focus on their goals, not on your interface. Master these principles, test with real users, and iterate based on feedback. The best mobile apps are those that respect the user’s time, attention, and physical constraints.
FAQ
How do I choose between a hamburger menu and a tab bar?
Use a tab bar for 3-5 top-level destinations that users access frequently. Use a hamburger menu (drawer navigation) for secondary destinations, settings, or when you have more than 5 top-level sections. Studies show tab bars have 30-50% higher engagement than hamburger menus for primary navigation.
What is the ideal font size for mobile UI?
Body text should be 16-18sp on Android and 17pt on iOS. Headings should be 20-24sp/pt. Caption text should be 12-13sp/pt. Always use system fonts (San Francisco on iOS, Roboto on Android) for optimal legibility. Support Dynamic Type for accessibility.
How do I design for one-handed use?
Place primary actions in the bottom third of the screen. Use bottom navigation. Keep interactive elements in the thumb zone. Consider reachability (iOS automatically shifts content down when double-tapping the home indicator area). Test your layout on a 6.7-inch phone in one-handed mode.
What tools should I use for mobile UI/UX design?
Figma is the industry standard for collaborative design with robust mobile prototyping. Sketch remains popular for macOS users. Use Protopie or Principle for advanced micro-interactions and animations. Test prototypes on real devices using Figma Mirror or Sketch Mirror. Use Maze or UserTesting for remote usability testing.
How do I handle dark mode in my mobile app?
Design for both light and dark themes from the start. Use semantic colors (named by purpose, not by appearance) that adapt automatically. Avoid hardcoding colors — use system color tokens. Test all UI states in both modes. On iOS, system colors adapt automatically. On Android, use the dark theme qualifier in your theme resources.
For a comprehensive overview, read our article on Android Development Guide.
For a comprehensive overview, read our article on App Store Google Play Guide.