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

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

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

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

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

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

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

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

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.  

Add those links to your footer.

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

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

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

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

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

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

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

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