ux-mobile
UX for Mobile (Phone)
A thin medium layer. The reasoning lives in ux-first-principles; read it first or alongside. Here is only what the phone medium changes — driven by the body-to-device interface, not by which OS it is.
What defines the mobile medium
A coarse touch input (fingertip, not a point), a small screen held at arm's length, frequent one-handed and on-the-move use, and a single app in focus filling the screen. These change six things — and several are the mirror image of desktop.
The six things that change
-
Target sizing is a floor, not a budget. A fingertip is roughly 10–14mm wide and occludes the thing it taps. Interactive targets must be large and well-spaced or users mis-tap. Treat a generous minimum tap target as a hard floor and add spacing between adjacent targets to prevent errors. You cannot use the dense, tiny controls that work on desktop. (The exact minimum is a platform metric — see handoff.)
-
There is no hover. The finger is either off the glass or committing to a tap; there is no idle-pointer state. Anything desktop would put behind hover — tooltips, reveal-on-hover controls, hover previews — must not carry essential information or actions on mobile. Surface it persistently, or behind an explicit tap/long-press with a visible signifier. This is the most common porting bug from desktop UI.
-
Screen real estate is scarce — density must drop. The same content that reads as efficient on desktop reads as cramped and overwhelming on a phone. Reduce per-screen density, shorten navigation depth, and accept more screens / more scrolling rather than packing one. Lead with the single primary task; defer the rest (progressive disclosure is heavily used here).
-
Reach and thumb zones matter. Held one-handed, the thumb comfortably reaches the bottom-center of the screen; the top corners are a stretch. Put primary, frequent actions in the easy bottom zone; put rare or destructive actions where they're harder to hit by accident. This consideration has no desktop analog — the cursor reaches every pixel equally.
-
Single-surface, single-task focus. One app, fullscreen, one task at a time. Design a focused linear flow rather than the multi-panel, multi-window layouts desktop affords. Carry context forward between screens so users don't have to remember it (Miller's Law, recognition over recall — recall is costlier on mobile because there's no room to keep things visible).