Checkout checkup: Sites that get it right

Recent reports on the holiday shopping season show that despite the tough economy resulting in a sharp decline in spending overall, the shift from brick and mortar to online shopping continues. Because “going to another store” in the online world is as easy as a mouse click, retaining customers throughout the shopping and buying process is critical. Does your site have what it takes to give customers a satisfying shopping experience and earn their loyalty?

Between some friends’ regrettably-timed birthdays and the holidays themselves, the past month has provided me ample opportunity to interact with and admire recent advances in online shopping and checkout design. From that admittedly unscientific sample, here are some thoughts on key aspects of the checkout experience to consider, as well as my take on the winners at each step.

Searching and inspecting

They say you never get a second chance to make a first impression. As your customers’ first encounter with your site, the searching and inspecting experience is critical. Think of your site’s browse and detail pages as a top-notch personal shopper, and design them to mirror the qualities and behaviors of superstars in that role:

  • Flexible: Make sure your site supports multiple modes of shopping (such as browsing within broad categories as well as focused searching based on specific criteria), and enables users to easily recover if they click into the wrong item or just want to continue shopping.
  • Good listener: Many customers have a pretty good idea of what they’re looking for – is your site designed to listen? Filters that expose a wide selection of available criteria, work together, and support multiple values are great ‘listeners’. If you’re not sure what options to provide, monitor the use of your search box to identify filter candidates.
  • Efficient: Performance matters, so be sure you’ve tuned your page updates to deliver lightning-fast results.
  • Forthcoming: Ensure that your browse pages provide users enough information to quickly disqualify undesired items and develop strong interest in appropriate items, and that detail pages include all information needed to close the sale. While a picture is worth 1,000 words, it can’t say anything if it’s too small – an image size that’s ample for displaying a collection of small items like shoes or belts could induce squinting and frustration when presenting full-length dresses. On browse pages, provide a control for adjusting image size, and include interactive swatches of color options to reduce the need to drill in. On detail pages, provide multiple views and close-ups with minimal navigation.

Winner: Endless

endless search.jpg
This site rocks my world with a half-dozen filter categories that work in tandem, allow multiple values, can be reset with a single click, and update results in the blink of an eye. Replacing the ‘more colors’ bar with a row of interactive color swatches would earn them an A+.

endless detail.jpg
The details view retains users’ context, supports mouse-over close-ups for any of the seven different views of the item (directly accessible via thumbnail), and provides two seamless paths back to browsing mode.

Bonus points: Endless places their customer service number in the site’s persistent header. This grace note not only saves customers the frustration of hunting through the site for help, it also reinforces the company’s attention to customer experience, solidifying brand loyalty.

Selection and confirmation

Once the user has identified an item they want to purchase (or are at least strongly considering), your site’s job is to take that order as quickly and efficiently as possible and get the customer back to browsing or on to finalizing the sale.

While most sites do a reasonable job of taking the customer’s order, I’m dismayed that so many still use drop-down controls for color and size selection – and that in the worst cases, these controls function independently. If an item isn’t available in certain color and size combinations, the worst thing your site can do is make your customer jump through several hoops to get that disappointing news. Interdependent, clickable color swatches and size buttons make it easy to spot what options are truly available to the customer and encourage flexibility in the their size and color selection.

Winner: Banana Republic

BR selection.jpg
Visual treatment clearly indicates that some sizes are not available in the selected color; clicking a size updates the color swatches to visually indicate that some are not available in the selected size.

When it’s time to confirm the selections that have just been made, a non-modal confirmation window is a popular solution. Good for users and good for business, this approach retains the customer’s context and encourages continued browsing rather than prematurely ushering shoppers to the checkout line. While the pattern has become common, subtleties of the design can have a big impact on user experience:

  • Error recovery: The confirmation dialog is asking the implied question “is this correct?” As such, courteous sites are prepared for an answer other than “yes,” allowing the user to modify or undo their selection rather than watch helplessly as a mistake is automatically ‘confirmed’.
  • Dismissal time: While it sounds inadequate, about five seconds proves to be ample time for users to visually register confirmation details and intervene if needed, without the dialog lingering so long that it begins to feel like a houseguest who’s overstayed his welcome. Include a mechanism for manually dismissing the dialog, but endeavor to protect users from ever needing it.

Winner: J.Crew

jcrew confirmation.jpg
Error recovery mechanisms and a ‘just right’ dismissal time distinguish this superior implementation of a common pattern for confirmation.

Checking out

If there is one faux pas that I’d like to permanently eradicate from the online shopping world, it’s the presumption of requiring users to create an account before they can complete their purchase. You’re moments away from sealing the deal, so why on earth would you put an unnecessary hurdle in front of your customer? While it’s true that creating an account greatly speeds subsequent transactions, online retailers would do well to remember that a first transaction is like a first date – your customer isn’t ready to commit to a relationship yet! Rather than forcing account creation up front, allow users to complete their transaction, then chivalrously offer to save the information for use on subsequent visits.

Focusing on the positive, however, there’s a lot to admire about the evolution of the online checkout process. More and more retailers are moving away from multi-page designs that drag users through the shopping bag review, shipping details, billing details, and submission tasks as distinct, siloed steps. In the best new checkouts, a single page provides simultaneous access to the shopping bag (complete with ability to modify selections), shipping and billing details, and order submission, resulting in the perception (and reality) of a streamlined, efficient, and easy purchase experience.

Winner: Anthropologie

anthro checkout.jpg
After a rocky start with a required account, this site wins me over with a single-screen checkout that combines an editable shopping bag, auto-collapsing summaries of completed sections that keep the users’ focus on the next logical chunk of information to be entered, and one-click checkout for returning customers.

So now that I’ve introduced you to my darlings of the online shopping world, which sites’ checkouts do you go gaga over?

2 Comments

Kenneth
That tweed pencil skirt is killer. Classic with a fun edge. Now, were you saying something about websites?
Suzy Thompson
@Kenneth - I'll have one shipped to you right away. What's your size? ; o)

Post a comment

We’re trying to advance the conversation, and we trust that you will, too. We’d rather not moderate, but we will remove any comments that are blatantly inflammatory or inappropriate. Let it fly, but keep it clean. Thanks.

Post this comment