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

Open
mtias opened this issue Nov 16, 2018 · 33 comments · May be fixed by #16200

Comments

@mtias
Copy link
Contributor

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.

@drawcard

This comment has been minimized.

Copy link

commented Nov 16, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Nov 27, 2018

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

This comment has been minimized.

Copy link
Contributor Author

commented Nov 27, 2018

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

@drawcard

This comment has been minimized.

Copy link

commented Nov 28, 2018

@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

This comment has been minimized.

Copy link
Contributor Author

commented Nov 28, 2018

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

@drawcard

This comment has been minimized.

Copy link

commented Nov 29, 2018

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

@noisysocks noisysocks added this to To Do in Phase 2 via automation Jan 22, 2019

@karmatosed karmatosed moved this from To Do to Tighten Up in Phase 2 Feb 19, 2019

@draganescu draganescu self-assigned this Feb 26, 2019

@draganescu

This comment has been minimized.

Copy link
Contributor

commented Feb 26, 2019

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

@draganescu draganescu referenced this issue Feb 27, 2019
3 of 5 tasks complete
@draganescu

This comment has been minimized.

Copy link
Contributor

commented Apr 3, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Apr 10, 2019

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

@draganescu draganescu closed this Apr 10, 2019

Phase 2 automation moved this from Tighten Up to Done Apr 10, 2019

@mtias

This comment has been minimized.

Copy link
Contributor Author

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

Phase 2 automation moved this from Done to Backlog Jul 24, 2019

@draganescu

This comment has been minimized.

Copy link
Contributor

commented Jul 25, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor Author

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).

@mapk

This comment has been minimized.

Copy link
Contributor

commented Jul 30, 2019

I'm trying to think through the URL portion of this new UI. If I select "Insert from URL", what happens? Does the user get taken to the Media Library Modal? Should the URL input appear similar to how it displays for an Image block?

Screen Shot 2019-07-30 at 2 38 49 PM

Or could it work inline like this prototype below?

replaceimage

@paaljoachim

This comment has been minimized.

Copy link

commented Jul 31, 2019

Brain storming. Using the image block as an example.
The need to create an association between the existing swap image icon and the initial placeholder screen.

As seen today:
Screen Shot 2019-07-31 at 11 35 22

Adding the swap image icon. Just by adding the icon there to illustrate the association between the image placeholder screen and the swap icon.
Swap-image-icon-image-placeholder

Here is one where the swap image icon is also highlighted in the toolbar while the placeholder screen is open.
Swap-image-icon-placeholder

Third version. Replacing the placeholder image icon with the image swap icon. Creating an association that the swap icon has to do with the placeholder screen. It now becomes the swap media screen.
Swap-image-icon-and-placeholder-ver2


Double clicking the image or another interaction with the image the placeholder/swap media screen could show up.
Screen Shot 2019-07-31 at 11 48 11

@shaunandrews

This comment has been minimized.

Copy link

commented Jul 31, 2019

Part of the confusion is related to the block icon in the toolbar, which also transitions to a "swap"-style icon when hovered. Lots of people think this means they can swap the image. The current swap icon to the right of that is barely recognized by anyone.

I think a text label is by far the best solution here. Worth noting that I've seen a handful of people expect to be able to double click as well, so I think that'd be a great enhancement here.

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

Part of the confusion is related to the block icon in the toolbar, which also transitions to a "swap"-style icon when hovered. Lots of people think this means they can swap the image. The current swap icon to the right of that is barely recognized by anyone.

That's a great point. When I designed the swap image icon, I definitely didn't realize that. 😄

Screen Shot 2019-07-31 at 9 42 15 AM

@karmatosed

This comment has been minimized.

Copy link
Member

commented Aug 7, 2019

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

@karmatosed

This comment has been minimized.

Copy link
Member

commented Aug 13, 2019

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?

@senadir senadir referenced this issue Aug 14, 2019
5 of 5 tasks complete
@mapk

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link

commented Aug 15, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2019

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

@paaljoachim

This comment has been minimized.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.