Is your main navigation easy to follow for users who come across your website? When a user first lands on the homepage of your site, you want them to know what type of products you sell. Structuring the main navigation properly ensures that customers can infer what kind of products are on the site. Many websites use a solitary main navigation item to contain their product categories.
Most times, when you come across a site, you see menu items such as “Products,” “Shop,” “Catalog,” etc., before customers can see the product categories. These types of categories include “Electronics,” “Women’s Apparel,” “Home Decor,” etc.
Not displaying the product categories on your main navigation can result in usability issues to your site that can prove frustrating for potential customers.
Below are a couple of issues that may arise when product categories aren’t shown on the main navigation and what you can do about it.
Issues to Your Main Navigation Menu
More often than not, the homepage is the first page that a user lands on. It is there that they will try and determine what type of site they are on.
When a user lands on your site, they want to know what products you are selling. This is to decide if your site is the right fit for them. When users cannot see this, they may become frustrated while scrolling or abandon the site altogether.
One way that potential customers can see what site they are on is through the main menu navigation. However, when a site has a solitary navigation item, such as “Products,” users won’t be able to quickly understand what type of website they are on, which begins the scrolling process.
But, if a customer entered a website and in the main navigation area saw categories such as “Women’s Athletic Wear,” “Men’s Athletic Wear,” “Yoga Gear,” “Weightlifting Gear,” etc., then it is clear that this is a fitness website, selling athletic wear and workout gear.
Potential customers rely on the first level of product categories to infer what type of site they’ve landed on. Unfortunately, hiding the first level of product categories makes it difficult for visitors to determine what site they’ve landed on without hovering over the main navigation. This will result in visitors having to scroll through the homepage.
To remove the ‘scroll and scan,’ display the product categories in the main menu. While you want customers to look around on your site, you want them to do so with a purpose and not to figure out what type of site they are on. If they are scrolling to figure out where to go, they are more likely to give up.
Baymard Institute recommends sites place the main product categories right on the main menu. This means that the navigation in the header menu contains all of your main categories. When a potential customer lands on your site, they can determine what site they are on at a glance. In addition, customers will be able to do this without having to click, hover, or scroll and scan.
While users are trying to infer what type of site they are on extends beyond the homepage, it also applies to all external traffic that doesn’t land on the homepage right away. For example, an external page is when the customer has a specific product in mind, and they go right to the products page. But, displaying the product pages in the main navigation area will let potential customers understand what type of site they are on, no matter what page they land on.
Keep in mind that your website can look stunning, but if users can’t find what they are looking for easily, they will leave and not come back. This is why displaying product categories in your main navigation is one of the most helpful tools for your e-commerce website.
The dreaded ‘Double-Hover’
This issue isn’t about users understanding the site and the products. This is about enhancing the user experience and making it a positive one.
The double-hover navigation interaction can make the user experience frustrating for people browsing your site. A double-hover menu means that users have to hover over the main menu navigation, such as “Products,” which will then show the main category options. Then they have to move the mouse down within the hover area. Finally, after finding the category they want, users have to move their mouse in a straight horizontal line to arrive at a larger hover area for any sub-categories.
This interaction can lead to many difficulties for users for two main reasons.
- They can accidentally hover over an item that they didn’t intend to. This would lead them to the product or collection page that they did not mean to go to.
- They may accidentally leave the hover area altogether, which will lead to the whole main menu closing. This results in users having to repeatedly start the process over and hope they don’t leave the hover menu again.
When dealing with double-hover navigation, these scenarios can make the whole experience undesirable for users. This may result in potential customers not wanting to revisit your site because of the navigational issues. This could be the case even if you sell the products they are interested in purchasing.
Displaying product categories on the main navigation before moving into sub-categories helps customers avoid the double-hover interaction. Going back to the example above, if a customer visits the fitness site and is looking for women’s athletic pants, she will hover over “Women’s Athletic Wear,” which will then showcase the sub-categories, such as “T-Shirts,” “Tank Tops,” “Capri,” “Sweaters,” etc.
If there were no product categories in the main navigation, the customer would have to view “Products” and then run the risk of accidentally hovering over “Men’s Athletic Wear,” or “Yoga Gear,” etc.
So, having your product categories in your main menu navigation eliminates the risk of frustration among your potential customers.
By displaying your product categories in your site’s main navigation, you make it easier for customers to understand what type of site they are on. This makes it more likely that potential customers will stay on the site and start browsing if it is the site they are looking for.
Inferring what type of site they are on will become easier and remove the ‘double-hover’ scenario. This can remove frustration from visitors to the site and make your site more desirable.
Main Navigation: Other Things to Consider
When making your product categories a part of your main navigation, one thing to consider is to avoid implementing product types as categories. By over-categorizing your products, you are causing a few issues to the user experience on your site. Some of these issues include:
- Forcing users into narrow categories. For example, a customer may want “Women’s Athletic Wear,” but if your product category is “Athletic Wear,” they will have to navigate through the men’s athletic wear.
- When you over-categorize your product types, you force users to choose a very narrow and specific category. This results in users not seeing how much of a selection there is on a product type or your site.
Over-categorization can lead someone to abandon your site if navigating to the product category they want is too difficult.
Another thing to consider when creating product categories is to create them as specific categories, not as filters. While both are interchangeably the same thing, they come with essential differences.
Categories are products grouped together because they are relatively the same. Only one category can be selected at a given time. Such as “Shirts” or “Pants.” Then each category has filters to single out a particular type of that product. For example, if you click on “Shirts,” some filters could include blouses, tank tops, athletic tops, etc. Categories are what determine the products listed on that particular page. They control the features available to customers for browsing those products, such as filters.
On the other hand, filters are tools used to adjust and narrow down the products displayed on a category page. This is so customers can find what they are looking for. You can select multiple filters, including size, material, color, etc. Creating a filter as a category does not help the customer when looking for exactly what they want.
If you create a filter as a category, such as “maxi skirts,” customers will only see “maxi skirts” even if they are interested in other skirts. This leads to customers selecting one option over another, even when they are interested in more than just that type of skirt.
The solution is to only have category headings in the main navigation. Then, filters can be within the main category pages. This makes the product pages more accessible through the main navigation menu. Then, when on the product page they want, they can filter out product criteria that they don’t want so they can find what they are looking for.
