Forms

The layout of input fields is as simple as possible, ideally using a single column.

The checkout page has the minimum number of input fields required to complete the purchase.

Checkout form fields use floating labels so users can always see the field name.

The user’s email address is requested early so the store can contact them if checkout is abandoned.

Input fields contain suggestions or examples to reduce the user’s cognitive load.

The checkout provides an option to set billing address the same as the shipping address.

Choosing a payment option is easy and accessible on mobile devices.

Visual prompts are included for credit card details, such as showing where to find the CVV.

Credit card input fields are placed on a neutral background to increase perceived trust.

Users can easily move between form fields using the keyboard tab key.

Numeric keyboard automatically appears for number input fields on mobile.

When entering an email address, mobile keyboards show dedicated buttons like “@” and “.com”.

Input field width visually indicates the expected amount or format of information.

Optional and mandatory fields are clearly distinguishable.

If the phone number is requested, the checkout explains why it is needed.

Checkout uses an address database to help users avoid mistyping addresses.

Input fields validate data in real time and show clear visual feedback.

Error messages clearly explain what went wrong and how to fix it.

Users are not required to enter the same information more than once.

Checkout uses auto-complete functionality wherever possible.

If users leave checkout and return later, previously entered form data remains saved.

Input fields provide an option to clear entered content quickly.