Lists are important building blocks for the world wide web, and they span a wide range of applications. From a railway time table to an online store. From a hotel accommodation site to Wikipedia's infamous list of lists of lists. In this blog post I will go through different types of list entries and listing pages, and how to design them with respects to some guidelines of information architecture.
When people hear the word list, they tend to think about simple, text-based objects like shopping lists or a phone directory. In Information Architecture we use the term list in a more expansive way. Mostly everything on the web that has content in some order can be described as a list. A youtube video or instagram post can be considered list entries, and the youtube results page and Instagram feed will thus be listing pages.
There is currently not a lot written about list entries and listing pages. Most resources are directed towards increasing sales for e-commerce, but from a User Experience and Information Architecture standpoint, the well is pretty dry. I have gained some knowledge on the subject from reports and writing by the well known Norman Nielsen Group, but I have also been trying to see where other known Information Architecture guidelines can be incorporated into list design.
A list entry is an individual item in a list, and is the main focus of this blog post. Without list entries there could be no lists. If you come from a developer or programming background, you might know the list entry as a *list item* (or <li>). List entries are grouped together in what is known as a listing page.
Listing pages, as briefly mentioned above, are containers for list entries. They are often filterable and sortable, so they can display content tailored to the user. Listing pages can be found in different shapes and forms around the web. In an online store they appear as product result pages or category pages (if they show content from a specific part of the store. In a phone number lookup service they may be known as a registry. And indeed, Google or your own personalised Facebook news feed can also be considered listing pages. In addition to containing list entries, listing pages normally allows the user to filter and sort the search results.
How to design listing pages
Filtering and sorting is important for almost every user, and is way too complex to be covered in a single blog post, (let alone one on another subject!) but as these functions are integral to the Information Architecture in a listing page, I will make a quick summary.
Filters and facets is extremely important on a web site, especially in e-commerce. According to the NN group having too many options, and no possibility of narrowing them down often leads to abandoned purchases. Filters exclude content that doesn't meet certain criteria, for instance ensuring that male running shoes doesn't show in a listing page for women footwear. faceted navigation basically extends the idea of filters even further into a complex structure that attempts to describe all the different aspects of an object.
Sorting is also very important for navigation on the listing pages. What sorting options one chooses to include will of course vary from application to application. For instance, a chronological filter is a necessity on an online newspaper, but not always necessary in a webshop. The possibility of sorting by price, however, is something that almost every paying customer expects to find. No matter what sorting categories you choose to include in the web page, it is important that they are clearly labelled. Categories such as "recommended" makes little to no sense if the users does not know what the recommendations are based upon.
Listing pages are most commonly designed with either a vertical list view or a grid view. There are alternatives (an image carousel for instance, may be considered a listing page), but for most applications these two are central.
Grid views maintains the same level of attention across the entire page. They work well for exploratory searching and for products focused on viusuals and looks, for instance fashion and interiors. Most online clothing retailer choose to with a grid view, and for good reason. List views provides the user with a format that support our natural "F-shape" reading pattern, and is great for technical and detail rich applications. If you are selling electronics or car parts I would in general recommend a list view.
How to design list entries
When designing a list entry the challenge is to balance the amount of information shown. You want to show as much information as possible. If users need to click the list item to go into the detail page and find the information they are looking for, that's a bad thing. This jumping in and out from listing pages to detail pages is known as pogo-sticking, and should be avoided. However, for most applications, showing all relevant info in a list entry would be impractical and create clutter. One should aim to design the list entry as information/rich as possible while still keeping it simple, and keeping clutter to a minumum.
Below is an example for a fairly technical application: A desktop computer processor. The examples on the left (from Elkjøp and NetonNet) are part of a grid view which is not suitable for this type of product. Processors are not visible in most cases, so dedicating this much screen space to the picture of the packaging is unnecessary. On the right we can see two different executions of the balance between detail and simplicity. ProShop (top right) shows almost every important piece of information on the list entry, while Komplett (lower right) keeps all vital information condensed to a single line. In my opinion the latter example is a great way of showing important info while reducing clutter and screen space!
Efforts should also be made to make listings fairly compact. Earlier, guidelines advised designers to fit all content into the viewport, (the available screen space on a monitor or display) because studies showed that users spent almost all screen time above the fold, which is where the page disappears into the bottom border of the screen.
Unlike the UX guidelines of yesteryear, the general consensus is that most users scroll on websites to various degrees. However, 57% of all screen time is still spent above The Fold, (which is where the page disappears into the bottom border of the screen.) This means that compressing list entries, so that more items appear above the fold is still a good idea. In the example from earlier, ProShop's solution uses twice as much screen space as Komplett.
The last point I would like to make, is that the List entry design should support comparisons. Eye-tracking studies shows that users look back and forward between list entries to compare. This means that elements in list entries should always be similarly styled and organised. In the examples below, we can see that booking.com uses a wide variety of different text colours, stickers and individual elements to differentiate each list entry. Presumably (and maybe correctly), booking.com believes this will increase their sales, as it provides a feeling of rush, hurry, and importance to the listings. Airbnb, however styles all list entries in the same, sober fashion, which makes it easy for the user to compare the different aspects of the listings.
Most of the information in this blog post is based on insights and reports by the Norman Nielsen Group. For further reading please see: