Grid and List Views for Mobile

For the past few weeks I’ve been working with an app that uses a lot of grid views and in version 2 of the app the intention is to provide an option to view some of those same screens as list views. As you are likely aware, list views and grid views are the primary means for presenting search results and normal data on smartphones. It’s great to have the option to choose, but usually we use one or the other to present data.

First of all I’ll briefly define each view type.

List views present data in a vertical list. Usually there is a thumbnail (postage stamp) sized image with some accompanying text that’s at least 2-3 lines long. So list views are text heavy and image light. In fact, sometimes list views do away with an image altogether and just present text. Here are a few examples:

List views have a lot of advantages. They follow the normal reading pattern of left to right and then down (F-pattern). You can usually fit more items onto the screen and a users attention is drawn to the first items on the list and their attention diminishes as they scan down through the list. This is desirable assuming that you program the list to contain the most important results of a search or filter at the top. List views are utilitarian. They’re more practical than grid views, but less fancy!

Grid view functionality was provided in Android and iOS after list views. In the earlier days of mobile development, we had to provide grid view style UIs by using a list view and altering it to look like a grid view. However, they were soon provided as a standard control within mobile development.

Grid views contain repeated cells organized horizontally and vertically. Instagram is the app that immediately springs to mind. Grid views are ideal for viewing photos or viewing search results that are primarily visual in nature. When there is text to display along with the images, then the text is usually minimal, otherwise it defeats the purpose of using a grid layout. Grid views are more decorative and tend to grab the users attention more evenly across the search results and the user often sees less results per screen than a corresponding list view. Obviously grid views require more scrolling in order to view the same result set.

Which is best ?

It depends on the content. If the content can be better represented visually then a grid view is superior. However, if it is difficult to capture or describe the content in a visual manner then list views with more detailed text should be used.

The really good example would be a list of USB Keys or Dongles. These are best presented in a list view with the vital elements of the USB dongle being specified in the text (eg. the storage capacity and data transfer speed) and just a thumbnail used to show the visual appearance of the dongle.

A good example for using grid views would be the aforementioned instagram app, where photos are being viewed.

But there are many examples where it’s very difficult to decide whether to use list or grid views. If you were presenting a result set of used cars then it might be desirable to use a grid view because a user may be able to ascertain enough details about a specific car from the look of it. The shape of the body may be enough for them to know the particular model and year. But if they’re doing a very detailed search across the same make and model then maybe a list view is better because they want to quickly differentiate based on minute details such as variations in engine capacity. This might me a good example where the effort and cost of providing both a grid and list view option is justified.