The Ultimate UX Design of: the Credit Card Payment Form

In this series Marcin Treder of UXPin – The UX Design App explains how to design the User Experience of the most important ingredients of web and mobile apps. Step-by-step tutorials and examples from the most important services in the world will help you in your own, everyday practice.

The Peak Point of eCommerce and SaaS – the Credit Card Payment Form

SEE ALSO: Hot Social Design Patterns for Mobile

If you’re selling something online, you know it’s not the easiest thing to do. You need to find a prospective customer, present your product in a good light, drive her through a process full of forms and finally… collect her money. At every step you’re risking a sudden loss of your client. That’s painful.

There’s lots of things that can happen. The human attention span is extremely limited and vulnerable to distractions. The whole process is easy to complicate and tough to design. The last step in the process – the credit card payment form – is especially challenging. People won’t risk placing their credit card number in a badly designed or confusing form. The risk of losing money will be too great.

Minimizing the feeling of risk and avoiding confusion – that’s what you’re aiming at when designing a credit card form. That’s your ultimate UX Design task.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Wouldn’t it be sad to lose a customer at the last step of the selling process? You did everything else well and just the last tiny step somehow went wrong. The payment didn’t go through and the only thing that you can do is burst into tears.

We know that feeling

UXPin for a long time relied on PayPal as the only payment option. The speed of development and lack of bureaucracy were so tempting, we just couldn’t resist it. As it turns out, that was a terrible decision. We were constantly losing about 20% of our customers at the very last step of the process. The reasons behind this were obvious:

  • Lack of payment options (though PayPal is extremely popular in the US, many people refused to use it when paying for a subscription to our UX Design App).
  • Confusing process of redirection to PayPal and terrible design on the PayPal side.

This forced us to redesign the whole paying process. The result was stunning. There’s still room for improvement, but the increase in revenue was immediate and high enough to justify all the costs.

The credit card payment form is a peak point of online selling. You want to make it right and I’ll show you how.

Help people succeed

I have good news for you: If your prospective customer reached the point in which she needs to type in her credit card number, she really wants to pay. That’s right – no strings attached. Somebody wants to give you money! Whether you take it, depends on your design.

Will you help your users succeed in their purchase, or rather make it really hard for them? It’s up to you.

If you ask for tons of optional information, therefore risking distraction, have unclear labels, or don’t inform what type of credit card you accept, your call to action is obscure and data transfer isn’t safe… don’t be surprised if many people will leave the process without completing the payment.

You’re not helping them. You’re creating additional obstacles.

Luke Wroblewski in his great book “Web Forms: Filling The Blanks” stated: “Any question you ask people in a Web form requires them to parse it, formulate a response, and then input their answer in the affordance you have provided on the form. Being vigilant about every question you ask allows you to remove questions that are not absolutely necessary, or can be asked at a better time or place, or can be inferred automatically. And the fewer questions you ask, the better the odds are of people completing your forms quickly and easily.”

Bearing that in mind take a look at the Amazon payment process and the payment form itself. Amazon knows that typing in a credit card number each time you want to purchase something is an obstacle, so they ask you to “add your card” to the account, so you can make a purchase with just one click.

Amazon Credit Card UI Design Pattern
Amazon tries to be as simple as possible

They also minimized the information needed to just “Card number”, “Name on card” and “Expiration date” fields. In most cases they don’t even ask for the infamous CVV code (though how they manage to proceed with the transaction without the CVV is somehow mysterious).

Amazon tries to help their customers to go through the process as quickly as possible.

Follow their steps and simplify your form as much as you can.

Amazon Credit Card Wireframe Template

Amazon’s Credit Card formDownload UXPin Wireframing Template (you’ll be redirected to UXPin App and you’ll be able to sign up for a free trial)

Do the job for them

Making the form simpler by reducing the number of form fields isn’t the only thing you can do on your way to the ultimate User Experience Design. Extend your help by doing part of the job for your customers.

Apple Credit Card UI Design Pattern
Apple Credit Card Form

Apple in their Credit Card Payment Form detects the type of credit card you’re using and makes it a little bit easier as you don’t need to choose your type from a traditional list. The responsiveness on the form is also important as it helps people focus attention. When you start to type your credit card number the right icon will remain colorful, while the other will fade into gray scale.

You should also notice that Apple offers the option to pay with two debit/credit cards. That’s great and rare customer care. If you’re selling expensive gear – you should have this option in place!

Apple Credit Card Form Wireframe Template
Download Apple Credit Card Form Wireframe Template

Gumroad choose the same way of pointing out to the user that they know what kind of credit card you’re using.

Gumroad Credit Card UI Design Pattern

Technically it’s rather simple. Credit card numbers are created in a consistent way. American Express cards start with either 34 or 37. Mastercard numbers begin with 51–55. Visa cards start with 4. And so on. This information can be used to detect what type of credit card someone is using simply by looking at their credit card number.

