E1.15.3full-width mobile primarydesignresearch

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

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E1.15.3