#1) On mobile, 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   Amazon’s header on mobile is great inspiration: row 1: burger menu, logo, account, cart row 2: search box row 3: (scrollable) link bar The only problem I see is that it is neither sticky...

#2) On mobile, 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 in completed orders with 93% statistical signific...

#3) On desktop, opt for a header with 2 or 3 rows

On desktop, opt for a header with 2 or 3 rows. For example: Row 1 contact info “FREE SHIPPING ON ALL ORDERS” “My Account” link Country selection Row 2 logo (left and clickable) search box (middle) cart icon (right) Row 3 Mega menu with the main categories as level 1   How tall should the header be? I looked at 12 well-known brands, and the average ...

#4) List your main product categories in your menu’s level 1

One of the biggest issues I see when looking at stores (especially newer ones) is the lack of categories in the header. I recommend listing your main product categories in your menu’s level one. Show them directly in the menu (on both desktop and mobile). In my experience, you can usually fit up to 10 categories in the menu, but less is more. More than 10 items beco...

#9) Have as few menu items as possible, and make sure they fit on one screen (on mobile)

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) On desktop, opt for a Mega Menu

Show the sub-categories as columns – ideally 3 to 5). Optionally show an image for each column. If your store has a very big navigation structure (lots of menu items), you can have a “multi-dimensional” Mega Menu that lets users dive into a few levels of menu items.

#11) Place the post-sale actions above the fold in the menu or in the header

Group account-related features under the Account icon. So, for example, the Order Tracking doesn’t need to be a separate menu item.   On desktop, clicking the account can open a panel with either a few links, or just mentioning what you’ll have access to once logged in, such as: Log In Join My Account My Orders Set Up Return Wish List   I beli...

#14) Make your header sticky or 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. You can also simplify the sticky or semi-sticky header that shows up as the user is scrolling back up, and then show the full header when they’re back all the way up. For example,...

#15) On mobile, the burger menu should be easy to close

That usually means that the left swiping gesture and tapping outside of the menu panel should close it. If there is an X button, it should be big enough to be easy to click. I often see burger menus on mobile where the X icon to close it is in a totally different spot than the burger menu icon. Make sure that the X to close is in the exact same location as the burger ...

#16) 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.   It doesn’t get much better than IKEA’s layout when it comes to having a search box prominently placed in the header.

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

As soon as the user clicks/taps into the search box, a good practice is to show their previous search history, and popular searches. As they start typing, you can show suggested searches, categories, and/or products. The auto-suggestions and results should account for common misspellings. For example, if they type “dreses” it should suggest results for ...

#20) Always return search results

So if the user searches for a product you do not have in your store, suggest other related, relevant, or popular products. To be more precise, your No Results page can include some of the following components: contact information (phone number, email, chat) and other help links category suggestions based on the query alternate queries similar to the query searched fo...

#24) Place a clear & descriptive call-to-action button above the fold

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 descriptive. IKEA is a good example of what to do. To be fair, IKEA’s hero section is a carousel and each slide is focused on a specific product or offer so it’s easier to have a clearer ...

#25) Unique selling points should be specific

For example, “60 Days Return Policy”. Typically, it’s a good idea to present two or three selling points above the fold.

#26) On mobile, avoid full-page popups that interrupt the shopping experience

Make sure they take no more than 15% of the screen, and are easy to dismiss. 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. To be more precise, read Google’s original announcement about it. So there are some cases where large popups on mobile are still ...

#27) Avoid automatic carousels in your homepage’s hero section

Opt instead for user-initiated carousels, if any.   On the homepage above the fold, avoid carousels altogether. 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 blog about the Pros and Cons of a Homepage Backgroun...

#28) Feature your top categories (with images) right below the fold on the homepage

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 directly below the hero section, or at least high up on the homepage. The other section that I usua...

#29) Help visitors choose the right product

Are you helping your shoppers choose between your various product options (in the category page)?   Listed below are some ways to do so: 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 them based on their responses to a ...

