Reduce Perceived Form Length - Spiralyze

Reduce Perceived Form Length

Layout High Priority 38% Adoption 10 Seconds Saved

Reducing the perceived form length lessens perceived effort for the user – When checkouts feel fast, there are fewer checkout abandonments.
Conversion Opportunity 0.6%

A well designed checkout is short, and it signals to the user that the checkout process will feel familiar and quick. Forms should be no longer than necessary and on the same line when sensible. A single-page layout that is concise and clutter-less should be prioritized.

A good example of form length-reduction is to format the address field with City, State, and ZIP on the same line. Not only does it shorten the appearance of the form, but it resembles the same way we read and write addresses on an envelope - a super-intuitive layout.

Reduced form length can reduce abandonments and increase revenue by reducing perceived effort required by the user, thereby encouraging them to finish the checkout process then and there.

Even with the same number of inputs, re-organizing a form can make it feel like much less to work through for users.

Usage

Forms are made longer when websites keep it at one form per row, or by only using one column of forms, necessitating more scrolling and perceived effort. One-column layouts also mean that short forms, such as ZIP or State fields, will appear longer than needed for those inputs. This also increases perceived effort for the user when they open the page.

By shortening fields when possible (ZIP, State, Apt/Suite) and putting them on the same line, users have less perceived work in front of them and are more likely to complete their purchase. The same can be done with address lines, where the second address field only needs to be wide enough to contain apt/suite numbers.

Etsy reduces perceived form length by putting smaller fields like ZIP, City, and State on the same line.

H&M puts every field on it's own line, making the form look like a long and tedious list to work through.

Adoption

0
20%
40%
60%
80%
100%

Reduce Perceived Form Length has an 38% adoption rate among our benchmark group.

Best Practices

Shorten Fields

Info such as ZIP codes, States, and credit card security code should be shortened according the input required.

Put Fields on the Same Line

With shorter fields, inputs can be put on a single line to save space. City, State, and ZIP should usually be on one line together. Same with First Name and Last Name, among other fields.

Use Single-Page Layout

A checkout that is spread over multiple pages will appear longer and more effort-intensive to users than a single-page layout.

Put Labels Inside Fields

Placing field labels inside the field itself reduces clutter on the page, further reducing friction in the checkout.

Examples

Good

Staples Example

Staples eliminated unnecessary steps and uses well-organized forms to reduced perceived checkout length.

CVS Example

CVS uses well organized forms to reduce percieved form length.

Okay

Macy's Example

Macy's uses one column and labels input fields above their areas, despite putting short fields like state and zip code on one line.

Bad

H&M Example

H&M layers forms in a single column and adds unnecessary fields.

Gap Example

Gap implements a many-stepped accordion checkout, with forms layered poorly.