Not every shopper arrives at a store knowing what they want. Many come to explore — they have a vague interest, maybe a category in mind, but no specific product. These shoppers don’t use the search bar because they don’t have a search term. They browse.
For these visitors, the menu is the entire product discovery experience. How the categories are organized, how deep the hierarchy goes, and how easy it is to move between levels determines whether they find something worth buying or give up and leave.
Why some shoppers prefer browsing
There are several reasons a shopper might browse instead of search:
- They don’t know the right keywords. A shopper looking for “that thing you put on a couch to keep it clean” doesn’t know to search for “sofa slipcover.” The menu shows them the category exists.
- They want to see what’s available. A shopper who just moved into a new apartment might browse “Living Room” to discover product types they hadn’t considered — shelves, lamps, rugs — that a search query would never surface.
- They enjoy the discovery. Shopping for some people is recreational. Browsing through categories, seeing new arrivals, finding unexpected items — this is part of the experience, not a problem to be solved with a faster search engine.
- They don’t trust the search. If the shopper has tried search before and gotten irrelevant results, they will switch to browsing as a more reliable alternative.
Understanding these motivations matters because they shape how the menu should be designed. Browsers need a menu that shows the full range of what the store offers, organized in a way that makes sense to someone unfamiliar with the catalog.
Menu depth: how many clicks to a product
Menu depth is the number of clicks (or taps) a shopper needs to get from the homepage to a product page. A store organized as Home → Men → Shoes → Running Shoes → Product has a depth of four. Home → Shoes → Product has a depth of two.
Baymard Institute’s navigation research consistently shows that shallower navigation performs better. Each additional level is a decision point where the shopper can get confused, make a wrong choice, or simply lose interest. The ideal depth for most stores is two to three levels — broad enough to organize the catalog, shallow enough that shoppers reach products quickly.
But depth alone doesn’t tell the full story. A flat menu with 30 top-level categories is technically shallow but overwhelming. The shopper sees too many options and doesn’t know where to start. The paradox of choice applies: more options make the decision harder, not easier.
The solution is progressive disclosure — showing only the relevant options at each level. The top level shows five to eight major categories. Tapping one reveals its subcategories. Tapping a subcategory reveals its products. At each step, the shopper sees a manageable number of options and drills down based on interest.
Progressive disclosure on mobile
On mobile, progressive disclosure is essential because screen space is limited. A mega menu that works beautifully on desktop — showing all subcategories at once in a wide dropdown — doesn’t translate to a phone screen. Instead, mobile menus typically use a slide pattern: the shopper taps a category, and the view slides to show its children. A back button or swipe gesture takes them up one level.
This pattern works well when the category structure is logical and the labels are clear. It breaks down when the structure is too deep (four or five levels of sliding becomes disorienting) or when the labels are ambiguous (the shopper taps “Accessories” expecting jewelry but finds phone cases).
With a tabbar (via Navi+), the Categories button in the bottom bar provides instant access to the slide menu from any page. The shopper doesn’t have to scroll to the header or find the hamburger icon — they just tap Categories, and the menu opens from the bottom or side. This makes browsing feel quick and natural even from deep within the site.
The role of collection pages
Collection pages — the grid of products within a category — are the destination of the browse flow. The shopper navigated through the menu, chose a category, and now sees the products. The collection page is where browsing meets shopping.
Good collection pages extend the progressive disclosure principle. Instead of showing all products in a flat grid, they offer filters (size, color, price, brand) that let the shopper narrow the results. Filters are a form of guided search within a browsed category — the shopper doesn’t type a keyword but uses structured criteria to find what they want.
The interaction between the menu and the collection page matters. If the menu took the shopper to “Women’s Shoes” and the collection page shows 200 products with no filters, the shopper has traded menu overwhelm for collection page overwhelm. Filters, sorting options, and clear product cards with enough information to compare (photo, name, price, rating) make the collection page a useful continuation of the browse flow, not a dead end.
When browsing leads to search
Sometimes a shopper starts browsing and then switches to search. They explored the menu, found a category that interests them, and now have a specific enough idea to type a query. This is a natural transition, and the navigation should support it.
The search bar should be accessible from the collection page — ideally visible in the header or in the tabbar — so the shopper can switch without going back to the homepage. On mobile, having a search button in the bottom tabbar means the shopper can tap it from any collection page and start a search without scrolling.
The reverse transition matters too. If a search returns results that are too broad, the shopper might want to browse the suggested category instead. Search results that include category links (“See all in Women’s Shoes →”) make this transition smooth.
This article is part of the larger guide on When shoppers search vs browse: designing for both behaviors.