Title: media-grid – Make WordPress Design --- # Tag Archives: media-grid [ ](https://profiles.wordpress.org/jerrysarcastic/) [jerrysarcastic](https://profiles.wordpress.org/jerrysarcastic/) 7:24 pm _on_ July 22, 2014 Tags: media-grid, [user-testing ( 19 )](https://make.wordpress.org/design/tag/user-testing/) # 󠀁[Media Grid – User testing round 1](https://make.wordpress.org/design/2014/07/22/media-grid-user-testing-round-1/)󠁿 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 →](https://make.wordpress.org/design/2014/07/22/media-grid-user-testing-round-1/#more-1608) [#media-grid](https://make.wordpress.org/design/tag/media-grid/), [#user-testing](https://make.wordpress.org/design/tag/user-testing/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2014/07/22/media-grid-user-testing-round-1/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2014/07/22/media-grid-user-testing-round-1/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2014/07/22/media-grid-user-testing-round-1/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2014/07/22/media-grid-user-testing-round-1/?share=facebook) * [ X ](https://make.wordpress.org/design/2014/07/22/media-grid-user-testing-round-1/?share=x) * [ Reddit ](https://make.wordpress.org/design/2014/07/22/media-grid-user-testing-round-1/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/media-grid/?subject=%5BShared%20Post%5D%20Media%20Grid%20-%20User%20testing%20round%201&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2014%2F07%2F22%2Fmedia-grid-user-testing-round-1%2F&share=email) [ ](https://profiles.wordpress.org/jerrysarcastic/) [jerrysarcastic](https://profiles.wordpress.org/jerrysarcastic/) 2:06 am _on_ June 9, 2014 Tags: media-grid    # 󠀁[Media Library user interviews: Summary of findings](https://make.wordpress.org/design/2014/06/09/media-library-user-interviews-summary-of-findings/)󠁿 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 →](https://make.wordpress.org/design/2014/06/09/media-library-user-interviews-summary-of-findings/#more-1542) [#media-grid](https://make.wordpress.org/design/tag/media-grid/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2014/06/09/media-library-user-interviews-summary-of-findings/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2014/06/09/media-library-user-interviews-summary-of-findings/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2014/06/09/media-library-user-interviews-summary-of-findings/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2014/06/09/media-library-user-interviews-summary-of-findings/?share=facebook) * [ X ](https://make.wordpress.org/design/2014/06/09/media-library-user-interviews-summary-of-findings/?share=x) * [ Reddit ](https://make.wordpress.org/design/2014/06/09/media-library-user-interviews-summary-of-findings/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/media-grid/?subject=%5BShared%20Post%5D%20Media%20Library%20user%20interviews%3A%20Summary%20of%20findings&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2014%2F06%2F09%2Fmedia-library-user-interviews-summary-of-findings%2F&share=email) [ ](https://profiles.wordpress.org/jerrysarcastic/) [jerrysarcastic](https://profiles.wordpress.org/jerrysarcastic/) 11:18 pm _on_ May 30, 2014 Tags: media-grid    # 󠀁[Do you use the Media Library to manage your media? Let's chat!](https://make.wordpress.org/design/2014/05/30/do-you-use-the-media-library-to-manage-your-media-lets-chat/)󠁿 A [group of us](https://make.wordpress.org/ui/tag/media-grid/) 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. [#media-grid](https://make.wordpress.org/design/tag/media-grid/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2014/05/30/do-you-use-the-media-library-to-manage-your-media-lets-chat/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2014/05/30/do-you-use-the-media-library-to-manage-your-media-lets-chat/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2014/05/30/do-you-use-the-media-library-to-manage-your-media-lets-chat/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2014/05/30/do-you-use-the-media-library-to-manage-your-media-lets-chat/?share=facebook) * [ X ](https://make.wordpress.org/design/2014/05/30/do-you-use-the-media-library-to-manage-your-media-lets-chat/?share=x) * [ Reddit ](https://make.wordpress.org/design/2014/05/30/do-you-use-the-media-library-to-manage-your-media-lets-chat/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/media-grid/?subject=%5BShared%20Post%5D%20Do%20you%20use%20the%20Media%20Library%20to%20manage%20your%20media%3F%20%20Let%27s%20chat%21&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2014%2F05%2F30%2Fdo-you-use-the-media-library-to-manage-your-media-lets-chat%2F&share=email) [ ](https://profiles.wordpress.org/shaunandrews/) [shaunandrews](https://profiles.wordpress.org/shaunandrews/) 2:01 am _on_ May 24, 2014 Tags: media-grid    # 󠀁[Media Grid: Thumbnail Resizing](https://make.wordpress.org/design/2014/05/24/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.) [⌊Media Table View⌉⌊Media Table View⌉[ [The Media Grid plugin](https://wordpress.org/plugins/media-grid/) currently replaces the tableview with the existing Media Manager grid, commonly seen while adding an image to your post. [⌊Media Manager⌉⌊Media Manager⌉[ 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 UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.. **Resizing** While working on the Media Grid pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party., I often found myself reference other file management tools. Programs like OS X’s Finder, Windows’ Explorer, Apple’s iPhone (Mac and iOSiOS The operating system used on iPhones and iPads.), 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 Default Icons⌉⌊Finder Default Icons⌉[ Finder’s default thumbnail size. [⌊Just move this little slider...⌉⌊Just move this little slider...⌉[ 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: [⌊Resize_in_Action⌉⌊Resize_in_Action⌉[ (I wrote about some of the above earlier, over on [the Media Grid team blog](http://coremediagrid.wordpress.com/2014/05/15/grid-sizes/).) **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: [⌊Media Library Nav Bar⌉⌊Media Library Nav Bar⌉[ [#media-grid](https://make.wordpress.org/design/tag/media-grid/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2014/05/24/media-grid-thumbnail-resizing/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2014/05/24/media-grid-thumbnail-resizing/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2014/05/24/media-grid-thumbnail-resizing/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2014/05/24/media-grid-thumbnail-resizing/?share=facebook) * [ X ](https://make.wordpress.org/design/2014/05/24/media-grid-thumbnail-resizing/?share=x) * [ Reddit ](https://make.wordpress.org/design/2014/05/24/media-grid-thumbnail-resizing/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/media-grid/?subject=%5BShared%20Post%5D%20Media%20Grid%3A%20Thumbnail%20Resizing&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2014%2F05%2F24%2Fmedia-grid-thumbnail-resizing%2F&share=email) [ ](https://profiles.wordpress.org/shaunandrews/) [shaunandrews](https://profiles.wordpress.org/shaunandrews/) 3:17 pm _on_ May 9, 2014 Tags: media-grid    # 󠀁[Media Grid Update](https://make.wordpress.org/design/2014/05/09/media-grid-update/)󠁿 I’ve been working alongside [@ericlewis](https://profiles.wordpress.org/ericlewis/) on making the Media Library better. Our primary focus has been to adapt the existing media manager modal for use in the page. We’ve been developing over at GitHub: https:// github.com/helenhousandi/wp-media-grid-view There are two active branches right now. In the [persistent-sidebar](https://github.com/helenhousandi/wp-media-grid-view/tree/persistent-sidebar) branch, I’ve been exploring alternate UI’s for a grid view, as well as interactions for selecting, browsing, and editing your media. I pushed the latest from the branch to the Media Grid plugin on the WordPress.org plugin repo the other day. Please install it and let us know what you think: https://wordpress.org/plugins/media-grid/ Over in the [backbone](https://github.com/helenhousandi/wp-media-grid-view/tree/backbone) branch, Eric has made considerable progress breaking the media manager out of its modal. He’s also managed to add the thumbnail size options. We’re experimenting with using a blog for more regular updates and discussions. If you’d like to join in, just let me know: http://coremediagrid.wordpress.com We’ll have our normal meeting in IRC today (#wordpress-ui) at 16:00 UTC (12pm eastern) to discuss our next steps. We hope to see you there! [#media-grid](https://make.wordpress.org/design/tag/media-grid/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2014/05/09/media-grid-update/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2014/05/09/media-grid-update/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2014/05/09/media-grid-update/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2014/05/09/media-grid-update/?share=facebook) * [ X ](https://make.wordpress.org/design/2014/05/09/media-grid-update/?share=x) * [ Reddit ](https://make.wordpress.org/design/2014/05/09/media-grid-update/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/media-grid/?subject=%5BShared%20Post%5D%20Media%20Grid%20Update&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2014%2F05%2F09%2Fmedia-grid-update%2F&share=email) [ ](https://profiles.wordpress.org/shaunandrews/) [shaunandrews](https://profiles.wordpress.org/shaunandrews/) 9:31 pm _on_ August 28, 2013 Tags: media-grid    # 󠀁[Back at the first 3.8 chat I mentioned…](https://make.wordpress.org/design/2013/08/28/back-at-the-first-3-8-chat-i-mentioned/)󠁿 Back at the first 3.8 chat, I mentioned wanting to see a grid layout for the media library. [I threw together a few wireframes and wrote out my thoughts](http://www.shaunandrews.com/design-2/exploring-layouts-for-the-wordpress-media-library/). This is still listed as a “feature as a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party.,” but has no lead, and no weekly meeting. I’d like to change that — anyone and everyone who’s interested in improving the layout of the media library: lets meet in #wordpress-ui Friday, August 30 @ 15:00 UTC. If you’re interested in joining (and leading?) this group, please leave a message and try to join us Friday. [#media-grid](https://make.wordpress.org/design/tag/media-grid/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2013/08/28/back-at-the-first-3-8-chat-i-mentioned/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2013/08/28/back-at-the-first-3-8-chat-i-mentioned/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2013/08/28/back-at-the-first-3-8-chat-i-mentioned/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2013/08/28/back-at-the-first-3-8-chat-i-mentioned/?share=facebook) * [ X ](https://make.wordpress.org/design/2013/08/28/back-at-the-first-3-8-chat-i-mentioned/?share=x) * [ Reddit ](https://make.wordpress.org/design/2013/08/28/back-at-the-first-3-8-chat-i-mentioned/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/media-grid/?subject=%5BShared%20Post%5D%20Back%20at%20the%20first%203.8%20chat%20I%20mentioned...&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2013%2F08%2F28%2Fback-at-the-first-3-8-chat-i-mentioned%2F&share=email)