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

Your customers will want to contact you. You are some person on the internet who wants their credit card information and their money. They’ll want to know if you’re real. Having clearly displayed contact information is one of the main methods you can use to boost your trust rating. In fact, 51% of your customers […]

An “Add to Cart” button is the most important button on the product page. It needs to be highly visible above the fold. It tells a customer exactly what to do after viewing the product images, reading the product descriptions and reviews, and seeing the product price.   How to design a great Add to […]

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

Images are extremely important to customers when evaluating a product. They are the most utilized element of the product page. A lot of products require multiple images to showcase them from all angles and provide customers with enough information to make a decision. This necessitates the product gallery which customers can scroll through and view […]

Menu flickering is when a user moves the mouse towards a sub-category, and instead activates another parent category, causing the hover activated drop-down to change. Let’s take the example of a home furnishings retailer. They have the following categories:  Furniture Rugs Decor Kitchen Outdoor   Furniture has the following subcategories and sub-sub-categories: Living Room Furniture […]

According to Baymard, high extra costs (shipping, fees, taxes etc) are responsible for about half of all cart abandonments. Slow deliveries are responsible for another 19% while unsatisfactory returns policies are the reason behind 11% of cart abandonments. Shipping speeds and rates will always make up a huge part of the decision-making process for anyone […]

While a store that sells one or two products doesn’t need them, filters are indispensable to any store with a large variety of products. They are necessary in helping customers narrow down their selections from a wide pool of options.  A lack of filters would either cause choice paralysis or make your store unnavigable. An […]

Products can have a lot of filters. Let’s take refrigerators as examples. They can be filtered by: Price Brand  Size (length, width, height) Number of doors Internal volume Weight (when empty) Color Power rating Presence of smart features (internet connectivity, artificial intelligence software etc) Minimum achievable temperature   A filter like power rating or size […]

Forms are an essential data collection tool at sign up and checkout. They’re also places where a customer does the most work: filling in countless fields. That means it’s incredibly important to make form-filling as easy as possible. There are generally two kinds of forms: Single column forms Multi-column forms   A single column form […]

Your site’s web pages are generally divided into three parts: The header –  It contains your logo, site navigation, contact information, search bar, and links to support pages such as the account page. The body – This is home to the main content of your website; mostly product, category, cart, checkout, and support pages The […]

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

Carousels come in handy when you need to promote certain products on your homepage. They save a lot of space as they allow you to fit more items in a relatively small area that can be scrolled horizontally.  To get the most out of your homepage carousels, you’ll need to design them with a focus […]

Filters are an indispensable part of the online shopping experience. A good selection of filters can narrow down the two thousand dresses in a clothing store to the 14 yellow size ten sundresses costing less than $50 that you’re interested in. But just having filters and applying them isn’t enough for a great user experience. […]