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

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

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

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

.

.

.

Take the time to actually test your store on various mobile devices.

Of course, it’s OK if some of those menu items are expandable and that when expanded the menu is longer than one screen.

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.

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

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

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

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.

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

Filters are important for stores with over about 50 products.

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

Other relevant content includes blog posts, other pages, etc.

Other relevant content includes blog posts, other pages, etc.

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

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

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

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

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

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

User-controlled carousels are usually good for this.

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

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

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

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.

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

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

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 also a great place to provide a discount and capture their email. One ...

Filters are important for stores with over about 50 products.   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  ...

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:    

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

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

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

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

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

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

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

That way, shoppers can quickly get the essence of what the product is about, and read more if they want to.   I’d recommend: breaking down the detailed product information into sections if it is long putting product specs into a separate section, in table format (see best practices #75, #76, #77, #78)   I like how IKEA has done it, with a Read ...

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.

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

Make it easy for your shoppers to find that information. It is crucial for your shoppers to make their purchasing decision.

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

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

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

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.

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.

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

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

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

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

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

Add horizontal and vertical shading, icons, and lines

Avoid having multiple specs per row

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.

Not just in the site-wide banner or header.

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

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

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

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.

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

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.

Compatible products can be for example accessories and attachments.

Auto-update the cart as soon as it’s changed.

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

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.

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

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

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.

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

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

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

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.

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

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.

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

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

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

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

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

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

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

Show a checkmark after each correct input

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.

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.

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.

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

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

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.

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.

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

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

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

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

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.

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

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

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

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

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.

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

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

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.

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

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

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

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.

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

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

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

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

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.

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

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

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

There’s less space on mobile. The ideal solution is to have a logo already so simple that it is just as clear on desktop and mobile. But perhaps that’s not your case. An easy solution to that is to simplify it. If on desktop it contains a slogan underneath, remove it on mobile. Make sure that any text in the logo is easily readable (big enough). If your logo ...

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!

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

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.

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.

(source)

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

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

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

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

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)  

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

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

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

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)

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

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

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.

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:

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

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

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.

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.

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

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

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

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

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.

(source)

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

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

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

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.

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.

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.

This is what I recommend: If you sell online only, it is not as important to put your physical address but it can build some trust If you have a physical retail store, add the physical address of your store(s). Show a professional email address, such as [email protected] In order to reduce the amount of spam you get, you should either put the email as an image, or ...

If your demographics are young(ish), then Live Chat is an absolute must. As for putting an email in the header, as you can see in the examples below, only Crutchfield has that option, but it is in a side panel triggered by clicking a menu item or button in the header. So the email address isn’t visible. I have seen this on some stores I looked at, but it is not ...