Google calls them a row of cards or a scrollable carousel. Apple calls it a Sectioned Content Row. To keep it simple, I'm calling it a "scroll row".
Basic Anatomy of a Scroll Row
Scroll rows have:
- a topically descriptive header.
- a horizontal list of modules.
- an indicator signalling more content is off-screen.
See the Pen scroll row by mattjqueen (@mattjqueen) on CodePen.
A scroll row is not a carousel. The carousel pattern:
- Shows you a single thing at a time while hinting at more
- Commonly auto scrolls to the next item in the carousel list
- loops continuously back to the first item in the list (vs. scroll rows that should end)
Scroll row-based UIs are being adopted en masse in apps and on the web. Usability researchers claim scroll rows are terrible—particularly on desktop web. Don't listen to them! Keep these five points in mind when designing scroll row UIs.
- Users seldom scroll past the showing tiles—that's a good thing. Now you know what's relevant. If clicks on overflow content are low, but clicks on showing content are high, you're content could be attractive but the organization (say, topic of the row ) isn't relevant. If clicks on overflow content are high, your merchandising efforts are working. "But they won't scroll!" Don't count on them scrolling or even looking. Spilling content out into a grid doesn't force people to look at it either. The fold argument has preached that for years. Thoughtfully merchandised content draws attention.
- But users don't read the headers. You shouldn't rely on headers, users won't stop to read them. They likely won't read anything until they have found something of interest. Use headers to clarify content, don't require headers to understand it.
- But users don't see the 'see more' option. Then don't rely on it. And when users do use it, pay special attention to that data.
- Bask in the simplicity. Scroll rows are modular, flexible, scalable, fluid, and simple. That's 5/5 for good design!
- Enjoy ecosystem-wide consistency. It's great for TV, handset, tablet, and laptop/desktop.