In spite of the modern trend towards larger-screen phones, what makes mobile phones so convenient and portable is their small size. Compared with desktop screens, phone screens accommodate a lot less content. Users can only view a small amount of content at a time before they need to scroll to view more. But designers still need to find ways to provide content in the most effective way.
Today I would like to overview two basic patterns for content presentation — list view and grid view, and to provide use-cases for each of them.
List View and Grid view. Source: MaterialUp List ViewLists present multiple line items vertically as a single continuous element. It’s text heavy and usually have only small icons with text. List view items require less vertical space than an image would, allowing more list items to be displayed on the screen at a time.
List view example. Source: Material Design. Content ScanningList view provides users a format that follows their natural reading patter like the F-shaped pattern
F-Shaped Pattern example for web contentLists are best suited to presenting a homogeneous data type and optimized for reading comprehension. List view prevents too much scrolling by making pages shorter. The exclusion of images (list view has only thumbs) allows you to fit more options per screen.
Example of list with typical scanning pattern. Source: Material Design.Last but not least, when dealing with the list view, the attention of users decreases from top to bottom.
Decision MakingUsers rely primarily on reading the text to make their selection.
Pros and ConsComparing with grid view, list view has following advantages:
But it also has a few disadvantages:
Grid views are an alternative to standard list views. Grid lists are distinct from grids used for layouts and other visual presentations. A grid list consists of a repeated pattern of cells arrayed vertically and horizontally within the grid list.
Example of grid list. Source: Material Design. Content ScanningGrid view provides users a little more interruptive scanning format, making it best suited for visual content. Usually the images dominate most of the cell space.
Example of grid with typical scanning pattern. Source: Material Design.Users attention tends to be spread more evenly between each grid cell. Grid view is optimized for visual comprehension and differentiating between similar data types.
Decision MakingUsers primarily rely on the images to make their selection. One important moment here — the user often sees only 4 or 6 grid items at a time.
Grid view example for ecommerce site. Pros and ConsGrid view has following benefits:
But it also has following major downside — grid views create longer pages and force users to scroll more. In example below you can see the difference between list view and grid view.
Red line show the visible part of the screen. Image Source: nngroup A General Rule of ThumbWhat is the most efficient layout for viewing content? Should you use a list or grid view? The right answer is: it depends on the nature of your content.
A key factor in selecting list view versus grid view is how much information a user needs in order to choose between items. You should choose the layout that suits the type of content you’re displaying.
Details in Lists, Pictures in GridsProduct pages are great example of the rule. Product’s specifics is very important moment. For products like appliances where details like model numbers, ratings and dimensions are major factors in the selection process — the list view makes most sense.
WallMart app for iOS.A grid view is a good option for online shops that sell goods that require less product information or for similar products. Grid is good for goods like apparel, where users don’t often read much details and the process of decision-making is based on the visual appearance of the product. Users compare different goods visually in attempt to find visual distinctions between different items, and would rather scroll through a single long page than repeatedly switch between the list page and product-detail pages.
MrPorter app for iOS.When designing these layouts, pick the right size of images so that they are large enough to be recognizable, yet small enough to allow more products to be seen at a time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3