Mobile UI/UX Testing

Mobile UI/UX Testing Fundamentals #

Mobile UI/UX testing goes far beyond verifying that elements appear on screen. Mobile devices introduce unique interaction patterns — touch gestures, variable screen sizes, one-handed use, outdoor visibility, and interruption-heavy usage contexts — that require specialized testing approaches.

Touch Target Testing #

Touch targets are the tappable areas of interactive elements. Unlike mouse pointers that have pixel precision, fingers are imprecise input devices.

Minimum Size Guidelines #

Common Touch Target Issues #

1. Too small: Links in body text, close buttons on modals, checkboxes
2. Too close together: List action buttons, toolbar items, form fields
3. Invisible padding: Button looks large but tappable area is only the text
4. Overlapping targets: Two tappable elements where the hit areas overlap

Testing Approach #

For each screen, verify:

• All buttons are at least 44x44 points (iOS) or 48x48 dp (Android)
• Spacing between adjacent touch targets is at least 8 points/dp
• Touch targets do not overlap
• The entire visual element is tappable (not just the text label)

Thumb Zone Analysis #

Most users hold their phone with one hand. The “thumb zone” maps show which screen areas are easy, hard, or impossible to reach.

┌─────────────────────┐
│  Hard  │ Hard │ Hard │  ← Difficult to reach
├────────┼──────┼──────┤
│  OK    │ Easy │ OK   │  ← Comfortable
├────────┼──────┼──────┤
│  Easy  │ Easy │ Easy │  ← Natural thumb position
└─────────────────────┘

Design Impact on Testing #

Primary actions should be in the easy zone (bottom center). Test that:

• Main navigation is at the bottom (not top)
• Primary action buttons are in the lower half of the screen
• Frequently used features are thumb-reachable
• Modal action buttons are not in the top corners

Responsive Layout Testing #

Mobile apps must adapt to various screen sizes and configurations.

Screen Size Categories #

What to Test #

For each screen size category:

• Text is readable without zooming
• Images scale proportionally (no stretching)
• Horizontal scrolling does not appear (unless intended)
• Forms are usable (fields not cut off, keyboards do not obscure input)
• Tables adapt (horizontal scroll or card layout on small screens)
• Navigation remains accessible

Platform Design Guidelines #

Each platform has design guidelines that users expect apps to follow.

iOS Human Interface Guidelines Key Points #

• Navigation: Tab bars at bottom, back button in top-left
• Modals: Sheet presentations slide up from bottom
• Typography: SF Pro font, Dynamic Type support required
• Colors: System colors that adapt to light/dark mode

Material Design (Android) Key Points #

• Navigation: Bottom navigation bar or navigation drawer
• FAB (Floating Action Button) for primary actions
• Typography: Roboto font family
• Colors: Material color system with light/dark themes

Cross-Platform Testing Focus #

• Does the app feel native on each platform?
• Are platform-specific navigation patterns followed?
• Does the keyboard behavior match platform conventions?
• Are system gestures (back, home) handled correctly?

Advanced UI/UX Testing Techniques #

Visual Hierarchy Testing #

Evaluate if the most important content draws attention first:

1. 5-second test: Show a screen to someone for 5 seconds, then ask what they remember. If they cannot identify the primary action, the visual hierarchy needs work.

2. Squint test: Squint at the screen until details blur. The elements that remain visible should be the most important ones.

3. Contrast check: Verify text contrast ratios meet WCAG standards (4.5:1 for normal text, 3:1 for large text).

Loading State Testing #

Mobile networks are unreliable. Test all loading states:

Orientation Change Testing #

For every screen:

1. Enter data in portrait mode
2. Rotate to landscape
3. Verify: data preserved, layout adapts, no overlap
4. Rotate back to portrait
5. Verify: data still present, layout correct

Exercise: UI/UX Audit #

Scenario: Audit the following mobile e-commerce checkout flow:

Screen 1: Cart review (item list, quantities, prices, total) Screen 2: Shipping address (form with 8 fields) Screen 3: Payment (card number, expiry, CVV) Screen 4: Order confirmation

List 3 UI/UX issues to check on each screen.

Pro Tips from Production Experience #

Tip 1: Test with one hand. Hold the phone naturally with your dominant hand and try to complete the primary user flow using only your thumb. If you cannot, the app has a reachability problem.

Tip 2: Test in sunlight. Take a device outside on a sunny day. Low contrast text, thin fonts, and subtle color differences become invisible in direct sunlight. This is how many real users experience your app.

Tip 3: Test with interruptions. Start a task, then simulate an interruption (notification, phone call, switch to another app for 30 seconds). Return and check if the task state was preserved.

Key Takeaways #

• Touch targets must be at least 44x44 points (iOS) or 48x48 dp (Android) with adequate spacing
• Primary actions should be in the thumb-reachable zone (bottom center of screen)
• Test every screen at multiple screen sizes, in both orientations, and in light/dark mode
• Loading, empty, and error states are as important to test as happy path states
• Platform design guidelines set user expectations — deviations feel broken even if they work