Simplify adding photos by removing 2 of the 4 steps

[stephanegigandet]

Current behaviour:

1. Screen to take a photo
2. OK / Retry dialog (not sure if that's the app or the camera, hopefully we can disable it in any case..)
3. Crop interface
4. Retry / Edit / Confirm dialog

Suggestion:

Merge 2. 3. and 4. into a single Crop interface (same as today's + a Retry button). I don't think we need an extra confirmation step, we can submit the image as soon as the user hits "ok" on the crop screen.

1.

2. 

3. 

4. 

[monsieurtanuki]

@stephanegigandet My remarks:

• I have never seen screen 2
• in screen 3 you can crop, and it's a standard crop operation (i.e. that any user can understand) (and that we can replace with any crop tool if needed)
• in screen 4 you see the result of your crop (cropped image is now full size on screen)
• if you merge screens 3 and 4, we need to upgrade our users so they can understand in the same screen the crop operation and the retake pic and ok (is that "ok for the crop" or "ok send the image"?)

I've just double checked with whatsapp:

• I took a picture in my gallery
• clicked on "share", and selected whatsapp
• now on whatsapp on the "send image" screen, there are several tools
• if we talk about the crop tool, you go to the crop tool, crop, click cancel or ok, and go back to the "send image" screen
• same for us

"send image" screen	crop tool

[stephanegigandet]

For us it's a bit different: when we add a new product, we want to add 3 or 4 pictures, we don't have filters, stickers etc. We just want to upload pictures as quickly as possible. So I think it makes sense to remove confirmation steps that don't really bring value.

I'm guessing that step 2. is somehow added by Samsung, but maybe there's a way to disable it, and ask for the camera to not require a confirmation.

For step 3/4, I think we can merge them with clearer buttons.

e.g.

• change the title from "Edit image" to "Crop the image"
• have 3 buttons : "Take another picture", "Rotate", "Send".

[monsieurtanuki]

@stephanegigandet So if I compact it my way, could we say:

• in Smoothie, you click on "add a picture"
• it opens the camera (or the gallery, whatever)
• you take the picture
• you land directly on the crop screen, with 3 buttons "cancel", "rotate", "send"
• actually I don't like the "take another picture" label, it sounds like "take an additional picture" rather than "cancel your current choice and replace it with another picture"
• and we need a way to cancel anyway, don't we? So a cancel button makes sense; you will land back on the page where you could take a picture.

That said, it won't be exactly the same with an existing picture. In that case you need to be able to take another picture (and also to cancel). That would mean 4 buttons: "change picture", "cancel", "rotate", "send". That's a lot.

There's no way you can get rid of "cancel", "rotate", "send". Or, if we rely on the "X" in the title, users may cancel with it.

That would mean:

• "X" on top cancels whatever in going on
• "change/replace/camera/gallery", "rotate", "send/confirm/ok" in all cases (existing and non-existing image)

Do we agree on that?

[stephanegigandet]

• "X" on top cancels whatever in going on
• "change/replace/camera/gallery", "rotate", "send/confirm/ok" in all cases (existing and non-existing image)

Sounds good to me. Could we also get rid of the Profile / Search / History button bar on this screen? The user is focused on adding photos, so we should avoid distractions and buttons that can cause misclicks / mistaps.

[monsieurtanuki]

Could we also get rid of the Profile / Search / History button bar on this screen?

That would seem appropriate, but I'm not sure if this can be done easily. Creating a new issue about it...

[monsieurtanuki]

Now we're in a sort of collision between expected behaviors.

Today, when we click on an image in the product page P ("Product"), we go to page M ("Main") with the main 4 images. If we click on one image on page M, we go to page F ("Full") with the image full screen, and a button to edit it that goes to page E ("Edit"). On page E, we can take another picture, crop or confirm the picture. If we crop the picture, we go to page C ("Crop"), that returns to page E when done.

The collision is here:

• with #3129 @omkarChend1kar would make it possible to swipe between images on page F
• with the current issue @stephanegigandet would like to merge pages F, E and C

If we do both at the same time, that means that on page C, we can

• take another picture
• swipe to another image
• cancel
• click ok
• crop the image

Looks a bit too much to me, like a Welsh card game. Especially when the purpose was to simplify the UX.

Let alone the fact that some day we'll have to deal with "other" images.

I'm afraid we have to get rid of one the suggested behaviors, and I would say the swipe effect should be forgotten. @stephanegigandet @teolemon @omkarChend1kar Your views on the subject?

[omkarChend1kar]

Now we're in a sort of collision between expected behaviors.

Today, when we click on an image in the product page P ("Product"), we go to page M ("Main") with the main 4 images. If we click on one image on page M, we go to page F ("Full") with the image full screen, and a button to edit it that goes to page E ("Edit"). On page E, we can take another picture, crop or confirm the picture. If we crop the picture, we go to page C ("Crop"), that returns to page E when done.

The collision is here:

• with Allow to swipe between product images on the full screen image view #3129 @omkarChend1kar would make it possible to swipe between images on page F
• with the current issue @stephanegigandet would like to merge pages F, E and C

If we do both at the same time, that means that on page C, we can

• take another picture
• swipe to another image
• cancel
• click ok
• crop the image

Looks a bit too much to me, like a Welsh card game. Especially when the purpose was to simplify the UX.

Let alone the fact that some day we'll have to deal with "other" images.

I'm afraid we have to get rid of one the suggested behaviors, and I would say the swipe effect should be forgotten. @stephanegigandet @teolemon @omkarChend1kar Your views on the subject?

Yeah, Right. Instead of simplifying the process, Swiping effects complicates it.

[teolemon]

• Here's the Photo behavior in v1, which I thinks works well. https://github.com/openfoodfacts/smooth-app/discussions/3338

[monsieurtanuki]

Thank you @teolemon for your videos!

Now the question is: which actions do we want to facilitate/encourage?

1. contributions for a new product by anybody, including beginners?
2. advanced contributions with language settings and "other" pictures

The answer may be: both.

That would mean 2 specific image edit modes:

1. the quickest possible edit mode for new products (the @stephanegigandet version)
2. an edit mode with more options for existing products (the @teolemon + @omkarChend1kar version)

[monsieurtanuki]

This is the current behavior if someone wants to change an image...

1) product page	2) clicked on single image

