Make WordPress Core

Opened 9 years ago

Closed 3 years ago

Last modified 3 years ago

#30155 closed defect (bug) (fixed)

Fix crop image functionality within edit flow

Reported by: sonjanyc's profile sonjanyc Owned by: adamsilverstein's profile adamsilverstein
Milestone: 5.6 Priority: normal
Severity: normal Version: 2.9
Component: Media Keywords: has-screenshots wpcampus-report has-patch
Focuses: ui, accessibility, javascript Cc:

Description

The Image Flow team has done some user testing and the cropping functionality within the image editing flow is basically unusable, and not at all intuitive even for tech savvy users.

Several things would need to be fixed in order to make it more usable and user friendly:

  1. When the user clicks on "Edit image" in the image flow, NO tool should be selected in the initial state of editing mode
  2. Upon selection of Crop tool, dotted crop lines should be around the edges of the full image (currently user needs to make the selection and most of the users didn't realize that)
  3. User should be able to scale crop area with handles and reposition crop area by dragging it
  4. Aspect ratio should be a visual representation with text (see mockup attached), and an option to input custom aspect ratio should be available (original, custom, 1:1, 3:2, 2:3, 4:3, 3:4, 16:9, 9:16)
  5. Selecting an aspect ratio should lock selection, so when user resizes selection it contains the aspect ratio
  6. When a user clicks on "Original" aspect ratio, it should reset selection to full image and lock in the aspect ratio of the image aspect ratio
  7. "Selection" numbers inside "Image Crop" shouldn't be an input field, but rather just reflect the selected image size without the ability to manually edit it (confuses users)
  8. When user chooses to use a custom aspect ratio, we should add an "Apply" button to set the custom ratio (currently it doesn't work properly with pressing tab)
  9. To save and apply the crop there should be one prominent button called "Apply crop" (currently the user needs to click on the crop tool again, which makes no sense and none of our test users could figure it out)

Attachments (8)

image-flow-crop-ratio-1.jpg (88.2 KB) - added by sonjanyc 9 years ago.
Image crop aspect ratio (visual selection)
30155.diff (706 bytes) - added by adamsilverstein 7 years ago.
30155.2.diff (3.3 KB) - added by adamsilverstein 7 years ago.
30155.3.diff (3.3 KB) - added by adamsilverstein 7 years ago.
30155.4.diff (3.4 KB) - added by adamsilverstein 7 years ago.
30155.5.diff (3.3 KB) - added by kirasong 6 years ago.
Refreshed.
30155.6.diff (441 bytes) - added by adamsilverstein 4 years ago.
Media_Library__develop_wordpress__WordPress_2020-01-21_15-12-27.jpg (7.2 KB) - added by adamsilverstein 4 years ago.

Download all attachments as: .zip

Change History (80)

@sonjanyc
9 years ago

Image crop aspect ratio (visual selection)

This ticket was mentioned in Slack in #feature-imageflow by sonjanyc. View the logs.


9 years ago

This ticket was mentioned in Slack in #feature-imageflow by teamadesign. View the logs.


9 years ago

#3 @klosi
9 years ago

I have finally created the form for the Aspect ratios: https://docs.google.com/forms/d/1dEn6IiKjvgFuKh0Mv5Z9nxXaePbpmEIlLPy3ttYk8pM/viewform?usp=send_form

They cover the forms mentioned by you, plus a few others which are common in photography. I hope I can get some feedback from @ahockley about the relevance of them.

One common problem is the horizontal vs landscape format. A lot of aspect ratios are made for portrait (like micro fourt thirds (3:4)) and others are made for horizontal (16:9, Golden Ratio, etc.). I feel we should make the decision for the user and make only matching a/r's available... the form doesn't account for that yet, as I need more feedback first.

#4 @boonebgorges
9 years ago

  • Version changed from trunk to 2.9

#5 @afercia
9 years ago

  • Focuses accessibility added

Would propose to make an effort to consider also accessibility issues here, especially about keyboard accessibility. Everything should be operable using just a keyboard. See related #28864.
Many of the issues outlined here make perfectly sense and would benefit all users :) About point 7:

"Selection" numbers inside "Image Crop" shouldn't be an input field, but rather just reflect the selected image size without the ability to manually edit it (confuses users)

I would say the opposite :) instead of removing the input fields, we should improve them since it's the only way to make a selection using the keyboard. We should have 4 input fields, the first pair to set the top-left selection starting point and the second pair to set the bottom-right selection end.

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


8 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 years ago

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


8 years ago

#9 @kirasong
8 years ago

Related: #17247

This ticket was mentioned in Slack in #core-media by mike. View the logs.


7 years ago

#11 @adamsilverstein
7 years ago

In 30155.diff:

