Hacker News new | ask | show | jobs
by birken 4467 days ago
Another usability tip on credit card forms: Don't use drop-downs for the expiration date.

People are just typing them directly off the card, let them type them. Don't force them to deal with large and annoying select boxes. Stripe checkout[1] is a good example of how to do it (though by no means were they the first to do this, just a popular example).

1: https://stripe.com/docs/checkout

2 comments

The home page of this article has a section comparing text inputs vs drop downs [1].

[1] http://creditcardjs.com/#drop-down-for-expiration

I can type right into a drop down, and 99 times out of 100 it will do the right thing.

(Sometimes it's weird with a list of states, where it might be sorted by the state abbreviation while showing the state name or vice versa.)

Unfortunately, many payment systems represent the dropdown for the months with zero-padding while others are without. Usually, typing the 0 (because it's on the card) will – if it's not included in the dropdown – not select the correct month. This can cause frustration for the end user. The best way to input credit card information, would be to only have text-fields.
agreed but on mobile I find spinning through the drop-down more annoying than typing the exp date.
I really hate the spinner for all the date selectors on iOS - it's cute, but a keypad is way faster.