91–100 of 206 posts
Regardless, fantastic piece of code! Will definitely think of incorporating this.
You should use data urls or sprites for the CSS, then you don't have the the loading image coming in with delay.
Changing stuff once you have filled out the number is hard. You have to navigate your way back through the 4 blocks, and the auto-tab and the way it reacts to arrow keys means that the cursor doesn't end up where I anticipate it.
Because it's completely unneeded.
Typical web designer wet dream. Fancy-schmancy visual design fluff, robbing screen real-estate and bandwidth for a freaking "credit card" background image, and will it still work even 2 or 5 years from now when all web dev standards have once again turned 180° and future browsers render stuff like this way-off or not at all? Oh it won't, but you web designer dude will happily fix this at a charge of only 1.5 man-days? Well, neat!
Don't get me wrong, it's fun to spend a week or three "optimizing" an approximate 0.000001% of your web app's UX with ideas like this. I get it. Been there, too.
I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it.
I do, however, like the idea of offering a "live preview" of data filled in via a normal credit card form (using the stripe checkout library for example which does all the nice card type detection and input formatting stuff for you).
This type of "preview" could also be useful in a confirmation step, ie. show the front and back of the card so the user can confirm it looks okay (I don't think there would be much advantage in "flipping" back and forth between front and back, though).
So… * Didn't realize I had the name and expiration field to enter as well. I thought it was just show casing the number entry. It wasn't until I came back here to HN to read comments that I realized that there was more to the demo. * Tab order was wrong. * 1Password couldn't fill in the data. * No indicator telling me what credit cards you accept. * CVV was hidden. There were several cases where I'd finished filling…
Adding to Jason's issue list:
* Fill out everything including CVV on back, erase everything on front, option to switch to the blank back persists.
* Not sure where it's supposed to be, but backside CVV for Mastercard seems positioned partially off the top left of the card on Chrome/Mac.
* Card numbers highlights existing digits when tabbing/shift-tabbing, but expiration date does not.
* If you Tab to a card number field with less than 4 digits, they are selected and typed over. If it autoadvances, they are not selected and your cursor is placed before them. This then does not autoadvance.
* D/DD in expiration followed by Tab appears to be accepted but does not work.
* Entering complete invalid Mastercard number, then clicking and entering expiration date (without name), then Tab leaves you apparently nowhere. But it's actually on the CVV, so if you type something to see where it goes, odd things happen.
* Invalid date format, or expired date is not highlighted until you type the first character of name. If out of order, you have to erase previously entered name completely before highlighting recurs.
* Tab from last field takes you off the form with no resolution.
* Enter four digits in card number field, position cursor in middle, then tab to next field. Pressing delete erases the number where you last had the cursor, not the last digit.
* Enter 4 numbers in card field, autoadvancing to next field. Shift-tab back. Tab forward. Delete erases all 4 number in previous field, rather than last as expected.
I think it's a nifty idea, visually pretty when it works, potentially useful as a standard, but right now I feel like I hit bugs faster than I can type them up. Hard to say how useful it will be when actually working, but seems worth finishing to see.
The part for me where it breaks down is when you have to flip the card to the back to fill in the CVC. I also hate when fields auto-tab for me. Also, why does it hide the expiration date and name fields initially?
Wait, the card actually flips? I completely didn't realize that the first time around. As for the second time around, I still don't know how to flip the card. What am I missing?
The main problem, and many designers make that mistake, is that you're modeling a physical thing inside an app for no good reason. Other than the nice visuals it doesn't help anything. As a designer, you should think of how to make the process of entering the CC more efficient and less distracting, so your conversions don't go down the drain. A simple clean design with standard input fields will outdo your pretty des…
There is a very good reason to model the physical card. On the assumption that most folks enter their CC information by taking the card out of their wallet & copying the information from the card into the form. Then for those folks following the physical object makes it easier for the user to locate the expiry date & CCV code on the back.
I assume that folks like us that use CC auto-fill tools are a minority. And yes for us this is totally unnecessary.
PS. Do any non-tech savvy people disable JS? And if so, why?