Select full image on load, making cropping more intuitive.

Version 0, edited 7 years ago by adamsilverstein (next)

This ticket was mentioned in Slack in #core-media by adamsilverstein. View the logs.


7 years ago

#14 @adamsilverstein
7 years ago

  • Keywords has-patch reporter-feedback needs-testing added

30155.2.diff is an alternate version that more closely matches the description of steps 1-3 from @sonjanyc -

  • The crop button is always 'enabled'
  • Clicking the crop button with no selection selects the entire image
  • Clicking the crop button with the entire image selected doesn't do anything
  • Clicking the crop button with a selection crops as expected

Here is a screencast:

https://cl.ly/451l2H1E0W24/Screen%20Recording%202017-06-23%20at%2008.48%20AM.gif

Appreciate testing/review/feedback. Shall we get this in and then continue to work on the image ratio buttons?

#15 @adamsilverstein
7 years ago

In 30155.3.diff

  • correct a math issue. math!

#16 @adamsilverstein
7 years ago

In 30155.4.diff

Use img.innerWidth() and img.innerHeight() in place of img[0].width and img[0].height, matching the method used in imgAreaSelect adjust() and ensuring full image is selected without artificially adding 1.

#17 follow-up: @afercia
7 years ago

I like the direction 30155.4.diff is taking. That leads me to a general consideration about the UI and one possible improvement. Not saying it's something that should be necessarily done now, but maybe it's something worth considering for future iterations and I'd greatly appreciate feedback from designers /cc @melchoyce @karmatosed etc. :)

One of the general patterns across all the WordPress admin UI, is that it's always displaying everything, even when you don't need it. I guess this is something that comes from old design trends, with user interfaces full of controls, links, buttons, etc. Thinking at interfaces designed 10 years ago, they often follow this pattern. Instead, more modern interfaces, especially with the advent of mobile devices, tend to display UI sections and controls only when you need them.

In this specific case, the "crop" feature is changing in something that requires an explicit user action to be activated: users have to press the "Crop" button to get the full selection (actually they can still drag on the image to get a first selection but this is a minor point).
Considering this, I'm wondering if always displaying the ratio and selection fields still makes sense:

https://cldup.com/EHqBOx-dwJ.png

Wouldn't be better to show them only when users press the "Crop" button or make a selection dragging on the image? They could be displayed under the main buttons, in a sort of toolbar as many image editing software do. See the screenshot below, made quickly editing in the browser and not pretending it's perfect, just to give you an idea:

https://cldup.com/0jZlYG-tXR.png

A cleaner, simplified interface would benefit all users. Revealing the additional fields can be perfectly accessible if done in the right way. Any thoughts welcome!

#18 in reply to: ↑ 17 @adamsilverstein
7 years ago

Replying to afercia:

Considering this, I'm wondering if always displaying the ratio and selection fields still makes sense:

Great point. Based on your screenshots alone, I can see that only showing these ratio/crop imput fields when the crop tool is active would be a big win from a usability standpoint. I totally agree with your perspective that decluttering the interface improves comprehensions/reduces confusion.

How would we deal with these types of dynamically present fields and screen reader, eg. would we announce that new fields are added when the user entered the crop mode, or expect them to tab around to find the new fields?

#19 @adamsilverstein
7 years ago

  • Owner set to adamsilverstein
  • Status changed from new to assigned

#20 @afercia
7 years ago

would we announce that new fields are added when the user entered the crop mode, or expect them to tab around to find the new fields?

Usually, the best option is to use an aria-expanded attribute on the control that expands "the thing" so users are informed something appeared on the page. Then, placing the additional fields right after the "Crop" button would be key, as users would find them with ease (that could be done with some absolute positioning, I guess). It also makes sense to be able to tab directly from the Crop button to the ratio/selection fields.

Last edited 7 years ago by afercia (previous) (diff)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 years ago

#22 @afercia
7 years ago

See also #37750.

This ticket was mentioned in Slack in #core-media by adamsilverstein. View the logs.


7 years ago

This ticket was mentioned in Slack in #core-media by mike. View the logs.


6 years ago

@kirasong
6 years ago

Refreshed.

#25 @joemcgill
6 years ago

  • Milestone changed from Awaiting Review to 5.0

#26 @kirasong
6 years ago

Refreshed 30155.4.diff in 30155.5.diff.

Seems to work as intended. It's still a little unclear that the user has to click the Crop button again after having made a selection, but it's still much more intuitive than it worked before.

One option to make this clearer would be a "Complete Crop" or "Finish Crop" button appear to finish the operation, or having the save button function this way (although this sets off a11y bells in my head).

While I'd like to see much more go into making Cropping (and this screen in general) better in the future, I think we should go ahead and commit 30155.5.diff or similar as an incremental step to make this more intuitive.

