What is Mobile UI/UX?
UI (User Interface) is what users see and interact with - buttons, colors, fonts, layouts. Think of it as the look and feel of your app, like the interior design of a car.
UX (User Experience) is how users feel when using your app - is it easy? frustrating? delightful? Think of it as how smoothly the car drives and how comfortable the seats are.
Good mobile UI/UX is like a well-designed elevator - users know exactly what to do without instructions, it responds immediately to their actions, and it gets them to their destination efficiently.
Why Mobile UI/UX Matters
- First Impressions: 94% of first impressions are design-related
- User Retention: Good UX increases user retention by 400%
- Conversion Rates: Better design can double conversion rates
- App Store Rankings: User ratings depend heavily on UX
- Brand Perception: Professional design builds trust
- Competitive Advantage: Great UX sets you apart
- Reduced Support: Intuitive design means fewer help requests
Mobile-First Thinking
Mobile-first means designing for small screens first, then expanding to larger screens. It's like packing a suitcase - you prioritize the essentials first, then add extras if there's room.
Why Mobile-First?
- Over 60% of web traffic is from mobile devices
- Forces you to focus on what's truly important
- Easier to scale up than to shrink down
- Better performance on all devices
- Google prioritizes mobile-first indexing
Mobile-First Principles:
- Content First: Show most important content immediately
- Simplify: Remove unnecessary elements
- Touch-Friendly: Design for fingers, not cursors
- Speed Matters: Optimize for slow connections
- Progressive Enhancement: Add features for larger screens
Core Design Principles
1. The Thumb Zone
Most users hold phones with one hand. The thumb zone is where users can comfortably reach without stretching. Think of it like a baseball player's strike zone.
Thumb Zone Map:
┌─────────────────┐
│ HARD REACH │ Top of screen (notifications)
├─────────────────┤
│ │
│ EASY REACH │ Middle area (main content)
│ │
├─────────────────┤
│ NATURAL ZONE │ Bottom third (navigation, primary actions)
└─────────────────┘
Best Practices:
- Place primary actions (buttons) in bottom third
- Important navigation at bottom (like Instagram, Twitter)
- Less important items at top
- Avoid critical actions in top corners2. Touch Target Sizes
Buttons and interactive elements need to be large enough for fingers to tap accurately. Think of them like elevator buttons - too small and you'll press the wrong floor.
Minimum Touch Target Sizes:
┌────────────────────────────────┐
│ Minimum: 44x44 px (iOS) │
│ Optimal: 48x48 px (Android) │
│ Ideal: 56x56 px or larger │
└────────────────────────────────┘
Spacing:
- 8px minimum between touch targets
- 16px recommended for better accuracy
- Icons: 24x24px minimum
Example (React Native):
<TouchableOpacity
style={{
width: 48,
height: 48,
justifyContent: 'center',
alignItems: 'center',
margin: 8
}}
>
<Icon name="heart" size={24} />
</TouchableOpacity>3. Visual Hierarchy
Guide users' eyes to the most important elements first. Like a newspaper - headlines are biggest, body text is smaller.
Text Hierarchy:
┌──────────────────────────────┐
│ H1: 28-32px (Page title) │
│ H2: 24-28px (Section title) │
│ H3: 20-24px (Subsection) │
│ Body: 16-18px (Main text) │
│ Caption: 14px (Helper text) │
│ Small: 12px (Footnotes) │
└──────────────────────────────┘
Size isn't everything:
- Use weight (bold, medium, regular)
- Use color (primary, secondary, disabled)
- Use spacing (margins, padding)
- Use contrast (background vs foreground)4. White Space (Breathing Room)
Empty space around elements makes content easier to read and understand. Think of it like rooms in a house - cluttered rooms are stressful, spacious rooms are calming.
- Don't fill every pixel - let content breathe
- Use padding: 16px is a good standard
- Group related items with less space, separate unrelated items with more space
- White space is not wasted space - it's intentional design
Navigation Patterns
1. Bottom Tab Navigation
Most popular for mobile apps. Easy to reach with thumb. Perfect for 3-5 main sections.
When to use:
✓ 3-5 main sections of equal importance
✓ Frequently switching between sections
✓ Need quick access to all sections
✓ Examples: Instagram, Twitter, Facebook
Layout:
┌───────────────────┐
│ │
│ Main Content │
│ │
│ │
├───┬───┬───┬───┬───┤
│ H │ S │ + │ N │ P │ (Home, Search, Post, Notif, Profile)
└───┴───┴───┴───┴───┘
React Native Example:
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>2. Hamburger Menu (Drawer)
Side menu that slides out. Good for many options, but hides navigation.
When to use:
✓ 6+ navigation items
✓ Less frequently accessed sections
✓ Need to preserve screen space
✓ Examples: Gmail, Medium
Avoid when:
✗ Main navigation (use tabs instead)
✗ Critical user flows
✗ Users need quick switching
Layout:
┌─────┬─────────────┐
│ H │ Settings │ Slides from left
│ o │ Profile │
│ m │ Help │
│ e │ Logout │
└─────┴─────────────┘3. Gestures
Swipes, pinches, long-presses. Natural for mobile but need visual hints.
- Swipe: Delete email, navigate between screens
- Pull to refresh: Update content (social media feeds)
- Pinch to zoom: Images, maps
- Long press: Show context menu, move items
- Always provide alternative: Don't rely only on gestures
Responsive Layouts
Your app should look great on all screen sizes - from small phones to tablets. Think of it like water that adapts to any container.
Flexbox Layout
Flexbox is like organizing items in flexible containers. Items automatically adjust based on available space.
// React Native Flexbox Example
// Horizontal layout (Row)
<View style={{
flexDirection: 'row', // Items in a row
justifyContent: 'space-between', // Space between items
alignItems: 'center', // Vertically centered
padding: 16
}}>
<Text>Left</Text>
<Text>Middle</Text>
<Text>Right</Text>
</View>
// Vertical layout (Column) - Default
<View style={{
flexDirection: 'column', // Stack vertically
flex: 1, // Take all available space
padding: 16
}}>
<View style={{ flex: 1, backgroundColor: 'red' }} />
<View style={{ flex: 2, backgroundColor: 'blue' }} />
<View style={{ flex: 1, backgroundColor: 'green' }} />
</View>
// Responsive grid
<View style={{
flexDirection: 'row',
flexWrap: 'wrap', // Wrap to next line
justifyContent: 'space-between'
}}>
{items.map(item => (
<View style={{
width: '48%', // 2 columns with gap
marginBottom: 16
}}>
<Image source={item.image} />
</View>
))}
</View>Handling Different Screen Sizes
import { Dimensions, Platform } from 'react-native';
const { width, height } = Dimensions.get('window');
// Responsive font sizes
const isSmallDevice = width < 375;
const isMediumDevice = width >= 375 && width < 768;
const isTablet = width >= 768;
const styles = StyleSheet.create({
title: {
fontSize: isTablet ? 32 : (isSmallDevice ? 20 : 24)
},
container: {
padding: isTablet ? 32 : 16
},
grid: {
// 1 column on phone, 2 on tablet
width: isTablet ? '48%' : '100%'
}
});
// Platform-specific styles
const buttonStyle = {
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
},
android: {
elevation: 4,
}
})
};Color and Typography
Color Psychology
- Blue: Trust, security (Facebook, Twitter, LinkedIn)
- Green: Growth, health, money (WhatsApp, Spotify)
- Red: Urgency, passion, energy (YouTube, Pinterest)
- Yellow: Happiness, optimism, warmth (Snapchat)
- Purple: Creativity, luxury (Twitch, Roku)
- Black: Sophistication, elegance (Uber, Apple)
Color Accessibility
Contrast Ratios (WCAG Guidelines):
┌──────────────────────────────────┐
│ Normal text: 4.5:1 minimum │
│ Large text: 3:1 minimum │
│ UI elements: 3:1 minimum │
└──────────────────────────────────┘
Good Practices:
✓ Don't use color alone to convey information
✓ Use icons + color for status (not just red/green)
✓ Test with color blindness simulators
✓ Provide high contrast mode option
Example:
// Bad - relies only on color
<Text style={{ color: 'red' }}>Error</Text>
// Good - icon + color + text
<View style={{ flexDirection: 'row' }}>
<Icon name="alert-circle" color="red" />
<Text style={{ color: 'red' }}>Error: Invalid email</Text>
</View>Typography
Mobile Typography Rules:
┌─────────────────────────────────────┐
│ 1. Use system fonts for fast loading│
│ 2. Minimum 16px for body text │
│ 3. Line height: 1.5x font size │
│ 4. Max 60-70 characters per line │
│ 5. Left-align for readability │
└─────────────────────────────────────┘
Font Families:
- iOS: San Francisco
- Android: Roboto
- Custom: Google Fonts (adds load time)
Example:
const typography = {
h1: {
fontSize: 28,
fontWeight: '700',
lineHeight: 36,
letterSpacing: -0.5
},
body: {
fontSize: 16,
fontWeight: '400',
lineHeight: 24,
letterSpacing: 0
},
caption: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: '#666'
}
};Forms and Input Design
Form Best Practices
- One Column: Easier to scan and complete
- Clear Labels: Above input, not inside (labels disappear when typing)
- Appropriate Keyboards: Email keyboard for email, number pad for numbers
- Inline Validation: Show errors immediately, not after submit
- Progress Indicators: Show how many steps remain
- Smart Defaults: Pre-fill what you can
- Clear CTAs: "Create Account" not "Submit"
// Good form design example
<View style={styles.form}>
{/* Clear label above input */}
<Text style={styles.label}>Email Address</Text>
<TextInput
style={styles.input}
placeholder="you@example.com"
keyboardType="email-address" // Email keyboard
autoCapitalize="none" // Don't capitalize
autoCorrect={false} // Don't autocorrect
textContentType="emailAddress" // Autofill support
/>
{/* Show error immediately */}
{emailError && (
<Text style={styles.error}>
Please enter a valid email
</Text>
)}
{/* Phone number with appropriate keyboard */}
<Text style={styles.label}>Phone Number</Text>
<TextInput
style={styles.input}
placeholder="(555) 123-4567"
keyboardType="phone-pad" // Number pad
textContentType="telephoneNumber"
/>
{/* Clear, descriptive button */}
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Create Account</Text>
</TouchableOpacity>
</View>Loading States and Feedback
Always show users what's happening. Like an elevator showing which floor it's on - users feel less anxious when they know the system is working.
Types of Loading States:
┌────────────────────────────────────┐
│ 1. Spinner: Quick actions (<2s) │
│ 2. Skeleton: Content loading │
│ 3. Progress bar: File uploads │
│ 4. Pull-to-refresh: Update content │
└────────────────────────────────────┘
// Loading spinner
{loading && (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#007AFF" />
<Text>Loading...</Text>
</View>
)}
// Skeleton placeholder
<View style={styles.skeletonCard}>
<View style={[styles.skeleton, { width: 100, height: 100 }]} />
<View style={[styles.skeleton, { width: '100%', height: 20 }]} />
<View style={[styles.skeleton, { width: '70%', height: 20 }]} />
</View>
// Success feedback
<View style={styles.successMessage}>
<Icon name="check-circle" color="green" size={24} />
<Text>Account created successfully!</Text>
</View>
// Error with retry option
<View style={styles.errorContainer}>
<Icon name="alert-circle" color="red" size={48} />
<Text>Something went wrong</Text>
<Button title="Try Again" onPress={retry} />
</View>Accessibility (A11y)
Design for everyone, including users with disabilities. Good accessibility benefits all users.
- Screen Reader Support: Add accessibility labels to all interactive elements
- Sufficient Contrast: Text readable for low vision users
- Scalable Text: Support system font size settings
- Alternative Text: Describe images for blind users
- Don't Rely on Color Alone: Use icons + text
- Keyboard Navigation: Support external keyboards
// Accessibility example
<TouchableOpacity
accessible={true}
accessibilityLabel="Add to favorites"
accessibilityHint="Double tap to add this item to your favorites"
accessibilityRole="button"
>
<Icon name="heart" />
</TouchableOpacity>
// Image with alt text
<Image
source={require('./profile.jpg')}
accessible={true}
accessibilityLabel="Profile photo of John Smith"
/>
// Dynamic font sizes
<Text style={{
fontSize: 16,
...Platform.select({
ios: {
// Scales with iOS accessibility settings
fontSize: PixelRatio.getFontScale() * 16
}
})
}}>
This text scales with system settings
</Text>Best Practices Summary
- Keep It Simple: Remove unnecessary elements
- Consistent Design: Use same patterns throughout app
- Thumb-Friendly: Important actions in easy reach
- Fast Loading: Show content within 3 seconds
- Clear Feedback: Confirm every user action
- Forgiveness: Allow undo, confirm destructive actions
- Native Patterns: Follow iOS/Android guidelines
- Test with Real Users: Watch people use your app
- Iterate: Design is never "done"
- Accessibility First: Design for everyone from start
Tools and Resources
- Design: Figma, Sketch, Adobe XD
- Prototyping: Figma, InVision, Principle
- Color Tools: Coolors, Adobe Color, Paletton
- Icons: Material Icons, Feather Icons, React Native Vector Icons
- Guidelines: Apple Human Interface Guidelines, Material Design
- Accessibility: WebAIM Contrast Checker, Stark plugin
Ready to Design Great Mobile Experiences?
Master mobile UI/UX and create apps users love
Explore Hybrid Mobile App Course