-
-
Notifications
You must be signed in to change notification settings - Fork 279
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UX: consistent user preference setting page #120
Comments
Related to #90. |
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:
e.g. here is what we see on the web site:
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. |
@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. |
@stephanegigandet I imagine that you're happy with the first 4 colored rows. |
Potentially a new button: "see all food characteristics" after "update preferences": by default, the attribute groups would be hidden. |
@monsieurtanuki It looks great, thank you! :) |
New file: * `smooth_card.dart` Impacted files: * `attribute_list_expandable.dart`: added the non-collapsible and colored cases * `list_page.dart`: unrelated side effect for an empty list of lists * `match.dart`: added a computation of the status at the attribute level * `personalized_ranking_page.dart`: refactored the colors; now using the new `UserPreferencesView.showModel` method * `product_page.dart`: now displaying a distinct item for each selected attribute * `profile_page.dart`: now using the new `UserPreferencesView.showModel` method * `smooth_expandable_card.dart`: now using the new `SmoothCard` widget * `smooth_it_model.dart`: added a conversion tool between bool and int indices * `user_contribution_model.dart`: unrelated refactoring * `user_preferences_view.dart`: added a useful static `showModel` method
@stephanegigandet It's PR'ed in #121. I'm still not convinced by the current colors for attributes. |
We currently use colors for two different things:
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. |
@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. |
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
|
feature/#120 - enhanced product page
@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). |
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:
The text was updated successfully, but these errors were encountered: