KEY TAKEAWAYS

• The length of checkout in steps has less of an impact on overall checkout performance compared to the total number of form fields users must contend with
• The average checkout flow today is 5.2 steps long and has 11.8 form fields
• But getting down to 8 total form fields is possible for many sites
• In this article we’ll optimize a 16-field checkout to become just 8 fields long.

In our latest checkout usability study we’ve found that the average checkout contains 11.8 form fields.

Yet our checkout usability testing also reveals that most sites can achieve a 20–60% reduction in the number of form fields displayed by default.

In this article we’ll therefore show you how a checkout flow can be optimized to just 8 form fields.

At the same time, we’ve documented that 18% of users have abandoned orders due to a “too long / complicated checkout process”.

We’ve seen this in our qualitative large-scale checkout usability testing as well: displaying a large number of form fields intimidates users, and causes needless checkout abandonments.

In this article we’ll therefore cover some of the research findings from our large-scale checkout usability study that point to how to optimize a checkout to the minimum number of form fields necessary.

The article is divided into the following sections:

1. How Many Checkout Steps the Average Checkout Has
2. Why Form Fields Matter More Than Steps
3. 5 Specific Ways to Reduce the Number of Form Fields
4. Checkout Optimization: Getting Down to 8 Form Fields

The Average Checkout Length (In Steps)

We often get questions from audit clients about what the optimal number of checkout steps is when trying to maximize the UX.

To help answer this question let’s set aside performance for the moment and just look at the number of checkout steps.

Our benchmark reveals that the average checkout flow for a new user is 5.2 steps long — counting from the shopping cart step to the order review step (both included).

This is roughly the same as 2019, when the average checkout was 5.1 steps — and this has largely remained unchanged since we first started tracking the number of checkout steps at large retailers back in 2012.

If we look closer at the actual step distribution, it’s interesting to note that there continue to be almost no sites with very short checkout flows (1–2 steps, including the cart step), while there’s been a slight increase in the number of 3-step checkouts.

In fact, it’s tempting to conclude that one-step checkouts are more or less dead among the top-80 grossing US and European e-commerce sites.

Furthermore, the ultra-long checkouts with 8 and 9 steps remain almost gone completely, while there’s been a decrease in the number of 6-step checkouts and an increase in the number of 7-step checkouts. The shift is mainly towards checkouts that are 3-to-5 steps in length, with a 5-step checkout flow being the most common.

Yet, despite general interest in how the number of checkout steps impacts the UX, our research indicates that, for the average user, this question is a red herring.

Checkout Length vs. Checkout Effort

While sounding slightly counterintuitive, what we consistently observe during end user testing and checkout benchmarking is that the number of steps isn’t the most important or impactful aspect of the user’s checkout experience.

Rather, it is what the user has to do at each of those steps that’s important. (Up to a certain point at least: at the rarely occurring 8 checkout steps and above usability does seem to suffer.)

In this gaze plot of the accumulated eye fixations of 32 test users browsing REI’s payment step (first image), note how the users spent a very large amount of their total attention on the “New REI membership” and “Current REI members” subscription sections, compared to the credit card fields below, despite the membership being completely irrelevant to the test users’ purchase.

Indeed, our research shows that, in general, the number of form fields in a checkout is much more important when it comes to the overall usability, rather than the number of steps.

Therefore when performing checkout optimization, the real question we should ask ourselves isn’t “How many steps do we have in our checkout?” but rather “How many form fields do we have in our checkout?”

In fact, we’ve found that most sites only need 8 form fields in total for a checkout flow — yet the average in 2021 was 11.8 form fields.

This unnecessarily increases the perceived and actual complexity of a checkout for the end user.

Thus, the focus for the purposes of reducing checkout abandonments should be much less on whether a checkout should be 3, 4, or 5 steps and more on how to reduce the number of visible form fields to the minimum required for users to complete the checkout optimization process.

(Note as well that not only does the number of form fields greatly impact usability, but so do a myriad of other factors — field input guidance, whether reasons are provided for why some fields are required, the error-recovery experience — which have little to do with the number of checkout steps.)

5 Ways to Minimize the Number of Form Fields Users Must Consider

In many checkout flows, it’s common to see some combination of the following 16 form fields (with the average being 11.8 fields for the top-80 grossing e-commerce sites):

In the following 5 sections we’ll show you our test findings for some of these fields and show you how a checkout flow like this can be optimized to reduce the total number of fields users must consider.

1) Have a Single “Name” Field (88% Don’t)

During all of our Checkout usability test studies, we’ve observed how users generally think of their name as a single entity.https://player.vimeo.com/video/635365035

At L.L. Bean, a user during testing struggled to accomplish the simplest of tasks — enter their name.

As a consequence, when there are “First Name” and “Last Name” fields, a large proportion of users often type out their full name in the “First Name” field.

During testing, 42% of test users typed their full name in the first name field at least once.

Given the simplicity of the task — “type your name” — the needless friction is quite significant.

On a mobile device, every unnecessary form field makes the form’s length seem even more unwieldy than on desktop, due to the limited screen size (seen here on L.L. Bean’s mobile site).

On mobile sites the issue is more severe, as typing in general is more difficult on mobile. When users notice their error they’ll have to reenter the field (potentially encountering a tap issue), select the text or otherwise delete it, and copy/paste or retype the text into the correct field.

A relatively minor interruption on desktop can swiftly become a more trying ordeal as users struggle with navigating the mobile form and keyboard.

At Etsy, a “Full name” field is provided, simplifying the task of “type your name” for users.

The solution is, however, relatively straightforward: acknowledge users’ tendency to think of their name as a single entity by implementing a single “Full Name” field.

