WordPress.org

Ready to get started?Download WordPress

Make WordPress UI

Recent Updates Page 2 Toggle Comment Threads | Keyboard Shortcuts

  • sonjanyc 7:28 pm on July 12, 2014 Permalink
    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.

        Thanks.

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

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

      Cheers!

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

        https://cloudup.com/cqJevaz8qBM

    • 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 11:47 pm on June 17, 2014 Permalink
    Tags:   

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

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

    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

     

     

    Progress

    • 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

    Features

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

      u=‘+e(l.href)+‘
      to this:
      u=’+e(l.href.replace(/\//g,’\\/’))+’

      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

      Thanks!

  • Jerry Bates (jerrysarcastic) 11:18 pm on May 30, 2014 Permalink
    Tags:   

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

    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.

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

    Resize_in_Action

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

      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.

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel