Mobile UI Design Best Practices

Mobile UI is designed for interruption, one hand, and a small viewport. Patterns from a wide desktop dashboard will not compress cleanly. You have to choose what is worth a tap.

Hit targets are not optional

Controls need enough size and spacing that a thumb can hit them. Cramped icon-only toolbars cause mis-taps and rage. Platform guidelines exist because this is a physical constraint, not a visual trend.

Primary actions in reach

Frequent actions belong where thumbs already rest. Destructive actions can be harder to hit. A floating button that covers content is a tradeoff, not a default.

One job per screen is often enough

Sheet stacks and nested modals on mobile become mazes. Prefer a clear forward path with a visible back. Keep persistent navigation shallow.

Type and contrast get harsher

Sunlight and motion make low-contrast gray type worse. Mobile is where palettes that looked refined on a monitor fail.

How to judge the work

Mobile UI is ready when primary actions can be hit with a thumb, when destructive actions are harder to trigger by accident, when type holds up in bright light, and when a task does not require a stack of sheets to complete. A scaled-down desktop artboard that still has hover-only affordances is not a mobile design.

Practice this on UI Coach

Use mobile-only challenges and design at a real phone width, not a scaled desktop artboard. Mockup resources are for presentation after the tap targets are honest.

Sources

• Nielsen Norman Group on touch target size
• Apple Human Interface Guidelines