UX issues in the Image Editor

[miqrogroove]

There appear to be several bugs in the Image Crop input fields. I'll let you decide which of these symptoms are valid.

1. Go to the Edit Media screen for an image.

2. Click & Drag to highlight an area of the image.

3. Enter an Aspect ratio of 4:3. The image selection changes but the Selection fields are not updated.

4. Attempt to change the Aspect ratio to 4:7. Input is erased as soon as I type it in. This makes no sense at first, but appears to be some kind of boundary feedback?

5. Attempt to change the Aspect ratio to 10:11. Input is impossible unless the second field is empty.

6. Change the Aspect ratio to 7:8 and then change it to 7.9:8. Nothing happens.

7. In common graphics vocabulary, "Selection" always refers to a pair of rectangular coordinates. Using the word "Selection" where "Size" is what you meant to say is confusing.

8. Scale Image is collapsed by default, with no indiciation that it can be expanded except for a slight difference in text color, and the cursor changes on mouse over. This is inconsistent with the Image Crop area, which is not collapsible.

9. There is no way to enter a decimal coefficient for the Aspect ratio. Even 1.67:1 doesn't work. Unless the user wants to always use 1:1, 16:9, 8:5, 5:4, or 4:3, the existing Aspect Ratio fields will be useless. The interface would make more sense with a limited set of radio options.

10. The original image Aspect Ratio is not displayed. If my image has an Aspect of 1.39847, and I want to "lock it in" while cropping, there is no obvious way to do it.

11. The new image Aspect Ratio is not displayed. If I crop by click & drag, or by typing in the Selection fields, there is no way to know the resulting Aspect Ratio without pulling out a calculator.

12. The original image dimensions are not displayed, unless the Scale Image area has been expanded. Cropping is just that much more awkward as a result.

[miqrogroove]

13. The "Save" button is broken. It's always greyed out on my screen. Why is it there? What does it do?

[miqrogroove]

14. When holding down the Shift key, Click & Drag only works when the cursor is moving from upper left to lower right. Weird behavior when dragging toward the upper left corner.

[miqrogroove]

15. The magical input required to get the "Crop, a.k.a. T-Square-ish button" to be not greyed out are hard to pin down. If I Click & Drag to make a cropping rectangle, the Crop button is always disabled unless I let go of the mouse. Even then, the button is sometimes still disabled, and the only explanation for this is in the "Help" expand/collapse link.

[miqrogroove]

16. Pressing Shift during Click & Drag does nothing. Shift must be pressed before clicking, which is confusing and appears inconsistent.

[miqrogroove]

17. Shift key causes Click & Drag to lock to the wrong Aspect ratio. When a selection is already on-screen, Shift locks the new selection to the Aspect of the old selection, regardless of numeric input.

[miqrogroove]

I'm not testing this version of image cropping anymore.

I grade this feature "barely works, when you're lucky."

[miqrogroove]

FWIW, there needs to be a Preview button somewhere on this interface. The instructions fail to explain that it's necessary to ever click on the Crop button, nor how that is any different from clicking on the Save button.

[miqrogroove]

18. If you rotate the image and then select an area you want cropped, the Save button is enabled, but the saved image is not cropped.

[miqrogroove]

19. File URL field is not updated after saving the image.

[Denis-de-Bernardy]

aspect ratios should be hard-coded. only five are commonly used:

• 4:3 (TV)
• 3:2 (Camera)
• 16:9 (HD)
• 185:1 (Movie)
• 240:1 (Wide Movie)

most Youtube videos are 3:2; movie trailers typically are 185:1 or 240:1.

it's like seriously, do we need to offer anything different from those and 1:1?

[nacin]

I'm going to try to run through most of these.

Enter an Aspect ratio. The image selection changes but the Selection fields are not updated.

Priority: I'd consider this important if only because one would generally tab out of the aspect ratio box, which would immediately change the crop to whatever was in the selection fields boxes.

To fix: setRatioSelection should also calculate and populate the selection fields with the newest numbers.

4. Attempt to change the Aspect ratio to 4:7. Input is erased as soon as I type it in. This makes no sense at first, but appears to be some kind of boundary feedback?

Correct, this is boundary feedback. If the new aspect ratio would force the crop boundaries to beyond the image, then it kicks back. Try a smaller crop and then set a 4:7 and you'll have no problem. No bug here beyond user feedback.

5. Attempt to change the Aspect ratio to 10:11. Input is impossible unless the second field is empty.

Boundary feedback again. No bug.

6. Change the Aspect ratio to 7:8 and then change it to 7.9:8. Nothing happens.

Given that two of the five common aspect ratios are decimals (1.85:1 and 2.39:1), it would make sense that the intvals are removed from setRatioSelection.

To fix: Allow aspect ratios to be floats.

7. In common graphics vocabulary, "Selection" always refers to a pair of rectangular coordinates. Using the word "Selection" where "Size" is what you meant to say is confusing.

Where?

8. Scale Image is collapsed by default, with no indiciation that it can be expanded except for a slight difference in text color, and the cursor changes on mouse over.

I'd tend to agree. Fix: Hide help text with consistent (help) link, otherwise always display scale section.

9. The interface would make more sense with a limited set of radio options for aspect ratios.

I'd tend to agree, but nothing should be changed at this point.

10. The original image Aspect Ratio is not displayed. If my image has an Aspect of 1.39847, and I want to "lock it in" while cropping, there is no obvious way to do it.
11. The new image Aspect Ratio is not displayed. If I crop by click & drag, or by typing in the Selection fields, there is no way to know the resulting Aspect Ratio without pulling out a calculator.

