[wp-trac] [WordPress Trac] #27664: UX issues with Edit Image screen

[WordPress Trac]

#27664: UX issues with Edit Image screen
-------------------------+-----------------------------
 Reporter:  siobhan      |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:  trunk
 Severity:  normal       |   Keywords:
  Focuses:  ui           |
-------------------------+-----------------------------
 Now that it's possible to edit images from within the media modal, more
 people will hopefully use the functionality. I was playing with it,
 however, and there were some things that I found confusing and I think a
 regular user would be even more confused. Here's what they are:

 '''1. Icons'''

 [[Image(https://i.cloudup.com/xbOIcQAZ2y.png)]]

 The feature I am most looking forward to having access to is being able to
 rotate images. I went to edit my image, and looked for the rotate button
 but found it to be greyed out, which was frustrating. Then I realised that
 I was looking at the Undo/Redo buttons. It wasn't clear to me that the
 rotate buttons were rotate buttons. The curved arrows of the undo/redo
 buttons look like they are for rotating.

 A minor thing that could help would be positioning the Undo/Redo buttons
 on the left of the panel of buttons. I always conceptualise Undo/Redo as
 Forward/Back, and because Forward/Back buttons are always to the left hand
 side of a browser, this is where I expect to find them.

 The flip buttons are also unclear. I clicked them thinking that they would
 grow the image horizontally or vertically, because that's what the image
 implies.

 '''2. Crop'''

 The series of actions to crop is:
 1. make selection
 2. click crop button

 This is made more difficult by the fact that there's nothing in the UI to
 indicate that in order to crop you have to first make a selection. How is
 a user to know about this?

 With all of the other actions, you click on the icons to make the action
 happen, but with cropping the action is reversed. It would be more
 intuitive if it was:
 1. selection action
 2. make selection
 3. click crop button

 Another minor issue is that it's not obvious how to clear my selection if
 I decide not to crop. Because there is Cancel button underneath the image,
 I find my mouse automatically moving towards it.

 [[Image(https://i.cloudup.com/Xcndbg3Dcq.png)]]

 I'm sure that there are other ways that we could make image editing in
 WordPress a really great experience, but I think doing the following
 things could make a big improvement:
 - clearer icons for flip, undo/redo, rotate
 - reorder icons
 - change workflow for crop

--
Ticket URL: <https://core.trac.wordpress.org/ticket/27664>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform