showing 20 of 216

#1

Header

Opt for a consolidated header that takes minimal space

Typically, something like this: Row 1 (bar above the header): Free Shipping, or offer Row 2: Burger menu icon (left), logo (middle), cart icon (right). Row 3: Search box   When at the top of page: It could be something like this:   What I’d recommend is keeping at least row 1 sticky, and row […]

#2

Home

Add a Link Bar

On mobile, a link bar is somewhat equivalent to having the main categories showing directly in your desktop header menu.   A bit of data Growth Rock saw a 5% increase with 93% statistical significance by adding a Link Bar. This article mentions two case studies done on link bars: Case study 1: 5% increase […]

#3

Header

Opt for a header with 2 or 3 rows

One possible layout On desktop, opt for a header with 2 or 3 rows. There are various possible layouts, but below is a draft mockup of one of them:   Row 1 Contact info Free shipping mention (it could be moved to the left) “Help” link Country selection   Row 2 Logo (clickable) Search box […]

#4

Header

List your main product categories in your menu’s level 1

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 […]

#5

Header

Have a tagline, guarantee, USP and/or offer in your header

  Tagline A tagline helps users quickly understand what the store is about. It is typically short, a few words only. You can often see it right below the logo, or in a row above the logo.   USP A USP (unique selling proposition) is similar to a tagline, but usually a bit longer. It […]

#6

Header

Show your key contact information in the header

  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 floating button, then you could add “Live Chat” or “Chat” as another menu item in your secondary header menu (on desktop) Add a phone […]

#7

Footer

If calls are important for your store, have a prominent CTA button

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 […]

#8

Header

Make your menu items big enough

On desktop It is generally not as much of an issue than on mobile because the screen is much bigger. That said, you should still ensure that the main menu as well as the sub-category items are big enough to avoid mis-clicks and mis-hovers.   On mobile The smaller the device your users are on, […]

#9

Header

Have as few menu items as possible

Try and fit all the items (or at least your most important items) on one screen. Of course, it’s OK if some of those menu items are expandable and that when expanded the menu is longer than one screen.

#10

Header

Opt for a Mega Menu

Mega Menus work very well for ecommerce stores Ecommerce stores typically have a fairly large site structure (lots of categories and sub-categories). Show the sub-categories as columns – ideally 3 to 5 – if these sub-categories have sub-sub categories. Optionally show an image for each column. If you only have a few sub-categories and no […]

#11

Header

Place the post-sale actions above the fold

Above the fold Above the fold can mean in the menu or somewhere in the header.   Group account-related features Typically, these are grouped under the Account icon. So, for example, the Order Tracking doesn’t need to be a separate menu item. I believe this simplifies the shopper’s experience on your store, as opposed to having […]

#12

Header

Order your menu’s main product categories by sales volume

Showing the most popular categories first makes it easier for users to access the paths they’re most likely to want to go down, which in turn might reduce your bounce rate. For example, from what I could find, Adidas sells more to men than women, and so a fair assumption is that their menu items […]

#13

Header

Order your menu’s SUB-categories alphabetically

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 […]

#14

Header

Make your header sticky or semi-sticky

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 […]

#15

Header

The burger menu should be easy to close

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 […]

#16

Header

Place a search box prominently in the header

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:  

#17

Search

Provide auto-suggestions as users are typing in the search box

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 […]

#19

Search

Add relevant search filters

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.

#20

Search

Always return search results

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 […]

#21

Search

Show previous searches before they start typing

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.

#22

Search

First list products in search results

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 […]

#23

Home

Display your value proposition above the fold

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 […]

#24

Home

Place a clear & descriptive CTA button above the fold

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 […]

#25

Home

Present specific unique selling points

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 […]

#26

Misc

Avoid full-page popups

Penalized by Google Actually, Google now penalizes intrusive popups on mobile, and so it is recommended to keep them to maximum 15% of the screen, and make them easy to dismiss. Read Google’s original announcement about it.   15% of the screen Make sure they take no more than 15% of the screen, and are […]

#27

Home

Avoid automatic carousels in your homepage’s hero section

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 […]

#28

Home

Feature your top categories right below the fold

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 […]

#29

Misc

Help visitors choose the right product

Are you helping your shoppers choose? Users have to choose between your various product options, when looking through a category (product list).   How? Product ratings One or some featured products (your best sellers, or recommended products) at the top of the category page A guide, questionnaire, or wizard to recommend the right product for […]

#30

Home

