small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2qLPUZv">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | Suleiman Ali Shakir <img alt="" src="http://ift.tt/2rl6xbp">
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?
<blockquote>Horizontal lists are better-suited for mobile, as gestures are both horizontal and vertical.</blockquote>
<img alt="" src="http://ift.tt/2qLXe7y">Netflix iOS app
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?
<h3>When to use Horizontal Lists</h3>
<blockquote>Horizontal lists work best when you want to display a subset of homogeneous content that’s part of a heterogeneous set.</blockquote>
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 right?
For example, you can subcategorize apps into games, utility and social, to name a few. Hence each category of apps can be in a horizontal list.
<img alt="" src="http://ift.tt/2rldb1v">Google Play Store app on Android
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 the definition above, 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.
Here’s another example.
<img alt="" src="http://ift.tt/2qLPW3z">Amazon Prime Video — Android App. Image Credits: <a href="http://ift.tt/1Uz9f8F">pcadvisor.co.uk</a>
<h3>Design Tips for Horizontal lists on Mobile</h3>
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.
<img alt="" src="http://ift.tt/2qLZtHL">Carousel seen on Flipkart website
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.
<h4>1. Show Visual Indicators</h4>
Assume you’re displaying a horizontal list of cards. You’d want the last card on the right, to peek out from the edge.
<blockquote>The design must leave a visual hint that a set of content is horizontally scrollable.</blockquote>
<img alt="" src="http://ift.tt/2rlkshC">Horizontal Lists with the last visible item ‘peeking’ from the edge
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).
<h4>2. Use a ‘See More’ Button</h4>
See More, See All, View All, View More, Show More …
Call the button what you want. Essentially, it should mean one thing:
<blockquote>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.</blockquote>
Keep in mind, that each subcategory (horizontal list), is just a tease of what kind of content you can expect.
<img alt="" src="http://ift.tt/2qLPXEF">Using a vertical, 3-column grid in ‘See All’ screen
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.
<blockquote>Vertical scrolling increases the user’s ability to skim through content</blockquote>
Hence, it makes sense to use a vertical grid in the See All screen.
<h4>3. Design for Responsiveness</h4>
Keep in mind that mobile app interfaces are responsive. So make sure that this subtle hint is always present. Otherwise, you might see a horizontal list that looks like a grid.
<img alt="" src="http://ift.tt/2rloPcH">Horizontal lists that look 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. It looks just like a vertical grid. If it looks like that, then every user’s natural instinct is to scroll vertically.
<h4>4. Adapting Horizontal lists for Tablets</h4>
So how do you design horizontal scrolling lists on larger devices? Say tablets for example?
You can convert your horizontal list into a grid with N items per row. The above UI design displays five items per row. With a see all button that indicates that a user can see more of this kind of content, on a new screen.
<img alt="" src="http://ift.tt/2qLQTsB">Horizontal Lists as a grid on Tablet
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.
<h4>5. Limit horizontal content on tablets</h4>
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 3 contents by default. The rest is can be viewed by scrolling horizontally. This means that the additional content which is hidden is optional. If users are interested, they can scroll to see more. Or if they’re interested in seeing 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 right? When a larger width is available, it’s natural to make use of it. Right?
No. Let me tell you why.
<img alt="" src="http://ift.tt/2rleVHO">Don’t stretch horizontal lists on Tablets
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 5–6 items per subcategory. Giving too many choices is a sign of increased cognitive load for users. That’s not a good thing.
<blockquote>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. — <a href="http://ift.tt/2qLNbiI">Design Principles for Reducing Cognitive Load</a>.</blockquote>
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 <a href="http://ift.tt/1RKPrsU">an article by The Telegraph</a> agrees too!
<h4>6. Snap Horizontal Scrolling</h4>
This is a technique that prevents freeform scrolling. Although not entirely. Here’s a GIF that will explain it better.
<img alt="" src="http://ift.tt/2rl75hA">Snap scrolling in horizontal list
Are 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’s a very subtle, yet powerful hint that indicates whether there is more content or not.
<h4>7. Indicate the start and end of a list</h4>
Agreed that when the scrolling stops, we know we’ve reached the end of the list. But unless we scroll, we don’t know right?
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.
<img alt="" src="http://ift.tt/2qLOGNO">Image Credits: <a href="http://ift.tt/1m9Uc5J">Stack Overflow</a>
Would you expect 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 end of a list. This is the extreme left and right.
<img alt="" src="http://ift.tt/2qM3jkk">Extra spacing at the extreme end of horizontal lists
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.
<img alt="" src="http://ift.tt/2rlEkBd">Vertical scrim at the bottom that hints there’s more content
<h3>Don’t confuse Tabs with Horizontal Lists</h3>
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.
Can you see that one gesture is used for two different actions?
When used in Tabs, differentiate between horizontal scrolling and swiping. You 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 solution is to rethink your navigation.
<h3>Horizontal List Alternatives</h3>
The very purpose of a horizontal list is to show similar content that belongs to a particular category.
Most apps who 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.
<h4>Use a Grid instead</h4>
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.
<img alt="" src="http://ift.tt/2qLREC6">Horizontal list alternatives — using 2-row grids
The second example below is even better. Google Play Music app does it very well. It shows 4 contents of a playlist, collaged together. You can access other music in the playlist by directly tapping the thumbnail itself.
<img alt="" src="http://ift.tt/2rlvXFW">Google Play Music app
There are two advantages to this design decision:
<ol>
<li>you retain the user’s natural flow of consuming content (vertical)</li>
<li>a user sees more initial content, than what a horizontal list shows</li>
</ol>
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.
<h4>TL;DR</h4>
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.
<h3>Tip for Android Devs.</h3>
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 <a href="http://ift.tt/2qLXpPU">see it on GitHub</a>.
If anyone knows a great resource for iOS, do let me know! I’ll add it here.
<h3>Conclusion</h3>
Today, content-heavy apps use nested scrolling with horizontal lists. While that’s not wrong, it’s implementation must be right. 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 in 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 an App developer who loves designing. He creates apps that people can use with ease. Say hi on <a href="https://twitter.com/Suleiman_194">Twitter</a> or <a href="http://ift.tt/2n9ToUp">LinkedIn</a>.
First published at <a href="http://ift.tt/2qLOdes">blog.iamsuleiman.com</a> on May 9, 2017.
<iframe src="http://ift.tt/2iFGGW9" width="800" height="400" frameborder="0"><a href="http://ift.tt/2h0f00F">http://ift.tt/2h0f00F</a></iframe><img src="http://ift.tt/2rlxmMO" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qLPZfL">Best Practices for Horizontal Lists in Mobile</a> was originally published in <a href="https://uxdesign.cc">uxdesign.cc</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Best Practices for Horizontal Lists in Mobile

Best Practices for Horizontal Lists in Mobile

Top Stories