Make Nutri-Score computation easier to read

[CharlesNepote]

What

We're often facing questions related to Nutri-Score computation. We already have some sort of "debug mode" which produce things like that:
energy 5 + sat-fat 5 + fr-sat-fat-for-fats 4 + sugars 7 + sodium 2 - fruits 0% 0 - fiber 4 - proteins 3 -- fsa 15 -- fr 15.

But it's hard to read: you must previously have a very good knowledge of Nutri-Score computation to understand these informations.

We should have something like this (numbers are false):

[x] energy (145 KJ) +5             | [ ] sat-fat (42g) +5
[ ] fr-sat-fat-for-fats (38g) +4   | [x] sugars (10g) +7
[ ] sodium (5g) +2                 | [x] fruits (0%) -0
[ ] fiber (3g) -4                  | [x] proteins (4) -3
Total: fsa 15 -- fr 15

I'm sure we can make a far better design. We could also explain the computation with real sentences.

Part of

• 🚦Nutri-Score (tracker) #5517

[aleene]

[stephanegigandet]

@aleene : very nice!

[VaiTon]

Where should we show this? It this just a debug thing?

[stephanegigandet]

I guess we could first structure the score components in each product data, and then show it on the web site, maybe with a toggle to see the details.

[aleene]

When trying to explain the computation, I regularly have difficulty explaining why negtaives are good, and positives bad. Guess we can not reverse the axis.

[eglantine]

With Charles' help, I've been working on a way to make the computation easy to read and understand, and to have a basic explanation for Nutri-Score before seeing the computation. This is a mobile design but I can work on a web version (it's easier than doing the opposite!)

Here is a link to all the mobile screens I've designed: https://www.figma.com/file/DLI24JuIdaUVoUr7G8NkFNEk/Appli-OFF?node-id=81%3A53 (if you hit the "play" button on the top right, you can have the actual interactions).

And here is an image of the explanation:

At this point we would need help adapting the screens for other cases (beverages, baby food, others...). For example, I tried to sketch the explanation for this beverage but I don't get it: the nutritional table shows a score of 0 but when I hover I see a +10.

Would anyone be able to help us listing and explaining the different cases for Nutri-Score?

Also, feel free to give any feedback at this point :)

[stephanegigandet]

Hi @eglantine , thanks a lot for the screens! I like them. :)

The Nutriscore formula has some weirdness though.

For instance the positive proteins points count only if the negative points are under 11, or if the fruits points are 5. So even if a product has a lot of proteins, it may have 0 actual proteins points. I'm not sure how to show this kind of subtlety.

If proteins are unknown, we do not compute the nutriscore. (proteins must be specified in the nutrition facts, only fiber is optional, and the fruits and vegetables are not part of the nutrition table). We do need to show where the fruits % comes from: if it's written on the label (e.g. fruit nectar, minimum 40% juice), if we estimated it from the list of ingredients, if we got it from the producer, or if it's the average for the category (e.g. jams are 50% fruit).

One thing that we may want to do: change the scale at the bottom so that the rectangle for each letter has the same width. The scale won't be linear, but otherwise it looks like most products will be E, and that the score is biased to make half of the products E. It's not the case, it's made so that there's a comparable number of products for each grade.

[stephanegigandet]

For this product: https://fr.openfoodfacts.org/produit/3596710467082/boisson-au-riz-coco-auchan
The "sat-fat-for-fat" only applies to fats. For fats, we replace the saturated fat points by points for the ratio of saturated fat / fat. In the debug thing, we show the ratio, but they are not used. (bad design yes ;-) )

[stephanegigandet]

Some progress on this: we now keep all the intermediate points etc. for the Nutri-Score computation in a structured way. I added a simple box to display the data.

Next step is to add an horizontal scale like @eglantine suggested, so that we can see the thresholds.

[teolemon]

• We're moving forward with feat: new Nutri-Score v2 2023 knowledge panels #9689