Gumroad Credit Card Wireframe Template
Download Gumroad Credit Card Payment form Wireframe Template

Captain Obvious strikes back

To make your form unobtrusive you need to make it obvious. If you have form field labels without any explanation, some of your clients might feel confused. They might not understand the CVV code, or the reason you’re asking their name (what if they’re using their company card to make a purchase?).

Alleviate the pain by adding short prompts and examples next to labels.

Take a look at the simple form created by the Threadless team. Its great design is hidden in the details.

Threadless Credit Card UI Design Pattern
            Threadless Form does a good job of making things obvious

Let’s consider the form fields:

  • Name (as it appears on your card) – leaves no doubts about what you demand to be typed into the form.
  • Card number (no dashes or spaces) – gives people information about the required format. Of course it would be much better if the form itself could accept any format of provided data, but still it’s much better than letting people fail and scaring them with error messages.
  • Security code (3 on the back, Amex 4 on the front) – the image clearly shows where you are supposed to look for the security code. This is also the first Credit Card Payment Form that tells clearly that on American Express cards the security code is on the front not on the back of the card and that it consists of 4, not 3, digits.

Can you see how the Threadless team deliberately made the form easier? They tried to prevent customer confusion, which may result in a higher Conversion Rate.

The trick is that you want to be only as obvious as you have to be. Not all of your customers will need extensive help. You might consider hiding any extra help under an question mark icon. Too many prompts and explanations might just create a cognitive overload, which is always risky.

Add some instructions to your form just as Threadless did.

Threadless Credit Card Wireframe Template
Threadless Credit Card Form - Download UXPin Wireframe Template

Make them feel safe

When people are reaching for their credit cards, you want them to feel safe. If you fail to provide a safe-looking environment, your credit card payment form will be a disaster. Unless you have a great reputation, such as Apple and Amazon, you want to indicate that you take great care of the safety of your customers.

Take a look at UXPin’s design.

UXPin Credit Card Form UI Design Pattern

We’re pointing out to our customers that we’ve invested in the 128-bit SSL encrypted protocol to secure their sensitive data. We want them to feel as safe as possible. We’ve also taken extra care over the overall visual design.

Visual design has an extreme importance, when it comes to a feeling of safety. If you look like a fraud site, you’ll be treated like a fraud site and hardly anyone will find the courage to trust you with their credit card number.

UXPin Credit Card Wireframe Template
Download UXPin Credit Card Form Wireframing Template

Make sure they know the price

Probably the silliest mistake you can make is to force your customers-to-be to go back and forth to your service to check how much money they will send you by typing in their credit card number. Always inform your users how much you will charge them.

Buffer App does this in a great way.

Buffer let you know that you’re about to subscribe to the service and give you also an option to pay upfront for a year.

Buffer Credit Card Form UI Design Pattern

Their great, relaxed copy makes you sure that there are actually people behind it, not vicious cyborgs. It also gives customers a feeling of safety.

Buffer Credit Card Form Wireframing Template

Buffer Credit Card Form – Download UXPin Wireframing Template

Step-by-Step Tutorial

Let’s use the knowledge that we’ve gathered above and go through the process of designing a perfect Credit Card Payment Form, shall we?

I’m using UXPin – The UX Design App to quickly create this user interface, but to recreate each step you can use your own weapon of choice.

1. Basic Structure

Basic Structure

I always like to start with a basic structure of the interface in mind. Bare boxes represent general content pieces and space that will be filled with UI elements. This allows me to really stay focused.

2. Headline and Call-to-Action

Header and CTA

In the next step I form a headline and a call-to-action. Both elements are vastly important and shouldn’t be underestimated. In the headline I’m looking for something emotional, but not too catchy. After all, we want our users to go forward smoothly.

Take a look at the sub-headline, “We accept Visa, Mastercard, American Express. If your card is not on the list, let us know.” With this statement – I’m informing my customers about accepted credit cards, but at the same time I’m offering much needed support.

If your customers are using credit cards that are not supported, you really need to know about it.

A call-to-action should be precise. Don’t try general things like “Continue”, “OK”, “Done” – these kinds of phrases don’t create a context for the whole process and may confuse your customers. They will also fail at creating a sense of urgency and… well, just a call-to-action.

3. Safety Indicators

Safety

A couple of paragraphs above we were discussing the importance of safety and price in the credit card form. Let’s put that into practice!

Take a look at the precautions that I took to make sure the payment process will go smoothly:

  • At the top I inform my customers about the technical safety provided by the SSL protocol. That’s forming positive frame around the whole form.
  • I want to now make sure that nothing worries my customers at the moment of purchase. I not only inform them about the price, but also I let them know that a refund is possible.

4. Form Fields

Form fields

Next, I place important form fields. I’m assuming that due to a backend transactional mechanism I don’t need to know my customer’s name to proceed with payment, but I need the CVV code. That’s a popular pattern.

