Ali Demirbaş - Lab

Forms & Signup

Dimming the Background Behind a Modal Form A/B Test

Dimming the page behind a modal may draw attention to the form, but a strong overlay can hide useful context or make visitors feel trapped.

  • Forms & signup
  • Form completion rate

Control vs Variant

The visual treatment is the variable, not the words or the position.

Changed
Visual style
Page
Forms & signup
Difference
changed

Hypothesis

Compare one predefined overlay with no dimming, keeping the form and close behavior the same.

How to run this test

Primary metric

Form completion rate

Compare successful submissions among eligible visitors assigned to the modal treatment.

Other metrics

  • Form completion rateCompare successful submissions among eligible visitors assigned to each modal treatment.
  • Form start rateMeasure intentional first interaction with the form, not the modal opening.
  • Page exit rateCompare exits among visitors assigned to each form presentation; this alone does not explain why they left.

What to check before and during the test

  • BackdropAdd one semi-transparent dark overlay behind the modal.
  • Keep constantUse one predefined backdrop opacity in the variant. Keep the modal content, trigger and dismissal behavior the same in both arms.
  • Required informationKeep essential decision information inside the modal or in an accessible area that is not dimmed.
  • Form dataCheck whether entered data is preserved if the modal closes unexpectedly.
  • Keyboard and motionKeep the modal keyboard-dismissible and avoid blur animation that ignores reduced-motion settings.

Setup mistakes to avoid

  1. 1Do not create a dimmed overlay without a way to close it.
  2. 2Do not change overlay opacity and modal content together.
  3. 3Do not leave essential information dimmed behind the modal.
  4. 4Do not silently close a form with entered data when visitors click outside.
  5. 5Respect reduced-motion preferences; do not use an unwanted blur animation.