When testing sites with a single “Full Name” field, only 4% of users briefly hesitated before typing in their full name, and no one had the kind of typing or interaction issues observed in the multiname fields approach.

A single “Full Name” field results in roughly a 6% reduction in the total number of form fields.

Yet 66% of sites have a “First Name” and a “Last Name” field, while another 20% of sites have additional fields (e.g., “Middle Name”, “Suffix”, etc.).

2) Hide “Address Line 2” (81% Don’t), “Company”, and “Coupon Code” Fields (48% Don’t)

“Address Line 2”, “Company”, and “Coupon Code” fields are typically optional to complete and only needed by a small subgroup of users.

Yet many sites will display all 3 fields as open form fields to all users.

Having provided the street number in “Address Line 1”, this user tabbed to “Address Line 2” (first image), and only then realized that both the street number and street name should be placed in the “Address Line 1” field (second image).

This causes unnecessary friction. Indeed, during testing 30% of users came to a stop when arriving at “Address Line 2” and furthermore some questioned if their initial “Address Line 1” input was correct.

While the “Company” field didn’t cause as much friction for users during testing — almost all eventually skipped past the field when they encountered it — displaying it as an open form field did cause users slight friction as they fixated on it to read the label, then decided they didn’t need to complete it and moved on.

Admittedly the field isn’t likely to be a hindrance to the average user, since no sites in our benchmark display it as an open form field. That said, if a site did show “Company” as an open form field, it will appear even more jarring to users, since they likely haven’t encountered it often on other sites.

“Normally I’d always search for a promotion code online. I actually do that quite often, maybe there’s free delivery or something.” Expanded “Coupon” fields in the cart step, as seen here at Crate & Barrel, led to some test users fixating on them.

However, the same can’t be said for “Coupon Code” fields.

Not only are they ubiquitous — 80% of sites in our benchmark have “Coupon Code” or other promotional fields — but they are more disruptive to users compared to both “Address Line 2” and “Company” fields.

Indeed, instead of moving past the field, a subgroup of users came to a full stop to consider it — and determine if they might be able to find a coupon code to fill in.

This led some users to leave the site entirely as they googled for, for example, “Crate & Barrel coupon code”.

Yet despite these issues, 48% of sites that have “Coupon Code” fields display them as open form fields.

At REI, after filling out the “Address Line 1” field a user tabbed through the “+ Add Address line 2” and “+ Add a company name” links. The user was clearly aware that they were there — as evidenced by the eye-tracking gaze plot data that show the user staring at the links — but the typing flow wasn’t interrupted.

Adidas offers users the ability to input a promo code in the cart but collapses the field to decrease the emphasis.

To reduce the impact of these fields on users — the vast majority of whom won’t need to fill them anyway — hide them behind a link.

Our testing shows that users are much less impacted by fields when they’re hidden behind a link, as there’s no open form field to fixate on.

Moreover, in testing, those users who did need to fill out these fields always found them. A user who needs to input a “Company” name is likely used to doing this at many other sites, and a user who has a coupon code will be searching for where to input it during checkout to ensure they get their discount.

Collapsing “Address Line 2”, “Company”, and “Coupon Code” fields behind links results in roughly a 18% reduction in the total number of open form fields.

3) Use Zip/Postal Code Autodetection (30% Don’t)

Users often stumble when trying to accurately type their city name, and noticeably slow down in their checkout progression when selecting their state from a drop-down, as seen here at Walgreens.

During testing we often observed users misspelling city names, leading to validation errors when they tried to progress in the checkout.

Additionally, some users struggle with long drop-downs, where they must locate their state, region, or county in a list.

All of our mobile usability research has shown that typing issues and form filling in general is more difficult than on desktop sites, which can make filling out the “City” field and selecting a state an arduous process, as seen here at Williams-Sonoma.

Both of these issues are worse on mobile due to the difficulties inherent in mobile typing and form filling.

As soon as the 5th digit is typed into the zip code field (first image), Walmart’s autodetection shows the matching city and state (second image).

To vastly reduce the complexity of this set of fields, we can instead rely on the zip code field to supply both the user’s city and state — although users should be allowed to override the input, just in case the autodetection fails.

Removing another two fields that users can mostly safely skip past results in roughly a 13% reduction in the total number of open form fields.

Yet 30% of sites don’t use zip code autodetection to simplify the address form.

4) Hide “Billing Address” Fields (14% Don’t)

At Overstock the default is to use different shipping and billing addresses, resulting in needlessly many form fields being presented on the page.

At 12% of e-commerce sites the default is to use different shipping and billing addresses.

This results in the majority of the sites’ users, who only have a home address, being needlessly intimidated by the high number of form fields presented on the page.

When both billing and shipping addresses are displayed, most users are effectively shown an entirely redundant set of fields.

At Adidas, the “Billing Address” fields are hidden by default. The subgroup of users who need a separate billing address simply have to uncheck the checkbox to be provided with those fields.

At Argos users are asked to work slightly harder than at Adidas, as they must “Confirm Billing Details” before moving forward in the checkout. Still, this is vastly better than simply displaying all the “Billing Address” fields by default, and may make sense for sites that have a higher number of users who need to input a separate billing address.

The solution is to set the “Billing Address = Shipping Address” by default.

Furthermore, the implementation of this is important: when the “Billing Address is the same as Shipping” (or vice versa) checkbox is ticked, the billing address fields should be hidden altogether (rather than autofilled).

An exception to this are sites where the order logs show there’s a very large amount of customers who actually use different addresses. This is often the case at gifting and business-to-business sites.

Making “Billing = Shipping” and hiding the “Billing Address” fields results in a 37% reduction in the number of fields displayed. (Note that a full set of “Billing Address” fields wasn’t accounted for in the original 16 form fields.)

5) Have Delayed Account Creation (18% Don’t)

At H&M, users at the account-selection step are offered a chance to create an account. Note that many guest users would select this option, rather than the guest option below, given that it appears above the guest option and the microcopy is “New Customer”, which many guest users will undoubtedly be. The resulting form is long and intimidating, which will dissuade many users from completing account creation — and may also lead to some abandoning the checkout in the process.

Requiring users to create an account to check out, or even nudging them to (e.g., by making account creation prominent on the Account Selection Step), will result in at least some users being forced to consider fields like “Create a Password” and “Birthdate” — which may cause some to abandon due to the intimidating nature of the checkout process.

Indeed, while having users create accounts can be great for both the site and the user, as it can result in more loyal customers for sites and faster checkouts in the future for users, it distracts from the main goal of the checkout process: having users successfully place their order.

At Musician’s Friend, users are informed that they will have an option to create an account at the account-selection step (first image). After completing checkout, at the confirmation step they only have to enter their password to create their account (second image). (Note, however, that guest checkout should be the most prominent option at the account-selection step, rather than the sign in option for users with accounts.)

Instead, during testing we observed that saving the option to create an account until the Confirmation Step is a better-performing strategy.

At the confirmation step, since a user has already entered in the necessary account info during the checkout, account creation can be reduced to just one or two password fields.

Note: when saving account creation for the confirmation step, ensure that users are informed at the account-selection step that they’ll have an option to create an account at the end of the checkout.

This is important as users who suspect they will be repeat customers will often want an account, and they may waste time trying to figure out how to create an account if there’s no option at the account-selection step to create one, and there’s no notice that they’ll be able to create one after the checkout has been completed.

Despite users’ perceived gain in efficiency by saving account creation for the confirmation step, 18% of sites fail to do so.

Removing the “Password” and “Repeat Password” fields results in roughly a 13% reduction in the total number of open form fields.

Checkout Optimization: Getting Down to 8 Form Fields

When it comes to checkout optimization and UX, it matters much more to end users how many form fields they’re required to consider — rather than the total number of checkout steps they must go through.

If we reconsider our list of the 16 common form fields again, we see how, using the tips above, we have optimized the checkout flow and are now down to 8 form fields:

Crutchfield’s mobile site exemplifies how few form fields are really needed for most checkouts. The optimized checkout process helps ensure users will proceed efficiently through and be able to place their order with minimal friction.

Despite the UX performance and conversion rate gains from optimizing the total number of form fields users must contend with, our benchmarking reveals that the vast majority of sites in fail to take advantage of ways to minimize the number of fields displayed:

1. Have a Single “Name” Field (88% Don’t)
2. Hide “Address Line 2” (81% Don’t), “Company”, and “Coupon Code” (48% Don’t) Fields
3. Use Zip/Postal Code Autodetection (30% Don’t)
4. Hide “Billing Address” Fields (14% Don’t)
5. Have Delayed Account Creation (18% Don’t)

As a result, the overall UX performance of the checkout suffers — increasing the likelihood that users will abandon due to the perceived difficulty of completing the checkout process.

The post Checkout Optimization: 5 Ways to Minimize Form Fields in Checkout appeared first on Cubex / Web and application design and developments Agency from Amsterdam, the Netherlands.

Presenting cross-sells in the cart, or right after a product has been added to the cart, can enhance and streamline the user’s shopping experience.

Recommending products at this point in the purchase process can also increase the average order value by bringing additional items of interest to users’ attention.

However, the usefulness of cross-sells is directly linked to their relevance to the user’s cart contents.

Unsurprisingly, our large-scale checkout usability testing consistently shows that users are quick to dismiss recommended products and offers that are not obviously related or applicable to the product(s) they are purchasing.

Yet, 52% of desktop sites we benchmarked present cross-sells in the cart, or in the “Added to Cart” confirmation, that are either completely irrelevant or based only on what other customers bought.

In this article we’ll discuss the test findings from our large-scale usability research studies on how irrelevant product recommendations and offers in the cart damage user engagement with cross-selling sitewide.

Moreover, we’ll also discuss 6 ways e-commerce sites can ensure cross-selling in the cart is meaningful and relevant for users:

1. Avoid listing a fixed number of product suggestions
2. Be cautious about listing alternative products
3. Provide clear labels that define the context to the user
4. Prioritize products of the same theme
5. Give precedence to compatibility-dependent items
6. Consider the user’s context when promoting special offers

Irrelevant Cross-Sells Erode Users’ Confidence Sitewide

“These kind of things NEVER get me to buy anything extra. And not at all on sites like this, where I’m buying something practical, where something in my home has broken. It’s not like I’m thinking, ‘Wait, let me also get a new toilet’.” A user at Home Depot was annoyed by the suggested items after adding a bath faucet to his cart. A more appropriate list of suggested items would have been the fittings, connections, and sealant for a successful installation, none of which were recommended.

“No, not when I can see that the other products are not compatible, but otherwise I probably would.” A user at Tesco looking for a camera bag to supplement the camera she was purchasing lost all confidence that any of the bags would fit her camera upon seeing other items suggested that were not related at all to the item in her cart.

Users have come to expect and appreciate a highly personalized online shopping experience that is tailored to their preferences and needs at every step.

Therefore, recommending highly relevant items such as compatible accessories necessary to install or use the item(s) just added to the cart is considered by users to be “good service” instead of an attempt to sell them more products.

