ℹ️

Form usability (general)

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

❓Checkout FAQ

‣

❓Should you only use top aligned labels, or are 🪂 “floating labels” OK?

‣

❓Should you enclose the checkout?

‣

❓Should you persist the Order Summary through checkout?

‣

❓How can we make checkout forms 🦾 more accessible?

💡 Ideas and tips

Form design and layout

‣

Avoid unnecessary fields 💋 Keep it Short, Smarty!

‣

Use single column layout

‣

Use sub-copy instead of placeholder (hint) text

‣

Make optional fields obvious*

‣

Use hint text to show formatting examples

‣

Consider collapsing the address form to a single field

‣

Use tooltips for additional context (with care)

‣

Leave ample space between fields when using sub-copy

Form behavior

‣

Invoke the email keyboard for Email fields 📲 on mobile

‣

Invoke the number keyboard by default for Address field 📲 on mobile

‣

Invoke the the telephone keypad for Credit Card, CVV, Telephone and Zipcode fields

‣

Disable AutoCorrect and SpellCheck for Name, Address, Zip and Postal Codes 📲 on mobile

‣

Support tabIndex for next/previous navigation 📲 on mobile

Validation and error handling

‣

Use inline validation

‣

Don’t return errors too soon

‣

Make sure you don’t validate bad data - audit your checkout!

‣

Make error text proximal and contextual

‣

Make address lookup targets easy to tap

‣

Persist valid captured data after form submission (with errors returned)

‣

Persist valid captured data across sessions

🫣 Cautions

‣

Avoid left aligned field labels

‣

Avoid multi-column or unconventional form layouts

‣

Don’t use ghost 👻 fields

‣

Avoid placing required field asterisks inline

‣

Don’t repeat yourself in hint text

‣

Be careful when replacing your Address form with a single address lookup field

‣

Don’t hide alternate payment options behind tabs

‣

Don’t pre-validate optional labels

‣

DON’T USE ALLCAPS FOR LABELS OR MICROCOPY

‣

Don’t hide important details behind tooltips

Back to Checkout ideas

👉 Follow on LinkedIn for daily ideas 💡