UX: consistent user preference setting page

[monsieurtanuki]

I really like the product page: it's very compact, and it fits on my screen.
I'm not a big fan of the user preference setting page: it's impossible to see everything.

My suggestion: refactor the user preference setting page so that it looks similar to the product page.
The goals are:

• bringing consistency between pages (in that case, product and user preferences)
• making user preference page nicer, UX-wise
• starting refactoring the access to the user preference itself - we could reuse the same kind of display in the home page, like a single row with all the selected attribute "these are your current preferences", and with a click you land on the user preference page

[monsieurtanuki]

Related to #90.

[stephanegigandet]

Hi @monsieurtanuki ,

I think it would a good idea to discuss that. My personal impression is very different: I find the preferences page very clear, but the current product view is very confusing to me.

I just rebuilt the current master, and I just see icons:

I think an important question is what do users expect / want to see on the full product page, versus what they already saw just before on the product card when they scanned the product or searched for it:

• The product card works great: the color tells me if the product matches my preferences (e.g. nothing I'm allergic to), and I get small icons to give me the state of each preference. (e.g. Nutri-Score A, Vegetarian).

• When I click on the product card to see more information, I think we should do exactly what we do on the web site today: first show already expanded cards for the attributes I selected: 1 card per attribute, 1 color to indicate how well the product is regarding that attribute, and then some details specific to the product and the attribute (e.g. why is the Salt too high, or why it is NOVA 4 etc.)

e.g. here is what we see on the web site:

• Then after that we can show more information about the product (like other attributes that were not selected), but it is secondary. The goal should not be to try to show everything about the product in one single page, or otherwise we'll have tons of icons that will be very difficult to understand. In fact on the web site, we'll probably show the other information on tabs (e.g. "nutrition", "ingredients", "environment", and remember which tab users want to see first)

single row with all the selected attribute "these are your current preferences", and with a click you land on the user preference

We used to do that on the web site, but it was taking a lot of space for information that is almost never changing. Instead now we have a button to offer to change preferences on the search results page + just below the details of the selected attributes at the top of each product page.

[monsieurtanuki]

@stephanegigandet I can agree with you about the fact that on the product page, instead of a single collapsed paragraph with all the user's favorite attributes, it would make sense to display several expanded-only paragraphs, each with a user favorite attribute, with the corresponding background color. I'll do that first, and then we'll talk about the rest.

[monsieurtanuki]

@stephanegigandet I imagine that you're happy with the first 4 colored rows.
I added a button underneath, "update your food preferences", just a try.
And the remaining attribute groups - that did not evolve.
What do you think of that?

[monsieurtanuki]

Potentially a new button: "see all food characteristics" after "update preferences": by default, the attribute groups would be hidden.

[stephanegigandet]

@monsieurtanuki It looks great, thank you! :)

[monsieurtanuki]

@stephanegigandet It's PR'ed in #121. I'm still not convinced by the current colors for attributes.
For instance, for an orange juice, with tons of sugars, the attribute color is green even with the 'very important' importance (of course it's red for 'mandatory', because it has a "minimum_match").
Have I missed something about the attribute algorithm? cf. my new version of Match.dart.

[stephanegigandet]

We currently use colors for two different things:

• at the product level, we have 3 colors (red / green / grey) that indicate only the status of mandatory conditions (e.g. no gluten)
• at the attribute level, there are 5 colors (+ grey) corresponding to how well the attribute value matches the user preferences

We could try to use the same 5 colors at the product level, that would indicate the overall match. I'll try it on the web site to see how well it works.

[monsieurtanuki]

@stephanegigandet Could you please point me to the js algorithm for the 5 colors/attribute? It's not implemented in flutter for the moment, I just reused the 3 colors/status algo.

[stephanegigandet]

Sorry, in the screenshot you posted above I didn't notice it was only the red/green/grey colors for the no_match/match/unknown product status.

Here is the algorithm for the attribute level colors: https://github.com/openfoodfacts/openfoodfacts-server/blob/master/html/js/product-search.js#L253

function display_product_summary(target, product) {
	
	var user_product_preferences = get_user_product_preferences();
	
	match_product_to_preferences(product, user_product_preferences);
	
	var attributes_html = '';
		
	$.each(product.match_attributes.mandatory.concat(product.match_attributes.very_important, product.match_attributes.important), function (key, attribute) {
		
		// vary the color from green to red
		var color = "#eee";
		
		if (attribute.status == "known") {
			if (attribute.match <= 20) {
				color = "hsl(0, 100%, 90%)";
			}
			else if (attribute.match <= 40) {
				color = "hsl(30, 100%, 90%)";
			}
			else if (attribute.match <= 60) {
				color = "hsl(60, 100%, 90%)";
			}
			else if (attribute.match <= 80) {
				color = "hsl(90, 100%, 90%)";
			}
			else {
				color = "hsl(120, 100%, 90%)";
			}
		}

		attributes_html += '<li>'
		+ '<div style="border-radius:12px;background-color:' + color + ';padding:1rem;min-height:96px;">'
		+ '<img src="' + attribute.icon_url + '" style="height:72px;float:right;margin-left:0.5rem;">'
		+ '<h4>' + attribute.title + '</h4>';
		
		if (attribute.description_short) {
			attributes_html += '<span>' + attribute.description_short + '</span>';
		}
		
		if (attribute.missing) {
			attributes_html += "<p class='attribute_missing'>" + attribute.missing + "</p>";
		}		

		attributes_html += '</div></li>';
	});
	
	$( target ).html('<ul id="attributes_grid" class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">' + attributes_html + '</ul>');
		
	$(document).foundation('equalizer', 'reflow');
}

[stephanegigandet]

Here is the product summary at the top of the product page on the web site, if I choose 6 preferences, to show the different colors for each level:

[monsieurtanuki]

Done:

[monsieurtanuki]

@stephanegigandet I still have work to do on the product page, including regarding lists (add a product to a list, see which lists a product belong to) (#21).
Once I'm done with the product page, I'll have a look again at the preferences. Maybe this time I'll like the preferences page. If not, I'll create a new issue :)