Create a side by side compare mode (to be hidden away in dev mode for the moment)

[teolemon]

What

• Create a side by side compare mode (to be hidden away in dev mode for the moment)
• We used to be add additional products to the side by side comparison with a "Add new product" button at the right of the columns which would open a scan screen, which would redirect to the side by side comparison once a barcode was detected.

Screenshot

[monsieurtanuki]

Nice idea! Like Hunger games, it could be an app by itself.

Not entirely convinced by the UX though (and the scan part):

• we should be able to.compare side by side 2 products taken from a product list
• we should let the user manage her reference products, something like "hey, this is my reference breakfast cereals, how does that other product compare to it?"

But the first step would be the side by side display of two products anyway.

[monsieurtanuki]

First raw tests. Please share some comments.

a bit redundant	less verbose

[teolemon]

• NOVA group is not explicit (ultra-processed is), and number of additives plus ordered list of additives allow better processing discrimination on 2 bad products
• We should have actual scores to allow better discrimination between products

[monsieurtanuki]

@teolemon I assume that you preferred the second column. There would be special cases:

• nutriscore and ecoscore would display the "big button"s
• if the user selected at least one allergen in the preferences, we display the number of allergens and a line for each selected allergen
• and a colored top widget with the score

[teolemon]

• The second column is enticing, but raises questions if we try to compare 3 products
• We could order products by compatibility (nb1 at the left for RTL, nb2,....)

[monsieurtanuki]

No problem, we can put the generic label in one row and then a list of "colored dots" in the next row. That said, it would be hard to put more than 3 products because of the product names. What I meant with "the second column" is that we cannot be verbose.

[monsieurtanuki]

I've added a colored score on top, and displayed nutriscore and nova differently. Not satisfactory yet...

[teolemon]

• Eco-Score should also get the logo treatment, and we should remind what the score is about (nutritional quality, processing, environment)
• Having the numerical values for salt, fat.. would be useful for many people and products
• what does it look like with a more table-ish look to facilitate reading?

[monsieurtanuki]

• Ok for Ecoscore logo
• Ok for nutrient values
• I don't believe in tables because that would mean columns, and we probably need to be more verbose in some cases, like nova, and that wouldn't fit into columns, especially on small devices.
  • solution 1: put an (?) info button instead of a systematic verbose description of what nova is
  • solution 2: display each line as a RRect with header (label) and body (values, dots and icons)

[monsieurtanuki]

@teolemon Something like that then:	top	bottom

[monsieurtanuki]

@teolemon Still at least several points bothering me:

• like in the rest of the app, the colors are not relevant enough, accessibility-wise. I'll try to add empty/half-empty/full stars in addition to (in replacement of?) red/orange/green
• the nutrient values are per 100g. Should we put a 100g/serving switch?
• here we display only the user preferences. What about all the nutrients - e.g. proteins, or even all the oligoelements if you want to compare mineral waters? We should probably display (as an option?) all the nutrient values too

[monsieurtanuki]

@teolemon Looks like that:	page 1	page 2	page 3

[monsieurtanuki]

Comparing 3 similar products...

page 1	page 2

page 3	page 4

[monsieurtanuki]

@teolemon Any suggestion?

[teolemon]

@monsieurtanuki

• can we ensure that the first 3 things are: Nutri-Score, Food processing (NOVA) and Eco-Score
• can we put: "Personal compatibility score" instead of "score"
• can we put a miniature photo on top ?
• can we make the product name (or the miniature) sticky and visible at all times ?
• can you remove the half stars for the time being ? they bring confusion to numerical values interested users (a minority) are able to parse themselves

[monsieurtanuki]

• can we ensure that the first 3 things are: Nutri-Score, Food processing (NOVA) and Eco-Score

Not sure it would be easy (if the users did not select any of them as important it's not supposed to be part of the score) or even desirable (if the users did not select any of them maybe it's because it's not important to them). The displayed attributes are sorted by descending importance. What I can do is to put them on top, regardless of the attribute order, but only if they were selected as at least important by the user.

• can we put: "Personal compatibility score" instead of "score"

It would be awkward to repeat that label 3 times. Another solution would be to put the label on top, but then we would only have display a number in the "colored" line. Maybe if we center the numbers it will be explicit enough.

• can we put a miniature photo on top ?

I can try, but I don't think we have enough space. (I don't have enough space). The barcode would make sense, too.

• can we make the product name (or the miniature) sticky and visible at all times ?

Would make sense indeed.

• can you remove the half stars for the time being ? they bring confusion to numerical values interested users (a minority) are able to parse themselves

Not sure what you mean, as there are no stars for "normal" nutrients. Only for "preference" nutrients like fat or salt. That are repeated, as preference and as nutrient. Regarding the stars, it was an attempt to improve accessibility (colors are not enough). I can put back the background color and remove the stars. I should probably remove the salt as nutrient if there's already the salt as preference.

[monsieurtanuki]

@teolemon Something like that?	top	bottom