Try SegmentedButtons instead of our horrible "importance" radio buttons

[monsieurtanuki]

Problem

We all agree that the "importance" preferences look ugly.

Proposed solution

We could use the standard SegmentedButton instead.
Can't be worse than the current implementation anyway.

Mockups

[harhitosw]

@monsieurtanuki I am new to this repository can I take up this issue and fix the UI with the suggested solution ?

[monsieurtanuki]

Welcome @harhitosw!
You may have a look at it, but I'm afraid that won't lead to something very glamourous. I've tested a bit yesterday and that didn't look that good: each label is definitely too long, and that doesn't fit into a screen - especially mine.
Before actually coding in this app, please share some screenshots of 4 labels ('Not important', 'Important', 'Very important' and 'Mandatory') displayed as a SegmentedButton, from just a test app, on a smartphone (or emulator).

[harhitosw]

Welcome @harhitosw! You may have a look at it, but I'm afraid that won't lead to something very glamourous. I've tested a bit yesterday and that didn't look that good: each label is definitely too long, and that doesn't fit into a screen - especially mine. Before actually coding in this app, please share some screenshots of 4 labels ('Not important', 'Important', 'Very important' and 'Mandatory') displayed as a SegmentedButton, from just a test app, on a smartphone (or emulator).

yeah sure I should check that and share the screenshots here than maybe we can decide what we can do with that issue !

[harhitosw]

@monsieurtanuki I am thinking of using MediaQuery for changing the font size in this box , we can play around with sizes and see , if you have anything else in mind please let me know :)

[monsieurtanuki]

@monsieurtanuki I am thinking of using MediaQuery for changing the font size in this box , we can play around with sizes and see , if you have anything else in mind please let me know :)

Use AutoSizeText instead, probably with maxLines: 2.

[monsieurtanuki]

The more I think about it the more I think we are in the wrong direction altogether. Of course it would be nice to be able to change the preference in one click.

But:

1. all labels (as clickable) cannot fit into one line (especially in all languages)
2. we don't really need that "only one click" feature. To be confirmed: how many people change their food preferences at least once, or twice, or several times? How grumpy would they be if they had to click twice instead of once, and how often would that happen?

We would probably be better off with just one label and buttons to go up or down.

Something like:
(-) not important [+]
[-] important [+]
[-] very important [+]
[-] mandatory (+)

Or something like:
not important [+] [+] [+]
[-] important [+] [+]
[-] [-] very important [+]
[-] [-] [-] mandatory

Or a simple drop-down menu...

@harhitosw It's a UI/UX question rather than just "put segmentedbutton and we're done". We've all agreed for years that the current implementation stinks, but it's a low priority issue in a capital feature that is used only once (or never).

[harhitosw]

@monsieurtanuki I completely agree to what you say , but at the same time I feel that this UI buttons look ugly and we need to fix it somehow . Since yesterday I was trying to fix those buttons but no avail , I wasn't able to do that maybe we can have a simple dropdown menu , as far as my opinion is concerned the drop-down menu would be the most suitable option . We can have that drop-down menu with little animation (if we find one suitable animation) . Yeah so maybe we can have a drop-down menu and fix the issue moreover this looks simpler and it won't take much time or efforts. Still you can suggest what more we can do , else I may take-up this and fix the issue.

[monsieurtanuki]

@harhitosw For the moment please just share screenshots of each possibility we mentioned - including the current ugly version.
Even regardless of the app: just "not important", "important", "very important" and "mandatory" as options.
This issue has a low priority, and we survived with the ugly UI anyway. I started this issue just because I hoped SegmentedButtons could help as a quick fix - but it's probably not the case.
No PR for the moment.

[M123-dev]

That has gotten a somewhat historical issue by now (not THIS issue but the general UI of the food preferences)

We tried a bunch of design ideas without finding a one which all of us are happy about, so yeah we just have to first try some maybe ugly ux things, ui and logic can be added later

[monsieurtanuki]

For what it's worth, my personal choice would be:
(-) not important [+]
[-] important [+]
[-] very important [+]
[-] mandatory (+)

[harhitosw]

Hi @monsieurtanuki ! we discussed I have tried some options for the buttons which we discussed you may a look at them and we may proceed wisely
1. I tried the segmented button with Fitted Box so that we fit in the text .

2. Also I tried to implement this using Auto Size text which did not make a difference and looks like this

3. I have also tried the most preferred option we can have and also your personal choice

**Please let me know anything else we can try and I will be trying that too , moreover I am bit optimistic about the UX issues somehow we can solve them only thing is that we need to try out more possibilities :) **

[g123k]

Actually, we will use a totally different way to ask for food preferences (without this scale).
So please, don't implement it, it won't be final implementation.

[harhitosw]

Okay that's also fine this wasn't for implementation @monsieurtanuki and I wanted to check few things that's why I did it , anyways do we have discussed or do we have any idea of what we want to do to replace this scale ?

[monsieurtanuki]

Sorry about that @harhitosw, there's been a collision between this issue and a recent global UI/UX refactoring.
For the record I'm not convinced by the new UI/UX suggestion either.
There's no issue for the new UI/UX suggestion yet.

[harhitosw]

Okay I see it, that's fine @monsieurtanuki can you suggest me any new issues that I can work on ? I will be glad to work in them and contribute :)

[monsieurtanuki]

@harhitosw https://github.com/openfoodfacts/smooth-app/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22

[harhitosw]

Thank You @monsieurtanuki

[g123k]

Sorry about that @harhitosw, there's been a collision between this issue and a recent global UI/UX refactoring. For the record I'm not convinced by the new UI/UX suggestion either. There's no issue for the new UI/UX suggestion yet.

For the new implementation, definitely, it will be a wizard-like screen.
We will try as soon as tomorrow another variant with fewer questions and in another order.
I try to publish info about it when we're sure of the final impl

[monsieurtanuki]

@harhitosw If you're looking for very easy / highest priority issues to solve, please have a look at #4692 #4693 #4694.