This ticket was mentioned in Slack in #core-media by mike. View the logs.


6 years ago

This ticket was mentioned in Slack in #core-media by mike. View the logs.


6 years ago

#29 @adamsilverstein
6 years ago

  • Keywords commit added

Going to commit what we have, then re-open the ticket so we can continue working on the cropping flow. As I see it, items 4-9 of the original ticket still remain.

#30 @adamsilverstein
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 42404:

Media: improve flows for cropping on attachment details screen.

On the "Attachment Details" screen:

  • The crop button is always 'enabled'.
  • Clicking the crop button with no selection selects the entire image.
  • Clicking the crop button with the entire image selected doesn't do anything.
  • Clicking the crop button with a selection crops as expected.

Props sonjanyc, afercia, mikeschroder.
Fixes #30155.

#31 @adamsilverstein
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#32 follow-up: @michielvanhaverbeke
6 years ago

Hello

I reviewed and tested the feature and think that it would be more intuitive to also allow the user to crop by pressing enter on the keyboard. After many years of using Photoshop this has become a habit for me and now it really annoys me when i cannot do this. Let me know what you guys think

#33 in reply to: ↑ 32 @melchoyce
6 years ago

Replying to michielvanhaverbeke:

I reviewed and tested the feature and think that it would be more intuitive to also allow the user to crop by pressing enter on the keyboard. After many years of using Photoshop this has become a habit for me and now it really annoys me when i cannot do this.

+1

#34 @pento
5 years ago

  • Milestone changed from 5.0 to 5.1

#35 @adamsilverstein
5 years ago

  • Keywords needs-patch added; has-patch reporter-feedback needs-testing commit removed
  • Milestone changed from 5.1 to Future Release

Nothing new here for 5.1; marking this as future release. Leaving open for now in case we decide to revisit and continue to improve this feature with some of the other items mentioned in the ticket description from @sonjanyc.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


5 years ago

#37 @david.binda
5 years ago

Testing the proposed patch, I have noticed somewhat counter-intuitive behaviour:

  1. When the user clicks on "Edit image" the crop tool is not disabled
  2. Clicking the crop tool, whole image is selected
  3. Clicking the crop tool again does nothing
  4. Shrinking the dotted (selected) are in the image and clicking the crop tool crops the image
  5. Clicking undo button restores the original dimension

So far, all the steps produced expected results, but now:

  1. Clicking the crop tool selects the whole image (which is desired)
  2. Clicking the crop tool again crops the image to previously cropped dimensions, which does not feel correct.

#38 @afercia
5 years ago

  • Keywords has-screenshots wpcampus-report added

This is also reported in the WPCampus accessibility report issues on GitHub, see https://github.com/WordPress/gutenberg/issues/15341. Quoting:

Image cropping requires mouse and keyboard

  • Severity: Medium
  • Affected Populations:
    • Blind
    • Low-Vision
    • Motor Impaired
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
    • Edit Media

#### Issue description

On the Edit Media page, the functionality to crop images relies on a
combination of mouse and keyboard interaction.

Although touch can be used to create an initial selection, the handles
to adjust the size are only available to mouse users. The instructions
in the cropped section also mention that the Shift key can be used to
maintain aspect ratio while cropping, however this assumes that users
can manipulate both mouse and keyboard at the same time. (And while
testing, this functionality did not appear to work anyway; aspect ratio
was only maintained after explicitly setting a ratio in the text
inputs.)

Users with disabilities may not be able to use a mouse, or may not be
able to use a mouse and keyboard at the same time. Making tasks such as
this input-agnostic will allow users more freedom and ability to perform
the task.

#### Remediation Guidance

Firstly, it would be beneficial to low-vision users and users with
cognitive disabilities if the crop/aspect ratio and selection inputs
were closers to each other (both in layout, and in source order). It
would then be easier for such users to move between sections and adjust
the input values after making an initial imperfect selection. It would
also be more logical to place these fields after the image editing area,
rather than before it.

The cropping feature should function for any input mode, i.e. it should
work from only the keyboard, only the mouse, only touch, or any
combination of those.

For combined functions such as maintaining an aspect ratio while
resizing the crop region, have a separate checkbox which users can
select to maintain (or ignore) aspect ratio. The current Shift key
functionality can be retained, but only as a shortcut for users who can
use mouse and keyboard at the same time, it should not be the only way
of doing this.

