UI cheat sheet: list vs grids

Grids or lists? That is the question we will look at in this cheat sheet. While they can be used anywhere in your site, we are going to look primarily at search results, catalogues and newsfeeds. Making this choice will determine how your users interact with your content and what they will engage with.

In this cheat sheet we will cover the following:

1. Introduction
   1. The difference between grids and lists
   2. What mode your user is in and what is most important to them
   3. Working with images
   4. Cognitive load
      
2. Grid view
   1. What a grid looks like
   2. Standard grid
   3. Masonry grid
   4. Justified grid
   5. Best practices for grids
      
3. List view
   1. What a list looks like
   2. Simple list
   3. List with horizontal stacking
   4. List with vertical stacking
   5. Best practises for lists
      
4. Result or item styles
   1. Skeuomorphic/elevated cards
   2. Outlined cards
   3. Flat
   4. Mix
      
5. Closing thoughts — and how to best workshop this with your stakeholders

1. Introduction

The difference between grids and lists

What is the difference between a list and grid view? Well, Watson, one is a list and the other is a grid. Need further clarity? In a list, items sit below one another. In a grid, items sit vertically and horizontally from each other.

But what really is the difference in a user experience sense? One is usually (but not always) better for desktop, the other is better for mobile. One is better for images, the other for text. One is better for allowing you to compare images, the other is better for comparing text.

What mode your user is in and what is most important to them

When deciding on what information to display to your user, try to identify what is most important to them. While you could always guess or use existing patterns, this may be a good opportunity to do some user research.

First, try identifying if your user is in pure browsing mode or if they are in a combination of search and browse mode. Once you have worked this out, you need to determine what they are looking for within each item.

If your user is in browse mode, they are there for entertainment so will probably be focused on images (Instagram, Pinterest or meme sites), on headlines/statuses (Twitter, news sites) or perhaps a combination of both (Facebook). If this is the case, bring what they are looking at to the forefront.

If your user is in search mode, you should also support some browsing behaviour, but focus on how they will be skimming or comparing different items. You will need to identify what it is that users are using to compare items, it could be: star rating, price, amount of community engagement, images, certifications, etc. or a combination.

Working with images

Be careful of relying too much on feature images, reasons being;

A) Similar feature images don’t give the user anything to compare.

If your content is all similar, the visuals won’t be informative. E.g. If you offer online courses in accounting, how would your users expect to compare courses using the feature image? The more similar you expect the feature images to be — the less important they become.

B) You have to trust that people can upload good photos (if you are a social platform).

If you allow your users to upload their own images, you are relying on them being decent photos. Just think back to your last family gathering and how long it took your mum to take a photo that was, a) in focus, b) had everyone in it, c) had the right day time settings, d) the dog wasn’t peeing on someone. That all being said — Instagram (and to a lesser extent, Facebook) has shown us that civilians can take engaging photos, but I still remain wary.

Cognitive load

Cognitive load refers to how long it takes for the brain to compute information, e.g. a single image = low cognitive load, 10 images = high cognitive load. Think of your concentration as RAM on your first computer. The more your little computer brain has to focus on, the less efficiently it works. The higher the cognitive load, the less ‘focused’ your user will be — but that is okay too. When you are just looking to entertain yourself, ‘focus’ is not something most people prioritise.

Part of the beauty of Instagram (on mobile) is that you can focus on a single photo of a ‘#lockdownBananaBread’ at a time. Part of the beauty of Pinterest is that you can browse loads of images of ‘lockdown banana bread recipes’ at the same time. When selecting what design pattern you want to go with, consider how many items you want your users to compare at a single time.

As a general rule, when browsing, display more items at once. When searching, display fewer items at once. But this rule is broken again and again (see: Instagram and online stores) so don’t take it to heart.

2. Grid view

Grid views work well when you are trying to show off the image, but it also allows you to have multiple products displayed next to each other at the same time. This also helps the user to compare different items visually. The downside here is that there isn’t much space for text.

