A mobile primary often fills the width to make reaching easier
Aliases: full-width CTA · thumb-friendly primary · edge-to-edge button
What it is
A phone’s primary is often drawn edge to edge. That is not decoration. It cuts reach cost: in one-handed grip the thumb paints an arc along the bottom, and a band that spans the bottom is easier to hit than a small capsule in the lower right. Filling the width uses the screen’s horizontal size as Fitts width, swallowing endpoint scatter inside the button.
Why it happens
In one-handed hold the thumb’s easy zone sits low and inward; corners and the top are expensive. A full-width bottom target counts many landings on that arc as hits, movement time drops, and slides off-screen or onto system gestures drop too. A small capsule at visual center or lower right needs a more precise landing and is likelier to clip a system gesture at the edge. Fill has a side effect: it almost necessarily becomes the visual primary, so Cancel must not also be a second full-width key, or two equally easy targets flatten the recommendation. A desktop pointer has no such arc; a full-width primary looks like advertising and the reach gain is near zero.
Studying it
One-handed submit: full-width bottom primary versus lower-right capsule. Log movement time, slides off, system-gesture misses, left/right-hand differences.
Independent variables: width strategy, vertical placement, one versus two hands, display size. Dependent variables: hit time, errors, whether the thumb leaves the easy arc.
Desktop or two-handed hold wipes the effect. Instruct “one hand only, the other may not help.”
Where it stops holding
On landscape or a large foldable, full width may be too long and landings cluster; cap width and center at the bottom. Tablets are often two-handed and the gain falls. A primary lifted above the keyboard still benefits from fill, but must clear the accessory bar. Switch scanning does not use a thumb arc; fill is not for that audience, and keyboard access still has to exist.
Applying it
- Use a full-width or near-full-width bottom control for page-level submit, pay, send. Keep Cancel hugging or as a text button.
- Do not stack two full-width keys competing for the same thumb arc.
- On large screens cap width and center, rather than a 20 cm-long key.
- Verify with twenty one-handed submits. If the capsule version clearly slips more or needs a hand switch, fill is doing reach work, not decoration.
Related
- Within the group: E1.15.1 Hugging content and filling the container mean different things · E1.15.2 Overlong copy in a fixed-width button truncates or wraps · E1.15.4 Buttons in one group need visually aligned widths
- Adjacent: C2.11 Thumb reach · B1.01 Fitts’s law · K1 Mobile devices
- Search terms:
full-width button·thumb zone·mobile primary