UX issues with Edit Image screen

[siobhan]

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

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.

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

[helen]

Related on the API front: #21810

I think we need to go at this with a fresh eye, and not iterate on what's there. Iterating is cool, but sometimes a replacement is better, and I believe this to be one of those cases. lessbloat made an interesting set of wireframes back during 3.5 that I think have gotten lost in the sands of P2 comments: ​http://s.hyhs.me/UpcQ

[siobhan]

I remember seeing those wireframes (once, a long long time ago). I definitely agree that it'd be worth looking at image editing with a fresh eye. Maybe this is something that could be worked in as a feature-plugin?

[helen]

Related: #11895

[ericlewis]

Replying to helen:

I think we need to go at this with a fresh eye, and not iterate on what's there. Iterating is cool, but sometimes a replacement is better, and I believe this to be one of those cases.

Hell yes. I have seen ticket after ticket about the Image Editor and it's quirky ways.

Replying to siobhan:

Maybe this is something that could be worked in as a feature-plugin?

Definitely.

[ryan]

Related #27901

[chriscct7]

@helen how would you like this ticket to proceed? Patch the issues mentioned or close in favor of a new system?

[helen]

@chriscct7 Why does it need to be closed in favor of a new system? This seems like the right tracking/request ticket for a new system.

[chriscct7]

Replying to helen:

@chriscct7 Why does it need to be closed in favor of a new system? This seems like the right tracking/request ticket for a new system.

That seemed to be what you were proposing in comment:2. I must have misread that. My apologies!

[joedolson]

Most of these changes were made with #50523. Closing this ticket as fixed; given the significant changes since this ticket, I'd suggest opening a new ticket if there are specific additional changes desired. Thanks!