Update/improve mockups and designs for the media library

Good to see your designs and thoughts, thanks for sharing! A couple of questions/remarks came up while looking at the Figma link.

• Regarding the add-media modal where only a single media type is available (https://www.figma.com/proto/VNkUIvfbcGr9Jmez3iRXJBjb/Media-widget-field?...) : I assume "single media type" means that the media field was configured to accept only media entities of a single type (eg. image). I understand that you have hidden the vertical tabs in that case, since there's no choice to be made. However that also removes the clue for the user that they are looking at the media entities of a single type. If we would add some kind of heading which contains the media type, I guess that could prevent users thinking "It's broken, where are my video's?"
• Regarding the delete-interface: Should it even be an option to delete media here? When a user is creating content, we must guide users to their goal, not distract them. Deleting media entities is not needed to complete the content creation task. The "delete" link clutters the interface, and may be misinterpreted as "remove these media items from this node" or "clear the selection". Also, the red "delete" link does not make clear it is about the currently selected item, or all selected items on the current tab, or about all selected media entities (in the mockup, a video entity is also selected on another tab). IMHO the delete action does not belong here.

A case was brought up where someone could upload the wrong file by mistake containing sensitive information. In this case it seems quite important to immediately be able to correct that mistake.

OK, I see the point. Still I don't think that warrants a delete option the way it is designed now, allowing users to also delete existing media that is already referenced from other content. If it's only about the (edge) case above, I guess the modal where newly added media is edited (https://www.figma.com/proto/VNkUIvfbcGr9Jmez3iRXJBjb/Media-widget-field?...) would be appropriate. If we add a delete link (or icon) to each new media item, it would be much clearer to the user what they are deleting. Since we can be pretty sure that we are not breaking references and the user still has the source file on their computer, a confirm step wouldn't even be needed.

Here's a quick mockup of what it could look like with delete-icons:

Clicking the icon would mark a media item for deletion; the deletion can be handled when the Save button is clicked.

We assume that users have not been trained or instructed on how to use the media library.

I think this is because normally you only see an upload field on the first screen right? You have to switch tabs to see the media library.
We can change this by open the media library instead.
Then editors will see all the images and maybe they will look for an image that the can use.

But I also think the in the most cases you want to upload new media.
I don't like the idea that we have an upload area/dropzone AND the media library in one display. The modal is not so big so if we put the dropzone and the library in one display it's so tiny/small not so useful in my opinion.

Also I don't see the benefits of the vertical tabs on the left. I need to click on the left on, for example, remote video, and then I see only the remote video's in the library? Isn't this where the filter is for? And again, the modal is not so big so if we put vertical tabs on it, the library gets even smaller.

In my opinion, we need just one dropdown button to add media. When you click on it you can select the media type that you want to display. When you selected the media type that you wanted to add, you will get a new display with all necessary fields for this type of media. whether it's a dropzone, or only an url field for the youtube url...you name it..
You can have a better error handling cause you know which type of media you must upload... if you make one magical upload field like some other screens in Figma, this would be hard.

I've added some fast mockups to explain my idea better.
Also I moved the filters, grid/list switch on the same height as the add new media button. This will also save us some space! :)

That being said, we probably need more people to weigh in on this. Do we want to use the precious screen real estate to optimize for re-use or do we optimize for new media? Do we want to optimize the number of clicks and show a lot of options, or do we initially hide some things behind a button? These are important decisions to make.

In my opinion you shouldn't combine these in one very small modal form.
If we asume that editors will most likely want to add new images, let's focus on that part and make a nice clear button to use exising media item from the library. Or ask something like: 'Add new media' or 'Use existing media'. Which take you to the upload form/dropzone or to the media library. (ofcourse with the posibility to 'Add new media' if you're in the media library and 'Use existing media' if you're in the upload new media screen.
I don't mind clicking one time extra if I get a clear/nice way to add some new media/re-use media after that.

When you drag something over the modal the whole modal should be the drop area, so the initial dropzone area is just to show the user it is possible. The drop area is actually much bigger, so that would hopefully make this easier to use.

I don't think people will understand this. Yeah, we, developers/designers will know that. But most editors are still looking for a button "add media'. I've worked with a lot of editors and they're not really familiar with a 'fancy' dropzone.
It's hard... I think the experienced people will understand that you can drop your files there... but will the unexperienced people also understand that?

But if you already decided that the dropzone and media library happens in the same modal form... What's do we need to decide now?

Wow, this is looking really slick, thanks Sean. I'm very happy with how the delete option turned out, easy to find when you need it, but subtle enough to get out of the way when you don't.

That is basically the thing we are currently struggling with. Do we have a separate screen for that, which means extra clicks, or do we go for the current design where we proposed having everything directly visible?

In my experience it's not at all unusual for media items to have more than one field, and quite easy to envisage scenarios where a media item could have multiple fields. E.g. image file, alt text, caption, link.

In my opinion it's important that the solution allows for media bundle configs that are a bit more complex. While I guess we are aiming for an MVP here I'd be concerned that otherwise there's a risk that it just won't be flexible enough for a lot of scenarios...

I think that often an editor will not be sure whether they need to add a new media or reuse an existing one; therefore it is really good how you've done it: they are not forced to choose between those options prematurely, but instead there is a prominent way to add new media right in the place where existing media are displayed.

The most problematic thing I see is the filters for the existing media. These are complicated and poorly labelled, as well as relatively unimportant. I think the best solution might be to collapse them initially behind a 'Filters' link, or to have them in the left column under the tabs.

Curious if any of the folks here giving great feedback have feedback on this aspect of the behaviour #3041147: Preserve the selected items across multiple uses of the media library.

Well, folks...the Media Library is UI-complete in Drupal 8.7.0, and therefore the designs we came up with in this issue have been implemented. I discussed this with @seanB and @Gábor Hojtsy and we agree that this case is pretty well closed. If we need to make UI changes in the future, we can deal with those in other issues.

But as for the complete redesign...it is done! Let's close this one out, and a big thanks to everyone who participated!! Congratulations to all; we really delivered on this one. :)