Mobile UI standards, measured

Taste decides how an app looks. Standards decide whether people can use it: one-handed on a bus, in bright sunlight, with their text size turned up, with a screen reader. Standards are numbers, and the nice thing about numbers is you can check them.

Touch targets: 44 and 48

The minimum tappable area is 44×44 points on iOS and 48×48 dp on Android. The visible icon can be smaller; the area that responds can't. A 20-point close button is fine if its hit area is 44.

In React Native that's hitSlop, or padding on the pressable. Put targets at least 8 points apart so a thumb doesn't hit two at once.

Safe areas: never hardcode them

The Dynamic Island, the home indicator, rounded corners and camera cut-outs all eat into the screen, and every device eats a different amount. On a recent iPhone that's about 59 points at the top and 34 at the bottom, but the only correct values are the ones the system gives you at runtime.

On Android, apps that target Android 15 draw edge to edge by default, behind the status and navigation bars. Either way the rule is the same: read the insets (react-native-safe-area-context, WindowInsets) and pad with them. Backgrounds can run under the bars; content and buttons can't.

Spacing on a grid

Pick a base unit and never leave it. I use multiples of 4, with 16 as the default screen margin and 8 as the default gap. It sounds rigid. It's what makes a screen look calm, because every distance relates to every other one.

Type that grows

People turn text size up far more often than designers assume. With iOS accessibility sizes, body text can grow to around three times its default; Android's font scale goes to twice. Test every screen at the largest setting.

A layout that handles it grows vertically: rows get taller, text wraps. A layout that doesn't truncates, overlaps or clips. Cap the size only where a design truly can't grow, like a tab bar label, and let body text scale freely.

Contrast you can measure

WCAG gives the numbers:

• 4.5:1 for normal text,
• 3:1 for large text and for icons and controls you need to see to use.

Writing this made me check my own site. The faint grey I used for dates and labels was 2.4:1. It looked elegant and failed. It's now 4.9:1, the body grey is 7:1, and the page still looks quiet. Contrast and calm aren't opposites; you just have fewer greys to play with.

Feedback inside 100 milliseconds

Under about a tenth of a second, a response feels instant. So the pressed state appears on touch, not after the network answers. If something takes longer than a second, show progress. If you know the shape of what's coming, show a skeleton of it instead of a spinner.

Motion that can be turned off

Keep transitions short, a few hundred milliseconds at most, and make them explain something: where a sheet came from, what moved where. Then respect Reduce Motion on iOS and Remove animations on Android. The app should still make sense with every animation replaced by a fade.

Use the platform's grammar

Users already know how their phone works, so don't make them relearn it:

• iOS: swipe from the left edge to go back, tab bar at the bottom, sheets that pull down to dismiss.
• Android: the system back gesture works everywhere, including inside your custom flows.
• Both: pull to refresh, long press for more, the system share sheet.

When I build in React Native, native navigation comes first for exactly this reason. It gets these details right for free.

Name everything for screen readers

Every icon-only button needs a label: accessibilityLabel in React Native, contentDescription on Android, accessibilityLabel on iOS. Group things that belong together, so a row reads as "Coffee, 4 dollars, yesterday" instead of three separate stops.

The checklist

• Targets 44 pt / 48 dp, 8 apart.
• Insets from the system, never constants.
• One spacing unit.
• Every screen tested at the largest text size.
• 4.5:1 for text, 3:1 for controls.
• Pressed state immediately; progress after a second.
• Reduce Motion respected.
• Platform back, platform sheets, platform share.
• Every icon button labelled.

Next in this series: every screen has five states.