Mobile App UX

Mobile App UX Best Practices

Touch Target Guidelines

.touch-target {
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-3);
}

/* Expand touch area without visual change */
.icon-button {
  position: relative;
}
.icon-button::after {
  content: '';
  position: absolute;
  inset: -8px;
}

✅ Do's

Navigation

• Bottom navigation for 3-5 primary actions
• Keep most important actions within thumb reach
• Use clear, recognizable icons with labels
• Provide visual feedback on active state
• Support swipe gestures for natural navigation

Content

• Prioritize content over chrome (UI elements)
• Use progressive disclosure - show essentials first
• Lazy load content below the fold
• Provide pull-to-refresh for dynamic content
• Show skeleton screens, not spinners

Forms

• Use appropriate keyboard types (email, tel, number)
• Show inline validation, not after submit
• Provide autocomplete where possible
• Group related fields visually
• Save form progress automatically

Feedback

• Immediate visual response to all touches
• Haptic feedback for important actions
• Clear loading states with progress indication
• Confirmation for destructive actions
• Undo option instead of "Are you sure?"

❌ Don'ts

Navigation

• ❌ Hamburger menus for primary navigation
• ❌ Deep navigation hierarchies (>3 levels)
• ❌ Small, closely spaced tap targets
• ❌ Gestures without visual affordances
• ❌ Hiding essential actions in menus

Content

• ❌ Horizontal scrolling for content
• ❌ Tiny text (<16px for body copy)
• ❌ Low contrast text on images
• ❌ Auto-playing video with sound
• ❌ Interstitials blocking content

Forms

• ❌ Required fields without indication
• ❌ Generic error messages
• ❌ Disabling zoom on inputs
• ❌ Dropdowns for <5 options (use radio)
• ❌ Multi-step forms without progress indicator

Interaction

• ❌ Double-tap to activate
• ❌ Hover-dependent interactions
• ❌ Precise targeting requirements
• ❌ Long press without alternative
• ❌ Blocking the UI during operations

Thumb Zone Design

┌─────────────────────┐
│    Hard to reach    │  ← Secondary actions, menu
│                     │
├─────────────────────┤
│   Natural reach     │  ← Content, scrollable area
│                     │
├─────────────────────┤
│    Easy reach       │  ← Primary actions, nav
└─────────────────────┘

/* Bottom-anchored primary actions */
.primary-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  padding-bottom: env(safe-area-inset-bottom, var(--space-4));
}

Component Patterns

Bottom Sheet

interface BottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  children: ReactNode;
}

export const BottomSheet: FC<BottomSheetProps> = ({ isOpen, onClose, children }) => (
  <>
    {isOpen && <div className="overlay" />}
    <div className={cn('bottom-sheet', isOpen && 'bottom-sheet--open')}>
      <div className="bottom-sheet__handle" />
      {children}
    </div>
  </>
);

Swipeable Card

export const SwipeableCard: FC<Props> = ({ onSwipeLeft, onSwipeRight, children }) => {
  const handlers = useSwipeable({
    onSwipedLeft: onSwipeLeft,
    onSwipedRight: onSwipeRight,
    trackMouse: false,
  });
  
  return <div {...handlers}>{children}</div>;
};

Performance Checklist

• First Contentful Paint < 1.8s
• Time to Interactive < 3.8s
• Images optimized and lazy-loaded
• Animations at 60fps
• No layout shifts during load
• Works offline (PWA)

Accessibility

• Use semantic HTML (<button>, <nav>, <main>)
• Support screen readers (aria-labels)
• Ensure 4.5:1 color contrast minimum
• Support text scaling up to 200%
• Never disable pinch-to-zoom