10 Cool Ideas for Making your Category Pages Less Boring

Posted by Hannah Stacey 28 Aug 14

In the hierarchy of pages on an ecommerce website, the lowly category page probably feels a little, well, un-loved. Sandwiched between a show-stopping homepage and carefully-crafted, persuasive product pages, category pages are essentially a bit of a stop-over, designed to move visitors down the purchasing journey.

While from the outset category pages may seem a little formulaic, varying very little from site to site with their grid-based layout (undoubtedly because this format works), some top online retailers are spicing theirs up a little. Here are ten ways they’re going about it:

1) Quick view

Many online stores are offering visitors a ‘quick view’ option which launches a nice popup or lightbox on the category page itself for visitors to get a closer look (a really nice example from Nasty Gal below).

The thinking behind this is that clicking through to a page and then hitting the ‘back’ button in UX terms is far more bothersome to your visitors than the act of closing a popup. With ‘pogo-sticking’ - or hopping between category page and product page too many times - a proven conversion killer, offering your visitors this option may well be a good shout.   


nasty gal pop up


2) Save for later

Giving customers the option to ‘wish list’ items that take their fancy so they can view them again later is often hailed as a powerful remedy to high basket abandonment rates.

While many are starting to add this functionality to product pages, some top online retailers (such as ASOS and New Look below) are also adding this option to their category pages. After all, if casually browsing, selecting a range of items and then weighing up their options is how some customers choose to shop, the category page seems a logical place to enable this to happen.

asos category page

 

3) Multi-view

The category page can often present something of a design dilemma: online retailers often find themselves torn between creating a page that’s aesthetically pleasing, wanting to include as much detail about each product as possible (to prevent pogo-sticking) and reducing the need for too much scrolling (though it should be noted scrolling is nowhere near the inhibitor it used to be).

When it comes to product images, many top online retailers, such as American Eagle below, have all the above covered by creating dynamic product images on the category page that change as the mouse hovers over them - no wasted space here. Likewise, Ben Sherman lets visitors click for previews of different colours and variations of items, all within the category page.

american eagle category page

 

4) Extra product info    

As mentioned above, the more information on the category page the better when it comes to cracking down on browsing fatigue caused by jumping between category and product pages. The premise is this: the more information you can give your visitors on the category page, the easier it is for them to decide whether they’d like to check it out or not.

The example below from IKEA does a great job of this; hovering over an item on the category page brings up all sorts of vital stats, like measurements and colours that disappear again when the mouse moves away, restoring the category page to its minimalist glory.

ikea category page


5) Reviews

The power of social proof is often drawn upon in ecommerce web design and some, like good old M&S below, are choosing to display star rating on the category page. Just remember: don’t be tempted to fake reviews or only publish the nice ones!

m&s category page

6) Experimenting with layout

While category pages have traditionally stuck to a good old grid-style layout, some online retailers, like H&M and Pull and Bear below, have decided to get a little out-there with page design, opting to bring certain products to the fore (useful for getting your hero products in front of as many eyeballs as possible).

mango category page

category page


7) Badging

Probably not technically a word, but another way online retailers are drawing attention to certain products on the category page is by slapping a big ol’ badge on them. For example, River Island has its ‘RI loves’ range, while Fashion Union marks up bargain items with ‘FU steals’.

river island category pagefashion union category page

On a more subtle note, Topshop and Ted Baker choose to highlight unique features of some of their products

topshop cateogry page

 ted baker category page


8) Promoting content

As the lines between content and commerce increasingly blur, we’re seeing a lot of online retailers producing some really great editorial website content. A couple, like Warby Parker and Reiss, use the category page to link to content that’s closely related to the products on the page.

This comes with a big disclaimer: if you’re advertising content from the category page, make sure it’s shoppable and closely linked to the theme of the page, else you could end up distracting visitors completely and losing the sale. As always, testing is key - if your conversions are dropping, it might be time for a rethink. 

warby parker category page

 reiss category page


9) Calls to action

Giving people a slight nudge with an effective call to action may just be the prod we need to take the next step and click through from a category page to a specific product.

Fashion retailer SheLikes does a great job of this - as the mouse hovers over each item a shocking pink ‘view me’ CTA appears to coax us in. And it’d be rude not to oblige, right?

categoty page

10) Shop the look

This is a really nice one. With the rise of online lookbooks and shoppable image and video, we’re starting to see retailers get their cross-sell on, grouping together products and allowing visitors to ‘shop the look’. Fat Face does a really great job of this, incorporating a scrollable ‘shop the look’  image carousel with related products on each category page.  

fat face category page

 

Ecommerce Product pages  

 

 

Topics: Ecommerce examples, Ecommerce website design, Ecommerce ux

Artboard 10 B-1.png