We scan from top to bottom

October 3rd, 2009 · Comments · Pain

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.

Share this post:

Tags: Design·Forms·Pain

Shai Idelson

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.

Dale Cruse

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!

jcampbell1

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.

supaspoida

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!