I shop online so often that it’s second nature for me to immediately start typing into an shipping/billing address form based on the textbox widths and layout. However, as I was just checking out from Garnet Hill, I realized something was off.
Field labels are underneath the text field. Wow.
Had it not been for the Middle Initial small textbox I would’ve skipped the top line entirely.
This one’s for you, Luke W.
Related Posts:
- Photo of the day: A man in need of an iPad June 11, 2010 | 3 comments
- The Flawed Dining Experience at Hill Country August 13, 2009 | 5 comments
- When a Design Firm Fails September 5, 2012 | 10 comments
- Photo of the day: Visualizing Genres June 17, 2010 | 7 comments
- Photo of the day: Back in 30 minutes June 15, 2010 | 2 comments
I see this problem much more with printed forms, particularly government forms. Customs & Immigration, DMV, taxes, etc. Only there when I print things on the wrong line it's not so easy to fix!
This form reminds me of WuFoo.com (those guys have a cool product). They do some really nice stuff, but they put the labels on the bottom for the address.
Here is an example from wufoo.com
https://examples.wufoo.com/forms/workshop-regis…
I think it can work, but you have to be really careful.
To play the devil's advocate, if “Billing Address” were the legend in an overall fieldset, would it have still been a problem? If not, this seems very fixable!
One obvious problem with this is that a label for a drop down is hidden when one clicks on that drop down.
Beyond that, like Whit's heading implies, it would take longer for a person to fill this out because of the zig zag scan pattern this creates.