web analytics

We scan from top to bottom

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:

Together we can put humanity back into business

Sign up for my FREE ongoing guidance on how to strengthen your UX practice and design your career. You’ll also receive notifications on my latest blog posts, upcoming speaking engagements, new offerings, recent client projects, and more.

Comments

  1. supaspoida says:

    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!

  2. jcampbell1 says:

    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.

  3. 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!

  4. Shai Idelson says:

    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.

Leave a Reply