NutriScore v2 positive/negative points are barely readable

[g123k]

Hi everyone!

On the website, it's OK to have points represented by squares:

However, on mobile (an even with a larger width), it's barely readable:

Shouldn't we use a circle like this one?

[teolemon]

We should stay in points, which is the metric of the Nutri-Score.
That could work , but I'd rather have the server adopt it as well

[monsieurtanuki]

Rows of 5 instead of 10 may do the trick.

[g123k]

Rows of 5 instead of 10 may do the trick.

Unfortunately we can't, because it's an SVG (eg: https://static.openfoodfacts.org/images/attributes/dist/points-negative-7-10.svg)
The only way is to create a custom Widget (but I'm still not convinced by the squares)

[stephanegigandet]

Why don't we display the image with a fixed height but variable width, just as we do on the web?
The jauges are compact, but you lose the fact that some nutrients like salt count more than others like saturated fat.

[alexgarel]

Why not use rectangles instead of squares and fit on one line ?

[g123k]

The issue with rectangles is that we never have the same scale: 10, 15, 20… points.
So for each line, we have to compute: Is a good or bad score?

With percent-like progress, it's way easier to understand if this is good or bad