

What Designers Can Learn from Target’s Checkout Form - waterhole
http://uxmovement.com/forms/9-things-designers-can-learn-from-targets-checkout-form/

======
aaronblohowiak
This is the best credit card form: <http://dribbble.com/shots/59549-Credit-
card-form>

I want to do a version of that which begins with the credit card types
desaturated and then colors the one that matches the number entered (for which
there are Free js libs)

~~~
brokentone
Agreed with everyone here. Why require people to choose the card type? I don't
buy the additional step for security argument. A thief will know what type
their card is supposed to be. Just lazy development.

Also, the credit card number series should be tightened up when automatically
selecting card type. Wikipedia actually has a nice list of the series
(<http://en.wikipedia.org/wiki/Credit_card_number>).

~~~
andymurd
I think the only reason to ask for a card type is to discourage customers from
trying to pay with an unsupported one. Merchants can still be charged fees for
declined transactions.

A few of the larger merchants can benefit from choosing a different
transaction acquirer based on card type (e.g. lower fees for Amex) but they
should not trust the card type selected by the customer.

~~~
jfarmer
The card type is a function of the card number, so the merchant has several
chances to reject it before they send it off to the payment gateway.

------
mannicken
Using color temperature to distinguish between primary and secondary elements
-- brilliant.

[http://uxmovement.com/wp-
content/uploads/2011/09/checkout+or...](http://uxmovement.com/wp-
content/uploads/2011/09/checkout+order+summary.png)

I have a little problem with the star at the end of "your price" as it creates
dissatisfaction: "Oh, so the price isn't 12.98? What is it? Like $300? $500?"

About gift box... I'm sorry, I had to pull out Ill/PS and do this:
<http://olekbeluga.com/targetgiftbox.png>

~~~
ars
This signature looks like a ribbon/bow to tie the box up above with. i.e.
visually it looks like a request to gift wrap.

Sorry, just nit picking, I know this was just a one off.

~~~
mannicken
Good point. What if I emphasize the "signature line" concept and insert a line
to emphasize the "these two are separate" concept?

As in: <http://olekbeluga.com/targetgiftbox2.png>

~~~
dhugiaskmak
Why not show an actual, legible, signature? (John Doe or Jane Q. User or
something.) Even with the signature line it still looks like visual gibberish.

~~~
mannicken
I thought about a legible signature. My reasoning was that it was too
specific. When you're drawing an icon of a coffee-cup, you're drawing abstract
shapes that will hit as many people with a 'coffeecup' concept. Compare this
to a life drawing of 'coffee-cup on a bar in Starbucks at 9pm in Seattle on
5th avenue'. Who gives a shit who's signature it is?

By drawing an abstract shape of signature I'm letting the user fill in the
gaps ('yay, it's my signature'), without forcing a specific context on his
mind ('oh, it's John Doe's signature').

------
Roboprog
Formatted input? Alas, I knew him.

Glad to see that JavaScript is helping formatted input to make a come-back.
Too bad such a feature was never incorporated into HTML forms in the first
place. E.g. - something like a "PICTURE" clause in dBASE (as in "still
preoccupied with 1985" :-) )

------
jshb
I wonder if they did a study into what percentage of their users have font
smoothing turned off, because their HTML text everywhere site looks horrendous
on my PC with font smoothing off. It's especially ugly when you can easily see
where they are using graphic text on a few select spots.

~~~
waitwhat
_their HTML text everywhere site looks horrendous on my PC with font smoothing
off_

If you don't like how text looks without font-smoothing, then maybe you should
consider turning on your font-smoothing...

~~~
damncabbage
Windows XP doesn't have it on by default. Most users don't know how to change
it, even if they know what font-smoothing is in the first place.

We as web developers need to at least be aware of what our sites will look
like for a given percentage of our userbase (and make a decision as to whether
it's worth making it look good for that percentage).

------
bobbles
I'm not sure if I like the promo code being located at the end of the form..
Generally any time I have used one I want to know exactly what the price will
be after the code before starting the rest of the process

------
kevinpet
I don't understand holding up the checkbox as well executed. The primary text
on the "is this is a gift" is "somebody special". If you're going to use
smaller lighter type near large bold black type, then the bold section needs
to convey the information and the lighter type just needs to add context or
turn it into a grammatical sentence.

Also, "success" is patronizing.

I may be biased. I hate Target because the one in Foster City has a repeated
pattern of ringing up sale items at regular price. I don't care much about the
8 cents, but it's the principle.

------
mason55
Does the USPS have guidelines or a list for valid city names? Does Target ship
to the US only?

If the answer to either of those is "no" then their City validation code is
almost assuredly broken.

~~~
wccrawford
Agreed. A former employer tried to implement something of the sort, just to
keep the city names nice... They ended up giving up on it because the data
just wasn't good enough.

They even tried just for the US, and not international, and it still wasn't
good enough. It just changes too much and any inconvenience to the customer
was not acceptable.

~~~
ianferrel
It seems like the right way to do this is to have a positive list, but to
accept anything.

If you put in a city on the list, then you get the green SUCCESS (and probably
some autocomplete suggestions to take you there), if you put in one that's not
on the list, you get an no cue at all (or an equivocal one)

Then as you make successful orders to previously unknown cities, you can add
them to the known list (possibly as aliases of the "real" city name, which you
can then display as a choice to future users on entry.

~~~
aquark
The list of valid cities in the US is likely huge -- having an auto complete
list that matched anything would likely make it harder as the users has to
scroll past a lot of close but not the right ones.

Populating the auto-complete list with the 100 biggest cities and accepting
any input would probably give a better compromise.

Or why not just ask for zip code first and auto-populate the rest?

~~~
wccrawford
<http://www.greatdata.com/zip-code-questions.htm>

Q: How often do the ZIP / postal codes really change?

A: U.S. ZIP Codes change sporadically. Most of the time there's just a few
changes, but every now and then (especially around July 1st) there will be
major changes.

\----

... In other words, they change all the bloody time.

------
Roboprog
I like the shopping cart total box shown in the article. (you listening,
Amazon?) I can't say how many times I have gone through and aborted the
checkout process in Amazon, just to find out what items are really going to
cost, given shipping. Of course, the preview assumes a default shipping
option. So let the user set on. I don't have Amazon Prime, so I always select
the cheap shipping anyway.

~~~
lurker19
I assure you that feature was very well tested and the high-pressure shopping
cart tactic was deemed more revenue-promoting than the user-friendly
alternative.

~~~
Roboprog
Touche!

------
baddox
Do higher RPM loading spinners give the impression of faster load times? If
the user counts the revolutions, a faster spinner would yield more spins per
operation, so the opposite could conceivably be true. More likely, there is a
sweet spot. I would think a _smooth consistent_ spinner would be the most
important factor.

~~~
michaeldhopkins
The data spinner on the iPhone is a good example. The 3G/Wifi spinner is at
that "normal" speed, just fast enough to be smooth and not fast enough to be
unintelligible. The Edge network spinner is at perhaps half speed and is
painful to watch. It's quite an effective design.

------
abir
I disagree. The form is really poorly designed. One big specific issue is the
Submit button is red, it should be green, this violates a design 101
principle. Thanks.

~~~
gsivil
Let me remind you that Target's main color is red. 101 principles do not apply
to all cases.

~~~
abir
I know it's red, but you can't put the brand over an universal association
with red=stop. If you look at the data, I bet you they are losing users who
stop or abandon.

~~~
petewailes
I bet you they aren't. After 8 years of split testing experience on some
colossal sites, I'd be surprised if that's the case.

------
martian
Great UI in many places, but SSL errors on their Cart.

<https://www-secure.target.com/OrderItemDisplay>

