The Ecommerce Guide to Category Page Design

Category results are “landing pages” to your site navigation links, and are important merchandising touchpoints. Customers that browse categories (vs. “spearfishing” through site search) need to be guided and persuaded to stay on your site and explore your catalog, and are influenced by both the content and products you present after each click.

In the early days of ecommerce, category landing pages all looked relatively the same, with products presented either in grid or list view, and narrowing options like subcategory and attribute filters displayed in a left-column.

In 2016, trendy ecommerce category pages look more and more like home pages, with graphic links to sub-categories, hero headers and other blocks of content (or a combination of these). What are the pros and cons of each approach?

Product grid

Despite design trends, product grid category pages are still used on many top-level category pages today.

planet-shoes-category-grid

The upside to the product grid is it doesn’t force the customer to narrow down to a sub-category before products are returned. It’s great for true “browsers” who, like browsing Pinterest, are open to exploring a variety of products. It’s also most appropriate for deepest-level sub-categories, regardless of how higher-level category pages are designed.

Seasoned Web shoppers understand product results can be sorted or filtered with sub-menus, and so long as these tools are clearly visible, will be able to control their experience.

Graphic sub-category tiles

The objective of showing graphic sub-category tiles on higher-level category pages (with or without displaying “hero headers” and/or left-hand menus) is to guide customers to tighter and more relevant results, which in theory will lead to higher conversion.

shoebuy-category-page

While this approach gives customers a visual way to winnow down to sub-categories, it can overshadow and detract from left-hand navigation links. If graphic tiles only show a limited set of sub-categories, it can give customers the erroneous impression that what they “see” is all you have.

Graphic tiles can also negatively influence the customer if a thumbnail image chosen to represent the category is unappealing. In the ShoeBuy example above, a customer may be looking for running shoes (listed in the left-hand nav), but judge the “Sneakers” category (in the graphic nav) as inappropriate for sport. Similarly, someone looking for cute, fluffy pink slippers may determine from the mocassin-like image that ShoeBuy doesn’t carry what she wants.

Graphic tiles work best when they represent a very specific set of product results, and ideally include more than one product.

browns-category-page

Browns’ Winter Boots graphic shows two very different styles, suggesting there is a variety behind the click that includes both pretty and rugged styles. Its Rain Boots category is very specific. And throwing in a featured brand category is smart – the visitor won’t conclude that her only options are two sub-categories and a single brand, and will be more likely to leverage the left-hand menu to scan all her options.

Content blocks

Many ecommerce sites craft top-level category pages as mini-home pages, complete with image sliders and persuasive calls to action.

globo-category-page

Unlike showing content or graphic links, this approach doesn’t compete with left-hand navigation. And if visitors ultimately ignore this featured content, it promotes the use of sub-category filtering.

Graphic content blocks allow merchandisers and marketers to sell more creatively. Aldo’s “inspired by” sections story-sell, wrapping persuasive context around merchandising themes.

aldo-category-page

Category Page Design Tips

Hero headers

1. Maintain “scent”

As landing pages, category pages should maintain the “scent” of the link that precedes them. One way to assure visitors they’ve hit the right page is to use a prominent page title, matching the category link text (this is also good for SEO).

American Eagle Outfitters’ Jeans category displays only hero graphics (no category title or sidebar navigation), resembling a home page. It’s not intuitive that it’s a category page, nor is it easy to scan options without scrolling and reading all text.

ae-jeans-category

Another way to maintain scent is to avoid featuring a single product type in a hero header.

bed-bath-and-scale

Bed Bath and Beyond’s Bathroom category sub-navigation is pushed below the large call to action for bathroom scales, which may confuse customers (especially on mobile sites, with smaller viewports).

Similarly, Abercrombie’s single product feature on it’s top-level “Mens” category looks a lot like a product page.

abercrombie-shirt-1

Scroll down further and only shirts are merchandised, appearing to be cross-sells for the featured shirt.

