Make WordPress Core

Opened 15 years ago

Closed 13 months ago

#11477 closed defect (bug) (worksforme)

UX issues in the Image Editor

Reported by: miqrogroove's profile miqrogroove Owned by: francina's profile francina
Milestone: Priority: normal
Severity: major Version: 2.9
Component: Media Keywords: needs-testing reporter-feedback
Focuses: administration Cc:

Description

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.
  1. Click & Drag to highlight an area of the image.
  1. Enter an Aspect ratio of 4:3. The image selection changes but the Selection fields are not updated.
  1. 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?
  1. Attempt to change the Aspect ratio to 10:11. Input is impossible unless the second field is empty.
  1. Change the Aspect ratio to 7:8 and then change it to 7.9:8. Nothing happens.
  1. 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.
  1. 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.
  1. 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.
  1. 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.
  1. 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.
  1. 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.

Attachments (4)

ticket-11477-part1-ver1.patch (1.3 KB) - added by miqrogroove 15 years ago.
First, clean up some of the object oriented nonsense surrounding the iasapi implementation. Fixes points 1 through 3 out of 19.
ticket-11477-part2-ver1.patch (855 bytes) - added by miqrogroove 15 years ago.
Take the handcuffs off of the Aspect ratio fields. Fixes points 4 through 5 out of 19. Variable naming affects part1.
ticket-11477-part3-ver1.patch (516 bytes) - added by miqrogroove 15 years ago.
Type juggle first Aspect ratio field 'x' as float. Fixes points 6 and 9 out of 19.
ticket-11477-parts1-3-ver1.patch (2.2 KB) - added by miqrogroove 15 years ago.
First 3 patches combined for clarity.

Download all attachments as: .zip

Change History (40)

#1 @miqrogroove
15 years ago

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

#2 @miqrogroove
15 years ago

  • Severity changed from normal to major
  • Summary changed from Aspect Ratio Input Behaves Erratically to Unable to Crop Images in RC1

#3 @miqrogroove
15 years ago

  1. 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.

#4 @miqrogroove
15 years ago

  1. 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.

#5 @miqrogroove
15 years ago

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

#6 @miqrogroove
15 years ago

  1. 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.

#7 @miqrogroove
15 years ago

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

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

#8 @miqrogroove
15 years ago

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.

#9 @miqrogroove
15 years ago

  1. 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.

#10 @miqrogroove
15 years ago

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

#11 @Denis-de-Bernardy
15 years ago

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?

#12 @nacin
15 years ago

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.

  1. 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.

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

Boundary feedback again. No bug.

  1. 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.

  1. 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?

  1. 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.

  1. 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.

  1. 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.
  2. 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.

  1. 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).

  1. 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.

  1. 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.

#13 @miqrogroove
15 years ago

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

#14 @miqrogroove
15 years ago

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.

#15 @miqrogroove
15 years ago

  1. 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?

#16 @miqrogroove
15 years ago

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.

#17 @nacin
15 years ago

How far along are you on a patch?

#18 @miqrogroove
15 years ago

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

@miqrogroove
15 years ago

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

@miqrogroove
15 years ago

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

@miqrogroove
15 years ago

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

@miqrogroove
15 years ago

First 3 patches combined for clarity.

#19 @miqrogroove
15 years ago

Added patches for some of the Aspect issues.

#20 @azaozz
15 years ago

  • Milestone changed from 2.9 to Future Release

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.

  1. We can replace "Selection" with "Size", not sure if that would make it clearer.
  1. Indication is the different color and cursor change, similar to postboxes headers, menu, etc.

12, 13. ??

  1. Seems to work as expected in most browsers.
  1. Think the explanations belong in the help section.
  1. As in many other image editors.
  1. See 1.
  1. 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.

#21 follow-up: @miqrogroove
15 years ago

  • Resolution set to wontfix
  • Status changed from new to closed

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.

#22 in reply to: ↑ 21 @westi
15 years ago

  • Resolution wontfix deleted
  • Status changed from closed to reopened

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.

#23 @miqrogroove
15 years ago

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.

#24 @Denis-de-Bernardy
15 years ago

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

#25 @hakre
15 years ago

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.

#26 @miqrogroove
12 years ago

  • Resolution set to maybelater
  • Status changed from reopened to closed

#27 @markoheijnen
12 years ago

  • Resolution maybelater deleted
  • Status changed from closed to reopened

#28 @ericlewis
10 years ago

  • Keywords ux-feedback ui-feedback 2nd-opinion added

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.

#29 @ericlewis
10 years ago

  • Summary changed from Unable to Crop Images in RC1 to UX issues in the Image Editor

#30 @chriscct7
9 years ago

  • Focuses administration added
  • Keywords needs-testing added; 2nd-opinion removed

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

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


7 years ago

#32 @karmatosed
7 years ago

  • Keywords reporter-feedback added; ux-feedback ui-feedback removed

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.

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.


3 years ago

#34 @francina
3 years ago

  • Owner set to francina
  • Status changed from reopened to assigned

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.


3 years ago

#36 @joedolson
13 months ago

  • Milestone Future Release deleted
  • Resolution set to worksforme
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.