独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

How to Design Checkout UX Like a Pro

The checkout experience is arguably the most crucial aspect of your online store. Any hiccups and the customer could get distracted, disappointed, or leave — outing your company (that pays your salary) of precious revenue. It needs to be perfect. As a user experience designer, it’s your job to ensure the checkout experience is seamless and effective. No mistakes.

In this article, I’d like to discuss checkout design and several tenets that make for the best shopping-to-payment experience. I know. When you hear “checkout design,” you’re probably jumping for joy…

…but it’s where the rubber meets the road when it comes to making money online. Without a checkout, you don’t get paid. So it better be good.

To answer this question of what makes the best checkout experience, I sought out three veteran UX designers at major ecommerce brands: ThinkGeek, Shopify, and REI. These companies see millions and millions of dollars and users pass through their checkout “lanes” daily. The three folks were:

Throughout my conversations with them, I noticed 5 common principles to remember when designing seamless checkouts.

Working closely with the Themes team, Kevin and his team focused on the standardizing a universal Shopify checkout experience. It’s the same in all Shopify themes.

— Kevin Clark, Shopify

Beyond the foundational sense of security, the Shopify purchase experience should be easy to understand, simple, and fast.

The best way to design something as transactional and process-driven as the checkout is to test everything.

For example, to test an assumption about how many steps should be in the checkout experience, he and his team conducted a test comparing one-page, two-page, and three-page experiences — each with the same information.

Example of single page checkout:

Example of a two-page checkout:

The results showed one page felt overwhelming to the user because it presented too much information on one page, two pages divided the steps awkwardly, and three pages felt simple and easy.

The three steps are Customer Information, Shipping Method, and Payment:

— Kevin Clark, Shopify

These three steps are set in stone across all sites. But other than that, store owners are permitted a handful of customizations to match their brand.

But with customizations, Kevin recommends not overdoing it:

Rather, there should be controls set in place to protect a baseline experience that is consistent, familiar, and secure. An example of this is the Shopify system knows which colors to use and not use based on a contrast algorithm (i.e., light text on dark background) and adjusts for readability.

The checkout system Kevin and his team created laid the foundation for future work to be built on top of it. It’s a component-based system, so new components can be added, such as fields and button elements, and features can be modified or added, without overhauling the entire system.

He wrote that while minimalist design reduces the surface area of an experience, frictionless design is about reducing the energy required by an experience. This is especially important in checkout design.

He gives 6 principles of frictionless design:

At REI, Catherine recently implemented an example of frictionless design on a project. Her team found that when a customer is ready to add an item to their cart, signing-in sends the customer to a new webpage, thus breaking the shopping experience. To fix this, she A/B tested a sign-in widget that opened a drop down sign-in modal, keeping the experience on-page instead of sending the shopper to a new sign-in page.

The data analytics showed no difference in traffic or drop-offs, so they kept it. Visitors could sign in and continue shopping from the same page without losing their sense of place. This is an example of Sinofsky’s #2 principle: Create one path to a feature or task. Instead of creating a fork in the road to sign in or continue shopping, the user’s path is unilateral.

It’s worth mentioning Sinofsky’s #5 principle here as well: Build features, not futzers. What the heck is a “futzer?”

A futzer is the word “futzing” (which probably sounds more familiar to you) cleverly disguised as a noun. It’s a thing that causes pointless fiddling around and wasted time.

This is where designers get tripped up. How do you determine the difference between a feature and a futzer? As Sinofsky alludes, it requires a delicate balance of giving the user what they want but not so much that it overwhelms them.

A great way to illustrate this is to look at the top reasons shoppers abandon their shopping carts. I’d like to highlight two cart abandonment studies and pull insights from both.

Six of the reasons given are related to this balance between features and futzers. Check it out:

In other words, companies are losing revenue because shoppers leave when there are too many futzers and not enough features.

Baymard’s benchmark database revealed that the average US checkout flow contains 23.48 form elements displayed to users by default. However, the results of the study demonstrated it’s possible to reduce the average checkout length by 20–60%.

How many form elements does your checkout have? Anything more than 12 may indicate the presence of futzers in your checkout flow. How do you cut down the number of form elements? Unique testing is the ultimate answer, but, for now, the next steps will suffice.

Here’s a question to ask your checkout designers: how are you leveraging data throughout the checkout process?

Matt at ThinkGeek believes the best checkout experiences collect only the necessary data and then maintain that data all the way through the end of the transaction:

If your database has information about a customer, use it to reduce the number of fields he or she has to fill out. Amazon’s One-Click purchase feature is a prime example of this.

By knowing the customer’s data, it can correctly “guess” the user’s preferred shipping mode, address, and payment details with zero added effort from the user. With a one-click-one-sale checkout, there are no opportunities for chokepoints.

Shopify maintains data with “checkpoints.” Meaning, if a user proceeds through Shipping but drops out during Payment, the collected data is maintained and the user can pick up their journey right where they left off.

The final common thread between all three brands was the idea of “forgiving design” — where the designer’s goal is to prevent any mistakes in the checkout process. Instead of being strict on mistakes, great checkouts let users get away with being, for lack of a better word, lazy.

Below are three examples of “forgiving design” in the checkout flow: 1) adding gift cards and discounts, 2) disabling the “Submit” button, and 3) inputting phone numbers.

In the first example, all three brands have gift cards and discounts — well-established tools for closing sales online. But typically, it’s not always clear where to input the codes or redeem the cards.

According to Kevin Clark:

At Shopify, a significant engineering effort allowed users to paste in a gift card or discount code into the same field and the system sorts it out automatically. It’s impossible to make a mistake.

Second, sometimes shops will disable or “gray out” the submit/continue button until a user completes all required fields.

At Shopify, ThinkGeek, and REI, the submit/continue button is always enabled, even with missing information. Why? For three reasons:

Warby Parker does a great job in turning what would usually be an annoyance into a chance to cleverly express some brand personality.

The ThinkGeek checkout page maintains an active “Go to checkout” blue button even when fields are empty.

The “Continue” blue button is active on the empty REI checkout page.

All Shopify stores keep the blue “Continue to shipping method” button active at all times.

Currently on my website users are required to input their phone number in a very specific format (555–555–5555). If you forget the dashes it breaks. Does anyone have a good suggestions for how to be more flexible with allowing users to input in any way they choose, but still allowing the system to validate if it is a real phone number. How are phone extensions handled?

Unforgiving design requires this specific format (i.e., number of characters, dashes vs. periods, spaces). Forgiving design allows users to input it how they want and let the system figure out what the number is.

By allowing for maximum flexibility in typing a phone number, the user is less likely to “make mistakes.”

The best approach for user experience is to let the user type in the phone number using the format they are most comfortable with. Don’t break it into separate fields, don’t force a mask, let it be typed freeform. Then, after the user has finished entering the field (by leaving the field for submitting the data), format the number into a standard format for your purposes.

The reason this approach is better for the user experience is that it allows the user’s mental model to remain unchanged and allows them to say, “Don’t Make Me Think.” Masking and separate fields force a mental model of phone numbers onto users and requires more thinking.

Similar to the gift cards example, phone numbers should be accepted in any format so that shoppers can proceed “without thinking” or wondering if they were correct.

Forgiving design allows you to reduce the number of fields in your checkout flow, thus helping to eliminate the complaint that 1 in 4 shoppers voiced in Baymard’s checkout usability study (too long / complicated checkout process)

Finally, the three ecommerce experts each mentioned and cautioned against three simple errors they’ve encountered when designing checkouts:

Mistake #1: Don’t include an order review. Put yourself in the shoes of a customer who tediously fills out their information only to find themselves doubting they ordered the right item or quantity. Not seeing a chance to review their order before purchase will lead them to bail and start over, or worse, give up. REI keeps the shopper informed throughout the entire checkout process with a floating “Order Summary” box and a clear opportunity to review before placing the order.

In addition to displaying the order summary on the right perpetually throughout the checkout process, REI incorporates a final review alongside placing the order.

Mistake #2: Unhelpful error messages. It’s easy for a customer to enter information incorrectly in the checkout forms. Rather than just displaying “Invalid” or similar unspecific copy, use adaptive error messaging. ThinkGeek’s error messages update live from “This field is required.” to “Please enter a valid [blank]” to show the customer where and why the error is occuring.

ThinkGeek adapts its error messages to indicate more specific instructions.

Mistake #3: Not mobile-friendly. If you’re selling online, this is a no-brainer. Please. If you have an online checkout, don’t put your customers through the pain of zooming in and out, panning around, and squinting at an unresponive checkout.

Checkouts are a part of every ecommerce experience. As the final step before a product is purchased, you don’t want anything to go wrong. I was glad to hear from Matt, Kevin, and Catherine about the five principles they follow to design their customers’ online shopping path:

Add a comment

What is your view?

Send

Related posts:

The Real Reason People Turn Into Entrepreneurs

Some percentage may turn into entrepreneurs because their daddy’s have super stores and they end up taking the business over and making it better. Others may have that gene that Gary Vaynerchuk talks…

How Showing Your Ads At The Right Time Can Double Your Site Visits

Anarock Technology solutions offer the analysis of the best time to run your digital ads combining data from all online platforms, helping you understand what's the best time to run your ad. Data from our platform shows customers are most active from Monday to Friday, 11 AM - 5 PM, then activity going up again from 8 PM - 11 PM.

Fempowerment.

We keep a keen eye on the depiction of gender in communications and our mainstream media — keen because it’s important that men and women are depicted in a positive, non-stereotypical manner. After…