Should I vary input field lengths in a single page checkout form?

by Pete   Last Updated August 13, 2019 18:16 PM - source

I am currently designing a single page checkout form. I would appreciate some feedback on the lengths of my input fields.

In the Billing and Shipping sections, I have staggered the length of the fields, trying to keep the size of the input field relative to the size of the expected input.

However, in the Payment section, all the input fields are of the same length. Do you think this breaks the consistency of the form since the Billing and Shipping sections have staggered lengths for input fields? Should I try to vary the lengths of the inputs in the payment section so that it looks more like the other sections?

Single Page Checkout



Answers 3


The more consistent you can be the better. In my opinion keeping the fields justified like you have in the billing section feels cleaner. A couple quick wins would be extending the city and country field widths to match the others, then put the state and zip on the same line.

Bonus: In a previous life I worked on a one-page checkout option that floated the three sections from left to right. That was fun, but looking back, the flow of the version you have might be easier on the user. Seeing all three sections floated left to right could potentially be overwhelming.

Good luck!

The Driver
The Driver
October 29, 2013 15:42 PM

As Luke Wroblewski points out in "Web Form Design", the size of of an input field can help provide your form fields with affordance. The way you've adjusted the field lengths in the billing and shipping sections are good because they provide the user with an idea of what they're expected to enter. It would be a good idea to be consistent and have the input fields in the payment details section also have field lengths that closely match the space needed for the user to enter the appropriate data.

As an aside, you might find the article "The Ultimate UX Design of: the Credit Card Payment Form" useful while working on the payment details section. Good luck on your project!

ChrisK
ChrisK
October 29, 2013 17:42 PM

Aesthetically, input elements look better if they're equal widths, but on the other hand input elements that are only as wide as they each need to be will hint what they're for, as mentioned.

As an aside, I would put the Cancel and Buy buttons beside each other (ie, flush-right with Buy on the right) because doing so ensures that the user will see both and reinforces the fact that they're siblings (ie, they affect the same form in different ways).

Tim Huynh
Tim Huynh
October 29, 2013 20:45 PM

Related Questions


Combining all the address fields into one?

Updated February 22, 2017 14:16 PM

Quantity on an ingredient website

Updated February 21, 2017 11:16 AM

Using asterisk (*) vs required

Updated February 25, 2016 01:07 AM

Accessibility and required form fields

Updated January 26, 2017 14:06 PM

Enter your email below and we will contact you

Updated August 06, 2016 08:06 AM