Carousels
    Photo by Eleanor Styles on Unsplash

    Carousels

    Carousels tend to be a design pattern I see EVERYWHERE. And to be honest, I'm not a fan, and think we should skip using carousels entirely. I'll first layout two reasons why I think that, and then I'll offer my alternatives.

    Reason One: They aren't super accessible. With lots of buttons and rotating slides, they are never just accesible out of the box. Typically, keyboard navigation is where it falls short - it's a list of content where most is off the screen. Trying to tab through that often ends up with us losing where focus is, or with slides half transitioned. And not to mention aria properties or labels/names are usually missing from the previous/next buttons, and those little dot indicators. The amount of time it takes to make a carousel accesible is, in my mind, not worth it. Mostly because of the next reason:

    Reason Two: People don't use them. There are a lot of studies out there (like this one) about click through rates on carousels and how ineffective they are. It turns out, most people tend to skip them. They clutter a page, and piling information onto users will overwhelm them, driving them to move on. The ever famous Notre Dame reasearch shows that click through rates on their carousel were as low as 1% on content that wasn't the first slide - meaning that no one used the carousel as a carousel, but treated it as if it were a static banner.

    Auto rotating is a tricky issue because it causes movement, and that's what draws our eyes instead of the actual information we're trying to display. It's also not accessible since content may move before we (the user) ready for it to.

    Here's a list of other articles about the efficacy of carousels (yes they link to studies):

    So what now? Well, if we aren't going to use carousels, there's a couple other patterns to try. The first is just having static content that's always visible. It's easier on the user since it's just there and they can see it right away, and there's far less room for accessibility issues. The second is, if we really need content that we swipe through, is to use sticky scrolling. No extra controls, timers, indicators, etc. apart from the scrollbar. Just content that's scrollable and sticks to the different sections using pure CSS. Here's an example a colleague of mine shared with me. And yes, we can style scrollbars on most browsers (I don't like default scrollbars either).