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

This challenge 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 presents your content in a single column list. It’s text heavy, and there are no images. At most, you can display icons or thumbnails next to the text. Users rely on reading the information 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 text wrapping. Users rely on the pictures 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 layout put too much work on 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 hastiness often gets them lost in 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.

If your list view seems too text heavy, you can always add icons or thumbnails to give it more visual interest. This balanced approach is better than grid view because it doesn’t overstimulate users or overshadow the text.

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 specific details they’re looking for with ease.

More Content with Less Work

Most users don’t have much time on their hands and need to be able to find the content they want fast. The layout you choose is critical in making this happen.

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

Toolkits