Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
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. –  Code Maverick Feb 6 at 21:49
    
some cards certainly do, but they might not actually be credit cards. they are never required fields –  ColinSharpe Feb 6 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. –  Offbeatmammal Feb 9 at 7:09
add comment

2 Answers 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
share|improve this answer
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 at 21:44
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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