Off-screen capable carousel

[wesleymiles]

hello. i wanted to see if this component has come up with you all yet: an off-screen carousel.

i realize it goes against the secret designer code to recommend a carousel 😅 , but i think it could help.

What is it?

• the ability to horizontal scroll through certain content that's not all visible at once - could be cards or brick-type CTAs
• similar behavior to our Tabs component on small screens
• the catalog team is planning to use it on a new update

Why do we need this?

• they're becoming a convention, so people know how to use them
• saves vertical space
• during two projects this year, Dustin and I both considered using this layout but partially decided against it because it's challenging to add a complex component like this within a project timeframe.

how do other folks do this?

• making it accessible: https://inclusive-components.design/a-content-slider
• other design systems: Wash post & Material

thanks!

[marionnegp]

@wesleymiles, I'd be interested to see how you and Dustin were hoping to use carousels. I do think they can be useful in certain contexts, like in apps where users need to browse through many options quickly. I'd like to steer away from using them just to fit more content that various stakeholders think we need to add. (Brad Frost provides a good and funny example of a situation you've probably encountered before.)

I think carousels would be an example of a pattern that can be built in federated libraries/subsystems (e.g., Catalog or Events) first and then added to the design system once there's a wider need for standardization. We could also gather data on our users' engagement with carousels before formalizing it as a component.

[wesleymiles]

haha i know that post and i understand the drawbacks, and like our other components it should ship with governance, albeit probably tighter than others. i do think it's worth exploring that can of worms again however. that post is 10 years old and carousels are seeing a comeback.

here is the context i considered it (scroll to the dark product band) https://xd.adobe.com/view/36696064-76fa-4841-8d84-0162c5eb2f38-633a/screen/62fd41d0-db8d-4754-8079-6d1234dedcd1 just as we know people scroll vertically intuitively, i'd arguing the trend of horizontal scrolling is growing. just like switching from a light to dark background, the change in scrolling adds contrast to a section, requiring a pause. agree that testing would help too. i'd think we'd want to test it in a browser though, unless figma has prototyping closer to real life 🤩

ccing @dmazon-redhat

[dmazon-redhat]

The problem I was trying to solve for was keeping the content compact as possible for a user on a touch screen device like a tablet or phone. I do agree with Wes that horizontal scrolling is more of a common pattern on those devices. I noticed in the article you shared Marionne, Brad F. mentions the overflow pattern, an interesting example of the type of functionality we might consider using. https://bradfrost.com/blog/post/the-overflow-pattern/

This article from NNG kind of sums up my thinking around when we might want to use it vs not use it. Desktop vs mobile devices. https://www.nngroup.com/articles/horizontal-scrolling/?lm=infinite-scrolling-when&pt=youtubevideo

There may be cases on desktops where having horizontal scroll + carousel with navigation would be useful for product discovery or exploration similar to how Amazon does it. Either way I think this would make a great A/B test to help us determine if it is helpful for users.

Here is an example of what I was thinking. This is an sketch of the authenticated region on the homepage that will display above the hero region. You'll notice that the mobile mockup has two rows with bricks, cards or tiles. The "I want to visit..." row is a 8 col with half of the next brick showing (8 4 col layout). The "I want to... row is a set of 5 column cards or tiles that displays half of the third card (5 5 2 column layout). Both rows could have around 9 items in them which would make this experience really long for the user to have to scroll. My thinking is that the user would be able to control which items show up here, or that we would personalize the experience so that content they are more likely to find useful would show up first in the listing. Obviously a lot more to work out in this example but that is where I was headed.

[marionnegp]

@wesleymiles, that carousel looks pretty slick. @dmazon-redhat, I like the idea of using personalization to determine order.

I agree that horizontal scrolling is helpful for mobile views. It's already helped us avoid changing the look/functionality of a component when the viewport size changes. For example, we didn't want tabs to turn into a dropdown on smaller screens, so we modified the tab component to use horizontal scrolling on mobile. Horizontal scrolling feels clunky on desktop if you're not using a trackpad though. I'd love to find a way to make that experience a little better.

Before we formalize carousel as a component, I still think we'd need to see more RH sites using it and/or have more data about which items people engage with. In the meantime, I'm going to start collecting more info about usability and examples of carousel designs.

[jknilans]

@marionnegp We're going to be implementing a Static (Non-Auto-Forwarding) Carousel on the Catalog in the next few months, so we can collect metrics on usage and report back once we have enough data. We're using the suggestions that NN/G provides in the last section of this article.

[marionnegp]

That'd be awesome, @jknilans!

[wesleymiles]

hey @jknilans, when do you think you'll be looking at metrics for the Catalog carousels?

[jknilans]

@wesleymiles Most likely sometime next quarter. I think we'll have Adobe EDDL's code up and working by the end of the year which will allow us to see the details of what's getting clicked.

[wesleymiles]

Gitlab's arrow slider is a clear indicator there's content off-screen, beyond just having the cards cut-off.

(hope this is a good spot for bookmarking ideas, let me know if it's not!)

[marionnegp]

This is a great spot, since it gets visibility from our whole team.