abercrombie-shirt-2

Image sliders are as problematic on category pages as they are on the home page.

gander-mountain-slider

Rather than showing relevant, static content, Gander Mountain’s Fishing category rotates through other categories, like Electronics.

Categories should also maintain forward scent — featured images should link directly to the product(s) shown, or to a product list with the item pinned to the top.

frye-not-clickable

Frye’s unclickable header image serves no purpose other than to push interactive content down the page (and frustrate customers that love the modeled shoes).

2. Ensure graphics represent the category

Images influence perception. Jimmy Jazz’ Kids’ category covers boys and girls, but featuring only a boy in its hero shot suggests this is the boys’ room.

jimmyjazz-hero-header-links

Hollister’s Girls category has two problems. New Arrivals has its own category. If a visitor selects Girls instead of What’s New, it’s less likely she cares what’s new.

hollister-fall-into-new

The hugging heroine shot also doesn’t create any desire for product. It’s impossible to get a good view of their jackets – and isn’t that the point of merchandising creative?

Avoid site-wide promotions that are not relevant to the specific category. Gymboree’s sale calls for click out of Baby to Boys or Girls. Baby Boy or Girl? It’s not clear. (Save these for your home page).

gymboree-header

3. Avoid redundancy

Hallmark’s Shop Birthday banner is redundant – the visitor is already in the Birthday category.

hallmark-shop-birthday

4. Avoid competing menus

It’s problematic when graphic navigation and thematic featured content doesn’t match category taxonomy. When page content and menus visually compete against each other, customers may not notice or benefit from all their options.

jockey-mismatch-category

Jockey’s hero header boasts Camis, Shapewear, Long Sleeve, Active; while sidebar navigation menu shows Camis, Racerback, Slip and Tank with a “view more” link.

5. Show off value props

Old Navy shows off category-level value propositions in some of its hero headers. For example, Petite styles are tailored to women 5’4 and under, complete with narrowed shoulders, shorters sleeves and inseam, et cetera.

old-navy-petite-category

Graphic category tiles

If you choose to visually display sub-category links with graphic “tiles,” use a tile for every sub-category (don’t show only a select set). Tiles grab more attention than sidebar menus, screaming “use us as your menu!” Ensure you’re not selling your customers short.

spencers-gifts-category-page

Choose your thumbnail images wisely. They should closely represent what lies behind each link. Spencer’s Gifts’ Party Lighting, Lava Lamps and Poster images represent tight product assortments, but Tech Toys, Room Accessories are more broad. Broader categories are ideally represented by more than one featured product (for example, Office Depot below).

officedepot-map

Unfortunately Office Depot’s sidebar navigation is inconsistent with its graphic nav and sub-links. This creates redundant links, and the customer has to choose which menu to actually use – not the best use of space.

Gander Mountain’s carousel may appear to be a better use of space, but many visitors will not “get” that there’s more behind the arrows.

gander-horizontal-categories

A better use of space for complex catalogs may be a simple but well-organized link map of sub-categories, like MEC’s.

mec-map

Many sites attempt to show snippets of sub-category results in content space, with “View All” or “More” links and buttons.

truncated-columbia-category

The challenge is shoppers don’t always notice the “More” links, and may assume what they see is all you have.

Content blocks

There are infinite ways you can present creative content on category pages, including persuasive text.

gap-merch-category

Ensure graphics, fonts and calls to action scale down for tablets and smartphones (in both landscape and portrait orientation), or are removed for optimal device experiences.

Also ensure to maintain post-click “scent,” and land the visitor on what he would expect from the image or offer.

Optimizing product results

Deepest-level category pages should always show product results. In the following chapters, we’ll cover best practice for sort and filter tools, product list design, pagination, category merchandising, product comparison tools, mobile category pages and A/B testing. Stay tuned!

Need help with your ecommerce commerce design or testing strategy? Drop me a line.

Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *