Thought Stream

Zagat Wine offers an example of a near-perfect combination order and registration form. What follows is my opinion and has not been user-tested.

The email and billing addresses come first, because it is information the user is least likely to have to think about. If the credit card is not around, they’ve already invested a minute into filling out the form. The zip code comes first; The city and state fields are automatically populated.

I’m on the fence about the city and state fields being read-only. I tried a zip code that is assigned to multiple cities and didn’t see any kind of choice, but maybe it’s looked up based on the address?

The shipping address section is identical to the billing address one, but it’s hidden away until you uncheck the “Same as Billing” checkbox. This is a great way to reduce clutter and make the form less daunting to the user.

Sadly, the “Same as Billing?” text was not enclosed in a <label> tag, so clicking it does nothing; You have to aim at the tiny checkbox. Not only should there be a label, but the clickable area for that element should be twice as tall in my.

Thanks to the absence of a credit card type field, which can always be deduced from the number itself, the entire payment information section fits on one row. The expiration date field is not exactly the same format as on most credit cards, but it’s numeric, which is good enough.

Finally, you are given the option to create an account by entering a password. When you focus the first password field, an odd-looking tooltip appears with the password requirements. This works to draw the user’s attention just as they need the information. I would give it a brighter color or a border to make it look less odd floating on top of the Confirm Order button, which is roughly the same width and looks like a border that fell apart.

The option to receive special offers by email is opt-out — checked by default — but I suppose that’s just the age we live in.