Envato

Grid view vs list view – What to use on your product pages

The product category page is where you display multiple items your customers can choose from at the same time. The way you present those products can effect, not only the convenience for your customer, but also your conversion rate.

There are two main options of displaying products: Grid View vs List View, and while both can be effective, this article will give you some guidance as to which one will be most appropriate for your particular style of site.

Grid vs list, what’s the difference?

Before making your choice, you need to understand the differences between them.

List view contains a small picture on the left side, and on the right side is some product information. The information shown here is what can highlight the product, such as price, product description or availability.

003

List view displays a product image with product information

Grid view is a grid of images. It shows a product image thumbnail with a small amount of additional information. In some cases, it only includes product name, brand and price. This information is usually shown underneath the image.

004

Grid view only shows images with a little information

How it affects a customer’s decision process

List layout helps users to make a buying decision by reading the text, while with a grid layout, users make their decision based on viewing and comparing the images. Both have advantages and disadvantages.

Pros and cons of list layout

When compared to a grid view, the list view has some advantages:

  • Human’s eyes move along an F-shaped pattern when reading web content. List views follow this natural reading pattern.

002

  • They also provide product details; making it easier for your customers to compare products.

However, list views also have several disadvantages:

  • They’re less visually appealing because there’s a larger proportion of text compared to images.
  • In list view, user’s attention decreases from top to bottom.

001

Pros and cons of grid layouts:

Grid views have certain competitive advantages too:

  • They’re more engaging to the eye because they have more images.
  • In grid views, users’ attention is spread more evenly throughout the items.

005

Disadvantages of the grid view may be:

  • Less information is shown making the customers have to go to the item page for more details. That will ultimately take them more time. You can overcome this drawback by allowing a quick view function on the category page, as seen below.

quick view

Nitro also has product quick view option to save time for customers

Which one is better for your product category page?

When it comes to choosing the kind of layout for your product category page, the answer depends on  what you’re selling.

If we consider all the pros and cons of both kinds of layouts listed above, we can sum it up: Grid views are for images, List views are for details.

Grid views are for images, List views are for details.

Each store has its own kinds of products. If you’re selling something like digital products which require more product details such as technical figures, choose a list layout. If you’re running an online fashion store where customers decide what to purchase almost solely based on the look, the grid layout is more preferred.

Some stores have the option for customers to choose their preferred page layout. You can implement that option onto your store as well. Make sure to make it noticeable to your customers by using an icon instead of a text button next to the filter options, like below.

006

You can show your customer a button of display-switching

Conclusion

In conclusion, there is no general rule for online stores about which type of layout to choose. Each store will find out what fits them the most. To know which one fits yours the most, you should conduct some A/B testings. Experiment with different options and see what bring you better results.

Still need some inspiration?

Check out WooCommerce Visual Map for more articles on designing product category layouts that work.
This article was originally published on community.envato.com by WooRockets.


Envato

About the Author Envato

Envato is a creative ecosystem of sites and services, including Envato Market, Envato Studio, Elements, and Tuts+. Every month millions of people use our sites to get creative and learn new skills.