Refactoring of the OCR page UI/UX

[monsieurtanuki]

But for the UI: Having the buttons directly above the Image isn't great. Especially for the ones which tend to are very stretched.

Maybe we should align them to the top,
Maybe move the image above them
Make the buttons (which are of lower priority?) a drop down

Any suggestions @g123k @teolemon @AshAman999

Originally posted by @M123-dev in #5027 (comment)

[monsieurtanuki]

We're talking about EditOcrPage. The current layout is a stack of 2 layers:

• a full screen image (somehow centered)
• on top of the image, buttons and text fields, bottom-aligned

Perhaps we could find inspiration in the "standard photo page", not using a stacks but a column, with the image using the remaining space on top? In many cases that wouldn't be a problem as text is displayed horizontally.

OCR page with photo	standard photo page

[teolemon]

Eventually, we're going to have a "Report image" button, in conjonction with https://github.com/openfoodfacts/nutripatrol/issues

[monsieurtanuki]

@teolemon @M123-dev My point here is to have #5027 merged: I've just added a couple of buttons, as required by #5020.
Now I feel like I'm stuck between the past (the UX/UI already stunk before I added the buttons) and the future (some day we may add another button).
Adding to that the fact that we have a limited number of code reviewers each with a limited time, moving forward is getting difficult.

[g123k]

Hello,

Here's a screen I made in 5 minutes, but where I try to address the hierarchy problem.
We guide the user to :

1. Select a language,
2. Then the ingredients
3. And optionally the photo.

The actions for the photo shouldn't be on this screen: that's not its role.

As I have said, this is just a quick mockup, so feel free to add your suggestions.

[g123k]

Or even a simpler one:

[monsieurtanuki]

@g123k I believe the point of that screen was the OCR - or at least photo upload. Therefore something more like that:

1. language select
2. photo upload
3. OCR
4. manual ingredient text fix if relevant

That said, in your screenshots I see a button that would help us: a single "modify photo" button. Instead of our current 4 buttons ("edit", "select an existing photo", "take another one", "unselect"). The "modify photo" button would go to the existing photo manager (screenshot 2 in the OP).
That would fix at least partially the initial issue: "too many buttons on that page". And will give us more space on top of the page to put the picture (instead of stacking a centered picture with many buttons).

[g123k]

The "Edit picture" button was indeed there to redirect to the other screen, because we have 11 actions:

And I think that the OCR should be limited to "Extract ingredients": all other actions have no direct link to Ingredients.
The second question is, is the photo more important than the list? (for me, the answer is NO)

[monsieurtanuki]

The second question is, is the photo more important than the list? (for me, the answer is NO)

I have no strong opinion on the subject. Except that those are "OCR" pages.
Definitely not the easiest page to design!

[monsieurtanuki]

cf. #3975 too.