Updated Media Grid UX/UI comps

Following up on our recent series of user interviews on current media behaviors, as well as our discussions in IRC, here are a set of revised comps for the Media Grid concept which incorporates that feedback, and establishes parity with the current Media Library list view.

Media Grid View showing the same data as can be found in the current list view, for parity

So how does this differ from our approach to the grid so far? Here are some of the things we added for consideration.

User-configured Info

Metadata was important to many we spoke to, so finding a way to add it into the grid view was important. Naturally though, different people find different things important, so to keep the grid view as space efficient as possible, we wanted to add a way for users to choose just what data they want displayed.  For example, here is simplified custom view.

To customize the metadata that is shown under thumbnails, there are a couple of approaches that it makes sense to take. One option is to use the existing “Screen Options” tab, which has nice continuity with how other admin screens are configured. Another possibility is to use a toolbar button similar to how filters are configured in the theme chooser. I have mocked up both, so which do you think is the better approach?

#1 – Screen options tab

#2 – Theme-style toolbar icon

Maintaining bulk selection

This was mentioned by many users we spoke to, so to maintain that ability, persistent checkboxes have been added to each thumb. Currently this is only used in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for bulk deletion, but leaves the way open for bulk editing actions as well.

Editing Media as a modal window

Hovering (or tabbing) on media in the grid would show the familiar options, as you have in the current list view.

Like the theme chooser (and possibly the plugins page) it makes sense to move these editing functions to a modal as well. This would allow users to browse and edit other media without leaving the modal or losing context. For images specifically, a second tab would display allowing users to perform crop, rotate, resizing, etc. without leaving the modal.

Edit metadata modal

Edit Image modal (image files only)

“Add Media” moves to the modal too

The current media grid supports drag and drop uploading, though this feature is hidden. A few different ways were discussed as to how to expose this functionality, but in the end moving this task to a modal window made the most sense.

This will allow users to upload media directly from the grid page, but still retain access to the browser uploader, for those who need it. It would be accessed from the “Add Media” button in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes..

Uploader modal is accessed via the Add Media button

How do we make adding media obvious?

Because adding media would be done through a modal now, and not a separate admin page, making it obvious to users how they can add media to their sites is very important to us. In the comps I have added a small “+” icon to the Add Media button, to help it stand out a bit better, but there are more ways to make this clear.

I am interested in your thoughts on how we can best handle this for users. Is a button in the header enough to replace the current “Add Media” tab in the wp-admin? If not, how do we best expose this functionality?

Edit:  Here is one possible variation

Upload “drop zone” in place of standard button