List vs grid: which one is right for your mobile design?

Come with us as we dive deep into the list vs grid debate. Which one will best serve your UX design?

When it comes to creating an awesome user experience, there are thousands of mobile UI patterns out there to choose from. This is both good and bad. The good is we have many choices with which to satisfy our user and give them a great user experience. The bad? Well, it means at Justinmind we end up having debates like list vs grid.

No matter how you design the navigation for your mobile apps and websites, the final interface should make sense to the end-user and prevent needless frustration. With that in mind, let’s break down the list and the grid and see how each one stacks up when it comes to different ways of consuming content and information.

If you want to check rather you want to include either of these patterns into a wireframe or a mockup, check out our guide on wireframes vs mockups and see which one you need right now!

On the left: the grid, on the right: the list

The grid structure

The grid. It’s characterized by a set of cells. Those cells are divided by columns and gutters. The columns are the wider divisions where you’ll usually find the UI design and content of a mobile app or website. The gutters are the spaces between those columns.

In the example on the left, there are two columns. With the gutter cutting directly down the middle, both horizontally and vertically. Gutters are adjustable so you can make them as big or as little as you want.

Typically, the grid is used to divide the screen space into equally-sized cells which makes navigation easier to understand. The beauty of the grid is how customizable it is and how much order it can give to your designs when you’re deep in your favorite prototyping tool. Other benefits of the grid include:

• Makes efficient use of space and structure
• Grids can offer visual harmony

The list structure

Now, the list. The list is unlike the grid in that this navigation pattern simply consists of one element following another whether alphabetically, numerically or even randomly. In the above example, you’ll see a standard vertical list for a product range.

In almost every app that’s made, there is some form of list to be found somewhere. They’re great for letting the user flow from the top to bottom when using a vertical scrollable menu. The list can come in many different disguises like the product list above or even drop-down menus. Lists take up less space than a grid so are a good option if your content is text-heavy.

Other benefits to lists include:

• Great for efficient scanning
• Perform better when there’s less screen space

Tip: With HTML, you can create a whole bunch of list types. And, one of the main things you will want to consider when looking at grids and lists is the ability to make it fluid. Check out some of these great responsive website examples!

Now let’s take a look at the different ways we consume content on our devices and see whether we want to use the grid or the list.

List vs grid: consuming content

Grids are a useful tool for bringing logical structure to your design. When we design using a grid framework, we’re setting ourselves up to organize and collate information and content elements together to make it easy to follow and comprehend. Yep, the grid really is that magical. Rachel Shillcock wrote an excellent how-to guide for getting your head around the grid.

In our example, the grid is dense and has visual and textual elements, with a large icons to boot. This combination can make for really good usability because of the size of each block in the grid. Everything is easily read and it’s visually pleasing, too.

A good tip is to keep your content simple with a grid. A grid should bring coherency to your design and when you have a lot of UI elements tacked to a grid, it can start to become busy and messy which could lead you down a path you don’t wanna go down.

In UI design, grids are very common. And with the prevalence of responsive web design and prototyping, grids are now taking up the entire screen. When it comes to displaying cards or designing a task-based mobile app, a grid can really help you here.

When it comes to consuming content, however, the grid is less useful because the large structure doesn’t afford the designer much space to use additional content. The list, on the other hand, is in its element when it comes to browsing and consuming content…

If you take a minimalist approach to displaying your content then a grid is going to do wonders. However, if you have a lot of content to show then a list is going to help you present comparatively more content and, surprisingly, more visual elements in the overall UI design. From the above example, even though the grid is striking in its appearance, it takes up more real estate than the list.

Lists are ubiquitous and we use them so often throughout our lives. Whether it’s keeping track of items, writing our shopping list or even scheduling meetings in a calendar, we automatically rely on lists. As Nick Babich put it, they’re best for presenting homogeneous data type.

In the above examples, the list not only allows us the opportunity to use text, icons and imagery – we get more of it than had we used a grid.

Feel free to check out this post and see the differences between high and low-fidelity prototypes.

List vs grid: scrolling through content

So, you’re leafing through your content. Which is better? List or grid? In the above example, on the left, you see a typical ecommerce site making use of a grid. As mentioned, it takes up the entirety of the screen. This is a great way to emphasize the navigation because it’s clear and obvious and the bold use of imagery adds to the ease of use. And each block of the grid has a good amount of content for the user to digest.

Using the grid in the way the ecommerce website has is great when you want to display various data because the grid isolates blocks of related content in a condensed way. The user is focused on one block until they’re ready to scroll down (or up).

On the right, there’s a messaging app. The list allows for easier scanning with multiple links traveling down the page. In our messenger app, it’s easier to read all of the important information including navigational links because the list presents the information in a coherent way – one link after another. When it comes to using a list, it’s good practice to have ample spacing between links so as to avoid unwanted clicks. You want to create menu links which are big enough to be easily tapped or clicked.

Tip: Try using a rainbow-style menu that clearly demonstrates items of a control panel line by line and grabs attention.

Inspired? Why not prototype an ecommerce app?

List vs grid: random browsing

You hungry? In the example above, the grid organizes data into a rigid but understandable format. It’s very Tumblr. But it’s easy to use as each card has an image with copy. Using the grid in the same way as the example is great if you have a product to show off and want to make use of bold imagery.

That’s why the grid works especially well for websites and mobile apps on websites like Tumblr and Pinterest – they’re visual platforms.  In the grid above, the view is more appealing to the eye and helps users when examining visual distinctions between items. Although, it should be noted that this style of grid view can create longer pages forcing the user to scroll more than they might want to.

Now we have the list. Everything in our example above is ordered well and is easy to understand.  There is more detail involved – price, rating, distance, location, date and name. The list is great when you need to be more comprehensive because your users have to make decisions and need relevant information.

In essence, the grid is useful when you don’t need to give the user much information (for example, on Asos.com where users only want to look at the clothes and see how it looks on a model). When you don’t need to give out more crucial information, then a list is your best bet because the user is making a decision based on more intricate factors than solely appearance alone.

Tip: By following a simple naming convention style, you can generate “multi-level menu structures”.

Conclusion

Whichever mobile navigation style you go for, opt for simple user flows, clear visuals, and forgiving designs to help to give the user a seamless experience. After all, you’re designing for your users! With a helpful app prototyping tool like Justinmind, you can build and test out your mobile navigation early on in the design process.