Demac Media Demac Media Brand Demac Media Brand

Blog

Subscribe

Designing Your Home Page Without a Rotating Banner

Timer Icon 4 Mins

Design & User Experience, eCommerce

There’s a lot of content on the web about why we should ditch homepage sliders, many backing up their position with data from UX testing siting reasons such as:

All of this can result in the user feeling overwhelmed with the amount of information being presented while only having a few seconds to take in each message on the slide. This wealth of information sends the customer a message that is far from direct and clear. While carousels tend to be chosen to make internal teams happy because a wealth of content can be on the homepage and above the fold, we should be giving priority to the users experience. As soon as the home page loads your user is looking for the most relevant content to help them complete their task such as find a white shirt under $30, check out a collection of chunky necklaces, or view the latest line of shoes from this season. If the info they need is not in the first spot on the carousel, chances are they aren’t going to wait 5+ seconds for the next to load, they will look for other content that doesn’t make them work for their answer, such as scrolling down or clicking on links in the nav.

Identify Important Content

Without a slider you will be forced to narrow down and identify the most important content and determine it’s display order. Ensure the navigation is easy to use by keeping the design simple and clean. Users like to scroll and naturally do it with the emergence of many one page scrolling sites and blog style content, but naturally it makes sense to keep the most important content above the fold as it’s the first thing users will see.

Aritzia

Aritzia is a great example of a fully responsive site that gives a great experience no matter which device it’s being viewed on.

How to optimize above the fold

Using large images that take up your whole screen really sets the mood for what’s to come. You know exactly what you’re going to get when you scroll down such as what product line they are featuring at the moment.

Aritzia

To keep content organized, create a collage. Aritzia uses a more organic collage in ” The Summer Dress Guide” block, and a traditional structured grid  for “The Latest” section at the bottom. Sliders kept all of your images in one place so now that they are spread out, make sure they don’t appear cluttered. Aritzia

When using white and coloured backgrounds or images to create separation, set a visual rhythm to allow the user to put chunks of information together.

This will make sure that as the user keeps scrolling, they never feel lost and are easily able to navigate the site.

Innovative Examples of Retailers Using Sliders

Although many sites are still using sliders, retailers are starting to update their approach. and heres a list of great ones to prove it and take inspiration from. They offer lots of variety in design and they range in industry including retail, food, furniture and technology.

Retail: H&M

H&M

Food & Beverage: Starbucks 

starbucks

Furniture: Urban Barn

urbanbarn

Technology: Sony Store

sony

If you HAVE to use a slider here are a few tips:

Joe Fresh and Aritzia

Subscribe to the Blog

Stay updated with 20,000+ eCommerce leaders in our community

Sign Up

Let’s talk about your 10X return

Icon/Social/Phone Contact us for pricing information