Ready to get started?Download WordPress

Make WordPress UI

Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • Jerry Bates (jerrysarcastic) 7:24 pm on July 22, 2014 Permalink | Log in to leave a Comment
    Tags: ,   

    Media Grid – User testing round 1 

    We recently performed some quick user tests on the Media Grid (at Beta 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. (More …)

    • Helen Hou-Sandi 2:49 am on July 23, 2014 Permalink | Log in to Reply

      Bulk select is a tricky interaction – the persistent checkboxes are already round 2. What can we do there to make it better? Fade more things out? Re-explore a separate mode?

      @melchoyce and I discussed hiding all those extra fields by default and just letting people turn them on if they really want them (that is, the power users that tend to volunteer for interviews). I think that is a good route to go, though a part of me feels that “off by default” makes it silly.

    • Eric Andrew Lewis 2:51 pm on July 23, 2014 Permalink | Log in to Reply

      I’d like to revisit and user test a fixed-to-bottom toolbar where bulk action buttons can go.

    • Mickey Kay 1:05 am on July 24, 2014 Permalink | Log in to Reply

      I like this idea. Would love to see/test.

  • Siobhan 7:15 pm on July 18, 2014 Permalink | Log in to leave a Comment

    Image Flow Update 18th July 2014 

    Thanks everyone for coming to the very first meeting about image editing. It’s excited to have a group of people ready to tackle this! The video of the meeting is here. Here’s what we discussed:

    Name: Our name is “Image Flow”

    Scope: The scope of the project is to look at how we can improve image flow in WordPress, including uploading and editing.


    The process will go in the following stages:

    1. Research: (Current Phase) – competitor analysis, user interviews, personas, document current workflows, ideal workflows
    2. Wireframes: proposing different wireframes for the plugin
    3. Development: coding a crazy storm, testing, feedback, iterating

    Current Tasks

    Current tasks are as follows:

    • interviews: @mor10 is working on user interviews (3 completed so far). We would like five or six. @mor10 to either complete all interviews or make interview questions available in Google Folder and delegate
    • personas: @sonjanyc is taking point with personas. The persona is to be updated. Info from @mor10‘s user interviews to be integrated with the personas
    • competitor analysis: Daniel is taking point on carrying out the competitor analysis. In the first stage this will focus on how other platforms deal with image uploading and editing.

    Ongoing tasks

    • information organisation – Daniel will be responsible for ensuring that documentation in the Google Folder

    Tasks we need help for:
    -interview write-ups: someone need to watch @mor10‘s videos and write them up for make/ui. The write up should include: 1) a summary with info about the type of user, 2) a list of problems encountered by the user, 3) suggestions for improvements that would help that user.
    -document workflows: we’ve created a list of tasks that a user would do in the image editing workflow. It would be useful to document these with screenshots. By working through the workflows we can identify stumbling blocks.


    I won’t be here next Friday (holiday!!) so I appoint @mor10 to set up the meeting. Please check in with progress and to see if anyone needs help. If anyone needs set up on make/ui please bother @samuelsidler :)

  • Siobhan 12:43 am on July 18, 2014 Permalink | Log in to leave a Comment
    Tags: ,   

    Image Editing Meeting Agenda – 18th July 

    We’re having the first meeting of the image editing group tomorrow: Friday at 18:00 UTC. Below is the agenda:

    1. General Introductions
    2. Discussion of project scope (and name) (also, talking about the feature plugin process)
    3. Discussion of project stages
    4. Review of work done so far (personas, user interviews, competitor analysis)
    5. Assigning tasks

    If anyone has anything else that they would like discuss, please leave a comment.

    I will post the link to the Google Hangout here 15 mins before the chat.

  • sonjanyc 7:28 pm on July 12, 2014 Permalink | Log in to leave a Comment
    Tags: ,   

    Image Editing UX Research: Personas 

    I was meeting with @siobhan last week to work on creating initial personas for Image Editing in WordPress. We came up with 6 main personas with different skill levels, goals and frustrations (for details see link below):

    1. Novice Blogger
    2. Experienced Blogger
    3. Photoblogger
    4. Mobile Photoblogger
    5. Multi-author Blog Editor
    6. Tutorial Writer

    We’ve put together a Google Doc for these personas and I’m sure we’ll refine it in the course of the next weeks, possibly add another persona or so: Google Doc Personas

    We’re thinking of providing a form for others to fill out to collect more data and to learn more about user’s image editing workflows, pain points and expectations.

    We’ve also put together a list of general user flows/tasks around Image Adding and Editing that will help us account for how people are using the image editing tools. Please share any additional flows/tasks you feel are missing in the comments below. (Google Doc Flows/Tasks)

    Adding/Editing Images

    • User uploads individual image and inserts into post
    • User edits image after insertion into post
    • User uploads individual image and edits prior to inserting into post
    • User uploads multiple images and wants to bulk edit images
    • User uploads multiple images and wants to edit single image
    • User uploads multiple images, inserts into post, and positions images in post editor
    • Editor edits images uploaded by another user

    Specific Editing Tasks

    • User crops an image
    • User rotates an image
    • User flips an image
    • User rotates an individual image
    • User wants to individually rotate multiple images
    • User wants to bulk rotate images
    • User resizes an image by presets
    • User resizes an image to custom size
    • User wants to bulk resize images
    • User undos / redos editing steps
    • User deletes an image
    • User wants to bulk delete multiple images

    Adding/Editing Photo Galleries

    • User uploads multiple images to create photo gallery
    • User creates gallery from selecting images in media library
    • User edits images in existing gallery in post
    • User wants to chose from different gallery templates / grids

    We deliberately kept this exercise high level without creating any wireframes or mockups yet. I feel it’s important to understand the users and what they want to do first before we dive in.

    Next steps are to document the current workflows and pain points. We also want to look at other image editing solutions and what we can learn from those.

    We would love to hear your feedback!

    • Jon Brown 8:03 pm on July 12, 2014 Permalink | Log in to Reply

      Curious. Is this intentially limited to things a user wants to do and can given the existing toolset? Or should it include things users want to do but currently can’t? Ie. Add text overlay to image, add watermark to image, apply filter to image, combine images (create dypitch/tripitch)?

      • Matt McLaughlin 1:41 pm on July 14, 2014 Permalink | Log in to Reply

        I’ll second this. Adding text overlays or watermarks (think branding logo) to images would be a very nice addition and would save a bunch of time in photoshop. Most filters seem more like plugin territory, but it would be nice if there were say 2-3 core filters and a standard place in the UI for them to live so that 3rd party filter developers could make theirs live in the same consistent place in the UI rather than spraying UI all over the backend.

      • sonjanyc 12:08 am on July 15, 2014 Permalink | Log in to Reply

        Thanks for your feedback Jon – @jb510
        We were mainly looking at basic tasks to make sure the foundation is solid, but we also want to look at some more advanced functionality.

        Though I understand that for example adding watermarks to images and combining images are very essential for some websites, I’m not sure if this would be used by the majority of users. However, this would be a good opportunity for plugin developers. We want to help accommodate space in the UI for plugins to add more niche functionality.

        • Jon Brown 12:32 am on July 15, 2014 Permalink | Log in to Reply

          I haven’t looked at the hooks in the image editor in a while. There are plugins like aviary-editor that offer much more advanced image editing capabilities. They do so in a UI wholly removed from the WP Image Editor (link in media library list view). Also thinking of wp-retina-2x. It would be awesome if the native editor could be extended with complete image editing libraries like Aviary and plugins like WP Retina 2x.

          I’d say one missing basic feature is the ability to reupload/replace an image. While there is a good plugin for this enable-media-replace, it really seems like something core should be able to handle.

    • venkmanuk 5:54 pm on July 13, 2014 Permalink | Log in to Reply

      i think this all looks good, and it’s important to keep it at a high level until you get this sort of thing nailed.

      one thing i have seen with the Novice Blogger is they have no understanding of the platform and tools and so their expectations of what (they hope) can be done could vary from crop/resize/flip all they way to creating layered arrangements of images, adding extra graphics and so on. this could be covered by a tutorial intro or something maybe. but they really have no idea. :)

    • tobifjellner 7:21 am on July 14, 2014 Permalink | Log in to Reply

      Is it possible to re-position an image in a page/post by simply dragging? (I’m to html-centric to even try, but I believe that such a possibility could be popular, even for me.)

      • tobifjellner 7:26 am on July 14, 2014 Permalink | Log in to Reply

      • tobifjellner 7:27 am on July 14, 2014 Permalink | Log in to Reply

        Wow, I had no idea that a single letter “o” in the start of a row would get heavily reformatted. :)

      • Jon Brown 12:25 am on July 15, 2014 Permalink | Log in to Reply

        You can drag the insertion point of an image around in the visual editor and using the text align tools will toggle the image between alignright, alignnone, alignleft. These aren’t image editing though, that’s content.

        What exactly were you referring to?

    • TCBarrett 7:58 am on July 14, 2014 Permalink | Log in to Reply

      Is ‘blogger’ meant in a more generic term, or are personas who do not use WordPress to blog with excluded?

      Considering the amount of websites built with WordPress that are not blogs, and have no blog section at all, is a non-blogging site administrator worth considering?

      • Ipstenu (Mika Epstein) 1:15 pm on July 14, 2014 Permalink | Log in to Reply

        Generic. End User might be a better term.

      • sonjanyc 11:53 pm on July 14, 2014 Permalink | Log in to Reply

        @TCBarrett Good question. Since the Image Editing tools are the same for posts or pages, we didn’t distinguish between a user that adds/edits images in a blog post or a page. I would assume the Novice Blogger would often match the expertise or challenges a user would face that updates his site’s pages every now and then. I would assume this user wouldn’t use the image editing tools every day and therefore would need some more guidance.

        If you have any workflows that you feel would be much different for a website owner that doesn’t have a blog when it comes to adding/editing images, please share. We do want to make sure we’re collecting all main use cases.


        • Pablo Perea 6:54 pm on July 16, 2014 Permalink | Log in to Reply

          I think the photo editing process will be similar regardless of where you use it, in an entry or in a page. However, there may be differences when placing the images within the content.

          Example: On a list of services or products, it is normal to place text and image and keep the remaining space blank until next item (Not allowing the text to surround the image)
          These needs can be solved using plugins, HTML/CSS or Shortcodes.

          As commented above, these aspects are more related to content edition, but it is true that they have a natural relationship with the concept of text alignement and imagenes floating, and this last point is in the image editor.

          Do you think it would be interesting to include these aspects in the research?

          • sonjanyc 1:16 am on July 17, 2014 Permalink | Log in to Reply

            @pablo-perea Thanks for your feedback! I think it’s always good to look at all different use cases and then decide how relevant a specific use case is to the majority of people using WordPress. If you would like to provide a list of those cases that would be great!

            • Pablo Perea 8:24 pm on July 17, 2014 Permalink

              I usually use html/css to handle some features related to space and photo presentation, such as managing images and text like a block-level element, managing margins around the photo, choosing colour and size of the border… maybe bloggers also use these features, although perhaps they are more related to web designers.

    • Matt McLaughlin 2:02 pm on July 14, 2014 Permalink | Log in to Reply

      As a manager of a decently sized (150 users or so) multi-user blog, here are some things I’d like to see:

      • Quick Edit rename

      Our users upload a ton of photos named DSC2104.jpg and similar. I’d love a quick and easy way to rename them – preferably from the new grid layout media library rather than having to dive into the edit screen.

      • Conforming the aspect ratio of multiple photos

      Again, as a multi-user blog we get photos in a ton of different aspect ratios and we want some level of standardization of things like featured images. Also when putting together a gallery of photos with different aspect ratios it would be nice to have some control of the crops.

      • A standard way to deal with crediting others

      Each of our users gathers photos from a number of other people. “Uploaded by” is almost never the same as “photo taken by”. And there’s just no good way to deal with this since WordPress assumes that attribution should always fall to the uploader. I would kill for an “Attribution” field that defaults to the uploader but includes a drop-down for other blog users and an “other” category that allows you to attribute the photo to someone who isn’t a member of the blog.

  • Siobhan 12:49 am on July 11, 2014 Permalink | Log in to leave a Comment
    Tags: ,   

    Image Editing Weekly Meeting 

    We’re going to kick off weekly meetings for image editing next week. They’ll be at 18:00 UTC Friday, starting Friday 18th July. That’s:

    • 20:00 Amsterdam
    • 19:00 London
    • 14:00 East Coast US
    • 12:00 Mountain Time
    • 11:00 Pacific

    It’s after the media component meeting.

    We’re going to experiment with using Google Hangouts instead of IRC for the meeting. I’ll post the link to the chatroom here about 10 minutes beforehand. Google Hangouts allow for 10 maximum for a hangout. That should suffice for the time being. Other people can attend and ask questions if we get full.

    We have a Gitter chat room set up for ongoing communication.

    [Update: I got the time wrong for the media component meeting - we'll have our meeting after theirs :)]

  • Siobhan 9:22 pm on July 7, 2014 Permalink | Log in to leave a Comment
    Tags: feature-plugins, ,   

    Feature Plugin: Improving Image Editing 

    Image editing in WordPress isn’t fun. It’s possible, but it isn’t fun. Bringing image editing into the media modal was pretty awesome. Now people can edit images from the modal (yay!) but they also realise how frustrating that image editing experience is (boo :( ).

    WordPress is not an image editing platform, but we do offer some minimal image editing tools and, since they’re there, they should be intuitive instead of anger inducing.

    Image editing is an area that’s ripe for improvement, so we are proposing an image editing feature plugin to see how we can improve things.

    At the WordCamp Seattle contributor day, myself, @sonjanyc, @mor10 and @DH-Shredder started some discussions about how we can improve the image editing experience in WordPress. Below is what we discussed:

    What we want to provide to users

    • a set of simple image editing tools that just work (crop, rotate, scale)
    • image editing tools that integrate better with image uploading workflows
    • image editing tools that are easy to access
    • an interface that is extensible so that plugin developers can create advanced image editing which can be easy integrated

    We discussed the process for the way forward with the project:
    1. Creating personas and workflows
    2. Conducting interviews with user types (photoblogger, food blogger, tutorial writer, multi-author blog editor, etc)
    3. Looking at how other platforms provide image editing functionality
    4. UI mockups
    5. Design
    6. Coding
    7. Testing

    Tickets related to image editing

    And here are some mockups that were done around 3.5 from @lessbloat

    If anyone would like to be involved in this project, please let us know. We have a Skype group and we can start kicking off weekly meetings, either in IRC or Google Hangouts. It’s in the very early stages and we’re planning to take things slowly since we all have other commitments, but we can get things moving more quickly if with more involvement.

    Here are some things you could help out with:

    • conducting user interviews and writing up the research
    • researching other platforms, writing it up, providing screenshots
    • mocking up workflows
    • mocking up the UI
    • designing the interface
    • coding like a boss
    • coding like a backbone boss
    • user testing
    • feedback, insight, rants, cheerleading

    You can email me to be added to the Skype group or let us know in the comments

    • Marko Heijnen 9:31 pm on July 7, 2014 Permalink | Log in to Reply

      First of all why Skype and not something public. Secondly please add me to it. This is also something I discussed multiple time with @DH-Shredder and lately also with @ericlewis. I was planning to bring this up during his weekly Media Component Office Hours on friday’s but due internet issues I didn’t had the change yet.

      • Siobhan 9:56 pm on July 7, 2014 Permalink | Log in to Reply

        Will add you to the group. Skype is great for asynchronous communication and IRC is not. We’re in a number of different timezones and IRC isn’t great for that. However, I agree that it’s better for things to be transparent- we’re investigating the best way to publish the Skype logs online. If you have any idea on the best way to do that, that’d be awesome :)

      • Mike Schroder 10:28 pm on July 7, 2014 Permalink | Log in to Reply

        This is early early stages of “let’s do something about this.”

        I’ll note that I’m actually trying to stay as disconnected with the early process as possible, since a lot of brainstorming with regards to user flow is helpful here.

        That said, anyone who is interested is super welcome, and agreed that it’d be good to bring it up in the Media office hours.

    • Mike Schinkel 10:37 pm on July 7, 2014 Permalink | Log in to Reply

      @Siobhan – I’d really love to get involved, but with #metadata I think I’d be overcommitted. So, here are some thoughts about what I think is really needed:

      1. Core needs to add a concept of “Image Type” that can be added using PHP code (i.e. maybe add_image_type( $type, array( 'label' => $label, $sizes = array( 'small' => '75x75', 'medium' => '200x150', 'large' => '500x300', 'xlarge' => '1024x768') which would allow core to generate only the sizes needed for those types, allow for easier filtering of images (by type) and empower plugin and core developers to enhance UX for functionality related to images. Examples of types might be “headshot”, “hero”, “featured” and so on.

      1b. Once we have image types and sizes, filenames could be augmented with that information, i.e. instead of jsmith-500x300.jpg files could be renamed to jsmith-large-headshot.jpg.

      1c. And if core does not do 1b., at least it could remove the sizes from the filenames when it resizes a file so that you don’t get this kind of name jsmith-500x300-75x75.jpg but instead just get jsmith-75x75.jpg

      1d. Note the sizes I included above are not the same aspect ratios so it would be nice of by setting those sizes for a type that WordPress core would present a UI to the user to crop those sizes separately.

      2. It would really be nice if core could add an option to generate image files on demand the first time an image is externally accessed rather than on upload so that you don’t end up for an order of magnitude more image files on disk then are actually ever used.

      Anyway, thanks for listening.

      • Mike Schroder 10:55 pm on July 7, 2014 Permalink | Log in to Reply

        Thanks @mikeschinkel! Agreed that core could use a bit of enhancement as far as its image APIs go. I think this project is more focused (especially in early stages) on re-thinking the way we handle image flow in a general sense.

        That said, enhancements to existing image APIs can be considered at any time, and are probably best handled as tickets/patches in trac so that they don’t need to be held back by a feature plugin. Is there already a ticket for your suggestion? If not, I think that’s a great idea to post there for discussion.

        • Mike Schinkel 11:00 pm on July 7, 2014 Permalink | Log in to Reply

          Thanks @Mike Schroder; I just added those comments to ticket #21810, not sure if I should have created a new ticket or not.

          If image types were added then it would open up lots of possibilities for UX (that IMO could be significant improvements) so that’s why I suggested here.

          BTW, I previously implemented image types for a library used by many of one of my client’s sites, which helped a lot with UX, but I had to make some pretty nasty hacks to get it to work because core really didn’t envision those kind of enhancements.

      • Eric Andrew Lewis 2:32 am on July 8, 2014 Permalink | Log in to Reply

        Suggestions like this would be more productively discussed at a Media component weekly meeting rather than dumped on a semi-related blog post.

    • Chase Wiseman 11:01 pm on July 7, 2014 Permalink | Log in to Reply

      I’m really excited that this is being discussed and would love to throw my hat into the ring here.

      The bulk of the WordPress work I do is in building custom themes and plugins for clients. These often call for location-specific image sizes such as “hero” or “profile photo”, as @mikeschinkel mentioned. Along with an overall revamp of the image editing workflow, I would love to see a way for users to crop for these specific image sizes as part of the uploading/saving process.

      Granted, that’s a specific example that’s close to my heart and I’m sure others will have their own, but I think the key to enabling these will be making the editing workflow, interface, and underlying APIs as extensible as possible for plugin and theme developers.

      I hope to be able to contribute to the mockups and code when the time comes.


    • Eric Andrew Lewis 2:37 am on July 8, 2014 Permalink | Log in to Reply

      @siobhan – I’m glad you’re taking the reins on this. During my gardening on the Media component I found a good number of minor bugs in the image editing experience, which led me to the same conclusion: let’s scrap what we have and build anew.

      I am eternally available for any JS architectural needs, and interested in UX/UI discussions. You have my Skype ;)

    • Graham Armfield 10:43 am on July 8, 2014 Permalink | Log in to Reply

      Please can we make sure that accessibility is considered when people are thinking about design and development of this. At the very least there needs to be a way of doing all this that doesn’t rely on the use of a mouse. We also need to ensure that there is enough information available to screen reader users too.

      Please contact members of the Make WordPress Accessible Team if you need help or guidance on this.

    • jlmaners 11:50 pm on July 12, 2014 Permalink | Log in to Reply

      I’m new to the Make community but as a WordPress user for almost 8 years and a WP focused developer for the past three, I’m really interested in this discussion and would like to throw my name into the ring if not too late.

      I work for a large University that is slowly but surely utilizing WordPress as THE tool for the majority of our websites across campus. My unit specifically encourages this and is active in the development of WP as a platform for our faculty, staff, and students looking to publish sites for research groups, departmental home pages, etc. I have a lot of different users of differing skill sets and differing use cases who I know would love to provide feedback.

      Please let me know what contact info might be needed if I can assist. Definitely don’t want to get in the way!

  • Helen Hou-Sandi 12:56 am on June 20, 2014 Permalink
    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.

  • Jerry Bates (jerrysarcastic) 8:57 pm on June 18, 2014 Permalink  

    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!

    • designsimply 5:50 pm on July 14, 2014 Permalink | Log in to Reply

      I noticed the HTML edit buttons for image descriptions was missing in 4.0-beta1 r284949, which is different than the wireframe posted above, but I think users find those edit buttons valuable so I added a request to see if they could be added back in case that’s an option. See #28896

  • Janneke Van Dorpe 11:47 pm on June 17, 2014 Permalink

    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.

  • Jerry Bates (jerrysarcastic) 2:06 am on June 9, 2014 Permalink

    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?

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