It’s become a web design staple - the big hero banner across the top of the page with a slideshow of photos and statements. But have you stopped to consider whether it’s right for you?
Large imagery and catchy statements are a popular choice for setting the tone for the brand and website as a whole.
Many websites choose to take this a step further and have a series of images, each with their own caption and call to action, appearing in a looped slideshow (also known as a slider or carousel).
The appeal of squeezing more information into a space without adding extra scrolling is tempting. If a picture is worth a thousand words, then surely three, or five, or even ten is worth more?
Unfortunately the data tells a different story. Here are some of the reasons why you might want to reconsider including a slideshow banner in your website:
In the same way that people have become used to banner advertisements and largely ignore them, website banners are often skipped past without reading or interacting. A 2008 study by Nielson Norman Group using eye tracking software showed that users avoid looking at website elements that resemble an ad - even if it contains exactly the information they require. Ads vy for attention with imagery, design, movement, styled typography and buttons - exactly the ingredients in your average banner slideshow.
This means that users see your banner slideshow without really looking at it - simply scrolling through to the real content of the page.
Poor click through rate
Possibly due to banner blindness, the percentage of users clicking on the first banner in a slideshow is very low - and any after that have almost no chance of being interacted with. Data gathered from the University of Notre Dame’s website showed that around 1% of users clicked on the banner slideshow, with 84% of those being on the first slide. The subsequent four slides were roughly even with roughly 4% each.
This indicates that users are skipping past the banner slideshow, so the chances of them seeing anything beyond the first banner is low - a less than ideal location for important information.
Loading time and page speed
Banner images tend to be big and impactful, but that comes at a cost. According to the HTTP Archive, the average web page size as of this time of writing is 2533kb with almost two thirds of that being for images.
Breakdown of the average bytes per web page, from HTTP Archive
Loading multiple large images that may never be seen unnecessarily adds bloat and loading time to your website, which leads to users clicking away rather than waiting for everything to load. Poor page speed can also affect search engine rankings, with Google’s algorithm taking this into account when showing results.
Accessibility and User Experience problems
Automatically animating the slideshow banners might feel like the solution to encouraging people to sit through more than the first one, but this creates problems for accessibility and user experience. Users may not have enough time to read, process the information and click before the slider moves to the next banner, a frustrating experience which is compounded for users with motor skill difficulties, low literacy or who are not native speakers. This is especially frustrating when there are no controls present to move between banners easily, rather than being at the mercy of the automatic animation.
What can you do instead?
If you want to avoid the above issues altogether, consider replacing the banner slideshow with one strong image and a unified message. One excellent image that leads users towards their goal is worth far more than multiple weak ones - and takes significantly less time to load.
But I still want a slideshow!
Still not convinced? If you really feel that your website design would benefit from a carousel, here are a few things that might help improve your results:
Don’t have too many slides
As we’ve seen, slides beyond the first one rarely get viewed, and the more slides there are the lower the likelihood that the last ones will get seen at all. If reducing this to just one feels impossible, just keep the number as low as possible.
Put important information somewhere else
If the most important information on your website is in the banner, chances are it will be missed - even if it is in the first slide. If you can include this information or call to action in the page somewhere other than the banner (or in addition to it), the chances of it being seen will increased.
Give the user control
Don’t force the user to sit through an automated slideshow - allow them to click through it as they wish using arrow controls. Remember that some users may be using the keyboard or a screen reader to navigate your website, so these controls need to be easily accessible for them too.
The data clearly shows that despite their popularity, slideshows simply don’t perform well and bring with them issues that can actually work against you. It might go against the trend, but consider alternative options for your website design that will give a great experience for your users.