As long as they remain fields versus radio buttons, the Aspect Ratio boxes should probably be populated just as the selection fields are.

12. The original image dimensions are not displayed, unless the Scale Image area has been expanded. Cropping is just that much more awkward as a result.

See my suggestion above (#8).

13. The "Save" button is broken. It's always greyed out on my screen. Why is it there? What does it do?

It saves the changes. Execute a crop then see it become enabled.

14. When holding down the Shift key, Click & Drag only works when the cursor is moving from upper left to lower right. Weird behavior when dragging toward the upper left corner.

Yea, that is weird.

[miqrogroove]

@Denis I listed 8:5, 5:4, and 4:3 because they are common computer monitor ratios. Some people will go out of their way to use the Golden Ratio, which is an irrational expression (not an integer). The overall idea of being limited to fractional notation is just weird.

[miqrogroove]

Input is impossible unless the second field is empty.

Boundary feedback again. No bug.

I might need to clarify this. Set the ratio to blank:999. If you have a large value on the right side, and try to edit the left side, it is impossible to type any number. At all. Ever. Broken.

[miqrogroove]

13. The "Save" button is broken. It's always greyed out on my screen. Why is it there? What does it do?

It saves the changes. Execute a crop then see it become enabled.

The crop button is disabled. The save button is disabled. I can't type anything in the fields. How do you expect the non-computer-scientist to figure this out?

[miqrogroove]

Let's just add on to the list that the cropping rectangle needs to automatically expand to the minimum size instead of disabling all of the buttons and fields.

[nacin]

How far along are you on a patch?

[miqrogroove]

Me? I've got my eyes on dinner at the moment.

[miqrogroove]

First, clean up some of the object oriented nonsense surrounding the iasapi implementation. Fixes points 1 through 3 out of 19.

[miqrogroove]

Take the handcuffs off of the Aspect ratio fields. Fixes points 4 through 5 out of 19. Variable naming affects part1.

[miqrogroove]

Type juggle first Aspect ratio field 'x' as float. Fixes points 6 and 9 out of 19.

[miqrogroove]

First 3 patches combined for clarity.

[miqrogroove]

Added patches for some of the Aspect issues.

[azaozz]

As far as I can understand this ticket 1, 2, 3, 4, 5, 6, 9, 10, 11, 17 hint that we need to remove the aspect ratio fields completely as they seem too hard to use.

7. We can replace "Selection" with "Size", not sure if that would make it clearer.

8. Indication is the different color and cursor change, similar to postboxes headers, menu, etc.

12, 13. ??

14. Seems to work as expected in most browsers.

15. Think the explanations belong in the help section.

16. As in many other image editors.

17. See 1.

18. See 16. Selecting the area that needs to be cropped and not pressing the Crop button will not crop the image...

Perhaps we give the user too many (rarely needed) options. Can revisit in 3.0 and remove the aspect ratio and editable selection size fields. They were intended for "more advanced" users that would spend 5-10 min. to learn how they work.

[miqrogroove]

milestone changed from 2.9 to Future Release

Once again, I'm sorry I even bothered to test this BS. Couldn't care less about your Future Release.

[westi]

Replying to miqrogroove:

milestone changed from 2.9 to Future Release

Once again, I'm sorry I even bothered to test this BS. Couldn't care less about your Future Release.

Please do not close tickets like this - Future Release is a valid milestone for this ticket as it does not yet have a patch to resolve the issues you highlighted.

[miqrogroove]

westi, nacin asked for my progress on the patch. I got started on it for him, and then the ticket got punted. I seriously think this ticket just became a massive waste of my time. This cropping feature needs to be sent back to alpha testing. Now if you want to release this bug ridden junk as-is, then go ahead. I'm not going to write any patches for it after 2.9. Why should I bother/care? Why should I beta test anything when most the bug reports and patches I write get punted? Why would a dev team even make a Release Candidate if they're not willing to fix the bugs before it's released? Seriously, screw this ticket.

[Denis-de-Bernardy]

might a few slight fixes and work arounds from this ticket be worth adding in 2.9.1?

[hakre]

Additional report: If an image was too large to create thumbnails from (image dimensions 4000x8000 e.g.) the image editor has problems as well. that scenario is not taken properly care of. No error displayed to the user. I would like to see at least an error box on top of the page to signal the user what might be wrong.

[ericlewis]

As has been stated earlier on this ticket, these problematic interface elements seem to be unintuitive and confounding at times. I tend to agree with azaozz that we should rethink the utility of these tools. Would anyone miss them? Is anyone uploading images into WordPress and then looking to crop with exact aspect ratio sizing or dimensions? Aren't themes taking care of most of this precision cropping grunt work with custom image sizes?

We could fix these currently half-broken, hard to use things, but I'd like to be radical and suggest we remove the Image Crop metabox.

[chriscct7]

I think we should consider splitting these issues into separate tickets to make it easier to get patches for them done and merged.

[karmatosed]

As time has passed since this was made, a few things may be fixed. It would be best to get this tested with that in mind and then split out into each issue having it's on ticket. In this way it's a lot more manageable and doesn't get lost.

We discussed this in this week's design triage session, for now that would be the next best step. Once those tickets have been made after retesting, this one should be closed - leaving it open until then.

[joedolson]

Since #50523 landed, pretty nearly every issue in this ticket is no longer directly applicable. While I'm not going to say that the updates necessarily have fixed every issue, it would now be very difficult to map these issues to the updated implementation. Combining that with the likelihood that the image editing experience will be replaced with the overall admin redesign, I'm closing this issue. I guess it's going to be worksforme... but maybe we need a resolution of its-complicated.