WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 7 months ago

#30155 new defect (bug)

Fix crop image functionality within edit flow

Reported by: sonjanyc Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 2.9
Component: Media Keywords:
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 (1)

image-flow-crop-ratio-1.jpg (88.2 KB) - added by sonjanyc 3 years ago.
Image crop aspect ratio (visual selection)

Download all attachments as: .zip

Change History (10)

@sonjanyc
3 years ago

Image crop aspect ratio (visual selection)

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


3 years ago

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


2 years ago

#3 @klosi
2 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
2 years ago

  • Version changed from trunk to 2.9

#5 @afercia
2 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.


12 months ago

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


11 months ago

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


11 months ago

Note: See TracTickets for help on using tickets.