3) clicked on single image (again)	4) clicked on modify

5) clicked on modify (again)	6) clicked on OK

7) clicked on confirm: same as 3) 8) went back: same as 2) 9) went back: same as 1)

This is what I suggest:	1) product page	2) clicked on single image

3) clicked on "confirm": same as 1.

A bit faster, isn't it?

If ever you want to go the other 3 images, we can imagine a navigation from top bar:	some arrow	other arrows

[stephanegigandet]

Well we probably should not assume that the intent of people clicking on the top photos is to change them. If I had to guess, I would think the most common intent is going to be to see the picture in full scale (especially since we hide the bottom of the part of the pictures thumbnails with the top of the product card (which I personaly find very annoying but that's another story)).

So the current behaviour that lists the 4 pictures and then opens them in full screen is ok I think.

Then we could have fewer edit screens indeed.

Screen 3 could be : show image + Take another button + Edit button

Then next screen is taking the picture (if take another button) or directly the screen with "Take another, crop, send" (edit button, or just after taking a new picture).

[monsieurtanuki]

What about this?

• immediate READ access to the full picture from product page (1)
• possible swipe between full images (2)
• single image edit page (3)
• simplification/less steps for image editing
• potential language selector to be added on page 2

@stephanegigandet @teolemon @omkarChend1kar Your opinion?

1) product page	2) clicked on single image	3) clicked on "edit"

[omkarChend1kar]

What about this?

• immediate READ access to the full picture from product page (1)
• possible swipe between full images (2)
• single image edit page (3)
• simplification/less steps for image editing
• potential language selector to be added on page 2

@stephanegigandet @teolemon @omkarChend1kar Your opinion?

1) product page 2) clicked on single image 3) clicked on "edit"

@monsieurtanuki Somewhat like this only, I had imagined except skipping gallery view, But was concerned about how we are going to switch between swiping and allowing to edit a current image being shown https://github.com/openfoodfacts/smooth-app/pull/3325#issuecomment-1325323377

[monsieurtanuki]

@monsieurtanuki Somewhat like this only, I had imagined except skipping gallery view, But was concerned about how we are going to switch between swiping and allowing to edit a current image being shown #3325 (comment)

@omkarChend1kar My remarks:

