Ready to get started?Download WordPress

Make WordPress UI

Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • Helen Hou-Sandi 12:56 am on June 20, 2014 Permalink | Log in to leave a Comment
    Tags: 4.0   

    Call for screenshots: Web store experiences 

    We are taking a look at plugin discovery workflows in 4.0. To that end, we’re looking for screenshots of various web store experiences to study as comparable art, particularly in terms of how users are enabled to determine and look for what they might need/want, and what data is shown for users to use in making a final decision. We’ve identified the following as potentially being helpful – please post a comment claiming an item, and then post screenshots, preferably on a service that will not disappear in a year. Can give access to upload items here if desired.

    Important screens to capture are: landing pages (store home, top-level groupings), search results, browsing of listings, and single listing. If an item listed below can be accessed both on the web and natively within the app, cover both. If you’d like to cover something that isn’t listed, please also post that in a comment.

  • jerrysarcastic 8:57 pm on June 18, 2014 Permalink | Log in to leave a Comment  

    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 ALT

    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?

    media Grid-screen options

    #1 – Screen options tab

    Media Grid-show hide

    #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 core for bulk deletion, but leaves the way open for bulk editing actions as well.

    Screen Shot 2014-06-18 at 1.06.44 PM

    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.

    Screen Shot 2014-06-18 at 1.21.25 PM

    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 metadata modal

    edit image

    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.

    upload new media

    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 header.

    Screen Shot 2014-06-18 at 1.26.37 PM

    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

    Screen Shot 2014-06-18 at 2.21.31 PM

    Upload “drop zone” in place of standard button

    • Cliff Seal 9:02 pm on June 18, 2014 Permalink | Log in to Reply

      I think “#1 – Screen options tab” makes the most sense there, as metadata exposure configuration seems to move more into ‘advanced’ territory.

      What about adding a shorter ‘upload drop zone’ above the thumbnails in the media library? This would be in plain sight, and would makes sense as that selection of media objects is where uploaded items will show immediately afterwards. I can mock this up if it doesn’t make sense.

      • Andy 9:27 pm on June 18, 2014 Permalink | Log in to Reply

        Agree w/ Cliff re: using the Screen Options tab, but for a different reason. “Screen Options” is a convention within the admin area already, so it makes sense to carry that over. It’s also something that, once set, should be tucked out of the way to preserve screen real estate.

        For Add Media: What about adding an icon that’s similar to what users see on other services? Off the top of my head, something like the Cloud Upload genericon (http://genericons.com/#cloud-upload).

      • jerrysarcastic 9:29 pm on June 18, 2014 Permalink | Log in to Reply

        I like the idea of a clearer drop zone, though maybe not full width above the icons.

        This solution may be somewhere in the middle (upload “drop zone” in the same location as the button) but gets at the same idea you are talking about.


    • Drew Jaynes (DrewAPicture) 9:36 pm on June 18, 2014 Permalink | Log in to Reply

      I’d like to see a screen-wide drop-zone much like DropBox uses. Seems odd to set aside screen real estate simply for a dropzone when the choices could just as easily be 1) Click the Add New button 2) Drop it anywhere. We should have similar workflows on the plugins and themes screens too for installations. Sigh, a guy can dream.

      Also, I see a lot of workflows here for uploading single media items, how will this work with multiple items, even multiple items of multiple types?

      • jerrysarcastic 9:50 pm on June 18, 2014 Permalink | Log in to Reply

        I’d like to see a screen-wide drop-zone much like DropBox uses. Seems odd to set aside screen real estate simply for a dropzone when the choices could just as easily be 1) Click the Add New button 2) Drop it anywhere.

        That is actually how the media grid behaves currently, so in a sense, the button or drop zone or whatever is really a design conceit in that it only points out a function that already exists.

        The purist in me says we shouldn’t need such trickery, but in truth I think it is necessary to a certain extent, if this is ever to become more than a feature for power users

        Also, I see a lot of workflows here for uploading single media items, how will this work with multiple items, even multiple items of multiple types?

        My guess here is that this would be much like how the modal in the post editor handles it: throw one file or a bunch of files at it, and it will just upload them and show them in the grid view

        • Andy 10:03 pm on June 18, 2014 Permalink | Log in to Reply

          Heck I didn’t even realize that you could drag-and-drop anywhere already. (Or I forgot!)

          I’m not a big fan of removing the “Add Media” button. It’s a standard design/UX convention throughout WordPress. I’m also concerned about the accessibility implications, e.g. keyboard access or uploading via touch devices.

    • Janneke Van Dorpe 12:01 am on June 19, 2014 Permalink | Log in to Reply

      What about putting a “+” in the first cell of the grid? Wouldn’t that be obvious? I wouldn’t use a modal to add media. All the information could go there.

      • jerrysarcastic 10:34 pm on June 19, 2014 Permalink | Log in to Reply

        We had actually considered that option previously here: https://cloudup.com/ckx15f5fFOM

        One concern we had with that approach is keeping the upload target visible upon scrolling. That said, it may be worth revisiting in user testing; I also liked this approach.

      • Eric Andrew Lewis 2:27 pm on June 20, 2014 Permalink | Log in to Reply

        Another question that we didn’t have a good answer for when considering this option was: what happens to the [+] cell when you apply a date or filetype filter? Should it be persistent, or disappear?

      • nosilver4u 3:31 pm on July 2, 2014 Permalink | Log in to Reply

        This is exactly what I pictured in my mind as well. But you wouldn’t have to actually restrict the drop zone to that box. What if you kept the drop anywhere functionality, but just use the cell with a + as a lure to get people to realize that you can actually drag-and-drop? As soon as their mouse enters the window while dragging, they’ll see the visual indication that they can drop anywhere, just like uploading media while composing a post/page/whatever.

        Some other thoughts as a plugin developer who deals with this page extensively:
        1. The bulk actions drop-down is a necessity for my users, and it would be REALLY nice to have a filter/hook to add actions instead of resorting to javascript trickery.
        2. Trying to figure out how to squeeze all my metadata that currently has its own column into that little box under the thumbnail without making things huge, but perhaps that is unavoidable. See http://wordpress.org/plugins/ewww-image-optimizer/screenshots/
        In my debugging mode, I even let the user see ALL of the stored metadata, in array form. This could get tricky as well, but that’s an edge case that I can try and sort out myself.
        3. Regarding #2, I have actions for optimize/re-optimize & restore original, I wonder if it would be feasible to get a hook that would allow these actions to be placed elsewhere, to reduce the amount of space I’m using in the custom column.

    • Ansel Taft 12:09 am on June 19, 2014 Permalink | Log in to Reply

      If this UI/X looks/works anything like what I see in my mind it will be lovely and consistent with the latest changes to WordPress. I like where this is headed.

    • Mert Yazicioglu 6:40 am on June 19, 2014 Permalink | Log in to Reply

      Great work! The only thing I’m not particularly excited about is the checkboxes on the top-right corner of each item. Maybe it’s just me but trying to aim little checkboxes isn’t fun when trying to select several items.

      • jerrysarcastic 10:22 pm on June 19, 2014 Permalink | Log in to Reply

        There is a lot in the wireframes that will be iterated on I am sure. How would you approach the problem? We haven’t looked into it in any detail yet, so any ideas are appreciated at this point.

    • Eric Andrew Lewis 2:30 pm on June 20, 2014 Permalink | Log in to Reply

      Great work Jerry :D

      I have long thought Screen Options are where settings go to die. Since the setting modifies how the grid renders, users will look in its direct vicinity when trying to modify how it works. I prefer keeping it close.

    • adamsilverstein 9:14 pm on June 25, 2014 Permalink | Log in to Reply

      Looks really good, great work!

    • pulinglinger 9:21 am on June 26, 2014 Permalink | Log in to Reply

      I want an option “attach to” in the “bulk actions”

    • TRILOS new media 7:50 am on June 27, 2014 Permalink | Log in to Reply

      If the grid is responsive/adaptive anyway, let the user adjust 2 – 16 columns as he likes for his personal overview.

    • cramdesign 12:51 pm on June 27, 2014 Permalink | Log in to Reply

      I would like to see a grid view as an option for all post types and not just media. It would be very useful for posts that are more visual, such as a portfolio or something.

    • Scott Kingsley Clark 1:42 am on June 28, 2014 Permalink | Log in to Reply

      Love this!

  • Janneke Van Dorpe 11:47 pm on June 17, 2014 Permalink | Log in to leave a Comment

    Hi everyone!

    There haven’t been any meetings for the front-end editor in a while, and since I’m working on the GSoC project right now I won’t actively hold any meetings until that’s finished. If anyone would like discuss something or work on the project though, feel free to continue them. Most of the time I’ll be in #wordpress-ui too. (My username is avryl.)

    A lot of things that I’m working on can also be used for the front-end editor, so I might merge in some things along the way.

  • jerrysarcastic 2:06 am on June 9, 2014 Permalink | Log in to leave a Comment

    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…   (More …)

    • karks88 3:43 pm on June 13, 2014 Permalink | Log in to Reply

      This is a great start. I think, for me, the biggest improvements can be made would be in both easily retrieving the URL of media and overall more control over the organization of files.

      For example, I work with a lot of sites that have PDF files. Sometimes, there are links to those PDF files in more than one area of the site. When a file has to be updated, I can either go through the process of deleting the out of date version and re-uploading it to the same folder (unless there is an easy way to overwrite the file that I’m missing in the admin) or upload the new file and then go and change links. IMO, that’s still something that is missing and would make life easier for some of us.

      It would be great to have a few more options for users who want to control how their library is used. I like having the year/month folder structure, but perhaps there could be an easy way to replace an outdated file?

  • Michael Arestad 6:39 pm on June 4, 2014 Permalink

    Press This 

    Hi! It’s been a few weeks since we added our initial brief.

    What is it?

    Press This is a redesign with a focus on automation and speed.

    Screenshot of Press This in action




    • We now have an alpha public release available for testing. We plan on pushing nightly soon. Beware: there be dragons.
    • Design elements are starting to fall in place. We are still iterating on placement and behavior of WYSIWYG, modal pop-out, embeds, settings, and Add Media.
    • More screenshots


    • Core architecture of the plugin/tools is an as-pure-Javascript app as possible
    • Currently AJAX driven, but ready to be switched to using the WP-API endpoints as they become available
    • Is backward compatible with the current version of the Press This bookmarklet as bundled in WP, but also bring its own, more powerful one with it
    • Can blog any web page found online, blockquoting an excerpt, including a selection of in-page images to choose from. Said images are augmented with meta data to sort them in the order the site advertises to be best
    • Overrides /wp-admin/press-this.php and its behavior, so that we’re 100% backward compatible
    • Overrides the bookmarklet JS code provided in /wp-admin/tools.php
    • Quick featured image switching
    • Saving draft and publishing
    • Image side-loading
    • 3 modes
      • Direct access: quick post of sort, more to come with media and formatting tools
      • Modal: when accessed via new bookmarklet code: will show in an iframe within the visited page itself
      • Popup: if the currently visited page is SSL but the target install is not, we open Press This in a popup instead. We also do that if the”legacy” bookmarklet code is used. It’s pretty awesome for pressing from your sweet smartphone.

    Next Steps

    • Formatting and media upload tools (+editor)
    • De-selecting a picture (if none wanted)
    • Embeds
    • Add header
    • Add minimal WYSIWYG for tablet and larger
    • Add Add Media functionality
    • Add SVG icons 8)
    • Explore various installation flows

    Ultra alpha installation instructions.

    Help us make this thing amazing! Feedback and Pull Requests welcome!
    Discussion: corepressthis.wordpress.com | Chat: Skype | Weekly Meeting: Wed. 16:00 UTC in #wordpress-ui

    • tomdryan 7:45 pm on June 4, 2014 Permalink | Log in to Reply

      I played around with it a bit and it is a huge improvement! creating a nicely formatted post ready to go, rather than just copying a link. The model should be similar to reblog or how the FaceBook URL function works — it does all the heavy lifting and lets you add from there.

      One suggestion: If it is a WordPress site, is there a way to pull the post excerpt from the source into the new post? Might have to make some changes on the WordPress side to make that work, but it would be slick. The posts that I Pressed only brought over the image and the headline.

      Keep up the great work!

    • tomdryan 7:47 pm on June 4, 2014 Permalink | Log in to Reply

      …also, please have the title of the “Press This” bookmark include the name of the site that you are Pressing to. This is helpful for those of us that have multiple WP sites.

    • KETCorporation 12:52 pm on June 7, 2014 Permalink | Log in to Reply

      I think PressThis is a nice feature and the pop-up controls are designed quite well. I’m just having problems with my media sometimes…

    • jimmy506 2:49 pm on June 27, 2014 Permalink | Log in to Reply

      I’ve been looking forward to a redesign to PressThis for a long while. One problem- I get a 403 error when clicking the bookmarklet. When this happened with the standard PressThis I could fix it by changing:

      to this:

      However- I’m not sure how to tweak it with the bookmarklet generated by the new plugin.

      The issue is discussed here: http://codex.wordpress.org/Press_This


  • jerrysarcastic 11:18 pm on May 30, 2014 Permalink

    Do you use the Media Library to manage your media? Let's chat! 

    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 ping me at jerrysarcastic on IRC.

  • shaunandrews 2:01 am on May 24, 2014 Permalink

    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

    The Media Grid plugin currently replaces the tableview with the existing Media Manager grid, commonly seen while adding an image to your post.

    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 UI.


    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 Default Icons

    Finder’s default thumbnail size.

    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:


    (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:

    Media Library Nav Bar

    • 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.


    • 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.

  • shaunandrews 3:17 pm on May 9, 2014 Permalink

    Media Grid Update 

    I’ve been working alongside @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 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: http://wordpress.org/plugins/media-grid/

    Over in the 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!

  • Mel Choyce 4:55 pm on April 25, 2014 Permalink

    Do you use Press This? We want to talk to you! 

    A group of us are starting to look into making improvements to Press This. If you currently use Press This, or have used it in the past, we want to chat with you. We’re looking for about 5-10 people to chat with in the next couple days. If interested, please send me an email at melchoyce [at] gmail, or ping me at melchoyce on IRC.

  • Janneke Van Dorpe 8:08 pm on April 23, 2014 Permalink

    Front-end Editor Meeting 22 April 

    Yesterday we had a quiet meeting, so there’s not much to report.

    I’ve removed compatibility with WordPress 3.8 so it’s easier to develop, and the plugin now loads the TinyMCE scripts from core, which should make the editor load faster. I also restyled the admin bar used in the editor so that it looks like the back-end editor. That way the buttons have styles for every state, and it’s hopefully easier to distinguish read and writing mode.

    More updates next week! :)




    • radiomint 2:38 pm on May 15, 2014 Permalink | Log in to Reply

      Hi, I’m new to the Forum. and i need to suggest a feature request / a small implementation to the back end editor. It is small but would benefit a lot of people. :) So how or where can i go and do that?

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc