Desktop showing 20 of 216

#3

Header

Opt for a header with 2 or 3 rows on desktop

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

#6

Header

Show your key contact information in the header

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

#10

Header

Opt for a Mega Menu

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

#38

Footer

Add key contact information to the footer

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

#69

Product

Have a large contrasting Add to Cart button above the fold

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

#81

Cart

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

Don’t redirect to the cart This is actually one of Google’s best practices for mobile retail. If generally your visitors only buy a single product, I understand the temptation to redirect them directly to the cart. However, that breaks their expectation of an Add to Cart button.  One solution is to switch the call to […]

#83

Product

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

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

#86

Header

Avoid menu flickering

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

#88

Footer

Add links to your Return Policy and Shipping Info

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

#94

Category

Feature important product filters at the top of the product list

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

#96

Category

Truncate filter values

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

Checkout

Avoid multi-column form layouts

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

Header

Move your non-essential pages to the footer menu

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

Category

Provide additional list item information on mouse hover

Avoid pogo-sticking In Baymard’s user testing (source), showing too little information in the list made test subjects do extensive “pogo-sticking” (jumping back & forth between the list and product pages). Showing too much information leads to overwhelm.   Options on desktop If your niche is visually-driven (apparel, home decor,…), combine a ‘cut-out’ image by default, […]

Home

Make your featured product carousels user-friendly

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

LOAD 20 MORE