Feature some products after your featured categories

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.

#32

Home

Add social proof and build trust

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 […]

#33

Misc

Add user-generated content (UGC)

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, […]

#34

Misc

Localize your store

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 […]

#35

Home

Make your homepage long and rich

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 […]

#36

Category

Add relevant sorting options

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?  

#37

Footer

Add payment and trust badges to the footer

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 […]

#38

Footer

Add key contact information to the footer

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

#39

Misc

Add a Live Chat to quickly answer your visitors’ questions

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 […]

#40

Misc

Add a chatbot to your Live Chat to give immediate responses 24/7

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 […]

#42

Category

Organize products in a simple structure

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.

#43

Category

Have relevant dynamic filters

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 […]

#44

Category

Display these product attributes

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 […]

#45

Category

Add urgency elements

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 […]

#46

Category

Feature products, bundles or deals at the top

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 […]

#47

Category

Avoid pagination

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 […]

#48

Product

Have multiple high quality product images for each product

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 – […]

#49

Product

Add zooming capability to your product image gallery

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 […]

#50

Product

Display the price clearly above the fold

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 […]

#51

Product

Add unboxing, explainer or promo videos

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 […]

#52

Product

Have two versions of product descriptions: Summary and Detailed

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 […]

#53

Product

Make your text sections scannable

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 […]

#54

Product

Include features, benefits and objection handling in product descriptions

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 […]

#55

Product

Provide Shipping & Return details

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.

#56

Product

Display the date buyers can expect to get the product on

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 […]

#57

Product

Clarify what is included in product kits

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 […]

#58

Product

Use steppers for quantity fields instead of textboxes

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.   […]

#59

Product

Aim for 10+ customer reviews per product

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 […]

#60

Product

Sync product information and customer reviews across product variations

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 […]

#61

Product

Interlink product variants

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 […]

#62

Product

Uniquely title product variants

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.

#63

Product

Add a FAQ and/or user Q&A to answer shoppers’ questions

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 […]

#64

Product

Incentivize buyers to leave a review

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 […]

#65

Home

Add urgency elements

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.

#66

Misc

Add a Wishlist feature to your store

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 […]

#67

Product

Test removing social media share icons

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 […]

#68

Product

Have a sticky Add to Cart bar or button

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. […]

#69

Product

Have a large contrasting Add to Cart button above the fold

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, […]

#70

Product

Add USP bullets or images under the Add to Cart button

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 […]

#71

Product

Allow users to purchase temporarily out-of-stock products

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, […]

#72

Product

Suggest products they might like

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.

#73

Cart

Offer upsells and/or cross-sells when adding a product to cart

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 […]

#74

Product

Avoid horizontal tabs in Product pages

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: […]

#79

Product

Add a ratings distribution summary with a filter

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 […]

#80

Product

Mention your Free Shipping near the Buy section

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 […]

#81

Cart

When clicking “Add to Cart”, open a modal panel

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 […]

#82

Product

Estimate the shipping cost

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 […]

#83

Product

Either display all image thumbnails, or reveal all thumbnails on click

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 […]

#84

Product

Include at least one “in scale” image per product

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 […]

#85

Checkout

Allow buyers to edit or cancel their order right after placing it

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.

#86

Header

Avoid menu flickering

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.  

#89

Cart

Allow users to set a quantity of zero (0)

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.

#90

Misc

Support cross-device shopping

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.

#91

Category

Highlight items that are in the shopper’s 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.

#94

Category

Feature important product filters at the top of the product list

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 […]

#95

Category

Visually distinguish between visited and unvisited products

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.

#96

Category

Truncate filter values

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

#97

Misc

Avoid breaking Back button expectations

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 […]

#98

Product

Avoid ads (or what looks like ads)

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 […]

#99

Home

Add sub-category links

  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 […]

Misc

Link to all depicted products in inspirational images

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 […]

Category

Display breadcrumbs

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 […]

Category

Have intermediary category pages for the first 1-2 levels

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 […]

Product

Keep and answer all negative reviews

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 […]

Search

Allow users to search within their current category

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 […]

Cart

Make your shopping cart persistent

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. 

Cart

Offer upsells and/or cross-sells on the cart page or panel

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. […]

Checkout

Limit the exit points during the checkout process

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 […]

Checkout

Offer a guest checkout

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 […]

Checkout

Offer relevant upsells at checkout and after purchase

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). […]

Checkout

Offer multiple payment methods

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 […]

Checkout

Implement inline validation in forms

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 […]