What a grid looks like

Because grids are mostly used for products, they tend to have big images with copy beneath it. The copy is usually the name of the item and the price, and maybe one or two other details.

While there are many different types of grids, the most common is a standard grid where the containers are the same height and width. We will also look at masonry and justified grids. I haven’t included custom grids here as I have yet to come across any good search results that use them. If you want to find out more about grids, this gives a nice overview.

When to use a grid view:

• If the image of the result item is most important to the user.
• If a user needs to be able to compare items visually (e.g. to compare shoes).
• If your search results don’t need a description.

Standard grid

A standard grid is when all the items are the same size. This pattern will probably be used by your run of the mill retail site. This grid allows all their products to be kept neat and tidy, making it easier for users to compare items.

Who should consider using it: Online retail stores for physical products, possibly portfolio sites (artists, illustrators, etc).
Why is it good: It allows users to compare product images and prices easily.
Who uses it: Walmart, Amazon (sometimes), Esty, most online retail stores.

Masonry grid

I first came across the wonders of masonry grids when a friend invited me to Pinterest while I was still in university. *Sigh* the hours I wasted curating boards about places I would never visit because it turns out studying graphic design won’t make you rich.

So, what makes a masonry grid different to a standard grid? In a standard grid, the height and width are the same, whereas in a masonry grid, the heights are different. This allows images to be displayed to their original proportions without being cropped to a set size. However, the longer the image is in height, the more space it gets. A lot of Pinterest marketers use this to their benefit and make really long images so that they get more ‘screen time’ while the user is scrolling.

As a rule of thumb, most of the masonry grids I have come across promote a ‘browsing behaviour’; the only exception that I can find being artists’ online stores and stock photography sites.

Who should consider this pattern: Interest and portfolio sites.
Pros: It encourages users to carry on scrolling.
Cons: It is difficult to compare items.
Who uses it: Unsplash, tumblr., Pinterest, and some artist/designer portfolio sites.

Justified grid

The first time I noticed a justified grid was on Google images, however it is also used on blog and photography sites. Unlike masonry grids, justified grids resize the images so that they fit in justified rows rather than columns. This by default makes the grid look very neat, nevertheless, it lacks the scroll-more-iness of masonry grids. (side note: Who do I speak to about adding ‘scroll-more-iness’ to the dictionary?)

Who should consider this pattern: Image sites.
Pros: You may be able to display more images which encourages bulk comparing.
Who uses it: Shutterstock, Google Images, Flickr.

Best practices for grids

Here are a few best practises you can follow around styling your grid.

Product images
To encourage potential buyers, consider how you can make it easier for them to compare products. You can do this by;

• Using the same or similar background colours. Most online stores use a white or plain background.
• If you are selling clothes, make sure your models are in familiar poses. Also, avoid having your models wear the clothes inside out or sitting on the stove or anything else that Zara thinks is a good idea.

Title length
What is the best length for a product title? Often you won’t get much of a choice in this, but as a general rule — shorter is better for grids because, depending on how many columns there are, you may not have that much space for copy. And having a long column with single words just won’t fly. I would recommend deciding on the maximum number of characters per item title (based on horizontal space, font size and amount of lines) and asking the content creators to keep within that limit.

And obviously, avoid having descriptions or anything else that will be deemed as distracting from the main focus (the image). Consider seeing if you can get away without even having a title, like Shutterstock.

Amount of columns
If you expect to have lots of results per screen (e.g. a big retailer) you should have more columns. If you expect to only have a few results per screen (e.g. a boutique retailer) you can have fewer columns with bigger images. Think of it the same way you would a brick and mortar store; ‘Bob’s Groceries’ down the road, will have loads of products on their shelves, all piling over each other. Whereas, at ‘Fancy Pants’ on 5th Avenue, there will be one garment every square meter.

