Skip to content
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

Simplify adding photos by removing 2 of the 4 steps #3332

Closed
stephanegigandet opened this issue Nov 18, 2022 · 25 comments
Closed

Simplify adding photos by removing 2 of the 4 steps #3332

stephanegigandet opened this issue Nov 18, 2022 · 25 comments
Assignees
Labels
✨ enhancement New feature or request image upload

Comments

@stephanegigandet
Copy link
Contributor

stephanegigandet commented Nov 18, 2022

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.

image

image

image

image

@stephanegigandet stephanegigandet added the ✨ enhancement New feature or request label Nov 18, 2022
@monsieurtanuki
Copy link
Contributor

@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
Screenshot_2022-11-18-18-04-13 Screenshot_2022-11-18-18-04-29

@stephanegigandet
Copy link
Contributor Author

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
Copy link
Contributor

@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
Copy link
Contributor Author

stephanegigandet commented Nov 21, 2022

  • "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.

image

@monsieurtanuki
Copy link
Contributor

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
Copy link
Contributor

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:

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.
une-grellotine

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
Copy link
Contributor

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:

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. une-grellotine une-grellotine

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
Copy link
Member

teolemon commented Nov 21, 2022

@monsieurtanuki
Copy link
Contributor

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
Copy link
Contributor

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

1) product page 2) clicked on single image
Capture d’écran 2022-11-23 à 18 41 42 Capture d’écran 2022-11-23 à 18 41 59
3) clicked on single image (again) 4) clicked on modify
Capture d’écran 2022-11-23 à 18 42 11 Capture d’écran 2022-11-23 à 18 42 32
5) clicked on modify (again) 6) clicked on OK
Capture d’écran 2022-11-23 à 18 42 56 Capture d’écran 2022-11-23 à 18 42 32
  1. clicked on confirm: same as 3)
  2. went back: same as 2)
  3. went back: same as 1)

This is what I suggest:

1) product page 2) clicked on single image
Capture d’écran 2022-11-23 à 18 41 42 Capture d’écran 2022-11-23 à 18 49 01
  1. 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
Capture d’écran 2022-11-23 à 18 51 51 Capture d’écran 2022-11-23 à 18 53 02

@stephanegigandet
Copy link
Contributor Author

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
Copy link
Contributor

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"
Capture d’écran 2022-11-23 à 18 41 42 Capture d’écran 2022-11-23 à 18 42 11 Capture d’écran 2022-11-23 à 18 49 01

@omkarChend1kar
Copy link
Contributor

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"
    Capture d’écran 2022-11-23 à 18 41 42 Capture d’écran 2022-11-23 à 18 42 11 Capture d’écran 2022-11-23 à 18 49 01

@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)

@monsieurtanuki
Copy link
Contributor

@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
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor

omkarChend1kar commented Nov 25, 2022

@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
Copy link
Contributor

@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
Copy link
Contributor

@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 #3325 (comment) ,Please review it @monsieurtanuki

@monsieurtanuki
Copy link
Contributor

@omkarChend1kar Please solve the conflicts.

omkarChend1kar added a commit to omkarChend1kar/smooth-app that referenced this issue Nov 26, 2022
@omkarChend1kar
Copy link
Contributor

@omkarChend1kar Please solve the conflicts.

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

@monsieurtanuki
Copy link
Contributor

monsieurtanuki commented Nov 27, 2022

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:

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
Copy link
Contributor

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
Capture d’écran 2022-12-02 à 10 06 57

@teolemon
Copy link
Member

teolemon commented Dec 2, 2022

image

@monsieurtanuki
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ enhancement New feature or request image upload
Development

No branches or pull requests

4 participants