User Experience / The Ecommerce Homepage UX Checklist – 19 Points For Success

The Ecommerce Homepage UX Checklist – 19 Points For Success

Andy Thorne
image of hands on a keyboard and clipboard

Not sure where to start when it comes to improving your ecommerce site homepage? Or perhaps you’ve optimised the homepage and want to check you haven’t missed something crucial? Our handy The Ecommerce Homepage UX Checklist has 19 key points to make sure your Ecommerce Homepage is optimised to improve your website’s user experience.

Navigation

A clear navigation is key to Ecommerce Homepage UX, such as this example from Vispring

Your navigation should be clear to navigate users to the products they’re looking for with minimal difficulty.

Link the logo to the homepage

Users have come to expect the logo to have a link to the homepage. This also frees up space in the navigation as you don’t need a home link in the navigation and a logo linked to the homepage.

Don’t use site-specific language

A good example of Ecommerce Homepage UX is John Lewis, who use product categories

John Lewis use descriptive yet clear language for their product categories and sub-categories

Avoid confusing customers with language that is specific to your site or brand. It might feel ‘on-brand’ to your company, but to users who are used to a certain generic language, it will only cause confusion and they are unlikely to stick around long enough to find what they are looking for. It is better for your business to use clear, recognisable language to help guide customers around your site and let your branding shine through in other areas such as imagery, blogs and the overall design of your site.

Show popular filters as sub-categories

Help customers find what they want in fewer clicks by showing pre-filtered product category pages. Rather than typing out a specific search for a product, showing popular filters as sub-categories makes it easier for users to find the product they want. The sub-category may also pull more items than a specific search so may increase the likelihood of upsells and increase the average order value. 

Show important contact information

Make it easy for customers to get in touch in the event that they have any questions or issues by including phone and email links in a bar above the navigation

Show categories such as ‘New In’ and ‘Sale’ as their own categories

Make it easier for customers to find all new products or all current deals in their own categories, rather than as a filter within a product category. This saves the user time and clicks and may encourage them ultimately to buy more products.

Search

Mano Mano's search bar offers auto-complete options

Avoid frustrated customers by offering auto-complete options, and not returning empty results pages.

Make the search bar clear and easy to see

The full search bar should be accessible at all times, rather than including just the search icon. This will reduce friction as it makes it more obvious to customers where they can search for products.

Include autocomplete with product suggestions and corrections for errors

Avoid frustrated customers by offering auto-corrections and predictions of the top related products whilst users are searching for products so they don’t need to type the full word.

Show recent searches

Make it easier for customers to go back to items that they’ve recently searched for. When a user clicks on the search bar to start typing their search entry, you can show their most recent searches to reduce the number of clicks they need to make to reach a product page.

Avoid empty results pages

If a search didn’t return any results, show recommendations of products, contact details or a link to chat, or a suggestion to review the spelling on the search, rather than an error message to help customers get to the page they’re looking for.

Don’t make the search case sensitive

Don’t withhold information from customers by being case sensitive. Whilst mobile devices often auto-capitalise, desktop devices don’t as often and when in a hurry, customers may forget to use different cases. Make sure the search results don’t filter information based on cases to ensure all customers can see all the results relevant to their search

Hero

A clear CTA is key for Ecommerce Homepage UX, such as this example from Sketch

Make your headline clear and show your most important information or CTA in the hero

Show the main CTA or most important piece of information above the fold

The purpose of the homepage is to encourage visitors to explore other areas of the site. If you offer a single product, make sure the CTA is clear. If you offer more than one, make sure that the most important CTA is obvious. 

Remove auto rotating carousels and sliders

Rotating carousels and sliders may be popular options for homepage hero sections, but they are very poor for UX. Users can become ‘banner blind’ and don’t notice any of the information on the carousel. Oftentimes, it is only the first slide in the carousel that even gets clicked, in which case, it would be better to remove the slider and use a single image instead.

Make your headline clear

Don’t let it be vague, don’t use your company’s tagline as the headline and never use  name of your product or service as the headline. State what you offer, make sure the language is appropriate to your target audience and focus on the benefit to the customer, this isn’t about you, it’s about the ideal visitor to your website.

Use engaging imagery

Inspire visitors with the products and/or services you sell, increase trust of your products. People process images 60,000 times faster than text so imagery plays a more vital role than text, and is especially important when it comes to first impressions. Avoid using a stock image as your hero image unless it is a perfect representation of your products. Instead, have professional photographs taken as they will be unique to you and your website. 

Include social proof

Many sites leave social proof to the bottom of the page, but including it in the hero provides the opportunity to create trust in your products/brand almost instantly. There are many ways to use social proof, from using star ratings (only show if it is above 4.5/5 stars), a great testimonial or review from a customer, or show well-known brands who have used your products.

Bonus Ecommerce Homepage UX Tips

Example of social proof and reviews on a homepage, part of Ecommerce Homepage UX

Creating social proof from the very beginning is crucial when it comes to creating trust of your brand

Include reviews for social proof

Creating social proof from the very beginning is crucial when it comes to creating trust of your brand, and you can easily achieve it by including social proof in the form of ratings, reviews and testimonials on the homepage. Encourage existing customers to leave reviews of your products to give potential new customers honest feedback perspectives

Show personalised product recommendations

Encourage customers to make purchases by showing best selling products, recommendations based on what others customers have bought and featured products.

Feature the range of products you offer

You don’t need to show every single product you sell, but instead offer a snapshot of the types of products you sell or product categories to give potential customers an idea of what they can buy from you.

Accessibility

Accessibility is becoming ever important on websites – is the contrast between text colour and background colour strong enough? Have you made sure that no text is justified? Do images have alt text for screen readers?

Your Thoughts On Ecommerce Homepage UX

So there you have it – our Ecommerce Homepage UX checklist to help your eCommerce store succeed.

Before you put it into action, we want to hear from you.

What are your thoughts on homepage user experience? What has your experience been when it comes to Ecommerce Homepage UX?

We’d love to hear from you in the comments below.