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

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

#69

Product

Have a large contrasting Add to Cart button above the fold

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

#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

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

#86

Header

Avoid menu flickering

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.  

#94

Category

Feature important product filters at the top of the product list

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

#96

Category

Truncate filter values

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

#99

Home

Add sub-category links

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

Checkout

Avoid multi-column form layouts

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

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

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

LOAD 20 MORE