Miller's Rule: Chunking Long Forms

A checkout flow had 14 fields on one page: name, email, phone, address line 1, address line 2, city, state, zip, country, card number, expiry, CVV, billing address toggle, and a promo code. The design team had validated each field as necessary. Yet cart abandonment at checkout was 67%.

The same 14 fields, reorganized into 3 steps — Contact (3 fields), Shipping (6 fields), Payment (5 fields) — reduced abandonment to 41%. The work was identical. The perception of difficulty was completely different. Users could hold 3–5 fields in working memory at a time; 14 overloaded them before they'd filled in a single value.

The 5-field threshold: If your form has more than 5 visible fields, consider chunking. The groupings should reflect natural semantic breaks, not arbitrary splits:

• Identity chunk: name, email, phone — who you are
• Location chunk: address, city, state, zip — where you are
• Payment chunk: card details, billing — how you pay

Users understand these semantic groups intuitively. Splitting "address" across chunks (street in step 1, city/state in step 2) breaks the mental model and adds cognitive work.

A B2B SaaS registration form had 15 fields: first name, last name, work email, company name, company size, industry, phone, job title, country, city, how did you hear about us, use case, number of team members, billing contact email, and a terms checkbox. Every field had been justified in a planning meeting. The form launched. Signups dropped 44% compared to the previous lighter form.

Session recordings showed the same pattern over and over: users would scroll the entire form before typing anything, pause, and then either start slowly or close the tab. The median field where users abandoned: field 4. They rarely even reached the middle of the form. The problem wasn't any individual field — it was the scroll to the bottom before starting.

The same 15 fields were reorganized into three steps: "About you" (name, work email, job title — 3 fields), "About your company" (company name, size, industry, country, city — 5 fields), and "Getting started" (use case, team size, billing email, how did you hear, terms — 5 fields + checkbox). A progress bar showed "Step 1 of 3."

Signups recovered to 69% above the broken form — 26 percentage points higher than the 15-field single-page version. Users didn't type more slowly or make fewer errors. They just didn't abandon before starting. The entry to step 1 went up 61% because the first thing users saw was three fields, not fifteen.

The "Single page" mode shows all fields at once. The "Chunked" mode shows 4–5 fields per step with a progress indicator. Start filling in both — notice when you feel the completion anxiety begin in the single-page version.

The minimal pattern: conditional rendering on a step state variable, with fieldset/legend for semantic grouping within each step.

function MultiStepForm() {
  const [step, setStep] = React.useState(1);

  return (
    <form>
      <p>Step {step} of 3</p>

      {step === 1 && (
        <fieldset>
          <legend>About you</legend>
          {/* name, email, job title */}
        </fieldset>
      )}
      {step === 2 && (
        <fieldset>
          <legend>About your company</legend>
          {/* company fields */}
        </fieldset>
      )}
      {step === 3 && (
        <fieldset>
          <legend>Getting started</legend>
          {/* use case, team size, terms */}
        </fieldset>
      )}

      <button type="button" onClick={() => setStep(s => s + 1)}>
        {step < 3 ? 'Continue' : 'Submit'}
      </button>
    </form>
  );
}

Key pitfall: not validating before advancing. Always validate the current step's fields before calling setStep(s => s + 1). Deferring to final submit means errors surface after the user has already left the relevant step — recovery is expensive.