By Peter Bell

Could Your Forms be Smarter?

Khoi Vinh just posted a really interesting article about form design. It raises some interesting questions about best practices for form design and how smart forms should be. For example, do you really need a credit card type drop down on checkout, and is it worth asking for city and state if you can infer them from the ZIP code? . . .

Credit Card Type
The type of credit card can be inferred from the first digit of a valid number - so why do most sites still ask the user to select the card type? I think for many sites (certainly the ones I've developed given the budgets I work with) it is a matter of a lack of thought. Thinking about it further though does raise some questions. Without a drop down list of card types, you need to find another mechanism to advise users whether you accept Amex and Discover or just MC and Visa. Users are also habituated to having to select a card type, so a little bit of Javascript to display the appropriate logo after the card number is entered would be a nice visual way to handle that confusion.

I'm tempted to move towards inferring card types with a simple list stating "We accept . . . " with logos before the form, and with one of the logos appearing after the card number for users with Javascript enabled. Any thoughts on other downsides of such an approach? Anyone doing this already? Thoughts? Experiences?

City and State
The next point raised by the article was that the city and state (in the US) can be easily inferred from a ZIP code, so why bother asking for them? One suggestion was that you could then validate the city/state against and ZIP code, although from my experience very few websites do this (try misspelling your city name and see how many sites tell you it doesn't match the zip!). Another issue of course is the confusion it could cause for users who are wondering where to enter their city and state.

Any thoughts on whether this is a good/bad idea?

Other Examples?
What else do we ask for that we don't really need? Any other ideas on improving the utility of common forms?

Related Blog Entries

Comments
It's great Peter you are getting into all this. If you are looking for stuff on best practices with form design you must know and read Luke W.'s Functioning Form blog. I have several of his slides posted on my wall at work. Download the latest version of his presentation titled Best Practices for Web Form Design at: http://www.lukew.com/ff/entry.asp?576

One of the areas in his PDF presentation talks about primary and secondary actions. Recently, he went into more detail about that on his blog. You can read about it here: http://www.lukew.com/resources/articles/PSactions....
# Posted By Javier Julio | 9/7/07 10:46 AM
Hi Javier,

Great resources - thanks! Working through them now. I'd kinda hoped to avoid all this front end stuff, but it's worth taking te time to figure out and implement best practices. Will get there, and then we should speak some more!
# Posted By Peter Bell | 9/7/07 11:09 AM
Don't forget to take international address standards in to consideration when designing address forms. By "standards" I mean the hodge-podge of differing ways to convey a physical location short of latitude/longitude :-) ZIP code vs. postal code...you'd still need a nation to associate it with if you were to do a proper lookup (if that's even possible outside of the first world countries).

As for credit cards, we never prompt the user/customer/visitor/whateveryouwanttocallthem to select a card type - it's pointless and can be inferred from the first digit of the card number if absolutely necessary. We've never found it necessary, so whether that convention holds 100% true I don't know for sure.
# Posted By Steve | 9/7/07 11:17 AM
Peter, I still think its great though you tackling all this. You will become a UI genius overnight I'm sure! Learning a lot of this front end stuff might also give you a lot of inspiration when doing back end development. Once you are back from your trip we'll definitely chat about all this. I'm very interested in what you are doing as I'm sure everyone else is. Keep it up!
# Posted By Javier Julio | 9/7/07 11:17 AM
And yes, i noticed .5 seconds after submitting my comment that you specifically stated US only...but knowing you' you'll want to design the system to support anything, anywhere, anytime anyway, so maybe it's useful...maybe not.

Dear lord I need coffee.
# Posted By Steve | 9/7/07 11:18 AM
@Javier, I think it'll take a while, but when you look at the state of most $15,000 web apps, I don't think it'll take that long to be better than average! Also just went through another 15 articles as A List Apart toy - some nice stuff! Definitely lots to discuss!

@Steve, Good point and one I was thinking of. See:
http://www.pbell.com/index.cfm/2007/9/7/Handling-I...

Any input appreciated (after you've got your coffee of course ->).
# Posted By Peter Bell | 9/7/07 12:00 PM
What if they typo their zip code?? :)

I developed a site once where we implemented address 'verification' via UPS. It was a PITA. We got so many calls from clients who were confused when asked to pick a 'correct' address. This was a site that catered to an older crowd. I think you would certainly need to consider your audience when designing outside the 'norm'.
# Posted By Jim Priest | 9/7/07 12:02 PM
While I definitely agree that asking for the CC type is useless, it's important to note that the city and state can't be properly *inferred* from the zip - they need to be looked up. Yes, there are plenty of resources to do this, but I think it's important to consider whether the extra time/processing resources/potential cost really make it worth while.
From a development perspective, is it worth the extra time and effort needed to develop your JavaScript solution to dynamically display the logo of the correct card over just having a simple set of radio buttons or a select list? Yes, it would be cool, but is the client paying for cool?
Consider also that it really only takes a few moments to add a CC type selection to the form, and you could go ahead and ignore this data on the server. On the other hand, how much time and money is wasted by the customer service department having to field calls from confused customers who may think that the form is broken or incomplete because fields they expect are missing (and keep in mind someone with JavaScript disabled wouldn't know that the card type had been determined.) The confusion would be even greater for forms that leave off city and state. An important aspect of good design is keeping things user-centric and going along with the user's expectations, even if we happen to think that they are a bit silly.
# Posted By Rob Huddleston | 9/7/07 12:03 PM
One of the biggest issues I have with depending on zip code for city and state is that it depends on the quality of the zip code lookup table. For several years I had an issue with Yahoo Stores who insisted that my zip code was the zip code for an adjacent city, not the city I live in...
# Posted By Chuck Lawson | 9/7/07 12:05 PM
I dont think that the zip code look up is a good idea. Zip codes change constantly, so you would need to have a good zip code lookup service. Secondly, some zip codes return two cities, at least that's what the zip code table one of my clients used did.
# Posted By Anthony Fojas | 9/7/07 12:23 PM
Hi All - thanks for the great comments!

@Jim, I certainly think that'd be too much. I was just hoping to save the entry of city and state.

@Rob, Processing time might be an issue - very god point. Bear in mind though I'm planning to write once and reuse so the cost to a given client for the feature would be nominal.

@Chuck, VERY good point, although I guess if the city and state were editable, that'd help.

Hmm, does sound like there are some pretty good reasons not to do this . . .
# Posted By Peter Bell | 9/7/07 12:29 PM
@Anthony - Interesting - thanks! On balance, I think you're right.
# Posted By Peter Bell | 9/7/07 12:29 PM
I absolutely hate when you're forced to enter things like a phone number in a specific format, or when the number is broken into 3 separate boxes. If I type in 1112223333 you can tell it's a phone number because it has ten digits. I shouldn't be forced to type in (111) 222-3333. If you need it in that format, then fix it behind the scenes - don't force your users to do work that a computer can do easily, like adding or removing formatting.

The same applies to typing in credit cards. 16 digits is still 16 digits, whether it has spaces or "-"'s in it.
# Posted By darron | 9/7/07 1:16 PM
Hi Darron,

I agree 100%. I always offer a single box with plenty of space and ReReplace any non-numeric character with "" so I end up with a string of numerics which I can then validate based on length, etc. I then have display rules so if you want to display all phone numbers with (xxx) xxx xxxx or whatever you can set that display rule in one view helper and it uses that site-wide.
# Posted By Peter Bell | 9/7/07 4:04 PM
zip codes are delivery routes and do not adhere to city or county boundries. This creates some problems when it is used for our purposes. For example, I live in a zip code that crosses into multiple cities and counties. Places like USPS and UPS include the most likely city or county in their database but you can recieve multiple.
# Posted By Richard | 9/8/07 9:10 AM
We actually CC type into our form because we only accept some of the different credit card types out there. We found that our customers were reminded of this fact if they had to choose a type from a drop down. Otherwise they would call and say their card wasn't working when in reality they were using a card type we told them was not accepted.
# Posted By Kurt Wiersma | 9/9/07 1:51 PM
@Richard, Good point.

@Kurt, Yep. That seems to be the reason to consider the drop down as it is much more explicit that just a list of logos (which you'd think would be more visible, but which lots of users seem to not see). Definitely an interesting balance . . .
# Posted By Peter Bell | 9/10/07 11:12 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.005.