Media Grid: Thumbnail Resizing
Outside of a grid layout, there are a few other features that the Media Grid team has been discussing. Lets talk about one of these feature: Thumbnail Resizing.
Recap: Why a grid?
The entire purpose of moving towards a grid layout for the Media Library is to make it easier for you to manage your media — images, videos, audio, documents, and more. The library currently uses a standard “wp-list-table” view. (This actually could use some love, too.)
The Media Grid plugin currently replaces the tableview with the existing Media Manager grid, commonly seen while adding an image to your post.
Images and videos are visual files, and lend themselves to a thumbnail grid. Its easy to find an image by scrolling through a grid. There’s a lot of potential for extending previews to other types (like audio, pdf’s, etc), which would also benefit from the grid UI.
Resizing
While working on the Media Grid plugin, I often found myself reference other file management tools. Programs like OS X’s Finder, Windows’ Explorer, Apple’s iPhone (Mac and iOS), and a few others. One pattern I noticed was that most of these applications offers some way to change the way you view “things” (files, images, documents, whatev’s) in your list. In my own experience, I find myself changing the thumbnail size while browsing a bunch of images on my computer:
Finder’s default thumbnail size.
Just move this little slider…
…and boom, larger icons!
The larger grid view really shines when browsing more details images, or lots of similar images. Its also a great way to just look through your images in more detail, without having to jump to a full size view for each one.
The Media Grid plugin currently has some thumbnail size options. The first iteration used a slider and animated the thumbnails as they changed size, right in front of your eyes! It was cool… at first. Then it quickly got annoying.
A few more iterations
The animation was jumpy, and more distracting than anything else. I nixed the animation, but the slider still felt unnatural — there aren’t any other sliders in wp-admin. I decided to keep things simple, and replaced the slider with a three buttons: Small, Medium, Large. After another few weeks of using this, I found myself using Small and Medium often; Large was rarely used. So I trimmed the options down to simply: Small and Large. This is where’re at in the current plugin:
(I wrote about some of the above earlier, over on the Media Grid team blog.)
Now what?
What do you think about the size options? Are the helpful, or unnecessary bloat? Or somewhere in between?
What do you think about the two (Small, Large) options?
Is the straight-forward label toggle a good UI? What about icons, like this:
GeorgiaG 2:14 am on May 24, 2014 Permalink | Log in to Reply
Hi there. I like the size options and grid – a lot – but would still like to be able to select ‘list view’ which I don’t see int the Media library screen you posted. As to the icons, they may not be something that your entire user base understands. I would do a user test or at the very least have a tool tip in place. You also may be able to hint at their purpose by attaching them to the preview window (via a tab or the like). A simple visual cue may go a long way to explain them. Thank you and cheers, Georgia
mrwweb 9:36 pm on May 25, 2014 Permalink | Log in to Reply
+1 on maintaining the list/table view. For sites that predominantly use non-visual media or users relying on metadata, the table view will remain useful. If there’s already small and large, then adding list seems easy, at least ui-wise.
GeorgiaG 2:17 am on May 24, 2014 Permalink | Log in to Reply
BTW, when I posted I got an error message and a statement that my comments weren’t posted and then almost immediately got feedback that a new comment had posted.
Sjoerd Boerrigter 8:33 am on May 24, 2014 Permalink | Log in to Reply
What is the exact purpose of this feature? If the large images are better, why wouldn’t we always show large images? I think the power of a good UI is not giving users more options to choose from, but making the right choices for them. So I would say this is bloat.
Adam W. Warner 11:46 am on May 24, 2014 Permalink | Log in to Reply
Just my opinion, but I like the small/large icon choice. It doesn’t clutter things and still allows me (as a user) to have A choice instead of none.
Gabriel Gil 1:52 pm on May 24, 2014 Permalink | Log in to Reply
I don’t like that free space on the right till the sidebar appears. I think it could be occupied by the thumbnails till one or more are selected, or show something from the empty state.
Cheers!
Weston Ruter 4:28 pm on May 24, 2014 Permalink | Log in to Reply
For some more validation on having the large/small option, the Google Photos uploader also provides this feature.
memuller 8:34 pm on May 24, 2014 Permalink | Log in to Reply
I think it’s reasonable to allow the choice of thumbnail size. The large thumbnails can be quite useful, as you described; but are clearly *not* useful enough to be the only view available – if we’re not going to allow this choice, them the small thumbnails are the way to go.
If we do allow the choice, them just two sizes are enough.
The icons seems like the ideal way here; as they don’t get mixed up with other text options there (like the media type filters). Those icons are quite intuitive, are being used in a number of other applications (can’t think of any right now, sorry – but good old OSX Finder is close enough), and are clearly non-destructive and not intrusive – as in, if a user is not sure of what they do, he may click them without fear (after clicking, their function becomes evident); or he may just ignore them without significant complications.
jerrysarcastic 11:14 pm on May 30, 2014 Permalink | Log in to Reply
One of the coolest features (for me) is this easter egg:
If it is possible to upload directly to the library (and expose this feature in a way that users grok) then this could also eliminate the Media > Add New page in admin.
Jose Castaneda 12:31 pm on June 10, 2014 Permalink | Log in to Reply
I hadn’t actually tried doing that!