Checkout

Clearly mark form fields as optional or required

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. […]

Checkout

Ask for the minimal amount of information

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 […]

Checkout

Show the appropriate keyboard

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 […]

Checkout

Allow and auto-format spaces in the credit card number field

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 […]

Checkout

In the checkout form, use field labels instead of placeholder text

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 […]

Checkout

Autocomplete the state/province

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).

Checkout

Automatically pre-fill City and State fields when the user enters a zip/postal code

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 […]

Checkout

Format the expiration date field the same as on the physical credit card

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 […]

Checkout

Avoid multi-column form layouts

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, […]

Checkout

Test both a one-page and a multi-page checkout

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 […]

Account

Offer optional account creation

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.

Checkout

Use input masks for restricted fields

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 […]

Checkout

Increase the perceived security of your checkout page

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 […]

Misc

Offer the possibility to return products in-store

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 […]

Account

Test social login

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 […]

Checkout

Validate the address and warn the shopper if it cannot be verified

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 […]

Account

Avoid email and password confirmation fields in the Account Creation form

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 […]

Account

Use low password requirements

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 […]

Notifications

Send a relevant account registration email

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, […]

Notifications

Send cart abandonment emails and/or SMS

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 […]

Notifications

Send an email after delivery to request a review on the product(s) they bought

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% […]

Misc

Optimize your website’s loading speed

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. […]

Misc

Have an About Us page, share your story

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 […]

Misc

Optimize your store for mobile

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 […]

Notifications

Test purchase notifications

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 […]

Header

Simplify your logo on mobile

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 […]

Misc

Offer free shipping or free shipping above a threshold

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 […]

Best Practices

Speak to your customers

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 […]

Misc

Analyse your shoppers’ behavior

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.

Misc

Auto-apply discount codes

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 […]

Header

Add a store locator link prominently

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 […]

Checkout

Localize your payment methods

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)

Header

Design header icons so they’re easy to understand

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 […]

Search

Automatically redirect to important pages

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 […]

Category

Interactive Color Swatches

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, […]

Landing Pages

Test post-click landing pages

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 […]

Misc

Answer customer questions quickly

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)  

Category

Avoid Quick Views

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 […]

Category

Provide additional list item information on mouse hover

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, […]

Category

Show product attributes consistently inside of a product list

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 […]

Product

Separate the product title from the brand or type

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)

Category

Educate your shoppers in your category pages

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 […]

Home

Offer personalized recommendations

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 […]

Notifications

Make your popups contextual and relevant

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 […]

Product

Show a different image for each product variant

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 […]

Category

Make it easy to trigger the product comparison

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 […]

Product

Avoid ALL CAPS text

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 […]

Misc

Choose brand colors and a style that attract your desired audience

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.  

Misc

Give navigation options on your 404 page

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.

Home

Make your featured product carousels user-friendly

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 […]

Product

Offer mixed bundling, not pure bundling

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 […]

Notifications

Test Web Push Notifications

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 […]

Product

Provide a size comparison image

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 […]

Category

3 images per row on desktop, 2 per row on mobile

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 […]

Product

Provide a sizing chart or dynamic fit finder

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.

Product

Show color swatches or thumbnails for the selection of the color variant

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 […]

Product

On error, focus on the field that needs to be selected

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, […]

Account

Ask for a review on their return visit

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 […]

Notifications

Notify your shoppers clearly of exceptional situations and events (Page)

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

Notifications

Notify your shoppers clearly of exceptional situations and events (Email)

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 […]

Misc

Offer and promote a generous refund policy

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. […]

Product

Allow users to swipe through product gallery images

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.

Product

Add urgency to product pages

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 […]

Product

Offer relevant cross-sells

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 […]

Cart

Display the image and relevant attributes for each product

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 […]

Cart

Repeat your unique selling points in the cart

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.

Cart

Allow users to save their cart for later

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 […]

Product

Use short but descriptive product titles

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 […]

Cart

Auto-update the cart when a quantity is changed

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).

Header

Highlight the current navigation path the user is in

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 […]

Checkout

Present the Guest Checkout as the prominent option

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”) […]

Cart

Show the cutoff time as a countdown timer

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.

Checkout

Match the order of credit card fields to the physical card

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 […]

Checkout

Allow shoppers to edit information directly in the Order Review step

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 […]

Checkout

Specify why the phone number is required

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 […]

Checkout

Allow customers to edit their credit card number

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 […]

LOAD 20 MORE