Contents
- Introduction
- Why do we use them?
- What is the purpose of your website?
- Why shouldn’t you use them?
- What should you do instead?
Introduction
When I first started in web design and development, the go to approach for designing homepages for our customers was to organise the content in the following pattern:
- Header/Navigation bar
- Hero carousel with various offers and USPs
- Intro content
- Other relevant content and social proof
- Footer
Over time I, personally, have come to the opinion that that second part is one of the worst User Experience decisions you can make for your website and getting those all important conversions. I hope in this article to dive into why I think this and what you should be doing instead… in my humble opinion.
Why do we use them?
When your client asks that their website showcases all the big and wonderful features their service or product, reaching for a hero carousel may seem like the obvious choice. A series of eye catching images (or videos), each with an attention grabbing tag line and a link leading the user to a product or service. Here you can lead your user down a sales funnel which will inevitably lead to conversions and sales, right?
Anyone in the web design game for long enough can relate to the above scenario I am sure. In fact I wouldn’t blame most newcomers to UI or UX design to think that this is a perfectly reasonable solution.
What is the purpose of your website?
Before I dive into why hero carousels are the devil and you will burn for eternity bad for user experience and ultimately your website, I want to take a step back and want you to think about the purpose of your website.
Unless users know the brand, have visited the site before and know exactly what they are looking for, when they land on your homepage from a google search they are likely going to want to know who you are and what you do. Not be bombarded with your unique selling points and various products. Your homepage content can be laid out and organised to funnel your users to where you want them to go. But, in my opinion, if you cannot tell them who you are and what you do when they first land on your site, then you may lose them before they have a chance to scroll down.
I cannot stress this enough, but before diving into designing your website. You should try to gather as much content and research about your brand as possible. Then organise this content in some kind of diagram or other format which helps you visualise how you expect/want users to navigate your site.
Now back to hero carousels…
Why shouldn’t you use them?
There are a a number of reasons why I think hero carousels make for poor UX design. But here are some of the main points:
Banner blindness
There is a study conducted by the Nielsen Norman Group which came to the conclusion that users “users never look at anything that looks like an advertisement, whether or not it’s actually an ad.”
It is a very in depth study that goes into a lot of detail, but the TLDR; is that people have short attention spans, and all the UI elements all on a web page are fighting for some of that attention. When people are searching the internet for a solution to their problem, be it a product or service, people have learned to pay attention to to useful elements on a webpage, such as navigation bars, search boxes.
The Nielsen Norman Group conducted a usability test where users frequently failed a given task, even when the target was the first item in the carousel/slider. The task was to determine if there was an offer available on a website that had a discount on the first carousel item. A significant number of users did not notice the available discount and ultimately failed the task.
Accessibility concerns
Carousels, particularly the automatic ones, are known to pose significant accessibility challenges. Users with limited motor skills or learning disabilities, such as dyslexia, may find it particularly challenging to process the information or interact with the slides before they transition to the next. This rapid transition can be overwhelming, causing users to miss out on important information, fail to click on desired links, or even abandon the interaction prematurely. This highlights the potential accessibility barriers that carousels can inadvertently create, particularly for users with specific needs.
Out of sight, out of mind
Consider a scenario where you have a carousel that features three slides. Each of these slides presents equally critical information about your services, special offers, or updates that you wish to communicate to your users. Now, the speed at which your slider transitions from one slide to another can greatly influence what your site visitors see. If the transition speed is too fast, a large portion of your visitors might miss out on some of that valuable content.
But you might argue, can’t the visitors just remain at the top of the page and manually scroll through each slide? This expectation is unrealistic for the average web user. In fact, it has been found that the average web user’s attention span is shorter than that of a goldfish, which is about 9 seconds.
This essentially means that by the time you expect your users to peruse your well-crafted hero carousel, they are likely to have lost interest. Instead of patiently flicking through the carousel, users might just opt to move on to the next website in their search results. It’s a harsh reality, but it’s one that highlights the importance of designing and planning your website content with the users’ behaviour and preferences in mind.
What should you do instead?
The hero section on your homepage or any landing page is crucial in the initial interaction between your brand and your users. It’s where users get introduced to your brand identity and what you offer. Given the brief attention span of internet users, this introduction needs to be captivating and succinct.
Consider a law firm’s website with a unique specialization. The hero section is a great opportunity to reassure overwhelmed users that they’ve landed on the right site. This assurance can come from an engaging tagline that captures the brand’s essence, followed by a short paragraph about the firm’s identity and services.
This section is not just an introduction, but an invitation - a call to engage with the brand, explore its offerings, and trust its expertise.
More broadly, understanding the purpose of your website is critical. This understanding should guide all aspects of your site’s design, including the hero section, which should reinforce your site’s purpose and align with other site elements to communicate your brand’s message.
To achieve this, your hero section should have a clear and compelling call to action. This guides users towards the intended journey on your site, enhancing user experience. Thoughtful design like this boosts user engagement, encourages exploration, and ultimately leads to a higher conversion rate.