User flow and navigation in ecommerce websites

Walk into a Tesco. The bread is at the back. The milk is always in the same place. The signs are big enough to read from the next aisle. You don’t have to think about where anything is, which is the point. The whole shop is set up so you stop thinking about the shop and just focus on what you want to buy.

Most online shops do the opposite. The menu has too many items. Categories overlap. The search bar moves around depending on the page. Filters are hidden behind something that doesn’t even look clickable. People end up spending more time figuring out the site than deciding what to buy. Then they leave and go to a competitor’s site they already understand.

What makes a good ecommerce navigation menu?

The main menu does more than list categories. It tells people what the shop is and where to go. If it is confusing, they are already unsure before they’ve even seen a product. Good ecommerce menus are simpler than most people make them. Five to seven top-level items is usually enough. After that it just becomes noise. People stop reading and start guessing. Extra categories can sit in dropdowns.

We still see menus using internal codes or supplier names. That works for warehouses, not customers. Nobody is searching for “SKU group A2-7”. They are searching for “chairs”. Use the words people actually use.

Why is site search important for ecommerce?

This is the one that gets me. Site search is the highest-converting feature in ecommerce. People who use it usually convert 2 to 3 times more than others, because they’ve already told you what they are looking for. And yet most stores still have search that can’t even handle a typo.

You type “trainners” instead of “trainers” and the site says no results. You search “shoe” and nothing shows because the product is listed as “shoes”. You search “sneakers” and get nothing because the store calls them “trainers”. In every case, the customer came looking for something specific, told you exactly what it was, and left empty-handed because the search couldn’t match their words.

Good search isn’t expensive anymore. Tools like Algolia and Klevu connect to Shopify, WooCommerce and most other platforms, and they handle typos, synonyms and different ways people search.

A small but important detail: keep the search bar in the same place on every page, easy to see, with a clear magnifying glass icon. Hiding it behind a tiny icon that opens up is a trend that should go. People use search. Make it obvious.

Designing filters that help, not overwhelm

Once someone lands on a category page with more than 10 or 15 products, filters are what help them narrow things down. Bad filters do the opposite. They make the page feel overwhelming, and people leave.

Good filters are specific to the products. A clothing site needs size, colour, price, fit. A bike shop needs frame size, type, brand, price. A wine shop needs region, grape, price, food pairing. What matters changes from store to store. The worst category pages are the ones with almost no useful filters, or loads of filters that don’t help anyone.

Two simple things help a lot. Show the number of results next to each filter option, like “Black (18)”, so people know what is actually there before they click. And let people use more than one filter at a time, with an easy way to remove them. If someone has picked “blue, medium, under £70” and wants to switch to red, they should be able to change just that one thing without starting over.

Mobile filters are a different issue on their own. They usually sit behind a “Filter” button that opens a panel. That panel needs to be easy to scroll and easy to reset. The “Apply” button should be visible straight away. If people have to scroll to the bottom to apply filters, a lot of them will just give up.

Why do breadcrumbs help in ecommerce navigation?

Breadcrumbs are the row at the top of a page, like Home > Women > Knitwear > Cashmere Jumper. They show where you are on the site and let you move back to a wider section with one click.

The back button is just as important. It should always take someone back to the exact page they were on before. When it does not, often because of pop-ups, overlays, or messy page loads, it breaks how people expect the site to work and makes things confusing. That small frustration is often enough for people to leave before buying.

The path to purchase should be obvious, not creative

Some ecommerce sites try to be clever with how people buy. They add custom add-to-basket animations, slide-in mini baskets that take over the screen, and multi-step checkout that slow things down. Sometimes they even add countdown timers to push people into buying faster. Most of this does not help. The move from product page to payment is something people already know well. They have done it on Amazon, ASOS, John Lewis, and many other sites. They expect it to feel the same.

When you try to redesign it or make it clever, it just slows people down. At checkout, you want things to feel simple and automatic.

A simple flow works best: product page, add to basket, basket, checkout, then confirmation. Just a few clear steps, each one doing what people expect.

Mobile navigation is not a smaller version of desktop

A lot of designers still think mobile is just a smaller version of desktop. So they reuse the same menu and the same flow, just squeezed into a narrower screen. That is not right. People use phones differently from laptops. So navigation should be made for how people actually hold and use a phone, not just copied from desktop.

The hamburger menu (three lines in the corner) is now a common sign for “menu”, and that part is fine. The issue is what is inside it. Many sites just show long lists of categories with no clear order, which feels like a wall of text on a phone. It works better when items are grouped into clear sections and the most used ones are placed at the top.

On mobile, the Add to basket button should stay at the bottom of the screen while the user scrolls. This is called a sticky CTA. It is a simple change, but it makes a big difference because people don’t have to scroll all the way back up when they are ready to buy.

The cart icon at the top should always show how many items are in it. On mobile, this matters even more because the cart is separate from the rest of the navigation. That small number helps people remember they already added something, instead of forgetting and leaving the site.

How do you test ecommerce navigation?

The best way to find problems in navigation is to watch someone use your site for the first time. Give them a task like: find a black jumper in size large under £80, add it to the basket and start checkout. Then just watch what they do. What you will see is not always nice to watch. People will hover over the wrong menu items. They’ll miss the filter button. They’ll click the logo thinking it takes them home and it won’t. They’ll get stuck on things you thought were obvious and sometimes they’ll just give up where you thought everything was fine.

This isn’t about redesigning things, it is about spotting problems. Most navigation issues on ecommerce sites show up in just 30 minutes of watching one real person use the site. It is simple, cheap and useful, but most web design and web development teams still don’t do it.

Three navigation problems you can fix this week

A logo that doesn’t link to the homepage is still common, but it shouldn’t be. The logo in the top left corner should always take people back to the homepage on every page. Most users expect it without thinking.

Sticky headers that cover too much of the screen on mobile are another problem. A header that stays with the user as they scroll can be useful. But if it takes up a big part of the screen, it just gets in the way. Keep it smaller.

Empty categories are another issue in user flow and navigation in e commerce websites. If something is out of stock, the navigation should not act like everything is fine. Either hide the category, send people back to the parent page, or clearly say when it will be back. An empty category page is basically a dead end. People go there looking for something and find nothing.

None of these takes more than an hour. Most stores never get around to doing them.