1

Echoing my answer to Is it a bad idea to have all credit card fields on one horizontal line?, there is much evidence that suggests that vertically aligned fields and labels are the best way to layout form fields; except, arguably, in some very complex / specialist applications.

However, when we enter our start and expiry dates on credit cards, is it better to align the two date fields (often drop downs with restricted value set) side by side like on the left, or vertically like on the right (and following on from the established wisdom defined in the first paragraph of the evidence link above)?


mockup

download bmml source – Wireframes created with Balsamiq Mockups

3
  • 2
    Colin, I went ahead and updated the question to reference your answer in the question that this question of your originated. I hope you don't mind. I think it's good to link the two. My question to you is what credit card has a start and end mo/yr? Unless I'm having a brain fart, I thought they just had an expiration mo/yr date. Feb 6, 2014 at 21:49
  • some cards certainly do, but they might not actually be credit cards. they are never required fields
    – Toni Leigh
    Feb 6, 2014 at 22:04
  • my 2c would be to match the layout of the physical object in this instance - so horizontal groupings, similar to your example on the left. Feb 9, 2014 at 7:09

2 Answers 2

2

There are various justifications for the vertical alignment of forms. Amongst them are easier scanning (1D scanning); clearer order (think of the comics navigation problem below - do I go right or down?); aesthetics; etc.

An image showing various ways to arrange comic boxes

Personally I think that the great thing about vertical alignment of form fields is that it does not require the user to interpret (consciously or not) the logic behind the layout. A well designed vertical form will have clear headings to reveal the structure (if the form has more than a few fields).

However, in the case of month/year - these are so tightly related that placing them vertically would actually break what is a very strong group. Whether you take it to be Gestalt law of proximity or continuity, you want these two grouped.

Consider yourself, which seems a more logical arrangement to you:

1
2
3
4a
4b
5

Or:

1
2
3
4 (a, b)
5
1
  • 3
    Horizontally grouped mo/year fields are how they display on the physical credit card as well, so I'd say that reinforces the logical grouping in the second example you give.
    – Mark Bubel
    Feb 6, 2014 at 21:44
0

Maybe it's just me, but horizontal seems much more UX friendly. I'll demonstrate with a couple mockups:


Horizontal


mockup

download bmml source – Wireframes created with Balsamiq Mockups


Vertical


mockup

download bmml source

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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