Today we’re going to give you an update on the part 1 of the list of usability standards for eCommerce category pages that sell.
After several hours of work put into trying to find and analyze additional five examples of effective category pages, our blog team shares this showcase, critique and optimization discussion. Check out and then look at your category page from the point of view of these good examples and improve accordingly, avoiding the denoted pitfalls.
* * *
- Quick look and 'try on' options: On H&M website, quick look appears as a pop-up window, displays color varieties, available sizes, and even gives a range of alternate views. What makes this particular quick look remarkable is a ‘try on’ option. Basically, the H&M store integrates of dressing room functionality on their website. This section allows customers to try on different styles, including clothes, accessories, shoes, and other products to see how all that items match together. Chalk it up to use in your store!
- Product image change on hover: when the user is mousing over the product's thumbnail, alternative image is displayed to show either a whole outfit or simply a product item (it actually depends on what was primarily shown). That is done for users’ convenience, they just hover over the picture for each product alternative views without having to click.
- Adding shadow to product image: at H&M store, they wrap the product images with shadow effect. This gives a depth and kind-of push the image towards the viewer. The shadow is translucent and takes on a bit lighter color than the image that cast it, so the page feels neat and clean. Plus, there is just enough white space to let images hold this shadow attractively.
Things to Change
- Color options: the clickable area for this option should be bigger, say the least of a mouse cursor. One basic principle of interaction design is that the larger the icon users are trying to click on, the easier it is to click it. Therefore make sure that your clickable areas are blatant and clear. In this case we have the opposite, and what’s even more the color options take the visitor away to the product page, when being clicked on.
- The same product title: same product – different name. What is the point of displaying the products under the same name? If you sell the same product in different styles, you may want to include some specifications, material it is made of, color, size, or whatever else that you will find appropriate and important to mention.
- Hidden search filter:there is a good search utility available in H&M store, however they has chosen to hide it. The main disadvantage lies in a real challenge to see this option unless intentionally looking for it. Besides, in the declared title of this filter we have the attribute ‘size’, which is absent in the list when the filter is revealed.
* * *
- ’More colors’ option layering: Superdry offers an interesting strategy for providing information on the product colors. It is layering – when all the information is available on the current page, yet it is one click away. From the first sight, it is not however clear that the colors will be shown right on the category page. However, this option is very interesting as it is readily available for those who want it, but won't confuse those customers who don't need it.
- Color contrast consistency: though using the same type style for all the attributes, Superdry store subtly changes their looks. It is color contrast that provides the visual interest for the product options. They make the price, ‘more colors’ arrows, and stars in the rating scale orange-colored in order to grab the visitors’ attention and entice them to focus on the attribute. See how this color consistency is maintained throughout.
- Star rating and customers’ review option: in this store customers can go and view the details of each existing customer review as well as see the product being appraised on a star rating scale, from one star (lowest rating) to five stars. Adding ratings and reviews to a store has been proven to increase conversion. In addition, it can provide incredibly valuable feedback that will entice and motivate new potential customers to buy.
- Search refinement and ‘recently viewed’ attribute: the website allows users to refine search results in real time using multiple filters in any order until the desired items are found. A set of filter include price range, color, size, most relevant or highest rated products, and more. Search filters are mostly vertically stacked on the left; we can also find some more facets at the top of the page, in a drop-down. When filters are tweaked, the search gets triggered immediately. So, users who want to compare multiple items by specific criteria can do it at once.
Things to Change
- No zoom-in or enlarge view: one of the main tasks of the retailer is to offer product enlarged images (that may open as a pop-up with the thumbnail image blown up, using a slider for image zoom, or with a bit more advanced image zoom when hovering over any area of a product image) and alternative views (with the ability to change the image with a click or mouseover) on the category pages. In this particular case this important option is neglected.
- Product titles: product titles are more than just content on your page, they have a very important job in product searches. They should be long enough to be descriptive in a concise manner, but short enough that they are not overwhelming. And titles should not coincide in wording, it is far better to include some most important product specifications – that may elicit clicks more efficiently.
* * *
- Sharp product photos with great lighting: such super-clear photos greatly compensate for the customer’s inability to feel the product. They also do an excellent job of emphasizing the texture, various details, and quality of the items. There is a lot of visual appeal, so this case is a perfect example of how to do more with less.
- A whole outfit upon mouseover: as soon as the user moves the mouse over the product image (as opposed to clicking on it), the next image with a model wearing a whole outfit becomes visible. So, this hiding and reveling is done upon mousing over and out. With soft fading out of an image, the transitioning appears to be very comforting for the eye. However, there is one drawback in this exciting hover effect – the outfit image that is revealed upon mousing over is not clickable.
- Regular font for title vs. bold font for price: see the font-weight property in this example. The bold font emphasizes, highlights important points – the price in our case. It has been made distinct from surrounding text to increase the contrast and add ease in scanning. Plus, bold prices also break up the blocks of content and make them look detached and stand out, instead of all running together.
Things to Change
- Indistinct arrangement of navigation filters: though there is a number of easy product filtering options e.g. price range, colors, size, product/ outfit views, they are poorly placed. We know that filter on products reduce the search complexity. The complexity is also reduced through proper styling of these additional search options. Here we can see that there is no color highlight and the overall placement of filters is far from being user-friendly. For me, it is really hard to spot at first sights where each type of filter is.
- Too much white space: white space needs to be taken in moderation. As you can see, Mango e-shop uses a lot of white space between the product images and thus they not fill out the web page properly. If to decrease the white space, there will be a better fullness of product items and our eyes can travel rapidly over the whole range of available options.
* * *
- Models wearing products: most customers use product images to verify that the product is what they’re actually wanting to buy. Esprit store simplifies this task and displays models wearing the items, kind-of showing product in use. Thus the viewers can clearly identify what the product is, regarding the size, fit, and so on. There is however no option to visually stroll around the item – no enlarged images and alternate views are available.
- Color option with texture close-up: when color attributes are being hovered, the customer can see a floating close-up image of the product texture. I think it is extremely useful and just to the point, because when going in close we can easily capture the texture and move in really close for smaller detail.
- Box with available sizes on hover: I have already talked much about the ’one-click-away’ issue. The less clicks customers have, the quicker they will decide if they will buy the products. Back to the example, here we have a great possibility to examine the variety of available and sold-out sizes just from a simple mousing over the ‘’available sizes’ attribute.
Things to Change
- Visual clutter: Esprit store does not leave any information behind. They try to fill up the space with as many product attributes as possible. This certainly causes the visual complexity. What they have is disorganized display of items, attributes, signs which cause crowding and great difficulty at both segmenting the product item and performing visual search. It is hard to focus and even irritable, so customers most probably will not tolerate all these distractions.
- Price displaying: what I personally dislike about the price is its grayish, rather indistinct color. It would be much better to make it black or another color for the sake of better legibility. What about cost-saving offers, they display discount percentage and sale price divided by vertical bar. That is an interesting practice, however including initial price would have better shown the cost-saving difference.
- Product titles: when shopping online, customers now expect descriptive product titles as a standard feature. Here the product titles are small, unclear, and simply do not encourage shoppers proceed to the product page or make a purchase. Good product titles should be like an appetizer, giving the customer a seductive taste of the product with a creative precise description.
* * *
- Product specifications on hover: what is certainly good is that Yoox store very neatly allows visitors to see all the additional product information whilst hovering over the product image. On hover, a bigger pop-up menu for each product item is displayed, allowing users to select through different product colors (small thumbnails are included horizontally down the pop-up window) or revert to product image, but in this case with the mouse. What is also unveiled upon mouseover is the range of available sizes.
- Faceted navigation: Here the search results are paginated and can be sorted in several different ways. To find information within a large data set at Yoox store, it is better to use a set of available filters that narrow or refine search results. The search gets triggered immediately when filters are tweaked. In general, faceted navigation is always a nice idea for a for new content delivery possibilities.
- Slideshow view: when users click a slideshow label at the top of the category page, the search experience is configured to show them a slideshow view. And when hovering over any image displayed within this slider, an additional specifications are made visible (those are reverse side, product description, size, color, price, add to cart button). Users can even further enlarge the image that was initially properly sized.
- Clear sale price: people who shop online do so primarily based upon pricing, which is why it is crucial to keep your pricing nicely visible. Yoox brightly distribute the cost reduction, and orange in this case is one of the excellent colors to indicate a sale or price cut. Bold cost-saving offer leads customers to believe that this e-shop holds the best deals on the net.
- 'Back to top' option: If the category page is long with a large amount of information, it is better to include a scrolling 'back to top' function like the one featured in the category page of the Yoox store. Their site has a 'back to top' button in the footer accompanied with an arrow pointing upwards. The presence of an arrow icon may help as a visual guide, though it is not a necessary functionally of course. Regarding usability, this is a very helpful technique as it reduces scrolling and scanning a lot to find the information needed.
Things to Change
- Font color monotony in product description and price: experts would advise against using a fully monochromatic color scheme, as there is a risk of monotony and of being seen as a bit boring. Using a grayish font color with just one bright color for highlight can be very effective in case with Yoox online store. It is however necessary to make color combinations that are interesting and pleasing to the eye.
* * *
A compelling category page is always a fusion of proven design principles, brand identity, creativity, and users' real-world needs. Remember that a poorly designed category page is going to damage your sales immensely. Therefore, keep adhering to strict usability standards we've outlined for you, make continuous optimization testing of your category page, and you will arrive at a set of features and functionalities that will keep your eCommerce store ahead in your niche.