by anthony on 09/13/11 at 9:31 pm
Target recently redesigned their website. While many have their own opinions about it, there a few positive things designers can learn from Target’s checkout form. At first glance it may not look like much, but once you dig deeper you’ll find a diamond in the rough.
1. Crystal Clear Page Headings
When the user gets to the checkout form, there’s no question in their mind where they are. The large, bold and centered heading at the top makes it clear to users what page they’re on and what task they’re about to do. At the same time, its diminished with a gray color so that it doesn’t take the focus away from the more important section headings in the form.
2. Input Mask for Phone Field
Phone numbers are one of the toughest things to get from a user. The user not only needs to know why you’re asking them for their phone number, but they also need to know what format to type it in. Target tells their users why they need their phone number by adding a short note to the right of the field label. But the best part about their phone field is that they control the user’s format by using an input mask. This way they’re able to get the format they want from the user every time without confusing them.
- Do it yourself: Masked Input Plugin
3. Instant Field Validation and Confirmation
Most forms that use instant field validation only validate for user errors. That’s not enough. Target goes the extra mile by also confirming success when the user corrects their error. This gives users the assurance they need to move forward to the next step on the form. Keeping users in the dark makes them wonder if they have corrected their error and if their information will go through. If you make the user think that after they fill out your form there’s a chance it might not go through, the user won’t want to fill out your form because they’ll feel like they’re going to end up doing all that work for nothing. Instant field confirmation puts their worries to rest.
- Learn how to do it the right way: Why Long Forms Need Instant Field Validation
4. Making Checkbox Questions That Users Often Ignore Unavoidable
Text fields and dropdown lists are widgets on forms that easily catch users’ attention. They’re big, visual and shout at the user. Checkboxes, on other hand, are small, placed below the form and easy to ignore. Target makes their checkboxes unavoidable by using a large font to emphasize the questions in an elegant way. This not only makes the questions easier to read than plain text, but it also makes them impossible to miss as users move down the form.
5. Unsaturated Button Color for Secondary Actions
Target treats their primary and secondary buttons differently. They use a strong, saturated red color on primary actions that submit the user’s information. But then they use a weak, unsaturated blue color on secondary actions that modify the user’s information. This helps users differentiate between these two types of actions. Many sites make the mistake of using the same color on all of their form buttons. By using color contrast and saturation, Target makes their primary and secondary action buttons clear.
- Learn more about primary and secondary actions: The Visual Weight of Primary and Secondary Action Buttons
6. Fast Spinning Loading Icon
In any checkout, the user has to wait for their information to process. Target cleverly gives users a feeling of fast load times by making their loading icons spin faster than normal. While this doesn’t actually make the load times faster, the effect it has on the user’s perception of time is what’s impressive.
7. Credit Card Icons to Illustrate What They Accept
Not every store accepts every credit card. Users need to know which ones they can use for their purchase. Target shows icons of the credit cards and gift cards they accept. This quickly tells users which cards they can use at a glance. Users can then select the one they want to use in the dropdown list with ease.
8. Putting Promo Code Fields at the End of the Process
Promo codes are useful for giving customers special discounts. However, putting promo code field at the beginning of your form can hurt your form conversion rate. Target puts their promo code fields for customer and employee discounts at the end of the form process, which keeps users more committed to completing their checkout.
- A study on how promo codes affect conversion rates: Do Coupon Codes Increase Checkout Abandonment?
9. Highlighting the Order Summary Box
Users will want to know how much they’re spending as the products in their cart add up. Target highlights their order summary box with a light, unsaturated blue color fill that contrasts with the rest of the elements on the page, making it easy for users to see.
Effective Form Techniques
Target’s site redesign isn’t perfect in every way. However, they have managed to turn their checkout form into an interesting and productive user experience by using effective form techniques that most retail store sites would never think to use. These nine hidden gems in target’s checkout form can offer designers new insight they can use to improve their checkout forms. The checkout form isn’t the most exciting area of a site to design. But when designed right, it’s the one area that can reap the most rewards.