4SYSTEM ACADEMY
4SYSTEM
Contact us
4SYSTEM

Shop navigation: categories and filters that make choosing easier

Written by 4SYSTEMPublished on Updated on

Online stores · 7 min reading

To simplify the navigation of an online store, use categories to guide, filters to specify the need and sorting to order the results. Start with understandable titles and reliable product specifications. Adding menus or filters is not enough: the buyer must know where to look, understand what remains displayed and go back without losing their choices.

  • Build categories with buyers' words.
  • Reserve filters for criteria that really change the choice.
  • Make selections visible and easy to remove.
  • Test returns from a product pages, especially on mobile.

A category brings together a family of products that the buyer recognizes. Its title must allow it to anticipate its content. Creative collection names can complement this organization, but should not be the only access to the catalog for someone new to the brand.

Do not automatically reproduce the organization of your suppliers or your stock. These rankings can be useful internally without matching how a customer searches. List the families present, then ask outsiders where they would go to get a given item, without explaining the menu to them.

Create it when it represents a stable and useful distinction. If the difference is simply a color or material, a filter may be enough. A succession of narrow subcategories sometimes requires you to change pages to compare neighboring products. Conversely, a section that is too general does not provide any guidance.

Maintain access to an entire family when a visitor wants to explore without immediately choosing a subcategory. The right depth depends on the catalog: there is not a number of levels valid for all stores.

Identify the questions that allow you to rule out or retain a product: size, dimensions, compatibility, use, material or availability, depending on the family concerned. Do not display a filter just because the data exists in your software. Ask yourself what the buyer will be able to decide thanks to it.

Then check the data. The same material written in several ways creates artificially separated choices. A missing feature can exclude a relevant product as soon as a filter is activated. Harmonize the labels and units, then fill in the missing attributes before generalizing the filtering.

In the same family of criteria, several values can represent acceptable alternatives. Someone who is hesitant between black and blue should be able to see both together. Baymard recommends combining values from the same filter to avoid comparing separate lists in memory.

For different criteria, check that their association corresponds to the stated need. In a classic route, “black or blue” expands the choice for the color criterion, while “chosen color and chosen size” combines two requirements. Make this logic understandable in the results. Also test the variants: if a size and a color are requested together, the result should not lead you to believe that an unavailable combination can be ordered. The expected behavior must be defined with your technical team.

Show active filters near the results, with the option to remove a selection or reset everything. The Baymard's observations on applied filters emphasize the importance of this summary for understanding and modifying the displayed list.

Sorting serves another function: it changes the order, not the scope of the search. Name the options simply. A ranking by bestsellers assumes corresponding data; don't use it to refer to an arbitrary selection without explaining it.

On the phone, the filter panel must be able to be opened, navigated and closed without ambiguity. Check the readability, keyboard access, and visibility of the action that applies the choices. An empty result should provide understandable output, such as removing a criterion, rather than a page with no explanation.

Finally, test the browser's back button. Baymard documents the difficulty created by returning to the top of the list after viewing a product. Request that useful filters, sorting and position be preserved during this return. If the stock or catalog has changed in the meantime, report the update rather than displaying an old status as if it were still valid.

In this fictitious example, a lighting store uses evocatively named collections as its main entrance. A person looking for a suspension must open several sections without knowing which one contains this type of product.

A possible organization would be a “Suspensions” category, then filters of dimensions, material and compatibility when they are relevant and documented. The visitor could select several acceptable materials, consult a sheet and find the list in the same state upon return.

If no product matches, the store would offer to remove a specific filter. This structure is not a universal acceptance testing: it must be verified with the actual catalog and questions from buyers. There are no business outcomes associated with this example.

  1. Identify the products and terms used by buyers.
  2. Check that each title clearly announces its content.
  3. Separate stable families from filterable characteristics.
  4. Harmonize attributes, values ​​and units.
  5. Test filter combinations on variants.
  6. Control summary, removal and reset.
  7. Check an empty result and the return from a file.
  8. Replay the route on the phone and on the keyboard.

Too many filters can make a small list more difficult to navigate. Unexplained technical titles or inconsistent results also complicate the choice. Correct the data before looking for a more sophisticated interface. Recommendations from general research remain to be adapted to your business, without promising additional sales.

This work focuses on the navigation experience. It does not decide which filtered pages should be indexed by the engines. Have this technical point examined separately before opening many combinations for indexing.

Not always. If the differences are visible and the list is easy to navigate, clear categories may be enough. Add a filter when it avoids real comparison work, not to reproduce the interface of a large distributor.

No, they serve different approaches. The research is suitable for a request already made; Categories help explore. Test both accesses with the same products to spot vocabulary inconsistencies.

Give a specific task to an outside person and observe their first choice without intervening. Then ask what she expected from the section. Hesitation signals a point to consider, not automatically a category to add.

Choose a family and a concrete need. Browse the menu, apply filters, open a card then return to the list. Record ambiguities and selection losses. Correct this path before modifying the entire tree.

A FIRST EXCHANGE

A project to develop?

Tell us about your site, campaigns or emails. We will define with you the next actions to take.

Talk about my projectSee our services
EN