Google Checkout's credit card widget

15 Jan 2007 - 12:07pm
7 years ago
11 replies
2096 reads
Anonymous

One thing that's always annoyed me about online store checkouts is
the unnecessary "credit card type" popup menu. There's no reason the
user should have to tell the site whether they have a Visa,
MasterCard, American Express or Discover. This information can be
determined from the card number itself.
* AmEx cards start with 3
* Visa cards start with 4
* MaterCard card start with 5
* Discover cards start with 6

Yet, every site I've seen wastes a few seconds of the user's time
with this choice.

Google checkout (finally!) dispenses with this. If you haven't seen
it, take a look. It's great! There's a JavaScript handler that fires
as you type in the number, automatically highlighting the correct
card logo.

They likely also validate the card number (by checksum, too).

While I'm on the subject: next time you're designing a credit card
order form, be sure to leave enough room for dashes or spaces (20-
character field) and allow the user to input the number however they
see fit.

Paul

shad 96c / uw cs 2001
/ mac activist / fumbler / eda / headliner / navy-souper
fan of / sophie b. / steve poltz / habs / bills / 49ers /

every time i'm close to you /
there's too much i can't say /
-- Sarah McLachlan, "I Love You"

Comments

15 Jan 2007 - 2:39pm
Esteban Barahona
2006

They may use automation, but maybe at least a quick validation? ...like a
small logo of the credit card. The user doesn't have to click it, just see
the logo and think "hmm... that's right".

Nice tip btw...

2007/1/15, Paul Schreiber <shrub en mac.com>:
>
> One thing that's always annoyed me about online store checkouts is
> the unnecessary "credit card type" popup menu. There's no reason the
> user should have to tell the site whether they have a Visa,
> MasterCard, American Express or Discover. This information can be
> determined from the card number itself.
> * AmEx cards start with 3
> * Visa cards start with 4
> * MaterCard card start with 5
> * Discover cards start with 6
>
> Yet, every site I've seen wastes a few seconds of the user's time
> with this choice.
>
> Google checkout (finally!) dispenses with this. If you haven't seen
> it, take a look. It's great! There's a JavaScript handler that fires
> as you type in the number, automatically highlighting the correct
> card logo.
>
> They likely also validate the card number (by checksum, too).
>
> While I'm on the subject: next time you're designing a credit card
> order form, be sure to leave enough room for dashes or spaces (20-
> character field) and allow the user to input the number however they
> see fit.
>
>
>
> Paul
>
> shad 96c / uw cs 2001
> / mac activist / fumbler / eda / headliner / navy-souper
> fan of / sophie b. / steve poltz / habs / bills / 49ers /
>
> every time i'm close to you /
> there's too much i can't say /
> -- Sarah McLachlan, "I Love You"
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss en ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists en ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
http://www.zensui.org

15 Jan 2007 - 3:40pm
Robert Hoekman, Jr.
2005

Amen, brother. :)

-r-

19 Jan 2007 - 5:02pm
Jared M. Spool
2003

On Jan 15, 2007, at 11:07 AM, Paul Schreiber wrote:

> One thing that's always annoyed me about online store checkouts is
> the unnecessary "credit card type" popup menu. There's no reason the
> user should have to tell the site whether they have a Visa,
> MasterCard, American Express or Discover. This information can be
> determined from the card number itself.
> * AmEx cards start with 3
> * Visa cards start with 4
> * MaterCard card start with 5
> * Discover cards start with 6

While this is true, there are other cards (such as house cards and
gift cards) which also start with these numbers, so it isn't
necessarily redundant information.

Business rules are not always as simple as we'd like to make them.

Jared

Jared M. Spool
User Interface Engineering
510 Turnpike St., Suite 102, North Andover, MA 01845
e: jspool at uie.com p: +1 978 327 5561
http://uie.com Blog: http://uie.com/brainsparks

19 Jan 2007 - 7:49pm
Anonymous

On Jan 19, 2007, at 3:02 PM, Jared M. Spool wrote:

>> One thing that's always annoyed me about online store checkouts is
>> the unnecessary "credit card type" popup menu. There's no reason the
>> user should have to tell the site whether they have a Visa,
>> MasterCard, American Express or Discover. This information can be
>> determined from the card number itself.
>> * AmEx cards start with 3
>> * Visa cards start with 4
>> * MaterCard card start with 5
>> * Discover cards start with 6
>
> While this is true, there are other cards (such as house cards and
> gift cards) which also start with these numbers, so it isn't
> necessarily redundant information.
>
> Business rules are not always as simple as we'd like to make them.

But those wouldn't go in a *credit card* field. Most stores I've seen
(Amazon, Apple, etc.) have a separate field for gift certificates/
gift cards/coupon codes.

While you can't always do the work _for_ the user, it's best to do it
when you can.

Paul

19 Jan 2007 - 10:21pm
Austin Govella
2004

