Pattern #13: Centered Forms & Buttons

Pattern Author: Jakub Linowski - Founder @ GoodUI

Based on 7 Tests, Members See How Likely This Pattern Will Win Or Lose And Its (?) Median Effect

Almost Certain Loser
-5
-4
-3
-2
-1
0
+1
+2
+3
+4
+5
Almost Certain Winner
Centered Forms & Buttons
  1. Add: Center Input Forms One Column Layout

    The pattern suggests to center any input forms for greater visibility, instead of placing them on the sides.

Median Effects

?

Progression

Ex: First Action

(2 tests)

?

Leads

Ex: Leads, Quotes

(2 tests)

?

Signups

Ex: Trials

(2 tests)

?

Engagement

Ex: Future Action

(1 tests)

?

Sales

Ex: Transactions

(1 tests)

?

Revenue

Ex: AOV, LTV

?

Retention

Ex: Return Visits

?

Referrals

Ex: Social Shares

Tests

Pattern #13: Centered Forms & Buttons
Was Tested On Backstage.com by Stanley Zuo

Test #353 Tested on Backstage.com by Stanley Zuo Stanley May 12, 2021

Find Out How It Performed With 30,428 Visitors

Product Desktop
  • Measured by subscribe flow starts   |   p-val (?)

  • Measured by free trials started   |   p-val (?)

This experiment challanged a right aligned detail page. After clicking a result of a job role on a listing page, an overlay would appear on the right with the details. The variation used a full width screen instead - effectively centering the page.

Get Access To See The Test Results

The Same Pattern Was Also Tested Here

Test #240 Tested on Thomasnet.com by Julian Gaviria Julian May 16, 2019

Find Out How It Performed With 207,844 Visitors

Listing Desktop
  • Measured by clicks on View Catalog button   |   p-val (?)

In this experiment, two different positions of the View Catalog button were compared. In version A the button was smaller and on the right. In version B the button was wider and more central. (The actual test was inverted before publishing to match the A-B of the pattern.)

Get Access To See The Test Results

Test #239 Tested on Volders.de by Alexander Krieger Alexander May 02, 2019

Find Out How It Performed With 1,288 Visitors

Home & Landing Desktop
  • Measured by moved to the next step   |   p-val (?)

A contract cancellation landing page was tested for the effect of a single (wider CTA area with a left aligned button) vs two column layout (narrow CTA area with a right aligned button).

Get Access To See The Test Results

Test #202 Tested on Kenhub.com by Niels Hapke Niels Oct 01, 2018

Find Out How It Performed With 2,884 Visitors

Checkout Desktop, Mobile
  • Measured by successful sales   |   p-val (?)

In this experiment, the form layout was adjusted by shifting the side benefits further down below the form.

Get Access To See The Test Results

Test #108 Tested on Acousticalsurfac... by Julian Gaviria Julian Jun 01, 2017

Find Out How It Performed With 2,410 Visitors

Home & Landing Desktop
  • Measured by successful form submits   |   p-val (?)

Get Access To See The Test Results

Test #90 Tested on Vivareal.com.br by Rodrigo Maués Rodrigo Apr 01, 2017

Find Out How It Performed With 18,408 Visitors

Home & Landing
  • Measured by successful form submits   |   p-val (?)

Get Access To See The Test Results

For each pattern, we measure three key data points derived from related tests:

REPEATABILITY - this is a measure of how often a given pattern has generated a positive or negative effect. The higher this number, the more likely the pattern will continue to repeat.

SHALLOW MEDIAN - this is a median effect measured with low intent actions such as initiating the first step of a lengthier process

DEEP MEDIAN - this is derived from the highest intent metrics that we have for a given test such as fully completed signups or sales.