248
votes
Splitting credit card number fields into four different inputs
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 ...
JonW♦
- 36.9k
144
votes
Splitting credit card number fields into four different inputs
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 ...
- 2,612
66
votes
Splitting credit card number fields into four different inputs
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 ...
- 2,236
26
votes
Accepted
How to increase users' perception of security on a payment screen?
Google and UC Berkeley tested different solutions to understand users perception of HTTPS in the browser. While this is not specifically geared to a payment page, their paper contains some strong ...
- 426
22
votes
Splitting credit card number fields into four different inputs
The simplest, if not necessarily the absolute best, solution is a single credit-card field that lets a user input any string of digits and spaces. It should be trivial for the server-side logic to ...
- 655
21
votes
Credits or Money?
Users will not have as much understanding of what a credit represents as opposed to actual local currency (Dollar in this instance). Even if 1 credit = 1 dollar that is still a mental calculation the ...
JonW♦
- 36.9k
16
votes
How to increase users' perception of security on a payment screen?
Baymard has done a number of studies on the subject of perceived webpage security, summarized in this article. Some key points:
Throughout all of our testing of checkout processes, we’ve ...
- 161
14
votes
Credit card field placeholder text
Placeholders gone terribly wrong
tl;dr
When a placeholder doesn't clarify anything, it shouldn't be there.
This is a great example of the negative impact of placeholder text pointed out by NN/g ...
- 21.1k
11
votes
Accepted
How long should "1 month" be?
Stick to conventions and consistency
This is really simple: if user is charged on day 5 of the month, he should be charged on day 5 next month. Most users plan in anticipation and they know that ...
- 32.2k
9
votes
Accepted
Should unavailable options be grayed out or invisible to users?
Users need to trust your application. If you remove unavailable options, they will have a difficult time understanding the rules that dictate completion of their goals.
Here's a helpful article on ...
- 22.8k
8
votes
Splitting credit card number fields into four different inputs
Luke Wroblewski, a UX expert with great insights on building efficient forms, answered this question: use a single numeric input field (here’s a video of how this works).
As you can see in the video ...
- 1,155
6
votes
Accepted
What is the best approach to use after user has made a payment?
Show them the order status page, thank them for their purchase and send them the receipt or purchase order via email. Whether you want to make this an entire page or pop up is up to your design. You ...
- 1,767
6
votes
Accepted
What is the most user friendly way to ask a user to enter European banking data?
Swift/BIC codes follow this convention:
AAAA BB CC DDD
AAAA Bank code A-Z
4 letter code. It usually looks like a shortened version of that bank's name.
BB Country code A-Z
2 letter code. It says ...
- 460
6
votes
Credit card field placeholder text
I simply can't believe they did this. First of all, it shows a definite bias. Cards starting with 4 belong to VISA, so I can imagine all other CC card companies complaining.
Another thing: 4 groups ...
- 32.2k
5
votes
Splitting credit card number fields into four different inputs
Please follow the advice of others and do not attempt to reinvent the wheel. Not unless you have read and understood the ISO standard ISO/IEC 7812 that governs Payment card numbers, which, by the way, ...
- 151
5
votes
Accepted
How to inform user of changes in the shopping cart?
To protect user from such situation you will need two session records:
CART_ITEMS - Items that are currently in the cart.
CHECKOUT_ITEMS - Items the user is about to pay for.
Before you send the ...
- 1,332
5
votes
How do you communicate to a user that their money will not be available because of a technical limitation?
I feel like you're going about this the wrong way, you should ask the creator of the button, prior to any implementation, the questions if it fundamentally relies on them being in the right country ...
- 6,176
4
votes
Should we ask for name on card even though it's not required for credit card payments?
As said by anthonyryan1, it is required for American Express. So either you ask for/require this information only for American Express (which would mean you would either have to ask the user for the ...
- 141
4
votes
Progressive Disclosure on Credit Card Form
Hiding the submit button is not part of progressive disclosure. The only case where a submit button is not available upfront is probably within a Staged disclosure where there are a number of ...
- 6,976
4
votes
How long should "1 month" be?
You don't need to over think this. Unless there are regulatory constraints it can be whatever you want it to be and your users will take it as corporate policy. (By the way is there existing corporate ...
- 6,621
4
votes
Unknown account balance state after startup
Technically, if service is down or unavailable chances are the app would be down as well. Unless there are other valid use case for the app to be up and functional. Anyway, you can simply state the ...
- 307
4
votes
Splitting credit card number fields into four different inputs
I think Card.js is my favorite user experience when it comes to adding cards. Not only it lets you type in very quickly (single fields etc.), they also show you where those fields are on your ...
- 1,702
4
votes
Empty price placeholder design
I would avoid using N/A, as that signifies that field is "not applicable". All three of those fields are applicable.
A simple placeholder would be:
€ 0,0
For every field needed.
- 3,858
4
votes
Accepted
Why not embed payment pages in the same page?
I've worked on this problem in the past; musefan's comment is exactly why you see hosted order pages.
Many payment systems offer APIs that can be embedded seamlessly into a site, but then your ...
- 8,077
3
votes
Accepted
Online software that only has an option to pay by phone
My concern is that using this same payment system seems out of place in a web app. I think it would be expected that a user could start/stop/modify their subscription on their own without ever having ...
- 10.3k
3
votes
Single-Field Credit Card Payment. Experience or Published Data?
This isn't the answer you are looking for, but if you don't have time to test, don't try something out of the ordinary.
I personally think that solution looks great, it's clean and clear, and the ...
- 1,144
3
votes
Accepted
Progressive Disclosure on Credit Card Form
In most cases this is not a good idea. It comes down to UX goals:
The main goal of a credit card form is usually to get the user to complete a purchase.
Error correction and validation is only ...
- 40.3k
3
votes
Gratuity (tips) interface for Mobile Point of Sale (mPOS)
Tipping varies wildly between countries, and even between industries.
I would suggest two alternatives:
If possible, have the operator cofigure the menu according to his particular indusry's customs....
- 486
3
votes
Accepted
eCommerce Payment Process
You should ask yourself (or better: the user) why they're hitting the back button. They could
be either confused and may not be sure that the transaction went through
or they don't know what to do ...
- 3,887
3
votes
Should we ask for name on card even though it's not required for credit card payments?
No, we do not need cardholder name on credit card online payments. Only old dated payment gateways require it.
Actually big issuers like Visa, MasterCard or AMEX - American Express do not require ...
- 486
Only top scored, non community-wiki answers of a minimum length are eligible