My checkout form is a bit long and I don't like it, so I placed credit card fields on one line. Is it a bad idea to have all the fields on one line horizontally like the image below?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
@ColinSharpe is right, vertically aligned is much easier on the eyes. That said, it's not a horrible design in the sense that you don't have to scroll down to see everything. That is a plus for a lot of users. You simply would need to make sure that it's responsive when the user resizes their browser to a smaller width or if they are on a device that isn't wide enough.
With respect to responsive web design, you should always ask yourself, "What happens when my user uses a device or browser whose viewable area is smaller than the minimum width of my page or form?" Unless you've already planned for it, it's most likely going to jut down to the next line throwing off your design or it may just disappear off the screen depending on how your CSS is.
Jake Rocheleau wrote an article called Creating Stylish Responsive Form With CSS3 And HTML5 and created a demo as well.
You can also check out Media Queries to see some great examples of full responsive web designs.
As we all know, horizontal and vertical alignment depends upon our resolution and surrounding contents. In your design it would be nice keep to the cards (radio buttons) in one line because some negative space formed around its top right corner. If you keep it so, then the below part might get in a sync.
I would like to share a design I tried a long time ago for one of my e-commerce projects.
This falls foul of simple eye tracking considerations.
Eyes track from label to field to label, with the above example they go in a zig-zag:
Many studies show that simple forms should list fields straight down the page like this:
The second option is much easier.
Here is some evidence from UX experts ...
I dare to disagree with the general opinion here. For me it's a lot easier to have all that belongs together on a single line. I don't see the zig-zag eye movement as a true problem at all (but I cannot point to a study supporting my personal opinion). Additionally, with a one liner you much better utilize today's screen sizes. That vertical approach is just waisting space, requiring to scroll vertically. Especially if you have to enter more values on a form. You can also much easier denote a new block of data entries by just moving to a new line.
Amazon demonstrates how good the horizontal form can work and I find the design from the OP very appealing. Light in design, yet compact enough to easily go with the eyes along the line.
Great resource even without paying for the premuim reports to see how some of the best ecommerce sites do their payments and more specific card forms.
Here you will be able to see some prefer to use dropdown boxes for the date and month. Also not to not use January rather 01 for the month in dropdown so that similarity between what information must be chosen on your site reflects excatly what is on his/her card