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.

On a checkout page we offer the ability to store credit card information. Once a customer has stored their card(s) we need to offer them the ability to choose which card they would like or add a new card.

Which would be a better interface:

1) A radio list that shows each card that has been added, with the last option: "New Credit Card". The "new credit card" option would reveal the CC inputs.

-- OR --

2) A drop-down defaulted to the most recently used card that when clicked reveals all other cards as well as a "New Credit Card" options. The "new credit card" option would reveal the CC inputs.

share|improve this question
add comment

6 Answers

up vote 2 down vote accepted

I would go with option #2 as drop downs work well for selection inputs that can have an arbitrary number of options. A radio list that contains a fixed number of choices works well in certain situations, but what if a customer has 10+ credit cards? This would start to cause layout and UX issues, whereas a drop down just works.

Edit: I would note that several online retailers use the second approach, however, Amazon notably does not; they show all available credit cards (and associated info) to the user in a grid. I would still argue that in general the drop down is going to be easier to manage from a design perspective, but there are other answers here that present good points.

share|improve this answer
1  
Apparently in America a person will have an average of anything between 1.96 to 3.5 credit cards. –  Izhaki Sep 16 '13 at 22:01
    
I don't think the design should be driven by the 0.01% of users who both have 10 credit cards and register all 10 with the webservice. –  Brendon Sep 17 '13 at 14:21
    
Of course, the 10 cards is just an example and I agree with your sentiment, but the problem potentially manifests with just 3 or more depending on the design of the interface. Drop downs are designed to handle arbitrary selection situations like this one. –  Joshua Barron Sep 17 '13 at 14:53
add comment

I remember a basic rule saying: "If you have enough room, use radios, not dropdown". Dropdown is a control where it is easier to mistake and harder to notice that.

share|improve this answer
    
I like that rule. I'm inclined to agree. They're much easier to scan. –  Simon Sep 17 '13 at 12:29
add comment

There could be an Option 3 with both
Radio for default usage is better visual than a default in the combobox.
For user with only one card you could disable/remove the second option.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Option 2 would be better for any user who has entered in more than one credit card. Presenting a single visible set of card details at a time removes any chance of users becoming anxious at the thought of paying on the wrong card. Amazon's basket checkout page is a good example of this taken to an even further extreme - this selects the user's default card and provides a link to a separate page to make and confirm any changes.

With radio buttons they're far more likely to spend additional time checking and re-checking their selection as the other sets of card details will carry equal visible weight on the page.

share|improve this answer
add comment

"Dear technical support, today I tried to make a purchase on your site, but my credit card got lost last week, and I couldn't find an option to add a new card on your site. Please help. With Kind Regards, Charles Philip Arthur George."

Since the frequency people select an alternative card (to their main/default one) is low, showing each card can be considered as 'noise'. Hiding less needed options in a drop-down seems like a good idea in these circumstances.

But, I really dislike the thought of hiding the 'add new' option in the drop-down - expect many users not figuring this one out (instantly at least). A user asking "how do I add a new card" will not have a clear answer on screen. The affordability of a drop-down is to allow selection between multiple items, not to facilitate further actions. So I suggest you keep the drop-down, but place the 'add new' outside it.

share|improve this answer
add comment

3) Showing the last card along with a link/button that offers the users to switch to a different card or to add a new one. If switching to a non-default card is indeed a rare scenario like @Izhaki suggested, this could be the best way, with the most effective default behavior.

4) Using a set of radio buttons + New for up to 3 cards and switching to a dropdown beyond that. This solves the problem of using a dropdown for 1-2 values, which is very bad practice, but also takes care of the numerous cards scenario.

share|improve this answer
add comment

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.