I'm assuming here that your form won't fill the 4 fields if I paste 16 digits in the first one. Every time I want to pay, there is a new card number generated for me by the banking app, and it's very tedious to have to copy-paste four times instead of one. Stick to the same standard credit card number input methods that are already commonly in use (single field, appropriate name and attributes), because browser developers are already making an effort to improve the UX of these kinds of fields, so you let it be handled on the browser-side and give users something that they're familiar with instead of something inconvenient that also runs the risk of breaking all of the nice features their favorite browser normally gives them.Īs someone who happens to use virtual credit cards, I'm strongly in favour of a single field. And so the real "perfect" CC field from a UX perspective is a single field with the appropriate field name (like "Credit Card Number") and appropriate browser-specific trigger attributes (like autocomplete="cc-number" and id="cc_number").ĭon't go trying to invent your own "convenient" input method for this. Chrome, for example has this functionality, and Safari on iOS 8 will automatically add a camera-enabled "scan credit card" button to these fields if you craft them properly (see that article). The real one I want to add is some browsers give the option of filling out credit card info for you. Some credit cards don't even have groups of four, in which case your four field input doesn't even make sense, for example: First, it's annoying, a lot of those reasons are covered in the other answers.Īlso, a CC number isn't four 4-digit numbers, it's a single long number. This answer and this answer cover some of the points nicely but for some reason nobody is discussing auto-fill support. You could risk decreasing the usability instead of improving it. Unless you're noticing significant user input errors on a single field I don't think you need to introduce an alternative. Your proposal is a nice idea, but I think it falls into the category of 'overengineering'. This mobile issue is illustrated nicely on Baymard blog, where they also point out that mobile users tend to manually press into each field - something desktop users don't do as often. Different devices and OS's behave differently, but it's quite likely that on the jump from field 1 to field 2 the keyboard will autoclose and autoopen, causing a jarring flash on screen, with the user possibly trying to click the 5th digit just as the keyboard closes, thereby moving the cursor into another area of the screen altogether, or just missing that digit from entry altogether. While it may well be simple on a desktop, a mobile has a keyboard it needs to open and close on entry of the field. Just as you showed above, you can render the user input with spaces in the single field.Īnother consideration is mobile users. But this can still be mitigated in a single field. Sure, 4-field options aid readability - so if the user entered their number wrong it's easier for them to re-read their entry to see what area they did wrong. "What if I hit tab myself but the form automatically jumped - will it have jumped into the 3rd field instead.?"Īll these extra questions - perhaps subconciously, perhaps more forefront in their minds - are not questions that would even be considered in a single field form."Do I need to manually jump to each field?".With split fields, such as the 4-box one you propose it adds in an extra cognitive load to the user. In this case, one single field for the user to type into. I would generally always opt for the simplest solution.
0 Comments
Leave a Reply. |