#### Relevant standards

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by [Tenon](https://www.tenon.io) and funded by [WP Campus](https://wpcampus.org/). This issue is GUT-88 in Tenon's report

#39 @adamsilverstein
5 years ago

Clicking the crop tool again crops the image to previously cropped dimensions, which does not feel correct.

@davidbinda thanks for testing, that does seem off.

@afercia thank you for adding the audit details. the remediation guidance is especially helpful.

#40 @afercia
5 years ago

  • Milestone changed from Future Release to 5.3

#41 @karmatosed
5 years ago

  • Keywords needs-design-feedback added

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


5 years ago

#43 @karmatosed
5 years ago

  • Keywords needs-design-feedback removed

#44 @anevins
5 years ago

Hey @adamsilverstein Are you okay to carry on with this? Looks like we don't need design feedback any more.

#45 @adamsilverstein
5 years ago

@anevins yes, thanks for the ping. i'll put this ticket on my list to revisit soon.

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


5 years ago

#47 @adamsilverstein
5 years ago

  • Milestone changed from 5.3 to 5.4

Punting this to 5.4 because we haven't had a chance to address this ticket and we are about to enter 5.3 beta.

Outstanding issues that should be resolved here:

From https://core.trac.wordpress.org/ticket/30155#comment:37 -

Clicking the crop tool again crops the image to previously cropped dimensions, which does not feel correct.

And from https://core.trac.wordpress.org/ticket/30155#comment:38

#### Remediation Guidance

Firstly, it would be beneficial to low-vision users and users with
cognitive disabilities if the crop/aspect ratio and selection inputs
were closers to each other (both in layout, and in source order). It
would then be easier for such users to move between sections and adjust
the input values after making an initial imperfect selection. It would
also be more logical to place these fields after the image editing area,
rather than before it.
The cropping feature should function for any input mode, i.e. it should
work from only the keyboard, only the mouse, only touch, or any
combination of those.
For combined functions such as maintaining an aspect ratio while
resizing the crop region, have a separate checkbox which users can
select to maintain (or ignore) aspect ratio. The current Shift key
functionality can be retained, but only as a shortcut for users who can
use mouse and keyboard at the same time, it should not be the only way
of doing this.

#48 @afercia
5 years ago

Worth noting some reordering of the UI is in the works on #47116.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#51 @afercia
4 years ago

Re: the UI part, see #47136 and #47116 where @nrqsnchz started exploring a new order of the main element. The work and exploration from there could be used to start improving the UI.

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


4 years ago

This ticket was mentioned in PR #139 on WordPress/wordpress-develop by adamsilverstein.


4 years ago
#53

#54 @adamsilverstein
4 years ago

  • Keywords has-patch added; needs-patch removed

In 30155.6.diff

  • Clear the "Selection" input fields after a crop action is completed.

This makes sense from a UI flow and resolves the re-cropping issue after undo noted in https://core.trac.wordpress.org/ticket/30155#comment:37 - maybe @david.binda or someone else can re-test

Here is a screencast where I test cropping after this change: https://share.getcloudapp.com/8LuwNw9O

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#57 @afercia
4 years ago

@adamsilverstein hello! This ticket was discussed during today's accessibility bug-scrub: not sure what's left :) Do you think it can make it for 5.4?

#58 @adamsilverstein
4 years ago

Apologies, I wasn't able to spend time on this for 5.4, I'll work on it for 5.5.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#60 @afercia
4 years ago

  • Milestone changed from 5.4 to 5.5

With 5.4 Beta 3 approaching, we're a bit out of time. Moving to 5.5 as per @adamsilverstein's feedback.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#66 @adamsilverstein
4 years ago

  • Milestone changed from 5.5 to 5.6

Looks like https://core.trac.wordpress.org/attachment/ticket/30155/30155.6.diff is useful and would still be worth committing. Punting this to 5.6 so it will have more testing time.

Other than that fix, I feel like we should focus efforts on the user image experience in the block editor - which now includes inline image cropping. Editing images inline probably makes more sense in most cases anyway because the user can see the full context.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 years ago

#69 @adamsilverstein
3 years ago

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

In 49087:

Media: clear inputs after cropping on attachment details screen.

Clear the crop selection input fields after the crop action is complete.
Fixes unexpected re-cropping behavior if the crop button was clicked more than once.

Props davidbinda.
Fixes #30155.

#72 @nikunjbhatt
3 years ago

I have WordPress 5.8.1 (most probably latest stable version). The 9th point in the main issue description hasn't been implemented yet. It is confusing that user has to click on the Crop button again to finally crop the image!

I came here from a GitHub issue, where I reached after searching on Google something like - unable to crop image in wordpress media library. You can guess how many users, regardless of techsavvy or not, are getting confused.

The save button should get enabled after clicking the Crop button. Other buttons - Roatate Left, Rotate Right, Flip Vertical, Flip Horizontal - can/should be disabled when in Crop mode; they should get/can be enabled after cancelling or saving the cropping.

Note: See TracTickets for help on using tickets.