5

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?

Example of credit card fields all on one horizontal line

3

@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.

Chris Coyier of CSS-Tricks and CodePen created a Simple Responsive Form demo that changes its look as the width of the viewable area changes.

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.

2

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.

screenshot of credit card input form

  • forgot to mention please check the attached link ..that "1" ) – zillion Feb 7 '14 at 7:13
  • Very nice suggestion. I agree with this one but on mobile I guess its not good to make it small and put all on one line (The card logos) because the touch space will be less and will be hard for the user. – user39648 Feb 7 '14 at 19:05
1

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Many studies show that simple forms should list fields straight down the page like this:

mockup

download bmml source

The second option is much easier.

Here is some evidence from UX experts ...

http://www.cxpartners.co.uk/cxblog/web_forms_design_guidelines_an_eyetracking_study/

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

  • Answer from a true expert. I get your point now. I also felt it should go one under the other. I am going to revise it. – user39648 Feb 6 '14 at 20:32
  • On top of that, it helps to stick with patterns used by other sites, which often mimics pattern on the card itself. There's plenty of numbers on them, and this just makes it easy for users to read and enter. Also, make sure you mark whatever answer as an answer! – Dirk v B Feb 6 '14 at 22:44
1

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.

0

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.

https://baymard.com/checkout-usability/benchmark/step-type/payment

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

http://designmodo.com/ux-credit-card-payment-form/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.