On the other hand, product recommendations and promotional offers that don’t have a clear relationship to the cart contents are typically seen as distracting or annoying, or simply ignored by users.

Indeed, suggesting products that are not obviously related to the cart contents, or to the item just added to the cart, can erode a user’s confidence in the site, and all of its recommendations — even relevant ones.

During our large-scale usability research studies, even 1 questionable recommendation was observed to cause users to lose faith in all of the product suggestions and subsequently ignore them all.

“I think this site is super annoying; there’s way too much info. Because I buy a speaker, I might also be interested in buying a USB stick? It’s difficult to see the connection.” A user at Overstock expressed irritation at the many cross-sell and promotional offers in the cart, including a store credit card, a “ClubO” membership, a sidebar of “Customers also bought” product suggestions containing unrelated items, 2 donation options, a free shipping offer, and a second “ClubO” offer.

Lowe’s includes promotions where the relevance is highly doubtful, given the cart’s order size. For example, for most users, a promotion for 18 months of financing will be mainly noise when they’re about to place a $6 order.

Similarly, promotional offers such as discounts, credit cards, and financing options that, based on the cart contents or the item just added to the cart, would be illogical for users to opt in to waste users’ time and damage their overall perception of the site.

Once a user loses faith in the relevancy of the offers in the cart, they become just an unwanted distraction or clutter.

At Crate & Barrel irrelevant product recommendations (first image) and a credit card offer (second image) are presented in the primary cart area of the mobile site, creating unnecessary clutter, as well as undermining users’ primary goal in the cart to review the items in their order and acquire an estimated total.

On mobile, the smaller viewport was observed during testing to make it challenging for users to get an adequate overview of their cart, particularly if they had to contend with noise from product suggestions and promotional offers that were not relevant or applicable to their cart contents.

To avoid a cart being perceived as overwhelming or “pushy”, and to avoid distracting users from completing their checkout, both the relevance and placement of cross-sells and promotions presented in the cart must be carefully considered.

6 Ways to Improve the Relevance of Cross-Sells in the Cart

At Argos, the “Added to Cart” overlay recommends the batteries needed to operate the wireless mouse just added to the cart. An option to browse a related category — PC keyboards — is also presented.

Having a high relevance in the product suggestions and offers displayed in the cart or “Added to Cart” confirmation is paramount, as, at this point in the shopping process, the user isn’t in nearly the same degree of “product exploration” mindset as they are when considering product suggestions on a product details page.

On many sites, the behavioral data from other users is often the predominant or only factor considered for cross-sell relevance — an example being “Customers Also Purchased” or “Customers Who Viewed This Also Viewed This”.

While behavioral data can be a useful input for suggestion relevance, it’s clear from our usability research studies that it shouldn’t be the only factor, as there is an increased likelihood that at least some product suggestions will be perceived as irrelevant, and users largely ignored cross-sells they deemed irrelevant.

Using a combination of user-specific behavioral data (e.g., the specific user’s history, session history, purchase history, current items in cart, profile information) and general behavioral data (e.g., general shopper behavior, category relationships) would improve the level of product suggestion relevance.

Fortunately, most sites and third-party product recommendation engines get this right.

However, during our large-scale usability research studies, 6 additional implementation details proved vital for ensuring the relevance of product recommendations and promotions.

1) Avoid Listing a Fixed Amount of Product Suggestions

An “Added to Cart” overlay confirming an HDMI cable’s addition to the cart at Crutchfield displays a dynamic number of compatibility-dependent product recommendations, instead of a fixed number, which would likely include suggestions for products of lower relevance.

Most product recommendation sections always suggest the same number of items and are thus more likely to include irrelevant or only partially relevant items.

However, if there is only 1 truly suitable product that will complement a purchase, it will get more attention if it stands by itself — due to a better signal to noise ratio — rather than if it’s offered alongside 4 products of doubtful relevance, just because “5 suggestions” is the default defined in the suggestion logic.

The inclusion of 4 additional low-to-medium relevance product suggestions will cause a lowered confidence in the site’s ability to make product suggestions in general.

Therefore, the first step of improving the relevance of product suggestions is moving away from always suggesting a fixed number of items, and instead displaying a dynamic number of suggestions, depending mainly on how many “high relevance” items the logic can identify.

Recommending only the most relevant items boosts all product suggestions’ perceived credibility while simultaneously increasing users’ awareness of available compatible items.

2) Be Cautious about Listing Alternative Products

At IKEA, the “You Might Also Like” section presented at the bottom of the cart contains only other similarly priced kitchen tools that could conceivably be of interest to a user purchasing the measuring jug.

Users shouldn’t second-guess themselves while they are in the process of checking out.

Now, suggesting alternatives to a product can be helpful while a user is still shopping — for example, via a list of alternative product suggestions on the product details page.

However, suggesting alternative products is less helpful as users are about to check out.

At this point in the purchase process, suggesting alternative products may do more harm than good if a user ready to check out instead pursues an alternative product shown to them — potentially to never return to the checkout process.

Therefore, supplementary products that complement the item(s) in the cart should generally take precedence over alternative product suggestions.

Note though that there may be site-specific contexts that warrant alternative product suggestions, like product upgrades or newer versions of the same product.

3) Provide Clear Labels That Define the Context to the User

The “Inspired By Your Picks” label for cross-sells presented in the cart at Zalando helps users understand why the site is suggesting these particular items.

While not increasing the accuracy of the suggestions, clearly labeling the recommended products in the cart will increase the accuracy of the user’s interpretation of the suggestions.

If a user understands that a product is being suggested because of their previous browsing experience or purchase patterns, or based on what others who purchased the same item also bought, they are less likely to be dismissive when shown items that appear irrelevant to their current order.

Therefore, consider using labels like “Inspired by Your Browsing History” for recommendations based on previously viewed items, “Frequently Bought Together” for supplementary cross-sells based on other users’ purchasing patterns, “Complete the Look” for coordinating apparel, or “Other Products in this Collection” for other items of the same collection or series.

4) Prioritize Products of the Same Use Case or Theme

Product suggestions in the “Customers Who Bought This Also Shopped” section of the “Added to Cart” overlay at Macy’s are tailored to the item just added to the cart (other ornaments from the same brand’s collection).

One factor that can be useful to ensure high relevance in cross-sell suggestions is the “use case”.

To determine use cases sites can use existing product themes or styles — for example, “Back to School”, “Christmas Decor”, “Outdoor Entertaining”, “Country Kitchen”, or “Winter Essentials”.

Giving priority to products of the same theme can prevent seemingly unrelated items from being displayed.

If used as a predominant factor for relevance, consider dedicating the entire cross-sell section to use case–type products and labeling it appropriately — for example, for a winter jacket, having a cross-sell section for “More Winter Essentials”, so it’s clear to users that the suggestions are thematic.

5) Give Precedence to Compatibility-Dependent Items

B&H Photo presents “Essential Accessories” in the “Added to Cart” overlay for a Bluetooth wireless speaker. Suggesting 100% compatible products helps ensure users can trust the site’s recommendations.

Suggestions for products that have a direct compatibility relationship, such as accessories or tools typically needed to make the product in the cart function as intended, will often be considered by users to be most relevant.

These can function as a helpful sales associate would, by, for example, suggesting a customer purchase a necessary cable along with their TV — customers (and users) will benefit from having everything they need to begin using their new product.

The most obvious examples include suggesting compatible batteries for a product that comes without them, installation parts and hardware, and accessories that are directly related.

For example, a toy that requires batteries to operate, a mobile phone with specific dimensions for a protective case, or a camera needing a particular memory card type are all examples of compatibility-dependent product suggestions.

Therefore, compatibility-dependent items should take precedence over other types of product suggestions, and compatibility should therefore be accounted for in the recommendation logic.

6) Consider the User’s Context When Promoting Special Offers

A promotional offer for the branded credit card is presented in the cart at Wayfair when it contains a higher-priced item such as a floor lamp (first image), yet not when it contains a lower-priced item such as a light bulb (second image).

Lastly, users are easily irritated by illogical and inapplicable promotional offers in the cart, leading to frustration and contributing to “banner blindness”.

Consider, for example, how likely are users to spend $60 extra to reach a free shipping threshold on a product that costs $4.99 and only $3 to ship? Or, who would apply for a credit card in order to save 10% on a $5 order?

Therefore, introduce low-level logic for when to present certain promotions like credit card offers and free shipping tiers — for example, by showing the offers only after users reach a meaningful order level.

Avoid Turning Cross-Sells into Another Instance of “Banner Blindness”

Best Buy recommends a variety of relevant accessories in the cart that others have purchased along with Apple Airpods Pro, including alternative cases and a cleaning kit.

Cross-selling in the cart is an ideal opportunity for e-commerce sites to streamline the shopping experience for users and boost sales at the same time.

However, our usability research consistently confirms that users are quickly turned off by irrelevant recommendations and offers in the cart — often ignoring cross-sells sitewide when even 1 questionable recommendation is presented.

On the other hand, recommendations and offers that are highly relevant to the items in the cart were observed to encourage user engagement, which can lead to increased order totals and an overall positive impression of the brand.

Therefore, it’s important to ensure the relevance of cross-sells by not just looking at behavioral data and defaulting to generic offers, but also by

1. adjusting the number of displayed products based on their relevance score,
2. giving precedence to supplementary items that complement items in the cart,
3. using clear labels to provide context around why the items are considered relevant,
4. prioritizing product recommendations of the same theme,
5. accounting for product compatibility in the recommendation logic, and
6. matching promotions to the user’s context.

By presenting only suitable recommendations and applicable offers in the cart, sites can provide the highly personalized shopping experience users expect while simultaneously increasing the average order value — a “win-win” for both users and sites.

The post 6 Ways to Improve the Relevance of Cross-Sells in the Cart (52% of Desktop Sites Don’t Do Enough) appeared first on Cubex / Web and application design and developments Agency from Amsterdam, the Netherlands.

This article is copied from: https://baymard.com/blog/use-buttons-for-size-selection

Size is one of the most common variations for users to select before purchasing a wide variety of different product types, from apparel to beauty to hardware; all of the sites in our e-commerce UX benchmark of the top-93 e-commerce sites have different size options for at least some of their products.

During our large-scale UX testing, we observed that, when presented as a drop-down menu, users during testing were prone to overlook the size selector entirely.

Additionally, when they did activate the menu, they were often surprised or disappointed by the sizes available.

Despite the issues demonstrated by drop-down size selectors, 28% of desktop benchmark sites that sell many products with size variations continue to use them.

In practice, some users who overlook the size selector risk triggering an avoidable error message.

Other users must check to see if their size is available for each variation under consideration — a potentially tedious task that often leads to users simply giving up.

In this article we’ll discuss the test findings from our mobile and desktop UX research related to the display of size selectors on product pages. In particular, we’ll cover:

• The risks we observed during testing when sizes were presented within a drop-down menu
• The benefits of displaying sizes as “buttons” instead of within a drop-down
• How to display size “buttons” when there are an abundance of size options available — even on a small mobile screen

Drop-Down Menus Hide Available Size Options and Require Interaction to Browse

“These are cute!” This user shopping on Adidas found a pair of shoes she liked (first image) but couldn’t see that her size was out of stock until she interacted with the size drop-down menu (second image). “Oh, they don’t have my size.” Hiding sizes within a menu makes it harder to tell what sizes are in stock, which can set users up for disappointment.

“Oh, so there’s only extra-large and 2 extra-large…I would have to back out…that was silly of me not to look before…I didn’t consider that they wouldn’t have medium.” This user on Adidas was disappointed to discover that a hoodie he was interested in wasn’t available in his size. When size variations are hidden within a menu, users are not able to immediately discern which sizes are available.

When size options are located within a drop-down menu, they are essentially hidden by default until users interact with them.

During Baymard’s large-scale usability testing across desktop and mobile, we repeatedly observed users spending considerable time and effort exploring a product, only to be disappointed when they opened the size drop-down selector to discover it was out of stock in their preferred size — and that their time had been wasted.

In fact, we’ve observed similar issues not only for color and size selectors on the product details page, but also for drop-down menus within Checkout and filtering product lists.

In effect, users are less able to find, review, and understand their choices, increasing the likelihood of wasted effort and error.

This user on Adidas neglected to select a size from the drop-down menu before tapping the “Add to Bag” button, resulting in an error message. Users are likely to overlook subtle drop-down menus.

A user at REI received an error message after clicking “Add to Cart” before selecting a size for a pair of running shoes. From our eye-tracking study, we observed users were more likely to overlook size selectors presented as drop-down menus.

What’s more, while the majority of users during both desktop and mobile testing eventually found size variations when presented within a drop-down menu, a significant subgroup overlooked the size drop-down menu altogether — even when placed near or within the “Buy” section, where it should have been easily visible.

In most cases, these users will trigger an avoidable error message, which presents a speed bump in their buying process. After receiving the error message, they typically then notice the size drop-down and make a selection, recovering relatively quickly.

During our eye-tracking study, we observed that several users at AllPosters never even looked at the size drop-down, instead going with whatever size was the default.

However, some sites have a default preselected size for products — for example, a 39 x 27 inch poster size selected by default — which enables users to add a product to the cart without reviewing and selecting the size option at all on the product page.

While some users may catch themselves before they complete the purchase, there’s a risk that some won’t notice this fact — completing checkout and purchasing a product that was not in their preferred size.

Naturally, this experience can have long-lasting effects, and result in users negatively perceiving a site for some time to come, if not permanently.

(Of course, in practice, this kind of purchasing mistake is more likely for product types where users aren’t necessarily aware of or thinking about sizes when they arrive on the product page — for example, users may not immediately realize that different sizes are available for products like posters or backpacks, but are generally aware they will have to select a size for products like footwear and apparel.)https://player.vimeo.com/video/451168137

Because of the size selector drop-down, this user on Adidas was forced to select a color variation, scroll down to find and open the size selector, review the sizes within the drop-down menu, then scroll back up to select another color variation in order to review the sizes available for each color. This cumbersome interaction slowed her product-exploration process, and, after significant effort, she eventually abandoned the site after growing frustrated with the apparent lack of available sizes.

On mobile, this increased need for interaction becomes even more tedious, especially when products come in multiple color or style variations in addition to multiple sizes.

Due to the size of the mobile viewport, product information is squeezed into a narrower and longer-scrolling format, forcing users to scroll back-and-forth between the color selector and size selector in order to determine the availability of each combination.

Meanwhile, on desktop, the more expansive viewport typically allows even abundant color, size, and other variations to be visible within a single screen, making the process for selecting a combination of product options less labor intensive.

When there are more than a handful of color variations, some users are likely to give up on finding their preferred color and size combination, deeming it too time-consuming.

Exposed “Buttons” Allow Users to Immediately See Size Options

“It shows me straightaway what sizes are available. I don’t have to click in to see what sizes are available.” After experiencing disappointment on other test sites when his desired size turned out to be unavailable, this user on Under Armour expressed his appreciation that the sizes were exposed directly on the product page. When sizes are presented as individual buttons, users can easily tell at a glance which sizes are available — in this case, only 2 out of the 5.

“It seems like the size is available, yes.” Another user on Under Armour easily determined that this hoodie was available in her desired size. The exposed size buttons make it simple to review available sizes without having to interact with a drop-down selector.

Instead of using a drop-down with the size options hidden by default, exposing the size options by using button-like selectors helps to ensure that these crucial product variations are easily seen by users.

With each button representing a size, users are better able to see at a glance all of the available options, and the amount of effort and interaction required to learn this basic information is greatly diminished.

As one user noted, “I think the least amount of clicks I have to do, the better”.

“This just has a ring around. I don’t know if that means it is selected?” H&M exposes the size selectors, but the indication that a size has been selected is overly subtle — once clicked, a small ring encircles the “M” selector. Size selectors should make it obvious to users which size is currently selected.

On Brooklinen, high contrast allows users to easily tell the difference between selected (“Full”), unselected (“Queen”, “Cali King”) and unavailable (“King”) size options.

Of course, once exposed, the selectors should be designed so that it’s clear which size is currently selected.

During testing, we observed some designs were much too subtle in indicating which size had been selected.

Selectors that are too inconspicuous, and selection indications that are too subdued, will slow users down, as they have to first determine if the system has recognized their input before they can move on to adding it to their cart.

Additionally, on mobile, size buttons that are not adequately sized and spaced can also lead to frustrating hit area issues, making it more difficult for users to accurately target the correct size. As with other mobile elements, ensuring size selectors are appropriately designed for touch interaction is vital.

“Buttons” Are a Better Experience, Even When There Are an Abundance of Choices

Products that come in a wide variety of sizes present a special challenge when providing individual buttons for each size variation, as they can easily take up a large proportion of the viewport — especially on mobile.

L.L. Bean effectively exposes 13 different shoe sizes on the product page without overly distracting users. Additionally, widths are also exposed, letting users easily see how the selection of one variation type changes the availability of the other.

On desktop, the more expansive screen real estate can typically accommodate a large array of size selectors, assuming they’re not overly large.

Old Navy nests sizes by type ( “Regular/Tall/Petite”) and inseam (“Short/Regular/Long”). This allows users to compare size availability while also conserving screen real estate — especially compared to listing every single available size directly on the page.

When there are a wide variety of size options, consider grouping and nesting sizes by type (e.g., “Regular” versus “Plus” sizes, “Standard” versus “Long” inseam), which allows individual sizes within each type to be available directly on the page without the need to activate and scroll through a drop-down.

This implementation is particularly vital to limit the amount of scrolling on narrow mobile screens.

Note however that a “nested size selectors” design was not tested, and thus sites should proceed cautiously if implementing.

Everlane likewise nests sizes by type (“Tall”, “Regular”, “Ankle”) and further minimizes the vertical height required to display sizes by presenting them in a horizontal swipeable list. Notice how the rightmost size button is cut off by the edge of the viewport, giving a visual cue for users to swipe for additional sizes.

Additionally, a horizontal swipeable list can be used on mobile to further reduce the screen real estate taken up by the size selector, taking advantage of users’ familiarity with this design pattern for other mobile features.

Size “Buttons” Have Become a Standard Web Convention

On a Sephora product page for shaving cream, 80% of users clicked the different size selectors and noted how the different sizes were reflected in the product price.

For products that come in different sizes, previewing which ones are in stock is an essential prerequisite for making the decision to purchase.

Drop-down menus, broadly speaking, are oftentimes a relic of early web design that predates modern users’ familiarity and comfort with exposed selections like color swatches.

Without the clarity of modern “button” size selectors, users may overlook their ideal color and size combination, abandoning their purchase without realizing the possibilities hidden within variations drop-downs.

On the other hand, the effortless information provided by size “buttons” presents a clear usability improvement over presenting size options within drop-down menus — which helps to account for size “buttons’” increasing popularity: 71% of current desktop benchmark sites appropriately use size “buttons”, up from 63% in 2017.

It’s therefore crucial to meet users’ expectations with regards to how size selectors will be presented on the product page — or risk users leaving, despite there being a perfect size available in the variation they desire.

(Tip: see 239 examples of product pages showing how many of our benchmark sites use size “buttons”.)

This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” product page user experience.

The post Always Use “Buttons” for Size Selection (28% of Desktop Sites Don’t) appeared first on Cubex / Web and application design and developments Agency from Amsterdam, the Netherlands.

KEY TAKEAWAYS

• Our UX benchmark of 73 large e-commerce websites shows that “Category Navigation” performs decent overall
• However, there’s significant room for improvements — particularly within the topic of “Category Taxonomy”
• This article will cover 13 commonly observed e-commerce navigation UX issues, and show the “navigation best practices” we’ve verified to perform the best with end-users.

Designing a user-friendly e-commerce category navigation requires solid information architecture, systematic labeling and hierarchy, and curated intermediary category pages — and that’s just the beginning.

Our Homepage & Category e-commerce benchmark contains 10,900+ Homepage and Category UX elements that have been manually reviewed and scored by Baymard’s team of UX researchers, with an additional 3,100 best practice and worst practice examples from the 73+ top-grossing e-commerce sites in the US and Europe (performance verified).

In this article, we’ll show you a portion of our large-scale Baymard Premium UX research dataset to provide you with:

• the current state of “E-Commerce Category Navigation UX”,
• outline 13 common navigation UX pitfalls applicable to most e-commerce sites, and
• show you the 13 navigation best practices we’ve verified to perform the best with end-users in our large-scale usability testing.

The Current State of E-Commerce Navigation UX

For this analysis we’ve summarized the 6,100+ “Homepage & Category” usability scores across 3 of the 4 “Homepage & Category” topics and plotted the 73 benchmarked sites across these in the scatterplot above. (See our separate article on “Homepage UX”.) Each dot, therefore, represents the summarized UX score of one site across 5–17 guidelines within that respective topic of the homepage and category navigational experience. The top row is the total Desktop Web “Category Navigation” UX performance.

The “Category Navigation” UX performance for the average top-grossing US and European e-commerce site is decent, made up of 14% good, 38% decent, and 34% mediocre performances. There are no sites that perform either exceptionally well and few that perform exceptionally poorly here, making for a much more narrow spread compared to other themes. This also means that there are the fewest examples on either end of either massive performance issues or “State of the Art” implementations.

Despite the generally decent performance of sites, this benchmark dataset shows that there’s significant need for improvements when looking within the topics of “Category Taxonomy”, “Main Navigation”, and “Intermediary Category Pages”. The issues identified in these 3 topics cause problems for many sites, and include some “missed opportunities” for the e-commerce industry as a whole.

Below we’ll discuss the UX performance and show 13 general navigation pitfalls, each with best practice examples from our large-scale testing. The article is divided into these 3 themes:

• Category Taxonomy
• Main Navigation
• Intermediary Category Pages

Note that this is an analysis of the average E-Commerce UX performance across 73 top-grossing US and European sites. When analyzing a specific site there are nearly always a handful of critical UX issues that are site specific. This is the case even when we conduct UX audits for Fortune 500 companies.

