Vertical alignment of credit card date fields

Question

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)?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

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.

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

Answer 2

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

Horizontal

---

^{download bmml source – Wireframes created with Balsamiq Mockups}

Vertical

---

^{download bmml source}