Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Some time ago (it might have started with Apple) designers started to use pattern of auto-detection of credit card type in credit card forms.

enter image description here

On the screen above you can see such a form (it's Apple). If you start to type in your credit card number all other credit card types icons will fade to gray.

I wonder if you have any experience with this kind of forms and do you know if they're improving the conversion rate.

At UXPin - the UX Design App we've decided to take a shortcut and just don't ask for a credit card type.enter image description here

Do you think this lack of interactivity might decrease efficiency of our form?

If you want to play with examples above - here you'll find some wireframing templates: http://uxporn.uxpin.com/credit-card-form/

share|improve this question
1  
This is an interesting question. However you seem to have a tendency to reference your uxpin site a lot in your posts. While this is not a problem in the way you do so (declaring your affiliation with it) it could rub people up the wrong way and come across as bordering on spam. Please be aware of this for future posts. Having a relevant site is fine, but don't structure questions around that site. This is a Q&A site at its core, not a community or promotion forum. –  JonW Jan 13 '13 at 22:46
    
Cheers for community care JonW! I'm referencing a lot to our UI Design Pattern site to show you some examples. You're totally right that it might give you a wrong impression - I'll have that in mind. In case of this question: I'm writing an article about credit card forms and of course I'd love to further optimize our credit card form. It's a real question not spam. Hope you understand. –  marcintreder Jan 13 '13 at 22:49

3 Answers 3

This function works for the major cards. if the first number is 3 it's an Amex, 4 it's a Visa, 5 it's a Mastercard and 6 it's a Discover. The classes that are added or removed correspond to a sprited image with both color and b&w versions of the company logos or whatever image you'd like.

The real complexity is written about here. A more complex switch would be neccessary. http://en.wikipedia.org/wiki/Credit_card_numbers

determineCardType : function(el , ev) {
    firstNum = el.val().slice(0,1)
       this.cc.find('div').removeClass('amex_active').removeClass('mc_active').removeClass('visa_active').removeClass('disc_active');
    switch(firstNum) {
      case '3':
        this.cc.find('.amex').addClass('amex_active');
        break;
      case '4':
        this.cc.find('.visa').addClass('visa_active');
        break;
      case '5':
        this.cc.find('.mc').addClass('mc_active');
        break;
      case '6':
        this.cc.find('.disc').addClass('disc_active');
        break;
    }
  },
share|improve this answer
1  
This user experience Q&A site is more concerned with the experience of using such a detection technique, not the actual code to detect it. –  kontur Jan 14 '13 at 6:57

If you accept all the common credit card types, showing the type isn't necessary or helpful. But, if you don't accept some of the common but ancillary card types, like Amex or Discover, the card selection can help inform the user.

share|improve this answer

Your implementation is correct: don't ask for a card type. Jessica Enders did a great article on the subject for UXmas:

All in all, taking this approach means the business gets just as much information as they always had, with less effort required from the user, which in turn means greater conversion.

You should read the whole article, though; there are some design considerations worth being aware of.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.