List vs. Grid View: When to Use Which on Mobile

by on 11/03/15 at 9:26 am

Figuring out your content layout is a tricky task on mobile devices. Desktop devices give you all the screen space to work with. But on mobile, screen space is limited. Users can only view a small amount of content at a time before they need to scroll.

This makes you wonder what the most efficient layout for viewing is. Should you use a list view or grid view? Your decision could affect how quick and easy it is for users to find what they’re looking for.

List vs. Grid View

List view displays your content in a single column list. It’s text heavy and there are no images. At most, you can display small icons or thumbnails next to the text. Users rely on reading the text to make their selection.

Grid view displays your content in two or more columns with images. The images dominate most of the space, and text is shortened to prevent too much textwrapping. Users rely on the images to make their selection.


List View Prevents Overscrolling

Many designers use grid view because it’s more appealing to the eye. But the problem is that grid view forces users to scroll more. Grid view includes images which make the page much longer. It’ll take users many scrolls to view all the available options. This is too much scrolling for their fingers.

List view prevents overscrolling by making pages shorter. The exclusion of images allows you to fit more options per screen. It also allows you to use accordions to add layers of suboptions on the same screen. Users find what they’re looking for by scanning text labels.


List View Prevents Hasty Selections

Not only does grid view force users to scroll more, but it causes them to make hasty selections. Users get so stimulated by images that they’ll select the first option that appeals to them.

This can often lead them to a section that doesn’t have what they’re looking for. The user then has to go back and scroll further. With so many stimulating images, it’s easy for users to get distracted and misled.

List view prevents users from making hasty selections. The text provides precise enough information to help them find the content they want. They’re able to make the best selection after reading through all the options.


Grid View Works Best for Examining Details

Aside from aesthetic appeal, grid view also helps users when they’re examining details. For example, if a user is shopping for a shirt, they’ll have a specific type in mind. It’s only after the user has narrowed down the content to a category that grid view is most effective.

A grid view display of clothes will distract more than help because only a few of those images will be of shirts. The user has to scroll to filter out a lot of irrelevant images when scanning.

But once the user is in the category of shirts they want, the images will have more relevancy. The user can scan the shirts and spot certain details they’re looking for with ease.


Final Thoughts

Most users are on the go when they’re on a mobile site. They need to be able to find the content they want fast. The layout you choose is key in making this happen.

There’s more flexibility with layouts on desktop, but on mobile, your choice matters. The view that allows users to see more content while doing less work is the winner.


Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

4 Responses to “List vs. Grid View: When to Use Which on Mobile”

  1. Ash

    Nov 6th, 2015

    Or just do what most apps do like Ebay and offer a button to switch between grid or list, best of both worlds.

  2. Rebecca Ruggles

    Nov 6th, 2015

    Anthony, I enjoyed your article. Too often these catalog style pages are points where the user gets lost and bails out. As designers, we’ve failed to understand their needs at that moment in the experience. For me, the choice to use grid or list depends on the decision you want your user to make next. Do they need an image at this point to get them to make a tap?

    A well-executed example is the activity playlists in the Apple Music app. As a user, I’m selecting music based on my mood. The list view uses a background image and a simple headline that makes it easy to connect my mood with a choice on the screen. A simple text list is not enough for me to make an emotional connection, but adding the image I can quickly make a choice.

    • Chris R

      Nov 9th, 2015

      Exactly, context is everything, as are the characteristics of your users. If designing an app for folks with developmental disabilities, they need to have large images and a grid to easily make selections, not text and tiny icons.

  3. TonyEnpress

    Nov 16th, 2015

    For me,it’s depend on content on website. Gird view is the best for online shopping that user tend to view products. However,if user gonna go other categories. List view may be choice for categories list because it doesn’t need big image for categories list. Just small but clear and some text is enough for user to know what that category is.

Leave a Reply to TonyEnpress