Category Taxonomy

When it comes to the “Category Taxonomy” the average e-commerce site runs into significant issues, with 50% of sites performing mediocre or poorly — reversing positive trends observed in 2018 when only 6% of benchmarked sites had an overall poorly performing category taxonomy.

Indeed, “Category Taxonomy” is by far the weakest of all of the “Homepage & Category” subareas.

Overcategorization remains the single most important category-based navigational issue for the average e-commerce site.

The repercussions of a poor category taxonomy can be even more devastating than immediate site abandonments — it may lead to permanent brand damage.

In particular, there are 5 UX issues e-commerce sites get wrong when it comes to “Category Taxonomy”.

The post E-Commerce Navigation UX and Common Pitfalls & Best Practices appeared first on Cubex / Web and application design and developments Agency from Amsterdam, the Netherlands.

Yet that isn’t to say that the mobile sites overall perform well for users. Testing also revealed both high-level issues users face, as well as more granular issues — all of which can, singly or in combination, lead to abandonment.

Indeed, during the 289 test user/site sessions we conducted for this study (think-aloud 1:1 moderated lab testing), the users encountered 2,597 mobile UX and usability issues — despite testing the mobile sites from leading online brands.

Our Mobile Benchmark Database contains 12,000+ mobile site elements that have been manually reviewed and scored by Baymard’s team of UX researchers (embedded below), with an additional 9,000+ best- and worst-practice examples from the top-grossing e-commerce sites in the US and Europe (performance verified).

In this article we’ll analyze this dataset to provide you with the current state of mobile UX, and outline 18 common mobile UX pitfalls and corresponding mobile e-commerce best practices.

The Current State of Mobile UX Design

For this analysis we’ve summarized the 12,000+ Mobile Usability Scores across 31 topics and plotted the 58 benchmarked mobile sites across these in the scatterplot above. Each dot, therefore, represents the summarized UX score of one site, across the guidelines within that respective topic of the mobile e-commerce experience.

The current mobile e-commerce UX performance is listed in the first row. The following rows are the UX performance breakdowns within 31 topics that constitute the overall mobile e-commerce performance.

The mobile e-commerce UX performance for the average top-grossing US and European e-commerce site is “mediocre”, with none of the 58 sites benchmarked having a “perfect” UX implementation and performance. This leaves nearly all sites in a tight cluster of 52% “mediocre” (or worse), and 48% “decent”.

That said, while there aren’t any standout performances, there are also very few “poor” or outright “broken” experiences.

In comparison, in most of the other e-commerce UX studies we’ve conducted at Baymard Institute the average UX performance also amounts to “mediocre”, but also tends to have a wider spread of variation and performance scores (see our overall E-Commerce UX benchmark).

The mobile UX benchmark shows that there’s ample room for improvements when looking within the specific topics of the mobile user experience — in particular the UX within Mobile Homepage, Mobile On-Site Search, Mobile Forms, and Mobile Sitewide Features & Elements.

These topics describe issues that many sites have, and also include some “missed opportunities” for the e-commerce industry as a whole.

Also, note that this is an analysis of the average performance across 58 top-grossing US and European e-commerce sites.

When analyzing a specific site there are nearly always a handful of critical UX issues, along with a larger collection of worthwhile improvements. This is the case even when we conduct UX audits for Fortune 500 companies.

In the following we’ll provide a more detailed walkthrough of the UX performance and competitive landscape within 4 topics of Mobile E-Commerce UX, along with “missed opportunities” to be extra alert to. As many issues identified on desktop sites tend to carry over to the mobile site as well, we will focus on issues observed in our research to be either unique or specific to the mobile experience, and point out additional platform agnostic areas of importance.

In particular, we’ll discuss 18 general mobile UX pitfalls, and corresponding best practices to be aware of for 4 of the 31 subtopics of Mobile UX:

• Mobile Homepage
• Mobile On-Site Search
• Mobile Forms
• Mobile Sitewide Features & Elements

These subtopics were chosen as they are the most interesting or the most suitable for discussion in an article.

(For a beginner’s introduction to UX, start with this UX design definition.)

Mobile Homepage

Benchmark UX PerformancesPOORMEDIOCREDECENTGOODPERFECT

Mobile Homepage

32 Guidelines71 Major E-Commerce SitesWHAT’S THIS?

Within Mobile Homepage, the average site performs between “mediocre” and “decent”.

Behind that average is a widespread distribution of performances, with 50% of sites performing either “mediocre” or “poorly”.

In particular, there are 2 issues sites get wrong when it comes to the Mobile Homepage.

1) 95% of Mobile Sites Place Ads in Primary Areas of the Mobile Homepage

“Did I click the right link? Oh, I did, sorry.” A user had just arrived at Walmart’s homepage but initially didn’t think he’d landed on Walmart’s site. The large internal promotion doesn’t help provide an overview of the site. Such ads are especially disorienting for users on mobile, where other sources of information scent are hidden (e.g., the main navigation).

Large ads on mobile will often cause minor-to-moderate interaction issues. Here on Macy’s, a user tried scrolling past an ad — which took up the entire space for main page content on the homepage when it first loaded (first image) — and accidentally swiped the carousel while scrolling (second image). Although this user quickly recovered, others had more trouble dismissing overlays (e.g., requiring multiple taps to close them) or even ended up offsite when, for example, attempting to back out of an “Install App” ad overlay.

The post Mobile UX Trends: The Current State of Mobile UX (18 Common Pitfalls & Best Practices) appeared first on Cubex / Web and application design and developments Agency from Amsterdam, the Netherlands.