I’ve decided to place an additional “lock” icon in the form field, to indicate that all the data is safe.

By putting “/” between two selects of the Expiration Date, I’m addressing the mental model created by credit cards. This is the format of data used on most credit cards in the world.

5. Labels and Prompts

Labels and Prompts

Finally I place labels and all the important prompts. I’ve decided to use the mechanism of the auto-detection of a credit card number. I want my form to respond quickly to user input, so I designed a place for a credit card icon at the right of the Credit Card Number field.

The Security Code is always a tricky field, so I’ve secured it with a textual prompt “Last 3 digits on the back. Amex: 4 on the front”, as well as icons showing where to find the codes.

That’s it folks! The form is ready. If you wish to use it in your designs – download the UXPin wireframing template (remember that you need to sign up to do this).

List of Resources

Video Tutorial

Marcin Treder is a design enthusiast who literally lives for creating best user experience possible. After years working as UX Designer and UX Manager he focused on his own startup UXPin - The UX Design App, that provides tools for UX Designers all over the world and was recently voted the best startup in Central and Eastern Europe. You can follow him on Google+.

Newsletter

18 Comments
  1. Michael Jan 15, 8:16 pm

    We’re working on just launching our billing/upgrade page and this post has perfect timing.

    I love buffer’s design – it’s so clean! Thanks for all of the examples and the demo. I bookmarked the web form book you talked about, too.

    Reply
    +2
  2. gSvoren Design Jan 15, 8:52 pm

    This is great! Really shows how much UX Design matters in terms of making users feel comfortable when submitting a payment.

    My favourite: UXPin’s. The blue “safe” box at the top really soaks in the feeling of safety and genuineness :) makes you WANT to type in your information.

    Reply
    +3
  3. Pingdom Jan 16, 12:52 am

    May we also submit what we’ve been working on: http://royal.pingdom.com/2012/11/27/new-credit-card-design/

    Reply
    +2
  4. Devan Jan 16, 2:14 am

    I came up with this concept around september time last year.

    Changing the whole credit card box depending on the card time.

    http://dribbble.com/shots/838096-Credit-Card-Box

    Reply
    0
  5. Petar Subotic Jan 16, 8:28 am

    If you haven’t already, check out Squares new approach to collecting all the credit card info within one input field: http://www.youtube.com/watch?v=XUa5pfHdVwQ&sns=em … rather ingenious.

    Reply
    0
  6. Ronald Mason Jan 17, 3:20 pm

    Download UXPin Wireframe Template = Subscribe to 7 day trial for UXPin

    Reply
    -1
  7. Andreas Papaderos Jan 18, 2:03 am

    Nice article, although the UXpin price in form is not so prominent. The user may be unable to understand if he is going to pay 10$ or 12X10$.

    Reply
    0
  8. Vicky Jan 18, 3:37 am

    Interesting and timely. I do wonder about the Gumroad one though: I tried using it on a website with a UK credit card and got refused (I suspect that UK credit cards require the name as it’s stated on the card). That’s a sale I’ve lost, if it was because my card wasn’t from the US I’d have liked some warning upfront!

    Reply
    0
    • Marcin Treder Jan 23, 5:12 pm

      Cheers Vicky! As far as I know it’s a US thing. Gumroad uses stripe.com, which unfortunately is available in US and Canada only.

      Reply
      0
  9. torresburriel Jan 25, 10:45 pm

    I’m impressed. Very good article, very good explanation, and very very good lesson for designers.

    Reply
    0
  10. B Nov 4, 8:33 pm

    It might be worth exploring the security implications in the “Make them feel safe” section. By putting the lock, 128-bit security comment, and “you’re safe” text, you are assuming that there isn’t a MITM attack happening or that a bug isn’t causing your site to be served over HTTP. The user should be looking to their browser address bar to determine if they are safe, not the content on your site. Teaching users to trust site content may actually make them less safe.

    Reply
    +2
  11. Chris Jan 7, 8:42 pm

    Thanx for sharing usefull post. Witch payment service are You use?

    Reply
    0
  12. Yann Feb 3, 11:21 am

    Don’t you think you could make your users feel disconcerted by automatically detecting their credit card type? I feel like most people don’t know that credit card types can be detected by their first to digits. They could think “Why do they know my credit card type?” and get suspicious. Why not place a little tooltip “Why do we know your credit card type” or “How we detect your credit card type”?

    Another suggestion about the CVV Label “Last 3 digits on the back. Amex: 4 on the front”: Why even display “Amex: 4 on the front” if the user put in a non-Amex credit card number? I know this is a really tiny detail but it saves the user from reading something unnecessary. By doing so you could also get rid of “last 3 digits on the back” if the user is using a Amex credit card.

    I really enjoyed reading that article. Thank you! Cheers

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters