We wrote a post over a year ago about alternatives to using a homepage carousel on your website. To date, it’s been the most popular post on the Mightybytes blog, and with good reason. In nearly every client kickoff meeting we have, the subject of a homepage carousel comes up. While by now, many of our clients know a carousel isn’t the best way to deal with the issue of homepage governance, it’s hard to think of design alternatives.
What is a Website Carousel?
A carousel refers to the section on a website homepage that contains rotating content. Sometimes the rotation is automatic (also why a carousel is sometimes called a “slider”), sometimes the user can control the scrolling content by clicking through to the next section. Homepage carousels offer a great visual way of displaying lots of different content on the home page of a website. The trouble is, no one clicks on them. Statistics say that fewer than 1% of website visitors click on carousels. In our experience, we see rates of about 2-5% on client websites that featurea carousel.
Ahomepage carousel is the web design equivalent of putting the couch in front of the TV. No one wants to do it, everyone knows it stymies conversation, and yet we all find ourselves without a creative alternative.
Our last post offered some wireframe options, but we thought we’d put together some design examples from real-life websites, along with some standard options to consider the next time you decide not to use a carousel.
Minimize Above the Fold Content
We know now that people scroll. So it’s not necessary to cram every last bit of content above the fold. Use that knowledgeto tell a story that requires users to scroll down the page for more information, as with this example from Lighthouse Brewing Co. Note that this website also provides users the option to use the top navigation bar to move around the site.
You can use a header image, but it doesn’t have to be clickable. If youincorporate a larger image into the background, it gives you site context while allowing space for more information to be displayed in a small amount of above-the-fold space.
Commit to a Single Call to Action
You can create a powerful message if you can get everyone on your team to agree to a single call to action that will appear above the fold. The other benefit of a simple homepage like this, one without a main image and extra text, is that it’s sustainable.
Use Two Calls to Action
There are beautiful ways you can incorporate two important calls to action on a single homepage. This example from Form & Thread uses ghost buttons. Including two distinct calls to action can solve an important homepage governance issue without creating clutter or confusion. It’s still clear to the visitor where he or she will end up after clicking on either option.
Use a Grid
A grid is a tricky solution to the issue of homepage governance. Why is it tricky?Because they can be done well, as is the case here with DBLG, or they can be done terribly, essentially turning your homepage into a confusing version of Pinterest with no content hierarchy. If you’re interested in using a grid for your homepage, be sure that main navigation and important calls to action remain clear.
If You’re Going to Use a Carousel, Do it Right
In some cases there’s just no way around using a carousel. But if you must use one, try a full-width one with a clear call to action in each box. It helps if each carousel slide is designed to fit in with the website’s overall design, as is the case here with Toca Boca.
The more-is-more mindset when it comes to how many messages to deliver to a website visitor hasn't proven effective. So one option to replace the carousel is to choose a specific and a focused piece of content that is most likely to resonate with the target audience.
6 Design Alternatives to Your Homepage Carousel with Examples
Hero image with strong CTA. This is the go-to for many websites, and for good reason: it looks sharp, is easy to make mobile-friendly, and it converts well. ...
The more-is-more mindset when it comes to how many messages to deliver to a website visitor hasn't proven effective. So one option to replace the carousel is to choose a specific and a focused piece of content that is most likely to resonate with the target audience.
According to usability recommendations from the Nielsen Norman Group, auto-rotating carousels are a conversion killer. Accordions and carousels should show a new panel only when users ask for it. Otherwise, it should stand still and let users read the information in peace, without having the rug yanked from under them.
Why Are Carousels Ineffective? Low Engagement: Most visitors ignore them. Poor Usability: Difficult to navigate, especially on mobile. Relevancy Issues: Often not relevant to the user's needs.
Instagram Carousels have the highest engagement rate of all post types — but they account for only 19% of Instagram content. Although that percentage is up from 3-4% in 2017, Instagram Carousels are still underused, especially considering how well they perform compared with other types of content.
For example, carousels can slow pages down which can hurt SEO. They also don't always transition well for the mobile consumer, which is enough for some web designers to not even give them a chance. Additionally, carousels can make some users feel like they don't have control of the experience.
In terms of accessibility, carousels are not ideal and pose some issues. To a visually impaired person, they are rapidly changing images which are controlled by an often arbitrary or non-existent set of buttons.
Content goes unread because readers are not clicking through the whole slider and will skim through the carousel content. Confuse people by offering multiple items at the same time. Easily ignored as being misinterpreted as an ad banner. Slow your site and negatively impact SEO and conversion rate with site visitors.
Both terms identify the same meaning in context, as they display images, videos, or other content as an automatic or manual slideshow. However, sliders can display one slide at a time, whereas carousels allow users to see multiple slides at once.
1) Sliders are bad for web accessibility. 2) Most sliders require too much optimization if you want them to be Accessibility Complaint. 3) 4) A slider will significantly increase page load times and speed.
They are next to useless for users and often 'skipped' because they look like advertisem*nts. Hence, they are a good technique for getting useless information on a homepage… Use them to put content that users will ignore on your homepage. Or, if you prefer, don't use them.
Steppers or increment/decrement buttons: Steppers or buttons that increment or decrement values in set increments can be used as an alternative to sliders. This is useful for users who prefer incremental changes or for cases where a continuous range is not necessary.
For advanced carousel optimization, the advice is to load the first slide statically, then gradually improve it to include navigation controls and additional content. This technique is more applicable to environments where you have a prolonged attention from a user, which allows time to load additional content.
Learn more about the different styles of recommendation boxes. Carousel style is good for the product pages, collection pages and cart pages. This is the slider-like recommendation box. The Grid style looks like a product list, like a collection page.
Progress dots aren't a particularly effective way to entice users to click through the carousel. They don't communicate much; definitely not what each dot represents, nor what users should be expecting while sliding through the carousel.
A carousal is a drunken feast.A carousel is the ride where the horses go in a circle and go up and down and children ride it. Carousal describes a rowdy or drunken gathering or party (pronounced cah-ROWZ-ul). Carousel is another name for a merry-go-round (pronounced CAHR-oh-SELL).
A slider slides the images horizontally or vertically (usually horizontally) usually with a momentum effect. A carousel rotates the images radially and in a 3D feel by using distance and depth of field.
However, slideshow ads are essentially video ads that compile 2-15 images, whereas carousel ads can showcase up to 10 images or videos through interactive swiping. The key difference between the two ad types lies in user experience.
Both terms identify the same meaning in context, as they display images, videos, or other content as an automatic or manual slideshow. However, sliders can display one slide at a time, whereas carousels allow users to see multiple slides at once.
Hobby: Gunsmithing, Embroidery, Parkour, Kitesurfing, Rock climbing, Sand art, Beekeeping
Introduction: My name is Roderick King, I am a cute, splendid, excited, perfect, gentle, funny, vivacious person who loves writing and wants to share my knowledge and understanding with you.
We notice you're using an ad blocker
Without advertising income, we can't keep making this site awesome for you.