#32) Add social proof and build trust

On the homepage, you can elements such as: testimonials “As Seen On” logos facebook likes number of customers number of reviews a few reviews how long you’ve been open awards   On category pages and/or product pages, you could test behavior notifications (e.g. purchase) (see #149). I recommend avoiding them on the homepage, and making sure they’...

#33) Add user-generated content (UGC)

Having UGC (user-generated content) 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, produ...

#34) Localize your store to the visitor’s country and currency by default

There are some apps to help with this: Automatic redirect: https://apps.shopify.com/geolocation-redirect ttps://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: https://apps.shopify.com/search?q=country   If the shopper’s country isn’t o...

#37) Add credit card logos, shipping logos, and/or trust badges to the footer

Typically these appear on the right side. If you also have a section with those logos on the homepage, you can optionally omit them on the homepage footer. See best practice #36. Most sites that have logos and badges put them in the footer or right above the footer.

#38) Add key contact information to the footer

Contact information can include your phone, email, and social media.

#39) Add a Live Chat to quickly answer your visitors’ questions

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 40%.  31% immediately 40% within 5 min 11% within 30 min 5% within an hour 10% within a day 1% within a week 2% as long as ...

#40) Add a chatbot to your Live Chat to give immediate responses 24/7, and product guidance

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.   Here’s an interesting study about chatbots by Drift, Salesforce and a couple...

#43) Have relevant dynamic sorting filters in the product category pages

Advice for your filters: Avoid or offer explanations for industry-specific or ambiguous filters Have visual filters if the values are visually driven Allow users to combine multiple filtering values of the same type   Examples of sorting options: Price Popularity Relevance New Ratings   IKEA’s approach to sub-categories and filters in a category p...

#44) Display these product attributes in category pages: image, title, price, ratings, and product variations

I found this article by NN/g about product pages, derived from their research across 49 ecom sites, in wihch the list must have, nice to have and fancy feature attributes that your product pages should contain:    

#45) Add urgency elements to category pages

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   TBDress is the perfect example of the implementation of urgency with their flash sales and limited quantities:...

#46) Feature products, bundles or deals at the top of category pages

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   Do you feature some of your products on your store in your category pages?   You can either add a sectio...

#47) Avoid pagination in category pages

Avoid infinity scrolling. On desktop, use a combination of lazy loading and a “Load More” button. Show about 10-30 products on page load, and then lazy-load another 10-30 products as they scroll down, until they reach 50-100 products. Then, display a “Load more” button and repeat. On mobile, show 15-30 on page load, then show a “Load More” button. When the...

#48) Have multiple high quality product images for each product

Professional high-resolution photos communicate professionalism and allow users to see details of the product. This is especially important if your products have lots of features. The product page should contain several quality photos, from different angles or featuring various features of the products. For example, if you’re selling shoes, one of the photos sho...

#49) Add zooming capability to your product image gallery

IKEA’s zooming approach on mobile is great. When you tap on the product image, it also shows the same full-screen view as on desktop, with all the images which you can easily zoom in by pinching. While that’s a great user experience, that view on mobile is particularly buggy and not fluid. So if it was better implemented, it would be near-perfect. The o...

#50) Display the price clearly above the fold in the product page (on both desktop and mobile)

If the product is discounted, show how much they save (amount and/or %), instead of only showing the regular and discounted price.

#51) Add unboxing, explainer or promo videos to your product pages

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   Giant store IKEA does NOT have product videos… Knowing the power and impact of video, that is usually something I highly recommend. I realize that ...

#52) Have two versions of product descriptions: Summary and Detailed

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.         From memory, I haven’t seen that Read More link very often at all. For example, Amazon d...

#53) Make your text sections scannable

Whether in the homepage, product page, or About page, 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 scanning the text. You can also add bullets and expandable sections.

#54) Product descriptions should generally have features and benefits, and overcome objections

Do you know your shoppers’ objections to your products? 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. And don’t waste the first few sentences of your description, that’s what your shoppers read the most! Acc...

#55) Provide Shipping & Return details in Product pages (as 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.

#57) Make it clear what is and isn’t included in your product kits

Show included accessories in a product image, or have a section with “included in kit” images. Clarify it in the description as well. List out the components in the package, along with a product image for each.   On IKEA, how are we supposed to know what each of these are without a thumbnail? (I added the red rectangles to show that there should be...

#58) Use steppers for quantity fields instead of textboxes

This is strangest quantity selector I’ve ever seen on desktop. A perfect example of what NOT to do:   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.   The chances of users buying 25 of a product are very low in most cases...

#59) Aim to have 10+ customer reviews for each product

I often recommend in the mini-teardowns and audits I do to aim to get 10+ reviews per product, which I believe is enough for shoppers to make an informed decision.   You might say… sure, but how?   Here are some ideas to help you get them: Place the Write a Review button prominently in the Reviews section Offer sweepstakes or discounts in...

#61) Interlink product variants

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 the shopping experience.

#65) Add urgency elements and feature sales on homepage

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

#67) Test removing social media share icons on the product page

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. One of the members of my Ecom Convert group mentioned that they’re getting a lot of PInterest shares from having those icons there. Removing my social media sh...

#68) Have a sticky Add to Cart bar or button in the Product page

I’m referring especially to the experience on mobile. 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.   Let’s look at how IK...

#71) Allow users to purchase temporarily out-of-stock products

I found that “Email Me” buttons or waitlists are ineffective for out-of-stock products. Allow instead users to purchase temporarily out-of-stock products, warn them, and increase the delivery time. Also prominently display product alternatives. For discontinued or deprecated products, do not allow them to buy it, and focus solely on promoting product alternatives.

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

Here’s a good example of how to offer upsells/cross-sells when adding to cart. This was extracted from a video shared by awesome dude and knowledgeable CRO expert Raphael Paulin-Daigle on his LinkedIn.   See the other two ways he talks about by watching his video on LinkedIn:   Make sure those recommendations are very relevant however. In the example...

#74) Avoid horizontal tabs in Product pages

27% of users overlook the hidden content in the inactive tabs

#77) Style your spec sheets to make scanning easier

Add horizontal and vertical shading, icons, and lines

#79) Add a ratings distribution summary with a filter on the star 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 the product, and wonder if some of the reviews are fake.

#81) When clicking “Add to Cart”, open a modal panel instead of redirecting to the Cart page

This is actually one of Google’s best practices for mobile retail. Logically though, it depends on the type of products you sell in your store. If generally your visitors only buy a single product, you should send them to the cart right away. If they’re likely to buy more than one product, let them continue shopping (don’t disrupt their experience by...

#82) If your shipping is not free, show the estimated shipping cost or a shipping estimator

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 page, before deciding whether to add a product to the cart. Adding an estimated shipping cost is particularly important for lower-priced products because shipping costs are a hi...

#83) On the Product page, either display all image thumbnails (no truncation), or reveal all thumbnails

If you reveal all thumbnails, do it in an overlay panel when users click any thumbnail (and include a truncation link).

#84) Include at least one “in scale” image per product to help shoppers get a sense of the product’s size

For example, show the product within a typical environment, or people interacting with the product. 42% of users try to estimate the product’s size from its product images.

#86) Avoid menu flickering by implementing a 300ms hover delay and/or mouse path analysis

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.

#87) Offer relevant compatible products on the Product page

Compatible products can be for example accessories and attachments.

#90) Support cross-device shopping

Users should be able to continue on another device by emailing their cart or saving it for later.

#91) Highlight items that are in the shopper’s cart

Add a label or replace the “Add to Cart” button with “View Cart”. You can also update those added items to allow shoppers to change the quantity, and/or include links to additional products or matching accessories.

#92) Dynamically update the thumbnails of products to match the variation searched for

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.

#93) Auto-apply the color filter that matches the color searched for

For example, on IKEA, looking for “black bed” should auto-select the color Black.

#94) Feature important product filters at the top of the product list

Have the featured filtering values in the filter sidebar and at the top of the product list. Don’t use banner-like graphics for featured filters Adjust the visual style of the featured filters to match their relative importance by using text links, buttons or visual thumbnails.

#96) Truncate filter values

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

#97) Avoid breaking Back button expectations

Consider these four elements as “new pages”, so that clicking the Back button will behave as expected: Overlays & lightboxes (Back button closes it) Filtering and sorting (Back button goes back to the previous filtering or sorting values) Multi-step checkouts (Back button goes back to the previous step) AJAX pagination (Back button goes back to the previous p...

#98) 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 Avoid highly graphical ads in prime content locations on the homepage (especially when it comes to competitions and discounts) Graphics that adopt the characteristics of the site (background, text colors, fonts, etc) and avoid visual boxing...

#99) Add sub-sub-category links to 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. I looked at 55 of the top ecom stores, and haven’t found a single one that is doing this. However, most of them have at least a thumbnail to illustrate the category, and several of them also added a label.

#100) Link to all depicted products in inspirational images

I don’t see much of a point to show inspiration images without links to the products they contain. 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 is sufficient. An app such as this one (if you’re on Shopify) might ...

#101) Display breadcrumbs

Display hierarchical breadcrumbs on desktop. On mobile, have a link to the parent category only. You can also add a “Back to Results” link on desktop if they come from a search.

#102) Have intermediary category pages for the first 1-2 levels of categories which introduce sub-categories

Some of your shoppers need inspiration and guidance to help them make up their mind about which sub-category they’re interested in. 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 of the intermediary c...

#103) Keep and answer all negative reviews

Highlight positive and negative reviews at the top of the reviews section Respond to negative reviews Style your responses to reviews: add indentation, a box or a different background color, and your logo 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 i...

#104) Allow users to search within their current category

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 a “Search Within” dropdown next to the search box Implementing this is espe...

#109) Limit the exit points (remove the site navigation) during the checkout process

This will reduce the likelihood of them navigating away to another page of the site and abandoning their cart. Keep minimal links in the footer, such as your FAQ, shipping & return policies, and contact info. To be clear, I don’t mean not allowing people from navigating back (with links, or worst case, simply with the back button to go back) to the cart then...

#110) Offer a guest checkout

Let’s start with 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 aba...

#111) Offer relevant upsells at checkout and after purchase

According to Neil Patel (read blog post): If you have very low conversion rates everywhere, then try to optimize that first. However, if you have a low conversion rate on your checkout page, then put it only in your product pages (or in any other part where you don’t have low conversion rates). If you have high conversion rates in one of your checkout steps, test p...

#112) Offer multiple payment methods

Typical payment methods include credit card, PayPal Google Pay, and Apple Pay. 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 offer PayPal as a payment method at the same lev...

#114) Clearly mark form fields as optional or required

Add asterisks to required fields, and “(Optional)” next to optional fields. Surprisingly only a few of the stores I looked at implement this – and it is very easy to do.

#115) Ask for the minimal amount of information in the checkout

Default visible fields: Full Name, Street Address,Zip Code, Country, Phone, Email, Credit Card #, Security Code Add links to make additional fields visible: Apartment/Suite (Address Line 2) Company Coupon Auto-detect the city and/or region based on the postal code.

#116) Make the billing address the same as the shipping address by default

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.

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

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. Allowing them to type spaces and auto-formatting their card number with spaces can increase their accuracy when typing the number and checking that they ...

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

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’s default behavior is fine because once you start typing in a form field, the placeholder text becomes a label above the text you’re typing.  Example – ...

#122) Match the length of form fields to the length of the input

To be clear, the field size should be static, not adjusted dynamically. It should simply set to match the expected input. For example, a zip code field should be shorter than a name field.

#123) In the checkout form, autocomplete the address as they start typing

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

#124) Place the country field before the state/province field

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

#125) Avoid dropdowns in forms for fields with fewer than 5 or more than 10 items

In the checkout form, if you sell to multiple countries, this will ensure that the state/province values are for the correct country. 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 o...

#126) Have an autocomplete text field for the State/Province (instead of a dropdown)

The reason for this is that it contains too many options and makes a dropdown unusable. This recommendation is if you don’t have an address finder (see best practice #123).

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

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 a better solution (an Address Finder field). From the data I found, about 11-12% of people quit because the checkout is too complex / ...

#128) Format the expiration date field the same as on the physical credit card

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.

#129) Avoid multi-column form layouts

Some exceptions: credit card details, city, state, and ZIP fields. I’m not mentioning the Name field because it should be a single Full Name field, instead of First Name and Last Name. To quote Baymard (source): Forms with multi-column designs often lead users to: omit fields, simply because they do not notice them or because they misinterpret the meaning of the mu...

#130) Test both a one-page and a multi-page checkout

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: One-page checkouts and digital wallets (Amazon Pay, Apple Pay, PayPal One Touch) ha...

#132) Use input masks for restricted fields, such as the phone number or credit card number

Input masks reduce the number of validation errors, which can reduce site abandonments. According to Baymard, 64% of sites don’t use input masks (or don’t use them correctly) to help shoppers enter their data in restricted inputs. And in the  testing they did, 89% didn’t follow formatting examples for restricted fields. You should also consider regional dif...

#133) Increase the perceived security of your checkout page

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. Encapsulate the credit card fields with a solid background color to make it look more secure than t...

#134) 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” can be in your brand store, at the post  office and/or at the UPS  location, and it should obviously be free. Present that option visually equally to the mail option.

#135) Test social login

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 use social login avoid spending time filling out a registration form....

#136) Validate the address and warn the shopper if it cannot be verified

If the address validation fails, suggest the corrected address if possible (and highlight the suggested change). Otherwise, give them the option to use or edit either the provided address or the suggested one. Note that if you’re using an Address Finder field instead of the standard address fields, you should not need an address validator. However, the address finde...

#137) Explain why your shoppers should create an account

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.

#138) Avoid email and password confirmation fields in the Account Creation form

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 number of corrections made in the Confirm Password field. If a form has an email o...

#139) Provide input suggestions for the email field in the Account Creation form

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

#140) Use low password requirements

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 standard one they generally use, they’re having difficulty ...

#141) Use a visually consistent style for the Account Dashboard cards

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.

#143) Send a relevant account registration (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, track order, find a store, etc. A warm welcoming message (and optionally a ni...

#144) Send cart abandonment emails and/or SMS

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. Cart abandonment emails are one way to convert some of those people who left their cart behind. Based on Omnisend’s research, 46.1% of people open cart abandonment ...

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

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% Apparel: +23% Health & beauty: -6.7% 3) Store name Health &...

#146) Optimize your website performance (loading speed)

Performance and conversion are inextricably connected.   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. (source)   AliExpress shar...

#147) Have an About Us page, share your story

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

#148) Optimize your store for mobile (or create a separate mobile experience)

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 Cyber Monday (7.9 billion), 54% of visitors...

#149) Test purchase notifications

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. There are different types of activities you can notify your users about, for example: purchased limited stock signup total viewed total sig...

#151) Move your non-essential pages to the footer menu

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    

#152) 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 that any text in the logo is easily readable (big enough). If your logo ...

#153) Offer free shipping or free shipping above a threshold

Extra costs too high (shipping, tax, fees) is the #1 reason for cart abandonment, according to Baymard (source) 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!

#154) Speak to your customers

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.   Below are some questions I asked to several customers in one of my last audits: How did you end up on the COMPANY? Google search? Recommended by a friend? What other options did you have as altern...

#155) Analyse your shoppers’ behavior

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.

#156) 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 for it somewhere on the site.

#159) Header icons should be easy to understand at first glance

Two out of IKEA’s three icons are confusing.   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 from standard icons for important features. For a shopping list for example, which I view ...

#160) Redirect the user to the right page when searching for Returns, Shipping, Order Tracking, and such.

On 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 of seconds it does the redirect. It would be a better user experience to direct visitors directly to the returns page as a result of the “returns...

#161) Interactive Color Swatches

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. Macy’s, alternatively, actually shows the variants under the product image. And you can get a prev...

#162) Test post-click landing pages

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   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/d...

#163) 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)  

#164) Avoid Quick Views

According to Baymard (source), Quick Views are a bad idea: 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 They recommend: Avoid Quic...

#165) Provide additional list item information on mouse hover

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.   If your niche is visually-driven (apparel, home decor,…), combine: A “cut-out” image by default...

#166) Show product attributes consistently inside of a product list

Put the same attributes in the same order. E.g. how many cups of tea a container of tea can make?   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 certain attributes listed, or conclude that ...

#167) Separate the product title from the brand or type

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)

#168) Educate your shoppers in your category pages

While this is commonly done in product descriptions and the homepage, you can also educate your visitors on the category page.   Examples: Here’s a good example of a product page which educates well Follain has a category page with a Clean Fact section.   You can copy some of the sections you have on your homepage and/or product page and include them...

#169) Offer personalized recommendations

Those can be based on their previous orders and interests. NN/g recommends prioritizing them over more generic recommendations. Put that “Recommended For You” section high up on the homepage. (source)   Specify how you came up with those personalized recommendations. A good example is Netflix:   Amazon suggests products based on products you vie...

#170) Make your popups contextual and relevant

Here’s a great example on Monetate. I opened a blog post about homepage personalization, and it showed a relevant popup about personalization.   So on your store, you could for example popup an offer relating to one of your categories when they open that category.

#171) Show a different image for each product variant

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. Example from iBambini:

#172) Make it easy to trigger the product comparison

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.   Here’s a good example of how it should be implemented to make it easy for the shopper to actually access the comp...

#173) Avoid ALL CAPS text

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.”   with these two articles as sources: https://premium.wpmudev.org/blog/styling-text-website-research/ https://blog.prototypr.i...

#174) Choose brand colors and style that attract your desired audience

Choose a font that fits your company’s personality, such as “serious” or fun” Color increases brand recognition. (source)     Some other thoughts on this topic: 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.

#175) Give navigation options on your 404 page

Similarly to how you present your main categories in the homepage’s categories section. Turn a potentially bad experience into an opportunity for branding and forwarding the customer to what they’re looking for.

#176) Give navigation options on your Empty Cart page

Similarly to how you present your main categories in the homepage’s categories section.

#177) Make your featured product carousels user-friendly

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 that is not supported &...

#178) Offer mixed bundling, not pure bundling

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.   Timothy Derdenger and Vineet Kumar from Harvard Business School  discovered that when Nintendo offered mixed bundling (the option to purchase prod...

#179) Test Web Push Notifications

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.   From a 2016 study, triggered mobile push notifications drive 2,770 percent higher conversion rates for the same number of sends as compared to batch and blast mobile push notifica...

#180) Provide a size comparison image

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.   If the comparison is a person, you can mention the height of the person.

#182) Provide easy account password recovery

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

#184) Show the number of items in their cart

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

#188) Show color swatches or thumbnails for the selection of the color variant

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 are a single color, then yo...

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

By having default values selected, it avoids user errors. 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, and clearly indicate that it needs a value. See below for some good examples.

#190) Show available payment options below the Checkout button

Reassure shoppers who may be wondering if their preferred payment method is supported.  See best practice #112 (Offer multiple payment methods) where I look at the actual payment options made available by big brand stores.

#191) Clearly indicate where users are in the checkout steps (for multi-page 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.