Design practices for manufacturer websites are unique, for reasons described in the first article of this three-part series. We suggest reading “Designing Your Manufacturer Website, Part 1: Defining Purpose” and then moving on to Part 2.
Manufacturer website catalogs have three types of pages:
We focus now on designing the optimal Product List Page. The examples come from the Dispense-Rite website, unless otherwise noted.
The purpose of the Product List Page is to help users navigate to the Product Detail Page(s) that fit their needs.
The Product List Page is not for learning specifics about individual products. A great Product List Page shows only the information the user needs to get to the correct next page. The faster users pass through your Product List Page, the better.
In three stages, the Product List Page narrows a selection of thousands of products down to five to 10.
Stage 1: Choose a Product Category
Users entering your website’s product catalog need a simple first step to start narrowing down. Clicking a product category in the global navigation provides that step. It lands them at a Product List Page that contains a subset of products from the catalog.
A large number of items on the Product List can overwhelm the user. So we direct the user to Stage 2.
Stage 2: Filter Products
On the Product List page, the user selects attributes in the filter, which instantly shrinks the number of products shown on the screen.
Filters should not shrink the results set to a single product, but to a number small enough – usually five to 10 -- for a person to easily scan and compare.
Stage 3: Browse Remaining Products
After filtering, the five to 10 products should appear in the middle of the screen. Users can quickly determine which product best fits their needs.
Make scanning easy for the user. Supply strong images and clear product names.
We usually recommend listing each individual product, as opposed to families of products, on the Product List Page. Most ecommerce sites follow this convention, so users expect it.
Listing every individual product speeds up the selection process, because it allows users to click directly to the specific product they need. Individual listings spare them clicking into a product family and then clicking again to view an individual SKU.
Some manufacturers, however, need to present their products as families. It makes sense, for example, for The Vollrath Company to show its fry pans as a family of products, as in the screenshots below. Vollrath offers many families of pans, and each family contains several SKUs. If Vollrath were to show each individual SKU on the Product List Page, the array of choices would overwhelm users, even after filtering.
To take a middle approach, list the individual SKUs on the Product List Page, but then link to the other items in a product’s family as “related items” on the Product Detail Page.
The right choice depends upon your products and the particular needs of your customers. You’re seeking the right combination of navigation, filters, and product family groupings that make it easy for users to narrow down to a reasonably small number of products on the Product List Page, after all filtering.
Product names are among the first markers that differentiate products in the minds of users. Consistent naming boosts users’ speed and comprehension as they scan your product pages.
Consider this list of ceiling light fixtures from www.todaysdesignhouse.com. Item names follow a formula: (1) number of bulbs the fixture holds (“2 Light”); (2) mounting style (“Ceiling Mount”); and (3) any other differentiating factors (“with Pull Chain”). The darting eye always finds the same arrangement of information, so scanning is quick and easy.
The lighting example also shows the importance of images. The look of each fixture is as unique as its functional characteristics.
Show only the most critical differentiating features for each product on your Product Pages. This listing from www.pactiv.com lists the Material Type, Color, and Dimensions -- just enough information to let the user know which product to click for further details, but not enough for a firm buying decision.
Exactly what information should you display? This is unique to each company. Determining what to include and what to leave off requires intimate knowledge of your market, products, and customers.
One danger of the Product List Page is listing the same differentiating factors in your filters, product names and product information. Minimize this redundancy. If, for example, you list different colors as your page filters, and the user can see the colors in the product pictures, don’t include color as part of your product name or other product information.
Common conventions place filter checkboxes on the left side of the page and products to the center-right in a grid or list layout. The rest of the design and layout details vary according to what information you need to display and your brand’s look and feel.
When designing your page, study as many similar websites as you can. What conventions are common on those sites? Stay within those conventions, and users will find your page easy to navigate.
The Product List Page is no place to be creative. Invent new approaches only if you absolutely must.
Don’t add graphical elements -- lines, background colors, miscellaneous shapes, etc. -- unless they are necessary to create visual separation. This page hits users with a lot of information, so don’t add clutter.
Your main takeaway from this article: Designing a Product List Page is about information architecture, not aesthetics. Another takeaway: This is not a trivial undertaking.
Changes in information architecture can have far-reaching effects. They can imply changing data or even the entire way you arrange your product hierarchy. They could easily require changes to your Enterprise Resource Planning (ERP) and other systems. They could involve half the people in your company.
After creating a first version of your Product List Page design, you can start designing the Product Detail Page. Design of both pages will likely involve some back-and-forth and multiple revisions. The process involves lots of decisions, many of them interconnected, as you move certain pieces of information up or down a page level.Which brings us to Part 3 of our series: “Designing Your Manufacturer Website: The Product Detail Page.”