Meeting Notes and Discussion around Image Cropping

A sub set of the #feature-imageflow team met on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. yesterday to discuss a few things, namely:

  1. Can we tackle to improve the image cropping experience in 4.2 ?
    Should we save versions of cropped images on a post level or crop and overwrite the original?
  2. We’re currently working on a prototype to prove out our UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. strategy and to come up with an ideal solution before we go into development. However we wanted to look at features or improvements that could potentially be worked on already. Since the image cropping experience is so broken, we think this could be something we can work on separately and up front – and make a lot of people happy!

I was meeting with several people in slack to discuss these questions yesterday: @dh-shredder, @ericlewis, @markoheijnen, @royboy789, and @antoniancu – after the official meeting was over we also had @boren, @mor10, @samuelsidler and a few others join in.

DISCUSSING #1:

I’ve created some flows for an ideal image cropping experience and shared those with the group: https://docs.google.com/file/d/0Byz0aohoFoOcUi02M1NHdTItVnM/edit

The conclusion of the meeting in was that we agree that we should make iterative changes to improve the image cropping functionality and experience. We should come up with a full wish list of changes that need to be made to get to the ideal solution, and then decide which ones we can tackle now and which ones we’ll phase out. I will start working on this list and will get some help from the group refining it. Important will be to make this work on desktop as well as mobile!!

@boren shared Vizrecs of three cropping flows, which helps identify pain points: https://make.wordpress.org/flow/2015/01/26/uploading-and-cropping-an-image-in-the-media-lib-grid-view-and-list-view-macnchrome/

IMAGE CROPPING WISHLIST:

  • No tool should be selected in initial state of editing mode, image cropping icon shouldn’t look “inactive”
  • When user clicks on cropping icon, full image should have a crop selection
  • User can change crop area with handles and reposition crop area by dragging (this should also work on mobile!)
  • Aspect ratio should have common pre-defined aspect ratios to choose from and an option to input a custom aspect ratio
  • Selecting an aspect ratio should lock selection of aspect ratio, so user can still drag corners to change image selection
  • Action buttons to apply/discart the crop should be “APPLY” or “DISCARD”
  • Should there be an option to crop the “original” vs. create new “post image version”?

Please add anything in the comments I might have forgotten. Help us refine this list.
Thanks!

DISCUSSING #2:

When an image is being cropped it’s confusing to the end user whether it crops the original image or saves a new version. The discussion what would make most sense I’m sure came up internally many times already. So we talked about it as well. People have different opinions and ideas for this, but I soon realized that this discussion will need to be held in a much bigger circle. The overall consensus was that we do want to work towards what @dh-shredder calls “post image”. This means that if an image is being edited / cropped in a post context it will create and save a version of the image for that post and not effect the same image in different locations. If a user however edits an image within the Media Library, he/she edits the original image.
This functionality would need to be worked out with a set of rules, there are obviously concerns about over-cluttering the media library… etc.

#image-flow