Ecommerce main category page layout: Where to place key elements and why
The focus now turns to the main category page, which is used in ecommerce to give shoppers access to a range of products such as ‘menswear’ before they drill further down to find specific items (e.g. socks, jeans).
This article will add value if you:
- Have little confidence in your current main category page layout.
- Are in the process of redesigning your website and need guidance on the main category page.
- Are bombarded with differing opinions on how the main category page should be laid out by stakeholders, vendors (designs, UX teams) and would like an unbiased opinion.
Before delving into the detail of the main category page it’s important to review the key influencers forming the basis for all decision making around the layout of this key page.
Influencer one: Tablet first, PC/laptop second
When reviewing the wireframe created for this article (see below), it brings to light an important question: What screen size to initially design for, PC or tablet?
Ecommerce trends indicate the performance of tablets will continue to grow at pace along with the consumer’s use of tablets as the device of choice to purchase.
Tablets will become the default Internet enabled device of choice, surpassing PCs by 2016.
Globaldots Ecommerce Trends 2014
One way for retailers to stimulate a surge in tablet ecommerce performance is to develop a ‘tablet-first’ design philosophy.
Though responsive design remains popular, the default is always for desktop. By flipping this approach to tablet-first, the integrity of the experience for both the tablet and the PC is sustained.
Enhancing the tablet experience requires contextual relevance for a large touchscreen:
Users swipe, prod, rotate and hold their tablets like a book while lounging, walking, chatting and watching TV. These actions don’t automatically translate from a desktop environment!
Episerver published a report (Episerver Mobile Commerce 2014) finding “speed and convenience” was the top driver for mobile purchasing, not price. The ability for retailers to effectively display content on tablets, when the buying intent is high, will convert more mobile sales.
The same report also found 80% of tablet browsing takes place at home, giving a whole new meaning to mobile commerce. Mobile essentially means away from the PC/Laptop.
Taking this philosophy one step further is understanding which tablet view consumers prefer more: portrait or landscape.
AppleInsider conducted a usage report revealing among the users it tracks:
59.8% prefer landscape mode, while the remaining 41.2% choose portrait. The data comes from 127m users served over the last two years.
According to AppleInsider the iPad remains the dominant platform among tablet users, accounting for 94.1% of traffic.
Influencer two: The context and purpose of the main category page
It’s also important to understand the purpose of the main category page and the context of consumers when they view main category pages.
Context of the main category page:
When consumers land on the main category page they will have come from many directions and sources. The main three are:
- From the homepage.
- From other pages internally (within the site), e.g. subcategory pages, other main category pages.
- From external sources, e.g. search engines.
Understanding the context assists in developing a clearer view of the purpose of the main category page.
Purpose of the main category page is:
- Validation for those who come from search engines, they have been taken to the right site and landed in the right section of the site.
- Introduce the entire range of subcategories.
- Move consumers to a subcategory.
- Introduce customer service messages.
- Maintain buying momentum by making the next step of a consumer’s journey seamless and easy.
- Enhance user experience elements via strong use of imagery.
- Introduce feature brands (optional).
- Introduce feature products (optional).
Influencer three: Usability best practice principles
Many retailers have either forgotten or actively ignore usability principles. According to Usability.gov (an official US Government website managed by the Department of Health & Human Services):
- Research by User Interface Engineering Inc. shows people cannot find the information they seek on a website about 60% of the time.
- Studies by Forrester Research estimate approximately 50% of potential sales are lost because users can’t find information/products and 40% of users do not return to a site when their first visit is a negative experience.
Main category pages are ‘journey’ pages, and must contain best practice usability principles to keep consumers moving and in doing so build his/her buying momentum or ‘scent trail’. In contrast, product detail pages are ‘destination’ pages.
Usability principle one. Consumer journeys consist of micro actions leading to a macro action (i.e. purchase).
When a consumer has buying intent they undertake a journey comprising many steps. A step (or micro action) is moving from one website page to another.
If a step is relevant, easy to find, easy to take, and sets expectation for the next step, you are fundamentally building a consumer’s buying momentum or keeping them on their scent trail. All the while the consumer is moving one step closer to fulfilling his/her need/goal.
Usability principle two. Every main category page must have clear calls-to-action.
This is an extension to the previous point. In order for clear steps to be taken in the journey, actions on pages must be clear and obvious. This can be in the form of buttons and/or hyperlinks.
If web pages are rooms consider buttons and hyperlinks to be clearly labeled doors.
Usability principle three. Eye tracking studies for content positioning.
Eye tracking studies by both Google and Jakob Nielsen recognise and respect the trending of F-shaped patterns for reading/scanning web content.
This serves as a guide to content placement, maximising prime page real-estate.
Nielsen took this one step further by providing quantitative data around the level of focus on different areas of the page. You only have a few seconds to deliver relevant content, and in that time consumers:
- Spend 80% of their time looking at content above the fold.
- Spend 69% of their time viewing the left-hand side of a page.
- Read at most 28% of the words during an average visit.
Usability principle four. The main navigation is plan B when it comes to consumers moving deeper into the site.
Consumers seek navigation options in the body of the page. Put simply, visuals have a greater impact than text. Having a visual representation of the next layer of navigation is more effective at drawing the consumer’s eye and can easily facilitate an action.
This usability principle becomes extremely relevant when considering tablets. It’s easier and more compelling to select a tile over text.
Now that the key influencers are clarified and understood, it’s time to focus on the detail behind all the elements of the main category page layout.
Main category page wireframe
To simplify discussions around the main category page layout, the wireframe (below) identifies five sections:
- Section one: Customer service bar (below the main navigation).
- Section two: Feature banner (below the customer service bar).
- Section three: Left-hand column.
- Section four: Subcategory zone (below the feature banner).
- Section five: Introduction of products (below the subcategory zone).
Section One: Customer service bar
The customer service bar is anchored below the main navigation and its purpose is to introduce key customer service messages within the active window.
In today’s ‘age of the customer’, customer service is a key determiner on whether a consumer will engage and purchase from you.
- 45% of US consumers will abandon an online transaction if their questions or concerns are not addressed quickly. (Forrester)
- 83% of consumers require some degree of customer support while making an online purchase. (Econsultancy)
Without this bar where would these messages be featured? The footer? Some would argue this content is found on product detail pages, but for many consumers it’s too late.
The main category page is often the first page a consumer will land on when coming from external sources, these messages assist in building immediate credibility.
Tip one. Key messages to convey will vary by retailer but the most common are:
- A delivery message, e.g. free freight nationwide.
- Returns message, e.g. no fuss returns.
- A phone number, e.g. Call us 0800 123 346
Tip two. Rules for the customer service bar:
- No more than three messages within the bar equally spaced apart. This allows the consumer’s eye to absorb the three messages.
- Always link off to content pages and provide more detail for those who want to learn more.
Examples of the customer service bars in use:
John Lewis has two customer service bars, located above and below the feature banner. Both can be seen within the active window of the tablet (landscape view).
Kmart.com has a scrolling customer service bar While this runs the risk of drawing too much attention, it definitely catches the eye and clearly communicates core service messages.
Kmart’s “Free Returns when you bring it to your local Kmart” communicates an omnichannel offering, a very strong message.
Apple has a customer service bar below the feature banner, like John Lewis, it can just be seen in the tablet active window (landscape view).
Section two: Feature banner
The purpose of the feature banner is:
- To highlight subcategories, products, and/or promotions.
- To assist in moving consumers to the next step.
- To deliver validation to consumers that they have landed on the right page of the site.
- To improve the user experience.
Key elements to the feature banner section
Strong visible title (naming the main category). The title provides the validation to consumers that they are in the right place and its presence is also an SEO fundamental.
Its positioning must be in the top left-hand corner of this section (F pattern).
Image representing the category. This is where a high standard of photography is required and, if done right, can assist to build an emotional attachment with consumers. This is part of a user experience plan.
(Learn more about user experience and how it’s different from usability in today’s digital age.)
Rotating images (optional). There is no right or wrong answer on the use of rotating images at the main category page level.
For many retailers who have a large product range within a main category it makes sense to use a rolling banner option to communicate multiple features in one space, however be aware of the downsides to its use:
- Download speed of this page. Carousels and the multiple banners are typically heavy and slow down page load times. (Learn more about the dangers around slow page load speeds.)
- If the banners scroll too quickly the consumer ignores all banners and their messages.
- Rotating images can draw attention away from the subcategories.
And here are a couple of tips for carousel design:
- When using a carousel in the feature banner section, make sure each banner has a clear call-to-action (CTA) and each CTA is placed in the same position for each banner. It can become a frustrating game to find the bouncing CTA if placed in a different position for each banner.
- Keep copy to a minimum.
Copy (optional). Copy within the feature banner can be an effective tactic to introduce the range.
The copy needs to be concise, the font size needs to be large (16 to 18 pixels), and the use of hyperlinks all work together to add value to the experience. There are also strong SEO benefits.
Size of the feature banner section. Many retailers build the feature banner section to monopolise the majority of the active window (the area of the page consumers can see without scrolling).
Other considerations – the ‘false bottom’
Retailers need to be aware of downsides to this approach. Other than the obvious issue of pushing important content down the page, large deep banners create a ‘false bottom’, delivering an appearance to consumers that there is no more content below the banner.
Consumers are given no visual cues to suggest there is content below the banner. Retailers are reliant on consumers scrolling down, and if they don’t, consumers make their decision of ‘where to from here’ based on incomplete content.
GoodUI.org says false bottoms are both a “conversion and continuity killer.” When considering the tablet-first philosophy, the false bottom issue takes on a whole new meaning.
Two very good examples of this are Disneystore.com and Zappos.
Disneystore.com has wasted space below the main navigation pushing the feature banner down. On a tablet (landscape view) you can see all of the feature banner but nothing else.
Since there is no left-hand column displaying navigation content, Disney is relying on consumers to scroll to see more. By looking at this view you would never know there was six subcategories under the ‘Boys’ main category.
Disneystore.com tablet (landscape) view:
In the ‘Shoes’ main category page of Zappos none of the subcategory tiles can be seen in the tablet active window (landscape view).
Section three: Left-hand navigation
This section assists usability by helping consumers to understand where they are in the navigation tree and what subcategory options they have to select from.
While this section is not visually strong, it sits within the F pattern making it the prime placement for this content.
The only navigation elements to be displayed is the main category and its subcategories. For many retailers who carry recognisable brands, this is optional but can be advantageous to introduce at this stage.
Both Zappos’ and John Lewis’ main category left-hand navigation columns follow this approach. Zappos incorporates the Pareto Principle (80/20 rule) by displaying the most popular subcategories then offers a “view all” option.
This simplifies display of the left-hand column making it easier on the eye.
John Lewis has a very long list of subcategories but applies headings to assist in breaking up the content, again making it easier on the eye.
Tip. Stay away from introducing feature filtering at the main category level. This single tip is a huge topic and an article on its own and deserves time and effort to effectively communicate.
For those of you that initially disagree with this tip, for now let’s agree to disagree and wait for the next article tackling the subject of subcategory page layouts and page elements.
From the perspective of delivering a more relevant buying experience to consumers, there are more benefits to introducing feature filters at subcategory level then at the main category level.
Section four: Subcategory zone
When consumers land on the main category page, their eye will gravitate to the feature banner. If the banner is not relevant to the consumer, F patterns suggest a consumer’s eye will move down the left-hand side of the page and shift back into the middle (below the feature banner).
If no false bottom exists the consumer’s eye will sit below the banner looking for direction and the answer to the question “where to from here?” The subcategory zone is content full of visual tiles with the purpose of prompting the next micro step.
The tiles also serve as nice big targets for fingers (‘Tablet first’). Episerver’s Mobile Commerce 2014 Report showed one of the top frustrations found by consumers using tablets was:
I can’t hit the right links because they are too small.
Tip one. The size of the tiles and the space required for this section depends on three things:
- The number of subcategories. If you have 15 subcategories you will be more inclined to align tiles three across on the page in order to display more subcategories and reduce the need for scrolling.
- How much of a user experience does the retailer want to deliver at this stage of the journey? Subcategory tiles can be pictorially represented combining both usability and user experience disciplines. In the wireframe the tiles show two per row. This allows for nice big subcategory titles (usability) and big images (user experience).
- Layout of these tiles. Some retailers choose to avoid the standard grid pattern of these tiles and opt for unique layouts (almost ‘Pinterest-esque’). This is fine as long as all tiles have clear titles and design elements to ensure consumers know they are clickable (i.e. title is underlined as a minimum). A ‘View Range’ CTA is ideal.
Tip two. You don’t need to display all subcategories in this section. By again following the Pareto Principle, feature those subcategories comprising the majority of sales and traffic.
As long as all the subcategories are displayed in the left-hand column, the pressure is off to display them in this area of the page.
In this example, Amazon features 10 subcategories but the left-hand column shows 20:
Tip three. Order the placement of subcategories with the most popular at the top of the section.
Tip four. Brands can also be featured in this area of the page instead of the left-hand column. This depends on the number of brands to be featured and the popularity of the brands.
If the brands add value to the consumer buying process, then it pays to feature them in this area of the page.
Tip five. Though you don’t see it very often, it’s recommended to insert a title above the tiles explaining what this content represents, e.g. “Men’s Shoe Range”. This aids with SEO and makes this content obvious.
Tip six. Align the subcategory tiles in the same order as they appear in the left-hand navigation. This is both a good usability and delivers continuity.
In the example below, Argos lists all the subcategories in tiles below the feature banner, however, the ordering of the tiles is not consistent with the left-hand navigation potentially causes confusion.
Consumers may think there are two unique sets of subcategory options.
ASOS has a very ‘shallow’ feature banner pulling up all the subcategory content allowing it to monopolise the active window.
Section five: Product introduction
The issue for this section of the main category page is how can you deliver relevant product selections and what tactics can you employ at this early stage of the consumer journey.
In many respects it’s too early. You (the retailer) still don’t know what the consumer’s true buying intent is.
If you feel strongly about presenting products on the main category page you have two options:
- Implement a personalisation strategy supported by software (very few retailers have the capability).
- Display products manually but be strategic in your selection.
For those who apply a manual approach (manual = not having software driving the decision making), here are some tips on product selections proven to be effective:
Tip one: ‘New arrivals’. This is always a favourite, and is effective for brand advocates who keep coming back.
Tip two: ‘Best sellers’. Many consumers are interested in products commonly purchased by others. Even though Amazon.com is known for its ability to deliver personalised content, it still features best sellers in the main category pages.
Amazon’s display of best sellers in its ‘Beauty’ main category is situated directly below the subcategories (identical to the wireframe layout above):
Tip three: ‘Best Rated Products’. If you have a manual or automated process of driving consumer generated reviews, display the products with the best overall ratings.
This capitalises on social proof, a proven psychological influencer of purchase decision making. TripAdvisor does a great job of displaying accommodation reviews throughout the hotel content.
Tip four: ‘Most recently reviewed’. This is a combination of social proof and recency. Recency builds credibility via the notion of current consumer interest in a product.
Expedia does something similar by displaying the number of recent bookings of the hotel you are viewing, e.g. “36 people booked this hotel in the last 48 hours.”
Tip five: ‘Feature Sale items’. Depending on your business model, some retailers feature sale items in the hopes to acquire new customers.
New visitors can de risk a first purchase with something less expensive in order to test the retailer. Analyse your AOV (average order value) between sales from new vs. returning customers and see if this is the case for your business.
This is not ideal for obvious reasons (margin degradation) but can be a short term tactic.
Using personalisation to display relevant products
Personalisation strategies are now trying to become more dynamic in their attempts at delivering relevant content. This is achieved by changing the criteria used to decide what product content is to be presented to consumers.
‘Common current’ methods are based on “purchase history, ratings, and viewing history”. Delivering content based on history has its downsides.
The flaw in this approach is around the assumption that consumer buying intent is the same today as it was in the past.
Dynamic personalisation delivers a new standard of relevancy and recency and is driven several factors:
- What the consumer has purchaed in the past is still a consideration but it’s not as influential as the other critieria.
- What products they have browsed during their current visit.
- The products currently in their shopping cart.
- Abandoned products.
Successful online retailers have main category page layouts that have organically evolved through years of measuring, testing and trial and error. Through the experiences and successes of these retailers, the main category page wireframe layout (above) remains highly effective across all retail.
Retailers will have subtle variations of the main category page based on what works for their business model and their varying categories, but the fundamentals and core elements are consistent.
Main category page layouts are not influenced by product type or product volume. It does not matter if you have 50 products or 500,000, this layout applies to all online business applications and is another reason why larger retailers have been used as examples.
The key takeaway is that if you want to make a change to your main category page, start here as the foundation and evolve.
And to finish, here are a few more examples of the main category page layout in use:
Williams & Sonoma: