Guidelines 68-78
The transactional menus includes navigation and menus related to the products/services users can buy (performing a transaction).
Elements of the transactional menu typically include parent product categories (cars vs. trucks or men’s vs. women’s), subcategories (white vs. blue cars or men’s pants vs. men’s shirts), and subcategory groupings (seasonal, sales, promos, accessories, etc.).
11 guidelines for ecommerce transactional menu:
- If products are listed on a homepage use advanced sorting and filtering (Faceted Search, if product categories are listed, allow for users to easily see groupings of categories and subcategories with mega menus).
- Dropdown navigation should display at most the first three levels of products.
- Always have parent categories
- Parent categories in transactional menu should be Clickable.
- If a subcategory could apply to two different categories then include it under both (e.. g “coffee tables” under “tables” and “living room”).
- Consider displaying main categories as homepage content (depends on industry and product scope).
- Visually indicate any default site scopes (i.e. if a site is defaulted to “Women’s” scope, highlight “Women’s” product category in main menu).
- Avoid vague product categories (“more”, “miscellaneous”, and “other”) unless it dynamically displays more options without page load (in effort to reduce item number Visually).
- Consider adding additional information and resources alongside products or categories (e.g., inline descriptions, tooltips, and explainer articles), especially in specialty or ‘jargon-heavy’ product classes.
- Promoting subcategories on the homepage accelerates the search journey.
- Showcase special categories like ‘new arrivals’ and ‘sales & promotion’ groupings.
Helping users understand where they should click to explore different products is one of the homepage’s main purposes. The best product in the world won’t sell if no one can find it.
While the search bar will satisfy some users, plenty of people browse the transactional menu. Take advantage of this behavior by offering the most effective and functional navigation capabilities.
Frustrated user quotes —
“The only part that I found to be frustrating was that I couldn’t use the menu navigation very well. I felt it was sort of hard as there were too many items to use that navigation”
“I would somehow make it easier to use the menu navigation. For some reason it was difficulty.”
Guideline #68. If products are listed on a homepage use advanced sorting and filtering (faceted search), if product categories are listed, allow for users to easily see groupings of categories and subcategories with mega.
If you have a small selection of products then listing them directly on the homepage is an option. It’s the simplest way to do things. In this case it serves as a category page and allows the Visitors to immediately search and filter for what’s needed.
However, many ecommerce sites have tons of products. And if you have a broad range of products in many categories, then displaying subcategories Via mega menus is common and familiar for visitors to interact with.
It’s all about making your site easy to interact with. Navigation is one of the biggest challenges with an ecommerce site, especially if you have a large product offering. Always think about optimizing for intuitive navigation. If you make it fun to shop on your site, and easy to do so, your conversion rate can’t help but rise.
“I like that the subcategories that took me exactly where I needed to go without an issue.”
How to do it RIGHT
The Vitamin Shoppe
“Protein & Fitness” is a vague category title, so showing subtitles and even sub-subtitles in this situation is helpful for users looking for a specific product.
“This site was very easy to use. The layout is great. It was pretty simple to find the category needed.”
User quote on Vitamin Shoppe
How NOT to do it
Gap
When hovered, the Girls product category doesn’t show any product categories. Users shopping for 15-year olds or shoes, will have to take a chance and click on this category to find out if they can find what they’re looking for in it.
Guideline #69. Dropdown navigation should display at most the first three levels of products.
Some people enter a website knowing exactly what they’re looking for, others come just to browse.
Because there’s no way to know why each user is on your site, you need to design it for all possibilities. This means the transactional menu should show an adequate portion of your product selection without overwhelming anyone.
Depending on the breadth and amount of products your site sells, this guideline varies in importance. For sites with lots of products and/or lots of different types of products, this is especially important.
You want people to understand how your products are organized, so show parent categories with the corresponding subcategories that fall under them. This way, users who came to the site looking for something in particular have an idea as to where they can expect to find that product. The users who came to the site just to browse now understand the breadth of products your company has to offer.
Showing category levels beyond the first three, simply put, becomes too much. Remember, we humans like simple, organized lists. Don’t make us think.
“I would make the menu bar simple with the categories Women, Men, Kids, Girls, Beauty, etc. Then when the cursor is over those headings then sub headings would pop up such as tops, bottoms, dresses, swimwear, etc.”
“Easy to navigate. For as many product categories as the inventory represents, I think they do a good job summarizing the top-level navigation categories.”
How to do it RIGHT
The Vitamin Shoppe
Three category layers in this dropdown transactional menu provide the perfect amount of organization and show just enough content.
“Despite not having the specific filtering options I needed for my item, there was a good amount of filtering options in general. The categories and subcategories are done well and it only took me one or 2 clicks to get to the results of items that I am searching for.”
User quote on Vitamin Shoppe
Home Depot
On this site, some of the product categories with less content only show two layers and others with more content show three.
dimension “Usability”.
Guideline #70. Always have parent categories, and make them part of the product hierarchy.
This is a relatively simple guideline, but if looked over there will be major confusion. If you’re a clothing website, don’t go straight to dresses and skirts. Some users will want to browse all women’s clothing.
Instead of getting into the most granular categories, always give the option to shop from the broader parent category. This is another fix that is without downside. You still have the option to sort more specifically, of course, but you accommodate the interests of those who want to sift through at a higher level.
Further, with a dropdown menu of the category, don’t make it simply an overview of what’s in that parent category. Allow subcategories to be their own pages onced clicked on. In other words, allow the parent and subcategories to be part of an exploratory hierarchy of products that allow users to go into and back out of product category classes.
“I think some of the subcategories aren’t necessarily helpful. For example, looking at hiking boots I may not know if I want low or mid/high hiking boots but I wasn’t able to look at all of them. I had to make a choice. Or choosing a gift for a friend I couldn’t just look at all hiking and navigation I had to choose a specific type of item like a compass.”
How to do it RIGHT
GNC
Imagine if this got straight into the subcategories without organizing then into parent categories first. It would be a real mess.
“I felt that the items were easy to find from the menu. It was categorized well that makes me think about what I want.”
User quote on GNC
How NOT to do it
Candle Delirium
All candles are listed in alphabetical order in a vertical text-only menu. For first time visitors who aren’t sure what type of candles this site offers, this menu is not helpful in any way.
Guideline #71. Parent categories in transactional menu should be clickable.
Being wrong isn’t fun. This is one of the many reasons why usability is a crucial aspect of web design: Users need to feel confident navigating a website if they’re going to stay on it.
When you click on a link only to find out that it isn’t a link, frustration sets in. People expect to click on parent categories and be taken to a product category page. Make sure your homepage offers this capability for smooth sailing.
This is actually a common problem, believe it or not. It’s also an easy fix and an easy lift in user experience, and probably conversions. You can see if this is a problem on your site using session replays (especially the tools that flag for User Frustration) or just by viewing your click maps and seeing if people are clicking unclickable icons.
This also ties into (guideline #70.), allowing for parent and subcategories to be a true exploratory hierarchy for users to go back and forth with.
How to do it RIGHT
Vitacost
Crutchfield
Guideline #72. If a subcategory could apply to two different categories, include it under both (e.g. “coffee tables” under “tables” and “living room”).
The purpose of the transactional menu is direct customers to the product they’re interested in as painlessly as possible.
One common cause confusion when it comes to product lists deals with products that could belong in a number of categories. In order to create a seamless search process for users, place these nuanced products in each category they might fall under.
It’s not about where you think a subcategory belongs, but all the places where site users might think a subcategory belongs.
How can you discover this information? User testing. Notably, you can ask your user to find a specific item, and watch the path they take. If they attempt to click on a menu that is different from where the subcategory is, you might have a labeling/navigation problem.
How to do it RIGHT
REI
Women’s running shoes can be found under both the RUN and the Women parent categories.
“I absolutely loved the variety of filters and the fact that it was so easy to navigate to a product using a variety of ways (e.g., search engine, camping & hiking tab, men’s tab).”
User quote on REI
Guideline #73. Consider displaying main categories as homepage content (depends on industry and product scope).
This guideline is particularly relevant for sites with a wide range of products. Displaying main product categories on the homepage allows users to jump right into browsing products and communicates the breadth of your product selection.
If you only have a few products this guideline does not apply.
And, even if you do have a wide range of products, it may not be the perfect solution. But if you feature a couple of your top main categories on the homepage, first time visitors will have an easier time finding things.
“Everything was very easy to locate! I could easily find things for cats and dogs no matter where I looked on the site.”
“I liked that all my options were clear to view, I could easily navigate through the website and find what I was looking for.”
How to do it RIGHT
Petco
Wondering if Petco sells supplies for you bearded dragon? You won’t have to look beyond the homepage to answer that question.
“Everything was very easy to locate! I could easily find things for cats and dogs no matter where I looked on the site.”
User quote on Petco
TigerDirect
Wondering if you can also buy Photoshop or Illustrator software on this website? This homepage category display lets you know it’s very likely you can.
Guideline #74. Visually indicate any default site scopes (i.e. if a site is defaulted to “Women’s” scope, highlight “Women’s” product category in main menu).
Personalizing a homepage is usually advantageous. One major flaw, however, occurs when people are unaware that the homepage is personalized.
If a homepage is personalized by default (e.g. automatically shows women’s clothing, although the site also sells men and children’s clothing), make this visually apparent. Most sites highlight the tab or category that the homepage displays on defaults.
Users want to know where they are located on a given site. It helps them situate themselves as well as navigate to another desirable location. This is an easy fix that gives the user context and shows them where they are at.
How to do it RIGHT
Pottery Barn
Although pottery barn also offers Baby, Kids, Teen, and Dorm parent categories, users can see that they’ve landed in the generic Pottery Barn category, and that they need to select the appropriate tab to browse the other parent categories.
How NOT to do it
Forever 21
Although Forever21 also sells Plus Size, Men, and Girls clothing (and beauty supplies), the homepage displays the women category with no visible indication. First time shoppers might be unaware of the other types of clothing this site sells.
Guideline #75. Avoid vague or specialized product categories (“more”, “miscellaneous”, and “other”) unless it dynamically displays more options without page load (in effort to reduce item numbers visually).
There’s only so much a visitor is expected to know.
Don’t make them think.
Category menu items need to be precise and understandable. Increased task times and dead end journeys result from vaguely titled categories. If there are more categories than there’s space to show, or you want to introduce a new specialty category, allow for a hover-over tool tip explainer that will provide the user a quick grasp of it without having to dive in. Save them the extra clicks. Auto drop down menus are good for this, they indicate what’s actually inside the parent category without much effort.
“Some things were abbreviated in ways that I would not understand. Some stuff was a bit too categorized.”
“I am still unsure what AERIE was and whether this was something I wanted to know.”
How NOT to do it
Gap
The circled categories are all too specialized for first time visitors to understand what they are.
Guideline #76. Consider adding additional information and resources alongside products or categories (e.g., inline descriptions, tooltips, and explainer articles), especially in specialty or ‘jargon-heavy’ product classes.
The idea here is to increase the understanding of what you’re selling in the quickest and most efficient way possible. Industry pros will know, but this is about increasing conversions by selling to those who don’t know. If people aren’t sure what they’re looking at (if the benefit or purpose isn’t apparent) then they’ll assume it’s not what they’re looking for or interested in.
This is another fix with no downside. By increasing the clarity for those without as much industry specific knowledge, or technical terminology, you don’t decrease the clarity or motivation for those with superior product knowledge. All you do is make your site inclusive for different levels of sophistication.
How to do it RIGHT
Bodybuilding
Without the descriptions providing a good amount of introductory information, these powder supplements would be confusing for people not super involved in the workout world.
How NOT to do it
Gap
Very few people are going to know what these categories are.
Guideline #77. Promoting subcategories on the homepage accelerates the search journey.
Promoting one or more subcategories on the homepage offers another way to explore a site’s product selection. During testing, most people either used the search (most common) or category dropdown menus (second most common) to find a product.
But there were also many that were more exploratory, and interacted with the ‘inspirational’ or ‘featured’ section of the homepage that highlighted a particular product subcategory.
This is especially relevant during seasonal holidays, where thematic subcategories can draw more people in and browsing for unknown products as gifts becomes more common.
“I would redesign the categories in such a way that all products are easily accessible. I was not a fan of the “Consumer Electronics” category, and would prefer its sub—categories to be placed somewhere more apparent.”
“I like the suggested products on the main page. It made it really easy to find a gift.”
How to do it RIGHT
TigerDirect
Users can immediately start browsing product categories on the homepage. The page also offers Inspirational categories, the best of the week and the back to business sale.
“I really think the ease of navigation from the homepage to product of choice was quite seamless.”
User quote on TigerDirect
Guideline #78. Showcase special categories like ‘new arrivals’ and ‘sales & promotion’ groupings.
Similar to the guideline above, many visitors want to browse, but they want to start either with sales or new arrivals. These category groupings should always be available and easy to distinguish on a homepage.
Different customers have different intentions. Some need to see “what’s hot” right now. Some don’t care, and they just want to see what’s on sale.
No matter the case, you can convert any of these visitors by allowing navigation based on differing intentions. “Sales” tabs and “New Items” tabs are very prototypical, rarely decreasing the user experience, and only helping add dimensions to your site.
“I do love that Forever 21 points out “what’s hot” and what’s “on trend” – so you sort of have a guide to how to be fashionable just by glancing at their GIF/video on the main web site.”
“I would make it where you could see what was on sale or show us what coupons they had out right now.”
How to do it RIGHT
Bodybuilding.com
This homepage shares many special deals and promotions.
“Loved the promotions – makes me want to buy from them since I feel like I am saving money!”
User quote on Bodybuilding.com
How NOT to do it
Forever21
There is no visible sale category in the transactional menu. Users have to click on a parent category before seeing the sale subcategory. This could deter visitors looking for a discount.
“Nothing that I saw on this website really made it clear to me why I needed to buy from this website over somebody else. I think maybe I may have missed some things on the home page. Maybe there was a sale or something, but I’m not sure, and I really didn’t see that.”
User quote on Forever21