Not long ago I booked online a hotel reservation for a weekend trip. I went through the process of locating, digesting, and narrowing down my options across a handful of different websites. In the end it took several days before I was finally able to decide where I wanted to stay, and it was downright exhausting.

Making hotel reservations on the web,like so much of what we do online, involves viewing, evaluating, and narrowing down options. Most of the time users specify a set of criteria or browse through a set of categories, and end up on a listing page, which contains several candidate items or list entries. The listing page is ground zero for analyzing the many available options and it needs to support efficient scanning and decision making.

Note: Listing pages are sometimes called “category pages” (when they contain items belonging to a specific product category), “directory pages” (when they list locations or people), or “gallery pages” (when they contain graphics or images). Search-engine results pages (SERP) are yet another type of listing pages. Throughout this article we will refer to all of these overview pages as listing pages.

hierarchy listing page
The listing page acts as a hub displaying a list of candidate items (list entries) that potentially match the users’ needs. Each list entry commonly contains a high-level description of the item and a link to the item’s page (detail page). Note that sites with a deep navigation hierarchy would have additional levels between the homepage and the listing pages.

The usability of the listing page depends on how the individual list entries are designed. Each entry needs to be not only functional and easy to understand on its own, but it also needs to work well with the other options listed on a page. There are several requirements that need to be met to achieve usable list entries and listing pages.

1. Prioritize List-Entry Attributes to Create an Information Hierarchy

When users browse a list of options, they want to determine quickly which items are of interest and which they can disregard. Too much information can overwhelm users and create a cluttered appearance. On the other hand, a list entry without enough detail leaves too many questions unanswered, forcing users to pogo stick (that is, to navigate to each detail page to get the information they need). Pogo sticking often signals insufficient helpful details on the listing page.

circa lighting listing page
Circalighting.com: On this gallery page, list entries for wall sconces show only product names and leave out important details such as finish, bulb type, or even price. Users must navigate in and out of each item’s detail page to get this information. Although, when shopping for wall sconces, the image may be the most important element for shoppers, price and other significant differentiators should not be left out at this level.
usa autoparts list entry
Usautoparts.net: This listing page for car accessories includes too many details for each product. Users must scan through a long list of product attributes to pick out those products that are relevant for them. With such a design, browsing is tedious and comparison difficult.

Like in the Goldilocks story, the amount of product detail in the list entry needs to be just right: too much will overload users and prevent them from seeing enough choices in one view, too little will make them pogo stick. Identify the attributes that satisfy the information needs of the majority of your audience and present those in the list entry. Use analytics and user research to guide you in deciding which attributes convey most information for your users:

  • Analytics – If you currently have sorting or filtering capabilities on your listing pages, figure out which filters and sorting criteria are used most frequently. Which are used for the first round of winnowing, and which are used later on to tweak the result set further?
  • User research – Run diary studies and usability studies to understand which elements are important for decision making and to what degree, as well as which product attributes are commonly used for narrowing options.

The user data and the analytics will help you determine which attributes to include in your list entry, which to emphasize, and which to downplay. Determine the priority order of each attribute before you begin to think about list-entry layout and visual design. These priorities will set the basis for the information hierarchy inside a list entry.

We’ll save you a little research by telling you that in all our 22 years of usability testing, there’s one piece of info that every user has requested: the price.

travelocity list entry
Travelocity.com’s flight-listing entry includes key pieces of information such as departure time, arrival time, travel time, number of stops and length of layover, as well as flight number and operator. This information helps users select a flight without overwhelming them. A path for additional detail is available if needed.

2. Reflect Attribute Priorities in the Mini-IA and Visual Design of Each List Entry

The design of individual list entries should help users quickly understand each option and should support product comparison.

Treat each list entry as if it were a small webpage and make sure that your layout and visual treatment of each attribute within that description matches its priority relative to other attributes.

  • Placement and Layout – As a rule of thumb, the top-most and left-most areas of the list entry container garner the most attention. Higher priority pieces of information should be placed in these areas (at least in cultures that read from left to right). With this in mind, organize the attributes by priority to create a hierarchy of information (or mini-IA) within each list entry.
GraingerSerp
An eyetracking gaze plot of a search engine results page shows that the user scanned each list entry and directed most gazes toward the top-most and left-most areas of each entry.
  • Visual priority — Draw the eye to the most important pieces of information through visual design:
    • Emphasize key attributes by increasing font size and weight or using a unique or dark color.
    • Consider including iconography to draw attention and support scanning.
    • Isolate an important attribute with surrounding white space, making it stand out to attract attention.

    Be careful when applying visual treatments to draw attention to key attributes. Overdoing it can backfire and make it difficult to scan a listing with so many competing items.

Together, the placement and visual treatment of information create a visual path that leads the eye through the collection of attributes in the order of their importance, making it efficient and easy to scan each list entry. Many users may only need to do a shallow scan of the most important and emphasized attributes to make a decision. Those with more specific needs may take a look at the secondary attributes for a deeper understanding of their options.

United Healthcare List Entry
A list entry in the United Healthcare’s medical-provider directory page emphasizes the provider name in large blue font. The provider’s specialty is also stressed in a smaller but bold font directly below the name. Other important pieces of information are isolated and paired with icons toward the right to draw attention. It is easy to see the key pieces of information about this provider at a glance.
Booking List Entry
A list entry on Booking.com lacks a clear information hierarchy and offers no visual path to users. This list entry includes too many unique and competing visual treatments, requiring a lot of effort to scan and understand it.
Next Warehouse List Entry
A list entry on Nextwarehouse.com provides no information hierarchy: the product name, price, inventory, and other details have the same font and visual styling. Although the brand name and part number are shown in red and blue, respectively, the contrast is too low to effectively draw the eye, making it difficult for the users to parse out important attributes.
Next Warehouse List Entry corrected
Our redesign of the NextWarehouse.com list entry: With only a few visual-design tweaks, the important information about this printer comes to the foreground. Additional information is prioritized and left aligned, making this list entry easy to scan and understand.

3. Use Consistent Styling Across List Entries to Support Comparison

In our eyetracking research we find that, when users have to select among several options presented on the listing page, they often look from one list entry to another and back again — comparing similar information across different entries. To help this process, the list entries should be predictable and consistent, with the same placement and visual treatment for corresponding attributes.

List Entry Comparison
An eyetracking gaze plot from a user shopping for a digital camera shows that the user’s eyes moved back and forth between two different cameras. This zig-zag pattern suggests that the user was comparing product attributes.
Travelocity Listing Page
Travelocity’s flight list entries are consistent. For each flight, the same piece information is represented in the same place using the same visual treatment.

Although the layout and attribute placement within each list entry should be largely the same, there are circumstances where important distinguishing information may need to be featured. For instance, if a product is on sale or sold out, it is acceptable to show unique callouts or iconic indicators to draw attention to it. However, be selective about which pieces of information you choose to call out in this way. Showing unique indicators for more than 2–3 situations can make the listing page cluttered and difficult to scan.

Redmart Listing Page
A user shopping for toothpaste on Redmart.com found the sale indicators helpful, remarking “One thing good about looking at all of the toothpaste like this is that it’s easy to see which items are on sale, so I may choose to purchase one of those items, when I otherwise may not have.“
Booking Listing Page
Booking.com’s list entries for different hotels are inconsistent — hotel details change placement from one item to the next. This example also shows how using too many indicators can easily get out of hand. In the 3 hotel descriptions above, there are 11 dynamic indicators featuring different pieces of information, making the page cluttered and the hotel comparison difficult.

Conclusion

Determine what information most of your users need to narrow down their choices. Prioritize this information and create a consistent mini-IA of details in each list entry to make it easy and efficient for users to understand and narrow down options.

Our full day seminar on Web Page UX Design discusses visual priority and layering content on listing pages, as well as tips for creating successful web pages that meet user needs and business objectives.