Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the "change an image" flow clearer #11952

Closed
mtias opened this issue Nov 16, 2018 · 34 comments · Fixed by #16200
Closed

Make the "change an image" flow clearer #11952

mtias opened this issue Nov 16, 2018 · 34 comments · Fixed by #16200
Assignees
Labels
[Block] Image Affects the Image Block [Feature] Media Anything that impacts the experience of managing media [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Dev Ready for, and needs developer efforts
Milestone

Comments

@mtias
Copy link
Member

mtias commented Nov 16, 2018

10up ran some great testing sessions where one particular hurdle was highlighted — users don't immediately pick up on the "pencil" icon as the way to edit or swap the image. More info at https://10up.com/blog/2018/testing-the-gutenberg-publishing-userflow/

This has come up anecdotally before as well.

edit-image-button

One possibility is to use a text button instead:

image

Another could be to place the edit button within the image (on selection).

It'd also be nice to support "drag to swap" on the image block. This has also come up before.

@mtias mtias added [Feature] Media Anything that impacts the experience of managing media User Experience (UX) [Block] Image Affects the Image Block labels Nov 16, 2018
@mtias mtias added this to the WordPress 5.0.1 milestone Nov 16, 2018
@drawcard
Copy link

Dunno if text is the best solution - "Edit" seems as ambiguous as the pencil.
Perhaps a custom icon is called for, like a picture with a pencil beside it?

@melchoyce
Copy link
Contributor

Another could be to place the edit button within the image (on selection).

I'd be a little worried about having icon overload at that point.

Writing out "edit" is a nice improvement, but feels more like a bandaid. I think this is something we'll likely have to iterate on a couple times before we find something that feels right.

One note — I actually find this pattern much more jarring on other blocks, where it removes the media/embed and brings you back to the placeholder. I always expect it to open the media uploader instead of the placeholder. Whatever we do here, let's figure out a consistent approach for all blocks.

It'd also be nice to support "drag to swap" on the image block. This has also come up before.

We might want to ask folks what they'd expect to happen if you dragged an image onto an image block. My gut reaction is "it would transform into a gallery," but that could just be me.

@mtias
Copy link
Member Author

mtias commented Nov 27, 2018

Another interaction it could support is double-click to edit / replace on the image.

@drawcard
Copy link

@mtias I am not too sure about that idea as it would be hiding functionality to the point where it's completely invisible. But it could work in conjunction with the standard button that exists at the moment.

@mtias
Copy link
Member Author

mtias commented Nov 28, 2018

Yes, it wouldn't be the main interaction, just a possible addition to it.

@drawcard
Copy link

If that's the case I'm all for that :)

@mtias mtias modified the milestones: WordPress 5.0.1, Future: 5.1 Nov 30, 2018
@draganescu draganescu self-assigned this Feb 26, 2019
@draganescu
Copy link
Contributor

I'm working on a PR to test the double click as an option :)

@afercia afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Mar 26, 2019
@draganescu
Copy link
Contributor

My PR made it to master, so now @mtias the image block has both a better icon to edit, a clearer flow and double click as a means to switch modes. I am continuing to add the same flow to all other similar blocks here: #14788

@draganescu
Copy link
Contributor

Closing this since it moved ahead with the #14142 merged PR and now the focus is on #14795

@mtias
Copy link
Member Author

mtias commented Jul 24, 2019

Reopening because I think this is still problematic and not as clear as it could be. (Icon is still confusing.)

@mtias mtias reopened this Jul 24, 2019
@draganescu
Copy link
Contributor

@mtias do you have anything else in mind other than the icon? I ask because I am working here #16200 to make a component that will port this to all the media components, and it would be great to make it better while it is not ready yet :)

@mtias
Copy link
Member Author

mtias commented Jul 26, 2019

Yes, I still think text based control for this would be much clearer. Interestingly, Google Docs is doing a similar thing:
image

With direct actions:
image

@mtias
Copy link
Member Author

mtias commented Jul 27, 2019

We can try something like this:

image

The "edit image" flow should probably be separate, specially once we surface some edit options directly (crop, flip, rotate, etc).

@karmatosed
Copy link
Member

My biggest concern around this is adding another link interface. For example Google does:

image

@mapk what was the thinking in adding the link inline? Could we reuse the existing way links are added?

@mapk
Copy link
Contributor

mapk commented Aug 7, 2019

@mapk what was the thinking in adding the link inline? Could we reuse the existing way links are added?

Good question, @karmatosed! So I thought about using the existing link interface, but then we'd have a popover on top of a popover which doesn't feel right. That's why I chose to put it inline. I'm not sold on my solution though.

Don't Do This

1 v2

I'm totaly open to a separate Dialog to inject a URL, but this also seems like a new interface option. Are we using a link interface that isn't a popover anywhere?

@kjellr
Copy link
Contributor

kjellr commented Aug 7, 2019

Are we using a link interface that isn't a popover anywhere?

Yeah, the Button block has one inline:

Screen Shot 2019-08-07 at 3 55 25 PM

This isn't really standard though, and other options are being explored in #16495.

@mapk
Copy link
Contributor

mapk commented Aug 13, 2019

Using the Button block as an example, and merging it with my prior mockup, I came up with this.

replace

Prototype:
https://www.figma.com/proto/dmv0ZfIjMxKr9YZGS5r9Gl/Replace-Image?node-id=32%3A1535&viewport=566%2C1244%2C1&scaling=min-zoom

@mapk mapk added the Needs Accessibility Feedback Need input from accessibility label Aug 13, 2019
@karmatosed
Copy link
Member

The exploration fits for button block, however, some conversation was being had around unifying button block. Ultimately, I think looking holistically at link interactions is important. I am not sure it's important enough to hold up or block this issue. If that's case, then maybe we can open another ticket after to resolve this?

@mapk
Copy link
Contributor

mapk commented Aug 15, 2019

@senadir, I'd like to get some accessibility feedback here before committing to one solution. Ultimately, a PR can get started to work through some of the other pieces. I think the last option here is the strongest right now.

cc @afercia @enriquesanchez @ryelle

@enriquesanchez
Copy link
Contributor

I'm in favor of a text label instead of an icon, it's more obvious and accessible overall. As for the dropdown, we just need to make sure it's accessible (see #16473). I'd be more than happy to test once we have a PR.

@draganescu
Copy link
Contributor

We have this PR I am working on here #16200 which will make possible to add this to any media component, not only image.

Right now you can test using that or and inserting an audio block. It implemented the text button, the menu, media lib and file upload.

Coming soon is the URL input.

@draganescu draganescu self-assigned this Aug 16, 2019
@afercia
Copy link
Contributor

afercia commented Aug 23, 2019

Re: "Insert from URL":

  • say I have this image URL: https://cldup.com/cXyG__fTLN.jpg
  • shouldn't it work as embeds work? Just paste that in the editor and I should get an image block with the image already inserted
  • instead, I get an "Embed" block
  • the block tells me that kind of content can't be embedded (then, I'd argue it shouldn't try to embed an image in the first place):

Screenshot 2019-08-23 at 14 15 09

  • of course, for accessibility there should be some kind of UI but it could be very simplified
  • also, when replacing an existing image with a new one from a URL there should be some kind of UI (maybe also allow paste a URL over an existing image?)

@afercia
Copy link
Contributor

afercia commented Aug 23, 2019

Apart from the considerations above, the prototype from #11952 (comment) looks promising to me from an a11y perspective. As long as it uses the dropdown menu, which already has good accessibility. The visible button text is an improvement for all users.

Question:
Will the following menu items open the media modal dialog?

  • Media Library
  • Upload Image
  • Edit Image

Also: worth reminding there's an open issue from the WPCampus report about visible labelling only done via the placeholder attribute. To address this point, the URL field needs a visible <label> element. See https://core.trac.wordpress.org/ticket/47138
See also https://core.trac.wordpress.org/ticket/40331

@afercia afercia removed the Needs Accessibility Feedback Need input from accessibility label Aug 23, 2019
@paaljoachim
Copy link
Contributor

paaljoachim commented Aug 23, 2019

What about just a media text button?

Media-link-toolbar

Media-link-toolbar-no-icon

From the initial suggestion in this issue it seems like the placeholder screen will be replaced by the toolbar replace image drop down. I do find it interesting as it could also incorporate the image link icon with a open image in new tab or no follow etc. Creating a element that can be used for all blocks that deal in someway with images. For audio/video etc the element could be somewhat adjusted.

With a Media label.
Media-toolbar-drop-down

Media label - in a video embed.
Media-toolbar-drop-down-video

Media label - in a audio embed.
Media-toolbar-drop-down-audio

Including the V in the Enter URL area. To open up to linking to open a new tab.
Media-toolbar-drop-down-link

@apeatling
Copy link
Contributor

Coming here to +1 adding text labels. On WordPress.com we are regularly seeing users struggle to figure out how to replace images that already exist in a template. Looking through this thread, the clearest way to improve this IMO is to use labels like "Replace Image".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block [Feature] Media Anything that impacts the experience of managing media [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Dev Ready for, and needs developer efforts
Projects
None yet
Development

Successfully merging a pull request may close this issue.