Best Practices for Horizontal Lists in Mobile
Many Android and iOS apps have horizontal scrolling lists. Maybe it’s also combined inside a vertical list. But is it necessary? Even assuming it is, are you doing it right?
In this article, let’s discuss tips to remember when designing horizontal lists. Later, we’ll look at possible alternatives that can work better.
So first off, why horizontal lists on mobile?
Horizontal lists are better-suited for mobile, as it supports both horizontal and vertical gestures.
Yet, people including you and me both, mostly scroll vertically. I mean seriously, what’s the first natural thing you do, when you open an app? You scroll. Vertically.
Okay, maybe you check your notifications first. But even there, you scroll. Vertically.
So how do you tell people that they can also scroll horizontally? But before that, when should we use horizontal scrolling?
When to use Horizontal Lists
Horizontal lists work best when you want to display a subset of homogeneous content that’s part of a heterogeneous set.
Makes sense?
Take the Play Store app for Android. Sure the Play Store is all about finding new apps. But for us to search better, apps need to be categorized don’t they?
For example, you can subcategorize apps into games, utility and social, to name a few. Hence each of these apps can be categorized in a horizontal list.
As you can see, Play Store gives us an assortment of apps. There’s a bunch of ‘Recommended’ apps you can browse (horizontally). Then, there’s a set of apps that are ‘New+Updated’.
So to go by definition, each subcategory of apps are in a horizontal list. These child lists are put into a (parent) vertical list.
You can scroll horizontally to see more of a subcategory. You can scroll vertically to see more subcategories.
The iTunes app on iOS is another brilliant example.
Design Tips for Horizontal lists on Mobile
In the web, arrows show that there is a horizontal list of content you can scroll. This is typically a carousel. It uses a combination of arrows for navigation, dots for indication and scrollbars. These are indicators that tell people how to navigate a carousel.
Okay, I said for mobile. But I showed you how it’s done on the web, and for good reason.
Now that you’ve seen the web version, that’s how you must NOT design for mobile. Mobile apps are touch-based and support gestures. Would you still be using point and click mechanisms such as arrows? I’m sure not.
Moreover, given mobile size constraints, using the same web paradigms makes little sense. So there must be a better way. But still, expect users to scroll the same way they would in a vertical list.
Here are some design tips to keep in mind. They can help you make better and effective horizontal lists.
1. Show Visual Indicators
Assume you’re displaying a horizontal list of cards. You’d want the last card on the right, to peek out from the edge.
The design must leave a visual hint that a set of content is horizontally scrollable.
So for this particular device width, we can show two cards. To see the third card and beyond, we need to scroll horizontally.
Notice the design teases a bit of the third card. Yes, the pink cards at the extreme ends that are partially hidden. This ‘tease’ provides a subtle hint that there’s more content.
Since the flow of content is horizontal, it naturally indicates users in which direction to scroll. Hence, the user’s natural instinct is to scroll in that direction (horizontally).
2. Use a ‘See More’ Button
See More, See All, View All, View More, Show More …
Call the button what you want. Essentially, it should mean one thing:
A ‘See More’ button tells users there’s more of where that came from. It’s hinted that there’s more of similar content available.
Keep in mind, that each subcategory (horizontal list), is just a tease of what kind of content you can expect.
So when a user taps on “See More”, you want to show them all that’s there to show for that subcategory. For example, assume the user clicks the subcategory called “Top Action Games” in the Play Store app. Then the ‘See All’ screens shows all the best action games in that subcategory.
Remember that vertical scrolling is the most natural and fastest.
Vertical scrolling increases the user’s ability to skim through content
Hence, it makes sense to use a vertical grid in the ‘See All’ screen.
3. Design for Responsiveness
Keep in mind that mobile app interfaces are responsive. So make sure that the subtle hint of ‘peeking’ is always present. Otherwise, you might see a horizontal list that looks like a grid.
So tell me. From the UI above, can you tell that each subcategory is a horizontal list? Moreover, can you even tell if it’s horizontally scrollable? I’m sure not.
But you’re not to blame. It’s the design’s fault. There is NO visual indication!
Trust me, that’s not what you want people seeing. The whole list looks just like a vertical grid. If it looks like that, then every user’s natural instinct is to vertically scroll.
4. Adapting Horizontal lists for Tablets
So how do you design horizontal scrolling lists on larger devices such as Tablets?
One way is to convert your horizontal list into a grid with N items per row. The UI design below displays five items per row. With a ‘See All’ button that indicates that a user can see more content like this, on a new screen.
Hence, on mobile, it can be a scrollable horizontal list of say, ten cards. However on Tablets, you could have five or six, non-scrollable cards.
5. Limit horizontal content on tablets
Tablets grant larger screen width. So it’s wise to take advantage of large screen real-estate.
But let’s focus on just horizontal scrolling for a moment. It’s perfectly fine on mobile. You show three items by default. The rest is can be viewed by scrolling horizontally. This means that the additional content which is hidden, is optional to view, left to the discretion of the user. If users are interested, they can scroll to see more. Or if they want to see all of it, they can tap the ‘See More’ button.
Now let’s get back to Tablets. Your natural instinct would be to simply show more content horizontally. It totally makes sense to do so. When a larger width is available, it’s natural to make use of it. Right?
No. Let me tell you why.
Giving a ‘tease’ of five to six contents is more than enough to tell people what to expect from a category. Remember that the user may scroll horizontally to see more. But they definitely will scroll vertically. Moreover, if they want to see everything a category has to offer, they can tap the ‘See All’ button.
Hence, it makes sense to just show a non-scrollable grid of five to six items per subcategory. Giving too many choices is a sign of increased cognitive load for users. That’s not a good thing.
Every time you visit a website, a process of learning is initiated. Your brain has to learn how to use the site while keeping track of the reason you came there in the first place. The mental effort required during this time is called cognitive load. — Design Principles for Reducing Cognitive Load.
Alright, that may be in the context of a website. But it all the more holds true on mobile. Attention span on mobile is shorter than you think and an article by The Telegraph agrees too!
Remember that tablets have larger widths. Use that extra space to allow your designs to breathe a little.
6. Snap Horizontal Scrolling
This is a technique that prevents freeform scrolling. Although not entirely. Here’s a GIF that will explain it better.
Can you see horizontal scrolling is snapped? Whenever the user scrolls horizontally, the next item becomes slightly visible. This is a subtle hint that even after scrolling, there’s more content available.
Although this is hardly noticeable, it’s a great tip to keep in mind. It is a very subtle, yet powerful hint that indicates whether there is more content or not.
7. Indicate the start and end of a list
Agreed that when the scrolling stops, we know we’ve reached the end of the list. But unless we scroll, we don’t know, do we?
Android uses a neat animation to denote the end of a list. But that’s only when the user scrolls. Which means the user finds out AFTER they have scrolled.
But what if we could make it better? Would you want your users to scroll to find out? Wouldn’t it be better if you could visually indicate that too?
Use extra spacing to denote the start and end of a list.
This approach works well for horizontal lists too. Add extra spacing to the extreme left and right of the horizontal list.
The design above indicates an extra spacing of 16px. Just enough to stand out from the typical spacing of 8px of the grid items. If you’re daring enough, you could even go for 24px!
Indicate Vertical Scrolling too
Assume your app supports both horizontal and vertical scrolling. We’ve already discussed leaving visual hints indicating horizontal scrolling.
How do you indicate vertical scroll? Websites indicate a vertical scrollbar on the side. But what about mobile?
Here’s a neat trick you can use, although not seen in many apps. Use a light, faded scrim at the bottom.
Don’t confuse Tabs with Horizontal Lists
Let me put this one bluntly. Assume your app has Tabs and one of them includes a horizontally scrolling list. Say, something like this.
How do you switch between Tabs? You swipe. Horizontally. How do you scroll the list? Horizontally.
That’s one gesture used for two different actions!
We need to differentiate between horizontal scrolling and Tab switching (swiping). We don’t want users to scroll to the end of a horizontal list, and then be taken to the next Tab.
So what can we do?
The easiest solution is to disable horizontal Tab swiping. The hardest way is to rethink your navigation. But keep in mind that easy doesn’t always mean better.
Amazon Prime app
Take a look at the Amazon Prime Video app for Android. They have horizontal scrolling lists with Tabs. But to avoid confusing swipes with horizontal scrolling, they disabled swiping between Tabs. So instead, you need to directly tap on a Tab to navigate. Smart!
TL;DR
If you want to display different categories of a content, consider using horizontal lists. However, don’t include it in screens that belong to Tabbed navigation.
Horizontal List Alternatives
The very purpose of a horizontal list is to show similar content that belongs to a particular category.
Most apps that do this, display N (scrollable) items for a category. The remaining contents are hidden behind the SEE ALL button.
So either way, you’re not showing ALL contents of a category. Assuming you display 10, users will have to tap ‘See All’ to view the remaining 50 plus whatever contents.
If that’s what your horizontal list does, you don’t need a horizontal list at all.
Use a Grid instead
With no horizontal scrolling, users can now skim through your content faster. They just have to scroll in one direction. Vertically. We have already seen how Tablet designs adapt to this.
The second example below is even better. The Google Play Music app shows four contents of a playlist, collaged together. You can access other music in the playlist by directly tapping the thumbnail itself.
There are two advantages to this design decision:
- you retain the user’s natural flow of consuming content (vertical)
- a user sees more initial content, than what a horizontal list shows
Speaking of the second point, you may argue that a horizontal list shows more. Okay, I agree. But you need to scroll to see that don’t you?
The point of an alternative is for you to rethink. Do you really need those nested, horizontal scrolling lists? Users naturally scroll vertically. I say this multiple times because anything that breaks this flow, breaks the ability to skim quickly through content.
So before you decide upon horizontal lists, it’s worth weighing its negatives. Otherwise, before going with it, you can always try one of the methods above.
Tip for Android Devs.
Embedding a horizontally scrollable list in a vertical parent list is hard. In other words, nesting RecyclerView is easy to do, but difficult to get right.
But don’t sweat it. Nick Butcher has done this for Google’s I/O 2016 app and open-sourced it! It also includes some neat performance tweaks. You can see it on GitHub.
If you know a great resource for iOS, let me know! I’ll add it here.
Conclusion
Today, content-heavy apps use nested scrolling with horizontal lists. While that’s not wrong, it’s implementation must be done correctly. Horizontal scrolling feels more intuitive on mobile due to gestures.
But use it with caution, because it breaks our natural flow of consuming content. Which is reading vertically. Remember at the start of this article, we talked about Google’s Play Store app. We also saw why using a horizontal list is suitable for their scenario. So make sure you have good reason to include it in your app.
As UI/UX designers, it’s our responsibility to ensure that we don’t confuse users. After all, scrolling is the most highly-used gesture on mobile!
Suleiman is a UX Designer & App developer who loves creating simple, usable & beautiful experiences for people. He’s currently pursuing a Masters in UX Design at Rutgers, NJ. Check out his portfolio.
First published at blog.iamsuleiman.com on May 9, 2017.
