Compact and Uncluttered The header is  the first stop for anyone using your site. It should announce who you are while offering easy navigation to the rest of the site. The fact that the header appears on every page makes it doubly important for you to get it right. Your header should offer as much […]

A link bar is an essential navigation tool that advertises your main product categories just below the header. It also helps with customers who may be too lazy to open the collapsible burger menu.     A bit of data Growth Rock saw a 5% increase with 93% statistical significance by adding a Link Bar. […]

One possible layout On desktop, opt for a header with 2 or 3 rows. Due to less restrictive space requirements, you should surround major icons like the search box and shopping cart with a whitespace so they stand out more prominently. There are various possible layouts, but below is a draft mockup of one of […]

They define the scope of your store One of the biggest issues I see when looking at stores (especially newer ones) is the lack of categories in the header. This is the main way for users to grasp the scope of your store. They scan your main categories and get an idea of what you’re […]

  Tagline A tagline helps users immediately understand the store is all about. It’s typically short, just a few words. You can often see it right below the logo, or in a row above the logo. While most people treat taglines as an afterthought, you need to take your time. A bad tagline can do […]

According to KPMG research, 51% of customers will trust your business more if they can easily contact you. This cannot be emphasised enough.     If you have a floating Live Chat button in the bottom of the page, then a simple “Help” menu item in the header is enough. If you don’t have that […]

How prominent should it be? In most cases, having the phone number in the burger menu and the footer is enough. However, depending on your store, if you want your users to just pick up the phone and call you, then that call to action can be made sticky (a bar at the top or […]

While most mobile menus are well designed, desktop menus are something else entirely.  Good and well-sized desktop menus exist but far too many are cluttered and require a lot of effort to make sense of even for people with perfect eyesight. That’s assuming they even bother to linger so they can squint at the screen. […]

15 seconds. That is the average amount of time a person spends on one website. This means that any website needs to be compact and easy to navigate so that the user can process the most important information within that window of time. Having a simple menu with fewer menu items is one sure way […]

Mega Menus work very well for ecommerce stores A mega menu is an excellent choice to improve your navigation on desktop. This is doubly so if you have a large site structure with lots of categories and sub-categories. Since navigation options are revealed on hover, mega menus have been shown to be much better in […]

Above the fold While above the fold is a slightly dated description it simply refers to the top half of the screen. This is the part of the site your users can see without scrolling. But random placement won’t cut it. The ideal location would be in the header or the main menu.     […]

Once you have your main product categories, what next? Ordering them can be a little tricky.  When someone visits an online store, in most cases they’re seeking something specific. Since there is no way to tailor your website uniquely for every new visitor (this can hopefully be accomplished in the future), the most effective method […]

Especially if your store has a lot of sub-categories, then ordering them alphabetically makes browsing through them a much faster experience. Users looking for a sub-category in particular will struggle to find it by having to scan through all the choices. An alphabetical order allows for faster scanning to by only focusing on the first […]

Semi-sticky Semi-sticky means that it re-appears when scrolling back up. A sticky or semi-sticky header makes visitors not have to scroll all the way up to go to another page or do another search.   Simplified version You can also simplify the sticky header that remains up as they scroll down or the semi-sticky header that […]

Below is a rough mockup which shows the burger menu in action, when closed and open. If there is an X button, it should be big enough to be easy to click, and in the same location as the burger menu icon The left swiping gesture (if it opens from the left) should close it […]

Especially if you have a high quantity of products, an accessible search is crucial to a good user experience, and making it easy for users to find what they want from your store.   On mobile, the search box can take a whole row (full width), below the main header row containing the logo:  

As they click into the search box… a good practice is to show their previous search history, and possibly popular searches.   As they start typing… You can show suggested searches, categories, and/or products.   Mispellings The auto-suggestions and results should account for common misspellings. For example, if they type ‘dreses’ it should suggest results […]

For stores with 50+ products Having either a category filter (when searching) or search filters in the results page is especially important for stores with over 50 products or so.

If the user searches for a product your store doesn’t have, showing an empty page leads them nowhere and can cause frustration. And frustration can make them bounce away from your store. Include some of the following components alternate queries similar to the query searched for category suggestions based on the query personalized product recommendations […]

As the user clicks in the search box (so before they start typing something), the idea here is to give them some suggestions and get back to a previous search they submitted.  Showing popular searches isn’t a feature as frequently found on online stores, but it is definitely something to test.

Unless users are looking specifically for a page such as your returns policy or one of your categories, then they’re looking for a product. Product searches constitute most of the searches, whether they look for a product keyword or a symptom, and thus products should be shown first in the search results. Again, that’s unless […]

Clear Make it clear, concise, and benefit-oriented.   50% of visitors don’t scroll past the hero section (source)   Introduce your store As shoppers land on your homepage for the first time, they have no idea what it is about, what you sell. That value proposition should be mentioned above the fold, before they scroll […]

Motivate them to take action After introducing what your store is about, what is the action you want your shoppers to take?    Make it descriptive Avoid labels such as “Shop Now”, “Continue”, … ). In the mini-teardowns I do, I often mentioned that the main CTA button in the hero section should be more […]

How is your store differentiated and better? “Unique selling points” are essentially things that are great and unique about your store and its user experience. It’s a good idea to present two or three selling points above the fold or at least somewhere on your homepage.   Unique selling points are for example: 60-day return […]

According to research by Hubspot, 73% of mobile users are annoyed by full screen pop-ups. But we didn’t need research to tell us that. You hate pop-ups, I hate pop-ups, and everyone I know hates pop-ups. Even Google hates pop-ups and will penalize you severely in search rankings if your site is notorious for intrusive […]

On the homepage above the fold, avoid carousels altogether. A quickly rotating image distracts attention away from the CTA button. What I usually recommend is to either have a static background image or a slowly moving background video, especially if it is well-integrated with the text & CTA(s) above. I wrote an article on my […]

A sign post to direct your users After getting introduced to your value proposition with a ‘hero section’ at the top of the homepage, the next step is to help them decide where to go on your site (which category to open). A list of main categories serves that purpose.   I recommend: Putting it […]

Are you helping your shoppers choose? Getting users to your site isn’t helpful if they end up buying nothing. A wide selection of products is nice but there is something like having too many choices, counterintuitive as it may sound.) A famous field study was conducted on this very phenomena. Two tables with jam samples […]

On the homepage, featured categories are much more important than featured products (read more about featured categories, BP#28) But showcasing a few products helps get a sense of what you’re offering, and potentially get users curious about one of them. User-controlled carousels are usually good for this. Alternatively, you can have a static list.

Don’t make users squint their eyes to read the text on your site. This is generally more of an issue on mobile, and a cause for bouncing off your store.

Unless your store is a big established brand that most people already know about, building social proof and trust is a must. On the homepage, you can add elements such as: site-wide testimonials (not product-specific) “As Seen On” logos facebook likes number of customers number of reviews how long you’ve been open awards   Social […]

Having UGC is a must. And the more ‘genuine’ the better – meaning real photos from your customers, not just official photos.       Over half (51%) of Americans trust UGC more than other information on a company website (16%) or news articles about the company (14%) when looking for information about a brand, […]

It should be localized to your users’… country currency language units   Some Shopify apps There are some apps to help with customizing the experience based on their country.   Automatic redirect: https://apps.shopify.com/geolocation-redirect https://apps.shopify.com/geoip-country-redirect   Shopify guide: https://www.shopify.ca/blog/shopify-store-multiple-countries   And you can look through the shopify apps yourself: https://apps.shopify.com/search?q=country   Country selection screen If the […]

That said, loading speed is something to keep an eye on. So you will have to make some compromises to keep the page loading quickly, while offering a great experience.   Some suggested sections to have Hero, to introduce your store (see BP #23 and BP #27) Unique selling points, to differentiate your store (see […]

In order to find products they’re potentially interested, being able to sort the list is critical.   Common sorting options: Price Popularity Relevance New Ratings   Which sorting options do you provide?  

Credit card logos signify to users which payment options are available. Trust & safety badges establish some credibility. You can also add a guarantee badge, such as a 100% satisfaction guarantee. Typically these appear on the right side of the footer. If you also have a section with those logos on the homepage, you can […]

If users want to contact you, it should be easy. Your contact information should be easily accessible, and the footer is an obvious and standard location for it.   Contact information includes: Phone Email Social media Link to the contact page

Shoppers need help A study by Econsultancy from 2013 of 5,700+ online consumers revealed that 83% of online shoppers need support to complete a purchase.  They also found that 31% of shoppers expect an immediate response, and 40% expect a response within 5 min. To be more precise: 31% of shoppers expect an immediate response […]

Shoppers expect a quick response As mentioned in best practice #39, your shoppers expect a quick response when they need help. 31% of people surveyed in the study expected an immediate response. A chatbot provides an instant response, and thus gives additional time for a human service agent to jump in if needed.   It’s […]

Specific, not vague A specific offer is more compelling than a generic “Sign up for our newsletter”. Try offering a discount or a reward. Tell them what they’ll get when signing up.

KISS – Keep It Simple and Stupid That means simple category names, and as few categories as possible. It also means structuring the catalog in an intuitive way that makes products are easy to find.

For stores of a certain size Filters are particularly important for stores with over about 50 products. If your store only has a handful of products, there’s no point in filtering them.   My advice for your filters Provide category-specific filters in addition to site-wide filters (brand, price, ratings) (read more on this in this […]

The attributes below are a must. Image Title Price Star rating + # ratings Product variations, if any (typically in the form of color swatches)   List View vs Grid View If your products are heavy on specs, you might opt for a List View instead of a Grid View, in which case you can […]

There are several ways to build urgency Show how much they save on sale items Have limited quantity or limited time offers Offer free shipping or same-day (or next day) delivery if they purchase before a certain time Inform users about limited stock   Flash sales TBDress is the perfect example of the implementation of […]

Inspiration from Amazon Amazon helps their shoppers reduce the number of options to choose from. They have multiple sections at the top of the category page with featured products: best sellers top rated recommended for you most wished for most gifted hot new releases   You can either add a section at the top of […]

Pagination isn’t great The page links are usually small and hard to click accurately, especially on mobile. Those pagination links load another page, which slows down the browsing experience. And users browse fewer products on average with pagination than with a Load More button.   Infinity scrolling is evil You scroll down and think that […]

Product images are the most important component Having beautiful relevant quality images is more important than the product information, a long description and ratings & reviews.   According to MDG, here’s the breakdown of what customers said is important to them: Quality of a product image – 67% Product-specific information – 63% Long description – […]

On mobile, there are 4 main approaches No zoom feature, but users can pinch to zoom in the page, which also zooms in the product image. Allow to zoom within the product gallery area (and it does NOT zoom the rest of the page) Opening an overlay panel above the page with all the larger […]

Don’t hide it, make it stand out Use a contrasting color Use a larger font size If the product is discounted, show how much they save (amount and/or %), instead of only showing the regular and discounted price.   A Better Lemonade Stand’s advice on pricing (source) Use round prices for emotional impulsive purchases Use […]

Video works Video appears in 70% of the top 100 search results listings, and viewers are anywhere from 64-85% more likely to buy after watching a product video. (source) Here’s a good article by Shopify about video   Some giant stores don’t have product videos Knowing the power and impact of video, that is usually […]

Give them a preview That way, shoppers can quickly get the essence of what the product is about, and read more if they want to.   I like how IKEA has done it, with a Read More link that scrolls the page down to the extended Product Description section.     Lower on the product […]

Easy to digest Whether in the homepage, product page, or About page, the text needs to be easy to digest. Bold important sentences or parts of sentences so that someone only reading those bold parts will get the gist of it quickly. Avoid bolding single words. A single word doesn’t give enough meaning to people […]

Address their concerns For example, do they have doubts about their efficacy compared to other products? The more objections and concerns they have, the more you need to address those objections and educate them.   Start with the most important And don’t waste the first few sentences of your description, that’s what your shoppers read […]

That can be in a tab, section, or link Make it easy for your shoppers to find that information. It is crucial for your shoppers to make their purchasing decision.

Don’t force them to calculate Don’t force your users to calculate when their package will arrive. Typically, stores only mention a number of days or a range of days. Simply tell them on which date it will arrive (if you’re able to estimate it). If you cannot estimate it accurately, then give them a range of […]

List out the components This can be done in a few ways: Show the included components / accessories in a product image Have a separate section ‘Included in kit’, with a thumbnail for each. Put it in the description as well.   IKEA is missing thumbnails On IKEA, how are we supposed to know what […]

What not to do This is strangest quantity selector I’ve ever seen on desktop. A perfect example of what NOT to do:     Steppers On both desktop and mobile, instead of a dropdown or only a text field, I recommend having steppers to increase and decrease the quantity, with an editable quantity field.   […]

Aim to get 10+ reviews per product, which is enough for shoppers to make an informed decision. If a big percentage of your products have zero or only a few reviews, that can hurt your conversions.   How? Place the Write a Review button prominently in the Reviews section  Offer sweepstakes or discounts in exchange […]

This applies only if your product variants are on separate pages. The idea here is that product variants are the same product, just in a different color, for example. so the same product description and reviews should be shown across those variants. A more common design is to merge all variants on the same product […]

Load variants in the same page In all these examples that follow except for Crutchfield, selecting another variant does not load another page – it loads in the same page. So while this recommendation applies technically only to the way Crutchfield implemented variations (a page for each), the way the other sites interlinked variants simplifies […]

Confusion is the enemy of conversion Make it clear to the shopper which variant they’re currently looking at. This can easily be done by having a different title for each variant. In the Crutchfield example below, it’s clear that we’re looking at the 65′ version of that screen.

FAQ If your products are complex and generate lots of questions, having a FAQ section for each product can make sense. Otherwise, a general FAQ for the whole site is enough.   User Q&A According to Inflow’s research, user Q&As are growing in popularity and are becoming standard with many review platforms. This is especially […]

Give them a reason to Users might submit a review without having to ask for it, but it sure helps to ask! Even better, give them an incentive, such as the chance to win something.    Warning You’ll have to check what your local laws stipulate, but from what I understand they have to be […]

Urgency elements include limited quantity limited time contextual offers   Too many sales The decision to offer sales depends on your industry and brand. Having too many sales and discounts can devalue your brand.

No account wall While about 60% of stores require an account to save a product to the wishlist, account walls are highly disliked by users. The wishlist feature should be usable by guest users (without having to log in). I’d recommend clarifying that users don’t have to create an account to add an item to […]

VWO’s study A case study done by VWO revealed that removing social share buttons increased conversions by 11.9%. But that’s one of those things that you should definitely test. It will depend on your audience.   Some nuance by members One of the members of my Ecom Convert group mentioned that they’re getting a lot […]

This also goes for the “Continue to Checkout” button in the Cart: make it sticky on mobile. On desktop, you can either do the same as on mobile, or you can have a large button (or two – one at the top and one at the bottom of the Cart page) with a contrasting color. […]

It’s the most important button Choose a color that is both contrasting and fits your brand Make sure the Add to Cart button attracts the most attention on the page, compared to other buttons or links   Be descriptive Test descriptive labels for the button. For example, if you promise to deliver the next day, […]

USP stands for Unique Selling Proposition.   Prime real estate As the Add to Cart button attracts a lot of attention (if it is contrasting and prominent), right under it is a great place to remind your shoppers of some key differentiators for your store.   USP examples Free shipping Same day delivery 60 day […]

A reason to bounce “Email Me” buttons or waitlists are ineffective for out-of-stock products, because users will just go shop somewhere else.   Let them buy anyway Allow instead users to purchase temporarily out-of-stock products, warn them, and increase the delivery time. Also prominently display product alternatives.   Discontinued products For discontinued or deprecated products, […]

The key is relevance This section encourages shoppers to explore other products. But if those suggestions have nothing to do with the product they’re currently viewing (or other products they recently viewed), then it will just be noise to them.

An example from Raphael Here’s a good example of how to offer upsells/cross-sells when adding to cart. This was extracted from a video shared by CRO expert Raphael Paulin-Daigle on his LinkedIn.   See the other two ways he talks about by watching his video on LinkedIn:   Relevance, relevance, relevance In the example below […]

Users don’t see them According to Baymard, 27% of users overlook the hidden content in the inactive tabs. The example below from Crutchfield contains horizontal tabs.   Accordion An accordion (expandable tabs) or a long expanded page with sticky tabbed navigation on scroll both perform better than horizontal tabs. Here’s what an Accordion looks like: […]

Easier to consume Grouping information into logical sections makes it easier to digest.  

If your product has a lot of specs, then the most important ones should be highlighted in a summary section at the top. That will draw their attention to those specs. 

Add horizontal and vertical shading, icons, and lines.

Avoid having multiple specs per row, which is overwhelming to go through.

Summarize the ratings Users rely on it even more than the content of individual reviews to provide the overall picture of how other users experience a product. Without a ratings distribution summary at the top of the review section, shoppers are likely to let the first few reviews determine how positively or negatively they perceive […]

Say it again On the product page, your shipping and return information needs to be reiterated. If your unique selling points (see BP #70) under the Add to Cart button already mention your shipping and returns, then ignore this best practice. Otherwise, it should be mentioned somewhere close to the Add to Cart button. Having […]

Don’t redirect to the cart This is actually one of Google’s best practices for mobile retail. If generally your visitors only buy a single product, I understand the temptation to redirect them directly to the cart. However, that breaks their expectation of an Add to Cart button. One solution is to switch the call to […]

If your shipping isn’t free If you offer free shipping on all purchases, then ignore this best practice.   Some data About 21% of US online shoppers abandon orders because they aren’t able to see the total order cost upfront before checking out. And about 64% of users look for shipping costs on the product […]

Having to scroll through image gallery thumbnails is a pain, especially on desktop. Users need to click the small scroll arrows.   The two options are: Show all thumbnails. This is a problem only if your product has more images than fits under the image gallery, so typically more than 10-15 thumbnails. Truncate and have […]

Help shoppers get a sense of the product’s size When shopping in a physical store, it’s easy to judge the scale of products. Online, it’s much harder. According to Baymard’s usability research, 42% of users try to estimate the product’s size from its product images. They also found that 56% of test subjects’ first action […]

Directly from the receipt page Add an ‘Edit Order’ link or button directly in the Order Confirmation page.   Contact information (Optionally) add a section with ways to contact you if they need to edit their order and prefer speaking to a customer service representative.

300ms hover delay Menu flickering is when users move their mouse towards a sub-category, and instead accidentally activate another parent category, causing the drop-down menu to change. Implement a 300ms hover delay and/or mouse path analysis.  

On the product page Compatible products can be for example accessories and attachments.

Add those links to your footer.

Delete the product Setting the quantity to zero should delete the product from their cart.   Auto-update the cart Auto-update the cart as soon as it’s changed. See best practice #207 about the cart being auto-updated with any quantity change.

Logged in users If they’re logged in, their experience should be seamless regardless of the device.   Guest users If they’re an anonymous user, they should be able to continue on another device by emailing their cart or saving it for later. See best practice #202 in regards to the ability to save their cart.

In product lists (categories) Add a label or replace the ‘Add to Cart’ button with ‘View Cart”.   Additional functionality You can also update those added items to allow shoppers to change the quantity, and/or include links to additional products or matching accessories.

Show the correct thumbnail 12% of users search using a color keyword. The thumbnails of products in search results should show the variation that matches the color they want.

For example, if you search for “red shirt”, the color filter should be set to “red”.   

Sidebar + featured section Have the featured filtering values in the filter sidebar and at the top of the product list. Test making that top ‘featured filters’ section sticky, meaning that it remains visible on both desktop and mobile while scrolling down. Don’t use banner-like graphics for featured filters   Feature sparingly Adjust the visual […]

A standard web practice This is a standard behavior standardized by Google and inherited by older HTML practices. Unvisited links being blue, and visited links being purple.  Of course, this should be adjusted to match your brand colors.

Truncate Truncate filters after about 10 values (truncate if minimum 5 values) Add a visual indicator next to the truncation link (an arrow or a +) Fade the last filter value   Link style Use the site-wide link styling for the truncation link Position the truncation link close to the filter values

Perceived as a new page by users The actions below are seen by users as being a new page. And thus clicking the Back button should go back to the previous state. Opening an overlay & lightbox (the back button should close it) Filtering & sorting (the back button should go back to the previous […]

On the product list Avoid all types of ads above or within the product list Avoid text ads below the product list Avoid overlay dialogs on page load   Other prime locations Avoid highly graphical ads in prime content locations on the homepage (especially when it comes to competitions and discounts)   These are fine […]

  In the homepage categories section These links help users decide which path they should take to find the product they want It also helps returning users bypass intermediate pages and go directly to the sub-sub-category they want.   Not common I looked at 55 of the top ecom stores, and haven’t found a single […]

There isn’t much of a point to show inspiration images without links to the products they contain.   + buttons or a text link Add ‘+’ buttons on inspirational product images which open an overlay dialog with more details on the product selected. If the image only showcases one product, a text link underneath it […]

On desktop Display hierarchical breadcrumbs. They’re important for SEO, and to help users figure out where they are on the site. If they come from a search, you can also add a ‘Back to Results’ link.   On mobile Have a link to the parent category only. There isn’t enough space to show the full […]

Purpose The main purpose of those pages is to introduce the sub-categories, and give them inspiration and guidance to help decide which sub-category they’re interested in.   Components Provide thumbnail previews, longer titles, and descriptions for those sub-categories. These components will also clarify categories with ambiguous industry jargon. Feature the sub-categories prominently, at the top […]

Users seek them out According to Baymard, 53% of users specifically seek out the negative reviews for one or more products they are interested in. 37% of users also positively factor in any site responses to negative reviews.   Respond If you’re avoiding negative reviews at all cost or hiding them, you’re missing out on […]

You have four options Option 1: Give an auto-complete option to search in the current category Option 2: Auto-update the search field to the current category (Search Scope) Option 3: Search in the current category by default, but add a dropdown in the results page to change the scope of the search Option 4: Add […]

Curbside pickup Since covid, the trend is to offer safe contactless curbside pickup. So that could also be an option.

A frustrating experience Many of your shoppers will browse for a while, add items to cart, leave, and come back at a later time to complete their purchase. If they come back and their cart is now empty, that creates a lot of frustration. 

Reassure them Once they get to the cart, they’re quite close to buying and need reassuring. Remind them how secure and trustworthy your store is.

Personalized To be clear, I’m referring here to the cart page or slide-in panel when they’re accessing the cart (typically from the cart icon in the header). The more personalized and relevant the suggestions, the better. These recommended products can be the same as shown in the modal or slide-in panel when adding to cart. […]

Remove the main navigation This will reduce the likelihood of them navigating away to another page of the site and abandoning their cart. For a good example to illustrate this best practice, take a look at how Shopify does it (see below). The header and footer are removed, but they keep a couple of ways […]

Some data According to Business Insider, 28% of US online shoppers abandon their cart because they don’t want to register/create account just to make a purchase. According to Baymard, it is the reason given by 31% of shoppers. (source) ASOS’s approach removed the account creation step on the checkout login page and it reduced their […]

Before you do… If you have very low conversion rates everywhere, then try to optimize that first.   Start with high converting steps If you have a low conversion rate on your checkout page, then put an upsell only in your product pages (or in any other part where you don’t have low conversion rates). […]

Typical payment methods Credit card PayPal Google Pay Apple Pay   PayPal In regards to PayPal, roughly half the stores I looked at (see the table below in the examples) offer an express PayPal checkout with a CTA button at the same place as the normal ‘Checkout’ button (in the cart). And the other half […]

Inline validation Show a checkmark after each correct input. When the user makes an error, such as entering a wrong credit card number, show the error message right next to or below the field it relates to.   Preserve data Preserve the form field data entered on validation errors   Side note Credit card numbers […]

Be explicit According to Baymard, 73% of stores don’t explicitly mark both required and optional fields. Only a few of the stores I looked at implement this – and it is very easy to do. As a consequence, 32% of users during testing encountered a validation error because they did not complete a required field. […]

Optional fields are disruptive Showing optional fields by default disrupts the checkout experience: Completing the checkout steps takes 5% to 30% longer Users doubt the correctness of order data More validation error messages More orders are submitted with incorrect information   Default visible fields Typically, those fields are: Full Name Street Address Zip Code Country […]

Checkmark In other words, check the “Same as shipping address” checkmark by default. If they uncheck it, then it displays fields to set a different shipping address.

Based on the field type Show the correct keyboard based on the type of the field the user is typing into. For example, if they’re entering a phone number or an email, then it should be a different keyboard than when they enter their first name.   Email keyboard   Name keyboard     Phone […]

One baby step at a time The first decision users need to make is which payment option they want. Once they select one of the options, then it makes sense to show the related fields to that option.

A confusing number Shoppers struggle with verifying that they typed their credit card number correctly, which is a cause of cart abandonment. Baymard observed that 23% of users either type or verify their card number in 4-digit blocks.   Increase accuracy Allowing them to type spaces and auto-formatting their card number with spaces can increase […]

Detect and show As the user starts to enter their card number, detect and show the type of credit card it is.

Avoid disappearing field labels The issue is when the placeholder text disappears as soon as you start typing, you can easily forget which field that was – especially if you’ve filled out a few fields.   Shopify Shopify’s default behavior is fine because once you start typing in a form field, the placeholder text becomes a […]

Static but relevant width To be clear, the field size should be static, NOT adjusted dynamically as users type. It should simply set to match the expected input. For example, a zip code field should be shorter than a name field.

Address Finder This is known as an Address Finder. See the Uber app as a good example of how to do this.   Google AutoComplete API Look into the Google AutoComplete API. You can turn this on in Shopify in the checkout setting.

Relevant state values In the checkout form, if you sell to multiple countries, this will ensure that the state/province values are for the correct country.

Big dropdowns are frustrating The reason why you should avoid dropdowns with more than about 10 options is that they are annoying to use. For dropdowns with fewer than about 5 options, it can be replaced with radio buttons, toggle switches or checkboxes (if only 2 options), etc.

Too many options State dropdowns contain too many options and make it unusable. A province dropdown isn’t as bad since it only contains 13 options.   An address finder is preferable This recommendation is if you don’t have an address finder (see best practice #123).

An address finder is preferable This tip is valid only if you don’t have an Address Finder field and keep the traditional address fields (street, city, state/province, country, zip). It will simplify the checkout form a little. Please see best practice #123 for that better solution.   Complex checkouts create abandonments From the data I […]

ISO format The ISO standard for this format is “MM / YY”. Make sure that keyboard use is supported for these fields, and not force users to use the mouse as 24% of users prefer filling out the expiration date with the keyboard.   And as you type, the formatting (the slash separator) is automatically […]

Multi-column forms create usability issues users omit to notice some fields fill out the wrong fields out of confusion (source)   Shopify And actually, Shopify implemented this, their checkout form is a single column (except for the name fields and the country / state / zip). Their second column has a summary, discount code, subtotal, […]

Test, test, test Test a One-Page Checkout especially if your average order value is low and you’re selling impulse purchases. If you can, split test against a multi-step checkout, because it is not clear which option will yield higher results for your specific industry and store, as evidenced below.   Power Support One-page checkouts and […]

In the order confirmation page If they checked out as a guest, give them a chance to create an account once they’re done paying. They might trust your store enough at that point and be interested in creating an account for future visits.

Fewer errors Input masks reduce the number of validation errors, which can reduce site abandonments. Restricted fields are for example a phone number, credit card number or a date.   Regional differences You should also consider regional differences in format. For example, the date format in the US is MM/DD/YY, in Europe it’s DD/MM/YY, and […]

Especially for smaller brands According to Baymard, 18% of shoppers (from 1044 respondents in US) abandon their cart because they do not trust the site with their credit card information. The tips below are especially important if your store is NOT a large brand such as Apple, Microsoft or Walmart.   Trust seals, padlocks, and […]

In addition to a return-by-mail option According to Baymard, about 20% of users prefer returning a product directly to the store or a physical location.   “In-store” means… in your brand store, at the post office at the UPS  location (or a similar carrier),     Free and noticeable It should obviously be free. Present […]

Older research Research from 2012 / 2013 reveals that: 86% of people are bothered when needing to create new accounts on websites. 92% of users have left a website instead of resetting or recovering their login. 31% do so frequently. 60% of shoppers are more likely to use social login on mobile 64% of millennials […]

Catch errors and suggest a correction I’ve seen examples where you could type an address with a street number (only a street name), which is invalid. So depending on the quality of the address finder, you may still want to have an address validator to catch invalid addresses that the Address Finder allows. If the […]

Where? Place that statement or bullets in the Sign Up (account creation) page, and in the Order Confirmation page next to the form to create their account.

Confirmation fields lead to abandonments Formisimo observed over a two-month period that their password repeat field was responsible for over a quarter of all the people that abandoned their sign up process. Along with a few other changes, they were able to improve their Sign Up page conversions by 55%, and decrease by 24% the […]

Suggestion For example, if the user inputs “[email protected]”, the suggestion shown below would be “Did you mean [email protected]?”.

Strick passwords cause abandonments According to Baymard’s large scale checkout usability, “strict password rules can cause an 18.75% checkout abandonment rate among existing account users as they try to sign in.” The real problem arises when trying to sign in. If they got forced to create a more complex password and could not use their […]

Avoid images Avoid or minimize images as a general rule. Use them only if you want to draw attention to that component.  Use text links and possibly icons.

Easy to remove Make it easy for users to remove those items from the cart.   Also notify when low in stock See BP #150

A welcome email The welcome email is your first touch point via email with your prospects or customers, so it will set the tone for your communication with them. Make sure it contains some or all of the components below: Your logo Links to the main product categories Links or buttons to access the account, […]

Cart abandonment rate According to SaleCycle, the cart abandonment rate in 2016 was about 75% across all regions. (source) Baymard mentions it is 69.57%, based on 41 studies, and that stat was last updated in September 2019.   Abandonment emails Cart abandonment emails are one way to convert some of those people who left their […]

Study of email subject lines Research by Yotpo of 200K stores and 163M orders discovered the impact of various elements in the email subject line on the number of reviews obtained:   1) Exclamation point (!) Health & beauty: +30.4% Food & tobacco: +83.5% Sport: -10% Electronics: 30%   2) Question mark (?) Electronics: +21.7% […]

Performance and conversion are inextricably connected   Slow pages cause abandonments According to Unbounce, 1 out of 5 shoppers will abandon their loaded shopping cart if they perceive the pages as being too slow. (source) According to AnnexCloud, a slow website can increase abandonment by 75%, and loyalty drops 50% when your site is slow. […]

Make it visual Add photos and video Use visual hierarchy and supportive images to help your users consume the information.   Make it personal Share your story Highlight your team Talk about your charity initiatives   Organize it If you have a lot of About content, have an overview page with links or buttons to […]

A few stats about mobile ecommerce According to Shopify, mobile traffic now accounts for 50% of visits, and about 35% of purchases. During the 2018 holiday season, about a third of online purchases came from smartphone users. On Black Friday, with 6.2 billion in online revenue, 40% of sales came via a mobile device. During […]

15% increase in CR? According to TrustPulse, activity notifications (such as purchases by other shoppers) have been shown to increase conversions by up to 15%. These typically appear in a small popup as purchases happen, at the bottom of the screen.   Types of activities There are different types of activities you can notify your […]

Also notify when out of stock See BP #142

Footer only For example, these pages can appear only in the footer. They don’t need to be in the header menu. Blog About Us Contact Us Shipping & Returns Information      

There’s less space on mobile. The ideal solution is to have a logo already so simple that it is just as clear on desktop and mobile. But perhaps that’s not your case. An easy solution to that is to simplify it. If on desktop it contains a slogan underneath, remove it on mobile. Make sure […]

Extra costs cause abandonments Extra costs too high (shipping, tax, fees) is the #1 reason for cart abandonment, according to Baymard (source)   Free shipping If your shipping is not free, you could offer something like this: If you don’t get your product in 24 hours, we’ll pay for the shipping! For more information on […]

Phone or video call If you can, get as many of your customers as you can on a phone call or even better a video call. Ask them a few questions to get insightful feedback on your store.   Questions to ask Below are some questions I asked to several customers in one of my […]

User behavior tools With a tool like Hotjar, Lucky Orange, Full Story, look at recordings of user sessions and uncover usability issues. These issues are likely lowering your conversions.

Or at least keep them handy If your store has a promotion with a discount code, why not show the code at the top so that they have it handy when they end up in the checkout? Even better, if possible for your store, auto-apply the discount code in the checkout once they opted in […]

Isn’t Google Maps enough? Users still turn to your store website to confirm your opening hours and holidays when you’re closed. And if they’re already on your store when they need to locate your store, their next logical step is to open your store locator, and not go on Google Maps.  If you don’t have […]

Payment options change per country If you sell internationally, users prefer certain payment methods based on where they live. For example, in South America, bank transfers are very common. (source)

Two out of these icons are confusing   Stay close to the standard On desktop it’s possible to add alternate text which shows when hovering the mouse on the icon, but not on mobile. So I think a better approach is to not use confusing icons in the first place by not deviating too much […]

When searching… When users are searching for Returns, Shipping, Order Tracking, and such, they should be redirected to hat page.   Adidas When you type in for example ‘returns’, it automatically redirects to the Returns page.  The problem though is that it first shows the search results page with no results and after a couple […]

More options available On IKEA, instead of showing variants there, they add More options available under the product. Interesting approach, it makes visitors wonder what the other options are. I think that is both a good and a bad thing. Curiosity is good, but it creates some confusion.   Show the color variants Macy’s, alternatively, […]

Google folder with inspiration I compiled a list of 44 landing pages in a Google folder, to help you find inspiration for your post-click landing pages: https://drive.google.com/drive/folders/1kW9CmAWBOpQfT81tDnjip0Pddg55vCSm?usp=sharing   Tools There are several tools for it out there, but all the funnels I’ve built were custom. It’s pretty cheap to build with an affordable programmer/designer, and […]

Customers are impatient Aim to answer questions in 10 minutes or less.  Ideally in seconds (for the first message at least), depending on the channel. Live Chat should be more responsive than email and phone.. (Source)   (Source)  

Quick Views are a bad idea According to Baymard (source)… they’re a symptom treatment for poor product list design (not enough information/attributes, thumbnails too small, etc.) users confuse them for the product page and struggle to understand the site’s hierarchy they introduce friction to the user’s browsing process The lack of a clear “product page […]

Avoid pogo-sticking In Baymard’s user testing (source), showing too little information in the list made test subjects do extensive “pogo-sticking” (jumping back & forth between the list and product pages). Showing too much information leads to overwhelm.   Options on desktop If your niche is visually-driven (apparel, home decor,…), combine a ‘cut-out’ image by default, […]

Same order Put the same attributes in the same order. E.g. how many cups of tea a container of tea can make?   Inconsistencies According to Baymard: (source) 64% of e-commerce sites impede users ability to compare the product in their list due to inconsistencies in the listed product attributes. Shoppers tend to skip products without […]

Separate title components A product title that contains everything in it is very hard to decipher. It’s convenient for you the store owner, but not for the shopper.   Separate the title from the rest (brand, type, specs).   (source)

Where? While this is commonly done in product descriptions and the homepage, you can also educate your visitors on the category page. Here’s a good example of a product page which educates well Follain has a category page with a Clean Fact section.   Copy sections You can copy some of the sections you have […]

High up NN/g recommends prioritizing them over more generic recommendations. Put that ‘Recommended For You’ section high up on the homepage. (source)   Tell them how Specify how you came up with those personalized recommendations. They can be based on their previous orders and interests. At a minimum, mention that these recommendations are ‘Based on […]

10 mistakes to avoid with popups (By Nielsen Norman Group – source)   1. Showing a popup before the page content loads This is especially bad on mobile, as Google penalizes sites with interruptive popups. Give visitors some value first, and trigger the popup only when it’s relevant for the user. The exceptions to this […]

Different images I’ve seen several of the stores I did a mini-teardown with that showed the same product image no matter the variant selected, and it creates a lot of friction for the user. It makes very hard for them to choose the right variant for them. Instead, have a different image for each color […]

Friction On most stores that I reviewed recently which had a Compare feature, it was very difficult to figure out how to access the Comparison page once you select a couple of products to compare. I honestly couldn’t figure it out in a few cases.   How it should be Here’s a good example of […]

Hard to read One of the members of my Ecom Convert group shared some interesting research about ALL CAPS text in a comment to a mini-teardown last week: Roughly 90% of people find all-capped text to be harder to read, in general.   These two articles were given as sources: https://premium.wpmudev.org/blog/styling-text-website-research/ https://blog.prototypr.io/all-caps-on-ui-good-or-bad-2570f14dc457     I […]

Store personality Choose a font that fits your company’s personality, such as ‘serious’ or fun’ Color increases brand recognition. (source)     Other thoughts Make it legible and memorable Incorporate the domain name and store name which should be the same Keep it simple, avoid photography and 3D graphics.  

An opportunity to help Turn a potentially bad experience into an opportunity for branding and forwarding the customer to what they’re looking for. This can be done similarly to how you present your main categories in the homepage’s categories section.

Categories This can be done similarly to how you present your main categories in the homepage’s categories section.

Amazon homepage carousels This is how Amazon implements product carousels (on their homepage) on desktop.    Some observations: Clicking a Previous or Next button scrolls by several products, not just one The scrolling bar makes it much easier to scan quickly through the products A common shortcut on desktop for horizontal scrolling is shift+mousewheel, but […]

Mix & match Give your shoppers the option to mix & match. Mixed bundling: products in the bundle can be purchased individually also. Pure bundling: products are only available together and cannot be bought separately.   Nintendo offering mixed bundling Timothy Derdenger and Vineet Kumar from Harvard Business School  discovered that when Nintendo offered mixed […]

Push notification This is what web push notification (with Chrome) can look like.  That notification comes from https://onedollaronly.com.sg/ in case you want to check it out for yourself.   Triggered mobile push notifications From a 2016 study, triggered mobile push notifications drive 2,770 percent higher conversion rates for the same number of sends as compared […]

Add a measure If your shoppers wonder about the size of your products, adding a size comparison image is important. In this example, they sell plants, and put the plant side-by-side with an adult, to give you an idea of its size.   Add a person If the comparison is a person, you can mention […]

On desktop   On mobile (source)

Need help link Add a “Forgot your password?” or “Need help?” link prominently placed in the account log in form.  

Be consistent Your visitors typically first see your ad, then click to go to your landing page. If it feels off to them, it can be enough to prevent them from going any further.

Keeping track This helps shoppers keep track of their purchases, and makes it clear to them that they added something to cart.  

GridView layout This recommendation applies to a Grid View layout, which is most relevant for very visual products without a lot of specs (e.g. clothing and apparel). If your products are in-between those two extremes, you could give the option to users to switch view between Grid and List. On mobile, you can typically fit […]

Clear context Users need to know at all times where they are on the site. Mentioning the keyword they just searched for makes it clear to them what they’re looking at.

Wrong size 46% of shoppers return their products due to having the wrong size (source)   Fit finder Beyond a sizing chart, a fit quiz (fit finder) can be a great additional to make the experience of finding the right size smoother and less likely to result in a return.

Avoid dropdowns Avoid having users select a color from a dropdown with color labels (‘red’, ‘black’, etc.). Make them choose the color variant from a list of color swatches (circles or squares filled with color) or small thumbnails of the product in different colors. If some of your products have multi-color design variants and some […]

Default values By having default values selected, it avoids user errors.   Scroll to fields in error But if you do choose to leave some fields empty, such as a shoe size, then the best way to help the user quickly resolve their mistake (of not selecting a value) is to scroll to that field, […]

Reassure them Reassure shoppers who may be wondering if their preferred payment method is supported.    Read more See BP #112 where I look at the actual payment options made available by big brand stores.

For multi-step checkouts Add a progress bar at the top of the checkout which highlights which step they’re at, and gives a clear overview of all the steps.

Brick & mortar store If you sell online only, it is not as important to put your physical address but it can build some trust If you have a physical retail store, add the physical address of your store(s).   Components Show a professional email address, such as [email protected] In order to reduce the amount […]

Ask, and you shall receive Ask them to submit reviews for what they bought during their previous visit.   How? You could have a section high up on the homepage, and/or a notice in the header, or a popup. It should be highlighted also in the Account Dashboard.   Some nuance One of the members […]

Other places to notify … besides in a page about that situation (e.g. covid-19) trigger a popup or web push notification add information to your shipping information page add information in the shipping section of your product page add information in your company’s policies page   Read more on this topic Email Banner

Banner at the top On most stores I looked at, they added a banner on the homepage or a mention in the header about their response / actions in regards to Covid-19.   Read more Email Page

Covid-19 The onset of the Covid-19 pandemic created a lot of fears in shoppers. They had concerns and questions that needed to be answered. While the quarantine that ensued was a very unique situation and a first for most countries worldwide, this recommendation can apply to other situations such as holidays, special sales or interruptions […]

Overview section The overview can be a small section at the top of the product list with the applied filters and a X next to each to un-apply it. It can also be in a section at the top of the filter sidebar, which is typically on the left of the screen.   Read more […]

Free returns Allowing your shoppers to return for free the products they bought builds trust with them. It lowers their fear of making the wrong purchase, as they know that they can easily return them if needed, at no cost. People starting out often think that a strict and challenging returns policy will discourage returns. […]

On mobile It should be possible to swipe through the images instead of having to click on each thumbnail. Considering that 53% of global online traffic comes from mobile devices (for the US, it is 57%), this is especially important to a good user experience.

How? Add a tag or text label if the product is low on stock (you can also specify how many you have left in stock) Add a countdown timer if the product is on sale for a limited time (but avoid fake countdowns just for the sake of urgency!) Add a countdown timer to qualify […]

On the product page There are several types of cross-sell sections that you can add: People who viewed this product also viewed People who bought this product also bought You might also like May we suggest Complete the look More items in the collection Other products from the same brand Other products from the same […]

In the cart From a quick glance at their cart, it should be easy for shoppers to recognize the items they added. So a product image is a must, along with attributes such as the fabric, the size, etc. This is especially important for configurable products. This also applies to the modal window or side […]

Reassure them Reiterate why your users are shopping with you. Reassure them by reinforcing your unique selling points, such as your free shipping, free returns, money back guarantee, next day delivery, etc. You can also do this in the modal or panel that opens when adding to cart.

Cross-device shopping One of the main reasons why this is needed is so they can continue their shopping experience on another device. Oftentimes, they’ll shop on mobile and purchase on desktop. See best practice #90 for more details on that.   Continuing later Another reason why users save their cart for later is to make […]

On desktop This is more easily done on desktop, as there is enough space to always be showing the order summary.   On mobile Just make sure to show it on each step of your checkout, it doesn’t need to always be visible as they scroll.

In the product page Not being able to check in-store availability can be a major pain point. Whether they want to go to the store and try the product or whether they to pick up their order in store, showing the in-store availability is a must. 

What makes a good title? Avoid cramming your product title with keywords just for the sake of SEO. Make sure they’re readable and easily understandable by a human. Include a benefit or use for the product Include some detail about the current variant (see best practice #62 for more details on variant titles) Separate the […]

No Update button Allow users to simply change any quantity without having to click ‘Update cart’ every time. Avoid putting an ‘Edit Cart’ button also.     Quantity of zero See best practice #89 in regards to setting a quantity to zero (0).

Yes/no question The standard way to do this is to ask the question “Was this review helpful?” and give them two choices: thumbs up / thumbs down. Alternatively, the choices can be yes / no.

Navigation path By navigation path, I mean the menu items in the header (or burger menu) that lead to the current page. For example: Level 1 (directly shown in your main menu): Electronics Level 2: Accessories Level 3: Phone Cases   Remind them And even if they know the path they took because they started […]

How? Give them the choice to sign up or log in to their account, but the guest checkout could be selected by default, and visually attract more attention than the other options. Users expect it in the upper-left on desktop, and on top on mobile. Clearly label the Guest Checkout option (include the word “Guest”) […]

Countdown label Order in the next 37 minutes to receive your order by Thursday May 28th   Where? This can be displayed either in the Product page, the Cart, or the Checkout. It typically accompanies the selection of shipping type, and is especially relevant for premium shipping options.

36% of stores Baymard reports that 36% of stores don’t! (source)   Confusing And if the cardholder name is your first field, 33% of users will type their credit card number in it because that’s what appears on their card.   Order of fields Typically, the order of the information on credit cards is: Credit […]

Most stores Let’s say you’re buying something and made it to the Order Review step, you’re ready to hit the Place Order button, and you realize that you messed up your address, or your card expiration date. What do you do? Most stores force you to go back to one of the previous steps to […]

Required phone fields cause abandonments Required but unexplained phone fields were observed to be a direct cause of abandonments for the subgroup of users who are suspicious of a site’s motives. – Baymard   58% of brands don’t provide an explanation Below is a poll done by Baymard to 2800 shoppers.   Do you need […]

PCI compliance PCI compliance prevents stores from saving a user’s credit card number directly. As a consequence, 84% of stores do not allow users to edit the credit number directly. Users are required to add a new credit card and delete the old one.   A solution An elegant solution to this problem is to […]