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:
- Click through rates are around 1% for any slider after the first
- Sliders increase load times
- Users report finding them distracting and mistake their flashy nature for ads
- Images rotate too fast making it hard to click on the content the user is intending to
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 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
- Use Large Images
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.
- Create A Collage of Images
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. 
- Set A Visual Rhythm
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.
- Using a Static Navigation bar
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
Food & Beverage: Starbucks
Furniture: Urban Barn
Technology: Sony Store
If you HAVE to use a slider here are a few tips:
- Turn off auto rotation – giving the user control of the content
- Keep navigation elements present at all times (previous/next arrows)
- Content should be of similar nature
- Use compelling copy and high quality images
- Show a bit of the next or previous image to make it obvious there is more to come.
- Keep slides to 3 or 4 max
- Instead of arrows, use a legend to give more info to each slide, instead of just a small dot to click on you’ve got a large clickable area and copy that tells you exactly what you are going to get.
The post Designing Your Home Page Without a Rotating Banner appeared first on Demac Media.