• personally I hate this gallery view for several reasons (1. when I click on an image I want to see this image, 2. that's an unnecessary step, 3. we know there are only 4 images but we're not able to display them bigger), but that's a matter of choice. If you want to keep it, why not, later I'll code a PR without the gallery to check how different it is with/without
• As far as I'm concerned we are not going to switch between swiping and editing - on each swipable image page there will be an explicit button that opens the related crop page. Good enough is good enough.

[stephanegigandet]

What about this?

@monsieurtanuki: I like it a lot, great idea! :)

I'm not sure if there's enough room, but it would great in step 3 to very clearly say that we are modifying the photo for the ingredients, or the nutrition facts etc. Maybe "Ingredients photo" instead of "Modifier la photo"? It's clear it's an edit screen anyway. One thing we might do is that if people click on "Confirm" when there are no changes (no new photo, no changed crop / rotation), we just close without changing anything.

[monsieurtanuki]

I'm not sure if there's enough room, but it would great in step 3 to very clearly say that we are modifying the photo for the ingredients, or the nutrition facts etc. Maybe "Ingredients photo" instead of "Modifier la photo"? It's clear it's an edit screen anyway.

Good point.

One thing we might do is that if people click on "Confirm" when there are no changes (no new photo, no changed crop / rotation), we just close without changing anything.

The reverse should be true too: changing and going back should trigger a "do you want your changes to be saved?" dialog.

[omkarChend1kar]

@monsieurtanuki Somewhat like this only, I had imagined except skipping gallery view, But was concerned about how we are going to switch between swiping and allowing to edit a current image being shown #3325 (comment)

@omkarChend1kar My remarks:

• personally I hate this gallery view for several reasons (1. when I click on an image I want to see this image, 2. that's an unnecessary step, 3. we know there are only 4 images but we're not able to display them bigger), but that's a matter of choice. If you want to keep it, why not, later I'll code a PR without the gallery to check how different it is with/without

@monsieurtanuki In that case, I can try getting rid of gallery view, And push the changes so that you can have the access to ProductImageSwipeableView widget.

• As far as I'm concerned we are not going to switch between swiping and editing - on each swipable image page there will be an explicit button that opens the related crop page. Good enough is good enough.

Such that you can make changes to skip one screen and go to crop page, That works ?

[monsieurtanuki]

@omkarChend1kar Please do finish #3325 without any change to the gallery. Let's do it step by step, PR by PR (as a reviewer, I would appreciate that).

[omkarChend1kar]

@omkarChend1kar Please do finish #3325 without any change to the gallery. Let's do it step by step, PR by PR (as a reviewer, I would appreciate that).

As per intended behavior required by #3129 ,It's already finished as mentioned in https://github.com/openfoodfacts/smooth-app/pull/3325#issuecomment-1322361299 ,Please review it @monsieurtanuki

[monsieurtanuki]

@omkarChend1kar Please solve the conflicts.

[omkarChend1kar]

@omkarChend1kar Please solve the conflicts.

@monsieurtanuki Yeah right, My bad, Please check now.

[monsieurtanuki]

Actually it's a bit tricky to do that now because:

• this impacts the crop page
• there are recent changes about the crop page - we used to use a pub.dev package, and we switched to a custom made package in 2022-10-16, with a possibility to switch back to the old version if needed from dev mode
• the impacts induced by the current issue mean changing the crop page - and today that would mean both the new and the old crop page

The first part of the issue is going to be changing the new crop page:

• [x] change the title to match the image type (#3366)
• [ ] add a "new picture" button

Once the old crop page is definitely removed, we can go to the second step:

• [ ] remove the current "pre-edit" page (if we do so now, we won't be able to add a new picture with the old crop page)

And whenever we want, there's the optional bonus step:

• [ ] remove the image gallery

[monsieurtanuki]

Problem already suggested by @stephanegigandet: if we put an extra "camera" button, we have a bottom bar of 3 items, which looks a lot similar to the navigation tabs

[teolemon]

• There's more ambiguity because the text next to the icons has been removed.
• Ok is not clear
• The UI does not allow to go forward the mockup I have proposed some time ago (and also higher in this conversation) in https://github.com/openfoodfacts/smooth-app/issues/766

[monsieurtanuki]

Done: it took 7 clicks to change an existing photo from the product page, and with #3402 it takes only 4 clicks.

For other improvements regarding images, cf. #766.