UX Best Practice Guide for Homepages


StudioForty9 Ecommerce Best Practice Guide Part 2:

BY SHANE TAYLOR, UX DESIGN LEAD, STUDIOFORTY9

1. It’s time to take mobile-first design seriously

By 2021, mobile ecommerce sales are expected to account for 54% of total ecommerce sales*.

https://www.bigcommerce.com/blog/mobile-commerce/#why-does-mobile-commerce-matter


It’s been clear for a while that shoppers are browsing more often on mobile devices, but they will soon be converting more often on mobile than desktop too. For future proof ecommerce, we recommend approaching every design with mobile-first thinking.

1a. Consider square banner images

Landscape ratio banner images do not work well on mobile, and will need to be swapped out for a square or portrait banner. Why not create a design that includes square banners for both desktop and mobile, saving you maintenance costs and creating a cohesive experience between desktop and mobile?

1b. Your homepage should look great mobile.

It should gracefully adapt to mobile, include tap-friendly targets, be readable and a great user experience. Mobile shouldn’t be an afterthought as it may be your users first experience of your brand.

1c. Stop hiding elements on mobile.

The mobile experience should be the fully experience. It’s bad practice to hide elements on mobile because they were designed for desktop and simply don’t work on mobile. Always approach a problem with a mobile-first solution.

1d. Mobile-first design helps with clarity and effeciency.

It’s easy to add superfluous elements to a homepage when designing for desktop because we have so much space to work with. However, when designing for mobile-first, we are more likely to only include essential elements that work harder. This can translate into a more effective, harder working homepage.


2. Header best practices

What are the most important elements to include in a homepage header?

Search should always jump out

Search should be the most prominent element in your header. Users are 16x more likely to convert if they use your search.

If you have an established bricks & mortar presence, include locations & contact details

If you already have stores, then it’s likely that users are visiting your site to find out about locations or opening hours. Make it easy for them by including that information in the header.

Your logo isn’t that important

Your logo won’t increase conversions, but a large prominent search and clear navigation pathways will. Therefore your logo should not be over dominant. If it’s subdued, that’s fine because your brand should be communicated through other elements like colour and typography anyway.

Use colour sparingly to draw user attention

There are only 3 elements in the header that users should immediately draw their attention to, and we can do this by using colour selectively.


3. Carousels Don’t Work

In independant testing, patterns show that Homepage Carousels/Slideshows are outperformed by static images.

Carousels are bad for Site Speed

Images within your homepage carousel are usually the largest images on your site. Their large file sizes have a huge impact on how quickly your homepage will load, and delay of just 100 milliseconds can reduce conversions by 7%

Carousels are bad for mobile design

Your primary objective is to get users to scroll down through your page on mobile. Breaking that pattern by introducing horizontal scrolling is a poor idea.

Carousels are a waste of resources

How many images have your designers created to work within your carousels? How many of them have actually been seen by end users? Isn’t that a waste of design resources? It’s much better to use those resources on banners that will always be seen by users.

Carousel usefulness

Carousels aren’t just for providing product pathways. They are also useful in inferring your value proposition and the type of shop that you are. However, static images are just as effective at that.


4. Add a category section with images

Your homepage’s first objective is to get users off your homepage. So by including a category section, you can provide plenty of product pathways to do just that.

Homepage Category Links for Art & Hobby

How to approach a hompage category section

3 priorities for a category section are: It should be visually attractive, easily navigable and easy to maintain.

Fig 1. This approach includes 3 static banners, which makes the section visually exciting and establishes a hierarchy. Below the banners it includes category links which include product images- this is very easy to maintain and can be controlled dynamically.


5. Include a whole section for sale, rather than just 1 banner

64% of shoppers wait for a product to go on sale before buying. It makes sense to promote sales within it’s own fleshed-out section on a homepage, rather than 1 banner.

Sale Banners for each department (John Lewis)

How to approach a homepage sale section

Fig 1. This approach from John Lewis shows how they combine a category section with a sales section. It’s not as visually exciting but it’s effective at showing percentage discounts up front which is huge incentive for shoppers to browse those categories.


6. Consider how you include USPs

You go to a lot of expense to include free shipping so it’s very important that your customers know about it.

Fig 1 & 2 Show USPs sections can be designed

How to approach USPs on the homepage

Fig 1 shows the standard approach, which is to include USPs just beneath the menu on every page of the site. This is a good area to do that. However, it can lead to it becoming a blindspot for users so it’s also recommended that we use a section on the homepage to highlight USPs in a more visually interesting manner, as shown in Fig 2.

Important Note: Include links to delivery & returns pages if these are included in your USPs


7. Include Popular & Latest Products

Users are likely to want the same product when they visit your site. It makes sense to show it to them up front.

A Nosto Powered Product Panel

How to approach a ‘popular’ or ‘latest’ products section

It’s common practice to include these sections by using a carousel. We don’t recommend that, but it’s probably the most valid excuse for using such a feature on your site.

We recommend, as shown above, a simply columned list with large beautiful images and clear product details. Products should extend to a 2nd or third row if you need to show as many as 8 or 12.


8. The importance of high quality images

Users scan sites- they don’t read them in detail. Therefore it’s important to include high quality images that will attract user attention as they scroll through your homepage.

High Quality Product Images

How to find high quality images.

We recommend using product marketing images directly from the manufacturer, in the best quality they can provide. Then hiring designers to work with those images to present them in the best fashion on your homepage.

High quality images can also be sourced from popular stock photography sites like istockphoto.com, shutterstock.com and high quality royalty free images can be sourced from sites like unsplash.com and freepik.com


9. Include testimonials

Testimonials are very effective at increasing shopper confidence- which is very important for first time visitors.

Testimonial Widget from Trustpilot.com

The Trustpilot Widget > Custom Testimonial

Section

We recommend trustpilot as it’s far more credible to users than a custom testimonial section (which users tend to suspect as being made up of fake testimonials)


10. Add brands to enhance credibility

If users see reputable brands on your homepage, they will associate your shop with those brands.

A ‘Popular Brands’ section on Carrolls Irish Gifts

How to approach a brands section on the homepage

Carousels are quite effective at this, but we again recommend against them, as they essentially hide most of the brands you want your users to see.

Our recommended approach is to include a simple columned list of logos, which then link to the respective brand landing pages.


11. Don’t overwhelm

It’s easy to add too much to a homepage, but care must be taken to find balance and not overwhelm your users.

Decision Paralysis

If people are presented with too many options in life, it can sometimes be overwhelming and result in it being much harder to make a decision. This is called decision paralysis and it applies very well to ecommerce homepages.

With that in mind, please take care in implenting any changes on your homepage as to not overwhelm the user with too many choices.

Reduce visual clutter where possible, don’t include too many product pathways and and present call to actions in a clear, attention grabbing manner.


What Next?

Obviously there are many more ways to introduce a positive user experience to the product detail page, but we hope this list will get you started. If you’d like to find out more about UX Design relating to Ecommerce, or if you wish to hire us to work on an Ecommerce project for you, give us a call on +353 (0) 21 239 2349 or get in touch with us via our contact page.

That concludes our part 2 of our UX Best Practice Guide. Part 3 will cover UX improvements to the Product Listing Page.

Shane Taylor
Shane Taylor |