Design proposal : make the list of categories of a product a navigation feature instead of an informative list

[stephanegigandet]

What

On the product page, we display lists of tags for different facets like brands, labels, countries where sold etc. Most of those are intended to convey information: the product has this label, it's sold in this country etc. And while we have made those values links, the value they have is to be seen, not clicked.

I think one facet is different: the list of categories. They don't really convey useful information (I already know that my milk chocolate bar is a milk chocolat bar and also a chocolate bar and also a snack). But instead it can be used as a very useful navigation feature, to see other milk chocolate bars.

So I think it could be a good idea to move the list of categories to the top of the page, and use a breadcrumb display, that is more clearly recognized as a navigation feature.

e.g. something like this:

One thing to be considered is that some categories have multiple parents, so there isn't a strict path to the top. So we may need to choose to display some categories and not all. One way to solve that could be to decide that there is one main parent.

This proposal can apply for both the web site and the app.

Part of

• Product page

[hangy]

That's a good idea, and would make this kind of hierarchy more accessable.

We probably need to display several breadcrumbs, since a product might belong to several categories where the trees might not merge until something generic like "plant based foods", and which one is the most important category depends on the user's intention: when viewing an apple pie, I may be primarily navigating through apple based foods, or my main concern could be vegetarian fruit pies. (Could building a single breadcrumb be a NP-hard problem?)

[stephanegigandet]

In practice the categories of a single product is a directed acyclic graph. (e.g. something like that: https://dagrejs.github.io/project/dagre-d3/latest/demo/interactive-demo.html )

I'm not sure if we can really make a small enough (and if possible text based) representation of it, that's why I was toying with the idea of simplifying it to display only one breadcrumb path : pick only one leaf category, and then for each level, pick only one parent.

[VaiTon]

Or maybe if there are multiple parents we could just display "multiple parents...".

[github-actions[bot]]

Stale issue message

[github-actions[bot]]

This issue has been open 90 days with no activity. Can you give it a little love by linking it to a parent issue, adding relevant labels and projets, creating a mockup if applicable, adding code pointers from https://github.com/openfoodfacts/openfoodfacts-server/blob/main/.github/labeler.yml, giving it a priority, editing the original issue to have a more comprehensive description… Thank you very much for your contribution to 🍊 Open Food Facts