What Designers Can Learn from Target’s Checkout Form | Hacker News Reader

What Designers Can Learn from Target’s Checkout Form

uxmovement.com

95 pointswaterhole44 comments

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)

You don't really need a whole library to do it, just the first digit is enough. 3 = amex, 4 = visa, 5 = MC, 6 = discover.

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).

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.

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.

>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)

This is similar to the way PayPal does it, which I've always thought is a great, subtle way of confirming the card type.

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

http://uxmovement.com/wp-content/uploads/2011/09/checkout+or...

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

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.

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

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.

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').

On re-reading this sounds like harsher criticism than I intended. What I mean to say is that showing a legible signature would more clearly indicate what the field is for.

I think it's a bit easie for the user if it was signed as "sign here" vs. "John/Jane Doe". ESP if you have an intl audience.

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" :-) )

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.

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...

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).

That would be no problem I'm sure assuming English was the only language I need to display on my browser. Unfortunately I don't fit into that profile.

On Windows, this issue is a hell of a lot more complicated than "if you don't like it, maybe you should turn smoothing on."

Some users dislike ClearType intensely (and that would include your humble narrator.) Turning ClearType off via a Windows system setting is no problem, but for some incomprehensible reason, IE9 ignores this, and always renders with ClearType enabled. For this reason and others, some users including myself use Firefox.

Firefox 5 didn't behave that way, but for some even stranger reason Mozilla adopted IE's approach in Firefox 6. You will get Cleartype-smoothed HTML text in Firefox, whether you want it or not, unless you use an about.config hack to turn smoothing off entirely.

I've heard FF7 is reverting this "improvement" but haven't tried it yet.

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

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.

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.

Target.com doesn't ship outside the US:

http://www.target.com/HelpContent?help=/sites/html/TargetOnl...

The USPS has an authoritative package of zip info including cities:

https://www.usps.com/business/address-information-systems.ht...

Somewhat off-topic, but interestingly enough the city name is not required for delivery by USPS. As long as the street address and zipcode are correct the automated sorters will find the correct route.

There is actually a pretty interesting response by a mail carrier as to what the minimal address requirements are for delivery by USPS:

http://answers.yahoo.com/question/index?qid=20110527152625AA...

My dad once sent a piece of mail with just two numbers on it: The PO box and the zipcode.

But just the numbers, no words or anything. And it got there, but the post office clerk complained about it to the recipient :) (It was a small town.)

You could probably do that with a regular street address as well if you used zip+4. I.e. just the house number and the zip+4.

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.

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.

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?

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.

There's third-party vendors that provide an API to verify address information. QAS is one of that's used by some large retail sites: http://www.qas.com/

You don't need a third party: https://www.usps.com/webtools/htm/Address-Information-v3-1a....

Woah, thanks. I didn't know the USPS provided this API

USPS most definitely has a city list. Look up "CASS" (zipCode Accuracy Support System). It takes the address, validates it, and produces or corrects the ZIP.

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.

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.

Touche!

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.

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.

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.

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

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.

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.

Not necessarily. In some scenarios green buttons performed much worse than red (http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button...) and orange (http://visualwebsiteoptimizer.com/split-testing-blog/tag/red...) buttons.

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

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

Reply on news.ycombinator.com