6 Design Alternatives to Avoid Slideshows

Slideshows, sliders, carousels: no matter what you call them, in terms of web design they are just evil. Do a quick Google search and you will see that most frontend developers and UX/UI designers can agree on this point and have been talking about it for years. But why do we still constantly see them? Part of the issue is that slideshows, especially in the hero region, are so ubiquitous that many clients see them as necessary and keep asking for them. They have essentially become a “home page standard.”

A design element that is so prevalent can’t be all that bad, right? Wrong. The next time a client asks for a slideshow, resist the temptation to go off on why they will kill a website, and propose one of these alternatives.

So Why Are Slideshows Evil?

Okay, so slideshows are are not inherently evil, but they do not really accomplish the goals that clients believe they will. At best, they are expensive, overlooked sections of your site. At worst, they can actually hurt conversion rates and damage the user experience. There are many articles that address why slideshows do more harm than good, but here is a quick overview:

• Slideshows have poor accessibility - most slideshows are lacking in their support for users with accessibility issues, including users with language or motor skill issues.
• Slideshows are a blindspot - multiple eye-tracking tests show that slideshows get little attention by site users. Users just ‘gloss-over’ these very important sections of your site.
• Slideshows induce apathy - often a user thinks that the slideshow is not relevant to them so they just ignore it.
• Slideshows are distracting - if users do look at the slideshows they often find them visually annoying and this can distract from important content.
• Slideshows are heavy - slideshows do not always work well on mobile devices and they can even slow down your site due to the amount of bandwidth they use.

6 Alternatives to Slideshows (+ 1 Last Resort)

Option 1: Stand-Alone Image

Instead of a slideshow, why not choose a perfect image that represents your brand? A single image, with or without overlay text, can have a powerful and direct impact on your users. With a single image, your message is very clear. If you need to change that message for any reason, just change the image or overlay text.

Option 2: Stand-alone Image with CTA 

You can take the stand-alone image one step further by providing a call to action (CTA) button/link to further engage your users. This single action is direct and obvious to your users and can help with the overall user experience and conversion rates.

Examples:
Georgia Gov 
Butler University

Option 3: Image Grids

Instead of having one image, why not display an image grid? Using an image grid allows you to include more visuals without adding in a slideshow. Making these images links or adding CTA buttons within each section will further enhance the user experience with your site. There are infinite image grid layout possibilities, below are a few examples of possible layouts.

Example: SB Nation Pinstripe Alley 

Example: University of Georgia Center for Continuing Education

Example: Mike Kus  

Option 4: Engaging Video, Animated Hero 

There are times where an image alone cannot covey your message. In these cases, adding an engaging video or animated hero to your site is a great alternative to a slideshow. It is important not to just add a video/animated hero just for the coolness factor, but because it brings some depth or voice that a single image cannot. Just be sure to have video transcripts or other alternative methods of viewing your video/animation content for users with screen readers.

Examples:
Travelport
Species in Pieces

Option 5: Focused Landing Pages for Different User Types 

Instead of relying on a slideshow to convey all the information you want to highlight on your site, why not narrow the focus a bit and personalize the experience? With focused landing pages when a user comes to your site, they are presented with information that is pertinent to them and not overloaded with all of the information. This is a great way to engage your users without using a slideshow.

 

Examples:
Muck Rack 
Code Academy

Option 6: Streamlined Design

Why not take all traditional design elements out of the hero region and simply present a streamlined design? This option might be too drastic a move for most clients, but this direct approach is great for user experience. With a streamlined design, there is less to distract a user from accomplishing the site goals you set.

Examples:
Code & Theory
Intuition

Last Resort Option: Accessible Slideshows 

If you simply cannot convince your client not to use a slideshow, at least use one that is accessibility/UX focused. Some ways to make your slideshow more accessible and user-friendly:

• show the first slide by default and allow a user to navigate through the rest of the slides manually (not auto-rotating)
• limit the number of slides and make sure the load time is fast
• create navigation buttons that are highly visible and large enough to be useful on all devices
• include all the controls available (next, previous, stop/pause, play, etc.) and make sure you can use the controls with a mouse, keyboard, and by touch
• provide alternative ways to access the content (ex. text transcripts)

By providing accessible and user-focused slideshows, we enable more users to access the important content of the site and this enhances the overall user experience. For more information on accessible slideshows, visit https://www.w3.org/WAI/tutorials/carousels

Good examples:
University of Washington
Accessibility Oz