Home » Splitting credit card number fields into four different inputs

Splitting credit card number fields into four different inputs

Solutons:


I would generally always opt for the simplest solution. In this case, one single field for the user to type into.

With split fields, such as the 4-box one you propose it adds in an extra cognitive load to the user.

  • “Do I need to manually jump to each field?”
  • “Will the system do it for me?”
  • “What if I hit tab myself but the form automatically jumped – will it have jumped into the 3rd field instead…?”

All these extra questions – perhaps subconciously, perhaps more forefront in their minds – are not questions that would even be considered in a single field form.

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. But this can still be mitigated in a single field. Just as you showed above, you can render the user input with spaces in the single field.

Another consideration is mobile users. 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. 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.

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.

Your proposal is a nice idea, but I think it falls into the category of ‘overengineering’. Unless you’re noticing significant user input errors on a single field I don’t think you need to introduce an alternative. You could risk decreasing the usability instead of improving it.

This answer and this answer cover some of the points nicely but for some reason nobody is discussing auto-fill support.

Don’t use 4 separate fields.

  • First, it’s annoying, a lot of those reasons are covered in the other answers.
  • Also, a CC number isn’t four 4-digit numbers, it’s a single long number. Some credit cards don’t even have groups of four, in which case your four field input doesn’t even make sense, for example:

    enter image description here

  • The real one I want to add is some browsers give the option of filling out credit card info for you. 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). 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").

Don’t go trying to invent your own “convenient” input method for this. 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.

As someone who happens to use virtual credit cards, I’m strongly in favour of a single field. 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. I’m assuming here that your form won’t fill the 4 fields if I paste 16 digits in the first one. Will it?

Also, I have seen several 4-field designs which were incredibly hard to use. Sometimes pressing Backspace was required to come back to a field with a typo, in other cases Shift+Tab was required. Sometimes the field you jumped to had its text pre-selected or cleared, so it was basically impossible to predict how the form would behave without observing it after each key-press.

Just give me one field where I can paste a card number into, and let me use Backspace to fix any typos if I happen to type the number manually. Here’s something that looks acceptable:

$('#test_form').on('keyup', function(e){
    var val = $(this).val();
    var newval="";
    val = val.replace(/s/g, '');
    for(var i=0; i < val.length; i++) {
        if(i%4 == 0 && i > 0) newval = newval.concat(' ');
        newval = newval.concat(val[i]);
    }
    $(this).val(newval);
})  

Related Solutions

Extract file from docker image?

You can extract files from an image with the following commands: docker create $image # returns container ID docker cp $container_id:$source_path $destination_path docker rm $container_id According to the docker create documentation, this doesn't run the...

Transfer files using scp: permission denied

Your commands are trying to put the new Document to the root (/) of your machine. What you want to do is to transfer them to your home directory (since you have no permissions to write to /). If path to your home is something like /home/erez try the following:...

What’s the purpose of DH Parameters?

What exactly is the purpose of these DH Parameters? These parameters define how OpenSSL performs the Diffie-Hellman (DH) key-exchange. As you stated correctly they include a field prime p and a generator g. The purpose of the availability to customize these...

How to rsync multiple source folders

You can pass multiple source arguments. rsync -a /etc/fstab /home/user/download bkp This creates bkp/fstab and bkp/download, like the separate commands you gave. It may be desirable to preserve the source structure instead. To do this, use / as the source and...

Benefits of Structured Logging vs basic logging

There are two fundamental advances with the structured approach that can't be emulated using text logs without (sometimes extreme levels of) additional effort. Event Types When you write two events with log4net like: log.Debug("Disk quota {0} exceeded by user...

Interfaces vs Types in TypeScript

2019 Update The current answers and the official documentation are outdated. And for those new to TypeScript, the terminology used isn't clear without examples. Below is a list of up-to-date differences. 1. Objects / Functions Both can be used to describe the...

Get total as you type with added column (append) using jQuery

One issue if that the newly-added column id's are missing the id number. If you look at the id, it only shows "price-", when it should probably be "price-2-1", since the original ones are "price-1", and the original ones should probably be something like...

Determining if a file is a hard link or symbolic link?

Jim's answer explains how to test for a symlink: by using test's -L test. But testing for a "hard link" is, well, strictly speaking not what you want. Hard links work because of how Unix handles files: each file is represented by a single inode. Then a single...

How to restrict a Google search to results of a specific language?

You can do that using the advanced search options: http://www.googleguide.com/sharpening_queries.html I also found this, which might work for you: http://www.searchenginejournal.com/how-to-see-google-search-results-for-other-locations/25203/ Just wanted to add...

Random map generation

Among the many other related questions on the site, there's an often linked article for map generation: Polygonal Map Generation for Games you can glean some good strategies from that article, but it can't really be used as is. While not a tutorial, there's an...

How to prettyprint a JSON file?

The json module already implements some basic pretty printing in the dump and dumps functions, with the indent parameter that specifies how many spaces to indent by: >>> import json >>> >>> your_json = '["foo", {"bar":["baz", null,...

How can I avoid the battery charging when connected via USB?

I have an Android 4.0.3 phone without root access so can't test any of this but let me point you to /sys/class/power_supply/battery/ which gives some info/control over charging issues. In particular there is charging_enabled which gives the current state (0 not...

How to transform given dataset in python? [closed]

From your expected result, it appears that each "group" is based on contiguous id values. For this, you can use the compare-cumsum-groupby pattern, and then use agg to get the min and max values. # Sample data. df = pd.DataFrame( {'id': [1, 2, 2, 2, 2, 2, 1, 1,...

Output of the following C++ Program [closed]

It works exactly like this non-recursive translation: int func_0() { return 2; } int func_1() { return 3; } int func_2() { return func_1() + func_0(); } // Returns 3 + 2 = 5 int func_3() { return func_2() + func_1(); } // Returns 5 + 3 = 8 int func_4() { return...

Making a circle out of . (periods) [closed]

Here's the maths and even an example program in C: http://pixwiki.bafsoft.com/mags/5/articles/circle/sincos.htm (link no longer exists). And position: absolute, left and top will let you draw: http://www.w3.org/TR/CSS2/visuren.html#choose-position Any further...

Should I use a code converter (Python to C++)?

Generally it's an awful way to write code, and does not guarantee that it will be any faster. Things which are simple and fast in one language can be complex and slow in another. You're better off either learning how to write fast Python code or learning C++...

tkinter: cannot concatenate ‘str’ and ‘float’ objects

This one line is more than enough to cause the problem: text="რეგულარი >> "+2.23+ 'GEL' 2.23 is a floating-point value; 'GEL' is a string. What does it mean to add an arithmetic value and a string of letters? If you want the string label 'რეგულარი...