Grids on mobile
Most of the sites I reviewed keep their grid on mobile, and move over to two columns, the exception was Amazon who moved over to a list view. Having smaller images in two columns allows your users to see more items at once and makes comparing easier. Overall, If you don’t have to change your layout for mobile — don’t. Save the development time on something more practical like hiding Easter eggs or making custom cursors, for example.

Because a list item takes up all the vertical space, it means that fewer results appear on the screen at the same time. This could seem like a bad thing, but if the user is skimming the results — the fewer results on a page may help with reducing cognitive load and make for easier comparisons.

When to use a list:

• If your results need descriptions or supporting text.
• If you can’t rely on your results having (decent) images.
• If your images are all similar and need a description to differentiate.
• If there are certain text variables that need to be highlighted.
• If you expect some of your users to be in ‘search mode’.
• If you want to encourage your users to compare items.

Simple lists

Simple lists have very few variables displayed in them — usually just a headline and a description, maybe even a published date if you want to get really wild. With such a simple layout, it allows users to easily skim and compare headlines and descriptions.

Who should consider this pattern: Search engines and news sites
Pros: You don’t need to rely on specific variables
Cons: Because they are so simple, they can look under-designed without the proper consideration.
Who uses it: Google search, most news sites

Horizontally stacked items

Horizontally stacked items make comparing elements even easier given that you can surface more information.

But how should you style them?

Think of scanning items on a table (like Google Sheets — not a dinner table) and use the same principle. The standard layout for horizontally stacked items from left to right seems to be:

1. Image,
2. Left-aligned title and description,
3. Right-aligned star rating and price.

Depending what it is you are selling, you may have more elements like ‘company name’, ‘amount of beds and bathrooms’, ‘amount of people who have done the course’, ‘distance from the closest dive bar’, etc. Using this table-like structure allows the user to easily skim the elements that they are looking for.

I would only recommend this layout for non-physical products (online courses, home rentals, etc), because with physical products, users tend to only visually compare items and not their information (think of when you are buying shoes or clothes) in which case a grid is better.

Who should consider this pattern: online retailers selling digital products, real estate companies, tourism, and other non-physical services or products.
Pros: Good for skimming and comparing information.
Who uses it: Airbnb (desktop), Udemy, Bookings.com, Amazon (sometimes), some news sites.

Vertically stacked items

Products that were designed to be ‘mobile-first’ generally have vertically stacked items — and this makes sense, as it scales down best on small devices.

Depending on the context, some sites may switch between vertically and horizontally stacked items. For example, on desktop, Airbnb is horizontally stacked, while on mobile it is vertically stacked.

Who should consider this pattern: Social networks
Pros: Works if some of the results don’t have images.
Cons: Can view fewer items on a screen (desktop).
Who uses it: Airbnb (mobile), Instagram, Twitter, Facebook

Best practices for lists

Ideal line length on horizontally stacked items
When users are searching, they want to be able to scan & skim information. Having too few characters per line forces the user to read every word and stop at every line break. Having too many characters per line, makes it confusing to keep your place while reading. So what is the ideal length?

According to Baymard: 50–60 character per line
According to Web Typography: 45–75 characters per line

Personally, I have been using WebTypography’s rule — but that is only because I found the Web Typography rule years ago… And it is also more forgiving when I miscalculate something in my grid.

Mobile
The list with vertically stacked elements works really well on mobile. If you have a grid that is horizontally stacked, see if you can reshuffle it on mobile to stack vertically. And if your list is a simple one, well — it should already be mobile-ready anyway.

Fallback image
The fact that you have gone with a list and not a grid, tells me that either, a) you are relying on your users to upload images, b) images aren’t as important as the text content. So, when setting up your design rules — make sure to have a fallback/default image if it is missing.

4. Result or item styles

In this section, we will look at common stylings for search results or items.

Skeuomorphic/elevated cards

These cards help give your platform depth and unifies the content clearly. I enjoy these cards more on mobile as they feel more ‘real’ than they do on desktop. This is not based on any research whatsoever — I just like it. Interestingly enough, Google’s standard search uses this pattern on mobile and not on desktop — so maybe that supports my theory?

For shits and giggles, head over to Material Design’s page on card components, and you can play around with adding descriptions and media to their interactive card. Gosh. Material Design is just like the best right?

Something that I have struggled with when using elevated cards is something I only learnt from experience. When a user clicks on a card, they expect the whole card to be the link — especially if the card has a hover state. All of this is fine IF you only have one link on your card. But, now, let’s say you want to have a ‘favourite’ button, a link to the author’s page, a kebab menu, etc. it forces links (the buttons) on top of another link (the whole card). This can get really hairy and is not a problem that you would come across with a flat design where the whole div isn’t a link.

Pros: Looks like a single unit.
Cons: Not great if you need to have multiple links on a single card.
Designer notes: Make sure your background and card colours are different as the dropshadow alone isn’t clear enough to elevate it.
Who uses it: Google Search (mobile), Sky News (Checked in May 2020)

Outlined cards

These guys are the nerdy cousin of the elevated cards. They work the same way — but they load a bit quicker.

Pros: Because it isn’t as skeuomorphic as elevated cards, users don’t expect them to act as a single unit as much and you can get away with more links in a result. Just look at Bookings.com.
Cons: I personally don’t find it as attractive as some of the other designs, but hey, one of the world’s biggest social network’s uses it so it must be effective, right?
Designer notes: Consider making your background a bit different from the card’s colour.
Who uses it: Facebook (desktop), Bookings.com (Checked in May 2020)

Flat

Because it is clean, simple, quick to load and puts the emphasis on the content and not the design, this style of flat list has become very popular. But ‘how do you separate the different results from each other?’ you may ask, well you have two options;

1. you can use white space and consistent design elements to show separation. Think Instagram.
2. You can use faint lines to show the separation. Think Airbnb and Twitter.

Pros: Clean, simple, and puts emphasis on the content.
Cons: Flat designs can look ‘under-designed’ without the proper graphic consideration. Just compare AirBnb and Amazon (list view) to see what I mean. Both have graphics, line separators, star reviews, etc. but AirBnb just looks more polished.
Designer notes: Be very considerate when choosing your background and font colours. Avoid defaulting to #000 and #fff as this can be very strenuous on the eyes. (Reference)
Who uses it: Google Search (desktop), Amazon, Pinterest, Airbnb, Twitter, Udemy, CNN, (Checked in May 2020)

Mix

To emphasize a result that is more important than others, mix it up by using different styles for the important stuff and flat layouts for the generic.

Who uses it: Google news (app) (Checked in May 2020)

5. Closing thoughts and how to best workshop this with your stakeholders

The reason I first got interested in this subject was because a team I was working with wanted to use a grid design for our online learning platform’s search page. Because grids are pretty. Because images are pretty. Because text is ugly.

And then I walked in, guns blazing, saying that for online courses, a description is more important than having a big image (unless it is like, art classes or something) hence we needed to use a list layout. I showed page after page of research about why it was a better pattern for our current use case. While I got my way in the end, I regret my approach and should have been more informative and supportive with my team and clients.

If I were to workshop this now, much like the ‘neck and head’ metaphor used in My Big Fat Greek Wedding, I would have slowly bought everyone with me onto the same logic journey. I would have started with the following questions:

1. Are the users in search mode, browse mode or both?
2. If the user is in search mode, what will help them make decisions?
3. If the user is in browse mode, what is entertaining them?
4. List elements in order of what the user would find most important when searching/browsing.
5. What design pattern (list or grid) are our competitors using and what elements are they emphasising? (Sometimes, looking at your competitor’s work is like getting free user research.)
6. What platforms are solving a similar problem to us and what pattern (list or grid) are they using?
7. What design pattern (list or grid) would best support our user’s needs?