On 1/19/07, Paul Schreiber <shrub at mac.com> wrote:
>
> On Jan 19, 2007, at 3:02 PM, Jared M. Spool wrote:
>
> >> One thing that's always annoyed me about online store checkouts is
> >> the unnecessary "credit card type" popup menu. There's no reason the
> >> user should have to tell the site whether they have a Visa,
> >> MasterCard, American Express or Discover. This information can be
> >> determined from the card number itself.
> >> * AmEx cards start with 3
> >> * Visa cards start with 4
> >> * MaterCard card start with 5
> >> * Discover cards start with 6
> >
> > While this is true, there are other cards (such as house cards and
> > gift cards) which also start with these numbers, so it isn't
> > necessarily redundant information.
> >
> > Business rules are not always as simple as we'd like to make them.
>
> But those wouldn't go in a *credit card* field. Most stores I've seen
> (Amazon, Apple, etc.) have a separate field for gift certificates/
> gift cards/coupon codes.
>
> While you can't always do the work _for_ the user, it's best to do it
> when you can.

Way back in the day, the justification I remember for having them
select the card type is that it was an extra level of validation. E.g.
they wanted their Mastercard but put the Visa in instead. Or it is a
Mastercard, but they mistyped the first digit.

I might be remembering this wrong, but that's the justification I
remember. (Not that this justification means it's right.)

--
Austin Govella
Thinking & Making: IA, UX, and IxD
http://thinkingandmaking.com
austin.govella at gmail.com

19 Jan 2007 - 11:37pm
subimage interactive
2004

At least with some CC processing companies you don't even need to put in
your card type. All you need is CC number, name, zip and expiration date.

I've built my e-commerce software like this, and it seems to work well.

http://dev.subimage.com/projects/substruct

On 1/19/07, Austin Govella <austin.govella at gmail.com> wrote:
>
> On 1/19/07, Paul Schreiber <shrub at mac.com> wrote:
> >
> > On Jan 19, 2007, at 3:02 PM, Jared M. Spool wrote:
> >
> > >> One thing that's always annoyed me about online store checkouts is
> > >> the unnecessary "credit card type" popup menu. There's no reason the
> > >> user should have to tell the site whether they have a Visa,
> > >> MasterCard, American Express or Discover. This information can be
> > >> determined from the card number itself.
> > >> * AmEx cards start with 3
> > >> * Visa cards start with 4
> > >> * MaterCard card start with 5
> > >> * Discover cards start with 6
> > >
> > > While this is true, there are other cards (such as house cards and
> > > gift cards) which also start with these numbers, so it isn't
> > > necessarily redundant information.
> > >
> > > Business rules are not always as simple as we'd like to make them.
> >
> > But those wouldn't go in a *credit card* field. Most stores I've seen
> > (Amazon, Apple, etc.) have a separate field for gift certificates/
> > gift cards/coupon codes.
> >
> > While you can't always do the work _for_ the user, it's best to do it
> > when you can.
>
> Way back in the day, the justification I remember for having them
> select the card type is that it was an extra level of validation. E.g.
> they wanted their Mastercard but put the Visa in instead. Or it is a
> Mastercard, but they mistyped the first digit.
>
> I might be remembering this wrong, but that's the justification I
> remember. (Not that this justification means it's right.)
>
>
>
> --
> Austin Govella
> Thinking & Making: IA, UX, and IxD
> http://thinkingandmaking.com
> austin.govella at gmail.com
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
--------------------
seth at subimage interactive
-----
http://www.subimage.com
http://sublog.subimage.com
-----
http://www.getcashboard.com
http://dev.subimage.com/projects/substruct

20 Jan 2007 - 1:03am
Anonymous

On Jan 19, 2007, at 8:21 pm, Austin Govella wrote:

> Way back in the day, the justification I remember for having them
> select the card type is that it was an extra level of validation. E.g.
> they wanted their Mastercard but put the Visa in instead.

I'm curious if this is actually a real-world problem, and how much of
the time the extra step helps. Of course, I have only my own
experience to draw upon, and I'm a bad candidate for user testing. :)

> Or it is a
> Mastercard, but they mistyped the first digit.
>
> I might be remembering this wrong, but that's the justification I
> remember. (Not that this justification means it's right.)

Ah! But there's a simple checksum formula, and your JavaScript can
(and should) verify that too. If you mistype a digit, it'll flag your
card number as invalid.

More details on how credit card numbers work are here:
http://en.wikipedia.org/wiki/Credit_card_number

The checksum scheme is here:
http://en.wikipedia.org/wiki/Luhn_algorithm

Paul

shad 96c / uw cs 2001
/ mac activist / fumbler / eda / headliner / navy-souper
fan of / sophie b. / steve poltz / habs / bills / 49ers /

"We're a couple of nice guys ... which stopped being a desirable
character trait about fifty years ago."
-- Dawson Leery, _Dawson's Creek_, "Escape from New York"

20 Jan 2007 - 7:38am
Esteban Barahona
2006

Why not use a helping logo? I don't know what's my VISA's "master house"...
ie: what faceless corporation "runs" my online transactions

2007/1/19, Austin Govella <austin.govella en gmail.com>:
>
> On 1/19/07, Paul Schreiber <shrub en mac.com> wrote:
> >
> > On Jan 19, 2007, at 3:02 PM, Jared M. Spool wrote:
> >
> > >> One thing that's always annoyed me about online store checkouts is
> > >> the unnecessary "credit card type" popup menu. There's no reason the
> > >> user should have to tell the site whether they have a Visa,
> > >> MasterCard, American Express or Discover. This information can be
> > >> determined from the card number itself.
> > >> * AmEx cards start with 3
> > >> * Visa cards start with 4
> > >> * MaterCard card start with 5
> > >> * Discover cards start with 6
> > >
> > > While this is true, there are other cards (such as house cards and
> > > gift cards) which also start with these numbers, so it isn't
> > > necessarily redundant information.
> > >
> > > Business rules are not always as simple as we'd like to make them.
> >
> > But those wouldn't go in a *credit card* field. Most stores I've seen
> > (Amazon, Apple, etc.) have a separate field for gift certificates/
> > gift cards/coupon codes.
> >
> > While you can't always do the work _for_ the user, it's best to do it
> > when you can.
>
> Way back in the day, the justification I remember for having them
> select the card type is that it was an extra level of validation. E.g.
> they wanted their Mastercard but put the Visa in instead. Or it is a
> Mastercard, but they mistyped the first digit.
>
> I might be remembering this wrong, but that's the justification I
> remember. (Not that this justification means it's right.)
>
>
>
> --
> Austin Govella
> Thinking & Making: IA, UX, and IxD
> http://thinkingandmaking.com
> austin.govella en gmail.com
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss en ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists en ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
http://www.zensui.org

21 Jan 2007 - 10:52pm
cfmdesigns
2004

On Jan 19, 2007, at 8:21 PM, Austin Govella wrote:

> Way back in the day, the justification I remember for having them
> select the card type is that it was an extra level of validation. E.g.
> they wanted their Mastercard but put the Visa in instead. Or it is a
> Mastercard, but they mistyped the first digit.
>
> I might be remembering this wrong, but that's the justification I
> remember. (Not that this justification means it's right.)

As a software tester, I've heard way to many "explanations" over the
years attached to "Closing this bug as By Design." A whole bunch of
them are not "This is how we designed it to be" but "We didn't
actually design that part, so the developers had to create something,
and we're going to stick with what we've got rather than make them
redo it."

I'm suspicious of this explanation. It sounds like something created
after the fact, a retroactive explanation. "It, uh, validates.
Makes sure the user knows what card he's dealing with. Yeah, that's
the ticket!"

-- Jim

21 Jan 2007 - 11:06pm
Robin Jeffries
2005

There is at least one valid reason for including the the card images. Some
merchants don't take all types of credit cards. This is an effective way to
announce the ones they do take, especially for international visitors who
may associate other names with a given card (but the logo is always the
same). I know that in Europe, where mastercard isn't always called
mastercard, having the logo is a good way for me to figure out if the store
takes my card. But that doesn't mean the card type has to be selectable,
though I have seen users click on card types that were "just pictures"
assuming they had to select the card type before entering the number

Robin

On 1/21/07, Jim Drew <cfmdesigns at earthlink.net> wrote:
>
>
> On Jan 19, 2007, at 8:21 PM, Austin Govella wrote:
>
> > Way back in the day, the justification I remember for having them
> > select the card type is that it was an extra level of validation. E.g.
> > they wanted their Mastercard but put the Visa in instead. Or it is a
> > Mastercard, but they mistyped the first digit.
> >
> > I might be remembering this wrong, but that's the justification I
> > remember. (Not that this justification means it's right.)
>
> As a software tester, I've heard way to many "explanations" over the
> years attached to "Closing this bug as By Design." A whole bunch of
> them are not "This is how we designed it to be" but "We didn't
> actually design that part, so the developers had to create something,
> and we're going to stick with what we've got rather than make them
> redo it."
>
> I'm suspicious of this explanation. It sounds like something created
> after the fact, a retroactive explanation. "It, uh, validates.
> Makes sure the user knows what card he's dealing with. Yeah, that's
> the ticket!"
>
> -- Jim
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

22 Jan 2007 - 12:05pm
Esteban Barahona
2006

infomerce, just call it grams of gold (g-Au) and be done with it!

You IxDers should relaaaxxx...

triad: Mac, Linux, Windows

one has to go... but slowly...

and we all now which one it is.

the "top secret" is Windows...

from now on I won't use Windows anymore... but I have the Web 3.0 Fogo
"virus" to help me... go fogo, go.

I'm talking of Firefox. btw.

Syndicate content Get the feed