Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
We recently performed some quick user tests on the Media Grid (at BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2) to see how users fare when performing various tasks, and came out with some interesting results.
TL;DR – The concept of the Media Grid was intuitive and easy for users to understand, especially navigation and editing metadata; however, uploading media and bulk selection tasks were still problematic for most. A lot of work could be done to make these more straightforward.
We also tested hiding all metadata (title, mime type, etc.) from the grid view, and saw no difference in performance, which hints at the possibility that metadata is not as important here as it is in the list view.
Follow the jump to see more details about this round of user tests. Continue reading
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.
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
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.
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)
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
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
To get a better understanding of the kinds of tasks users perform in the current Media Library (and related Add Media page) before working on refinements to the Media Grid project, we interviewed 8 users on their current habits, tasks, pain points, and a little about what they would like to see.
TL;DR: Grid is good, but…
Images are by far the most common media type to be found in user’s libraries, and files can number into the hundreds (some in the thousands) in most cases. Given this, most users would benefit from the ability to see larger thumbnails of files, as well as a more a efficient grid layout.
However, much of the data that is displayed in the list view (title, attachment page, date, etc.) is also important to how users sort through and find media, and their importance changes based on the “mode” the user is in, so parity with the list view, or the option to switch back to it, will be important.
Want to know more about the interviews? Read on… Continue reading
A group of us have been look into improvements to the Media Library (Media > Library) interface in the admin dashboard. If you currently use Media Library, or have used it in the past, we want to ask you about it.
We’re looking for about 5-10 people to meet with over the next couple of days, so we can chat. Should take just take a few minutes of your time!
If interested, please send me an email at jerrysarcastic [at] gmail, or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me at jerrysarcastic on IRC.
You must be logged in to post a comment.