Make WordPress Design

Updates from February, 2013 Toggle Comment Threads | Keyboard Shortcuts

  • Helen Hou-Sandi 2:10 pm on February 12, 2013 Permalink  

    Discuss: Icons 

    If you’re running trunk, you’ve probably noticed some new icons being tried on for size. There’s ticket #23333 on Trac for them, but it’s quickly becoming overwhelming and I’d like to give design-minded folks a chance to focus in on the icons themselves and discuss without as much distraction regarding the rest of the admin (see #23415, which absolutely goes hand-in-hand), SVG-vs-font-vs-plugins oh my, developer rabbit holes, etc. Trac just isn’t a great fit for some of the discussion, anyway.

    I’m seeing a few focal points for discussion:

    • Icons themselves, from a graphic design standpoint. What works, what doesn’t, what might make this style of icon “WordPress-y”, other things that I personally (as a non-designer) can’t prompt very well.
    • What kind of treatment flat/vector-style icons need to really work in the WordPress admin, e.g. hover states, colors, etc. Size is also perhaps a part of this, although do keep in mind that we can play with the sizing and styling of other elements as well.
    • What other icons we need beyond the admin menu – post formats is definitely one, and perhaps we can also start thinking of other places that could use icons as a part of the visual vocabulary.

    Some helpful links from the 88 and counting comments on the ticket:

    • Helen Hou-Sandi 2:17 pm on February 12, 2013 Permalink | Log in to Reply

      I’d particularly like to see @empireoflight and @melchoyce combine forces and work to create a more complete set for use around the admin – there are elements in each set that seem very strong to me. Of course, I would think that any contributions are welcome; I’m just going with what’s been done so far so things keep moving.

      Post formats needs an icon for each of the 10 formats – not sure if standard should just use the regular pin icon or if there are any other icons than can be reused. I’m also seeing where an icon could be used in the inputs/textareas themselves – URL, quote, quote source, embed code/URL, image, and gallery. @melchoyce‘s wireframes used icons and placeholder text rather than visible labels, so I’d like to at least give that look a shot. For the record, so nobody jumps on me, in my current patch, labels are still there, just not visible, and we’d need to keep it that way for accessibility.

    • esmi 2:43 pm on February 12, 2013 Permalink | Log in to Reply

      Speaking from a purely design/usability pov, I find the darkness/heaviness of http://bendunkle.com/wp-admin-icons/ somewhat intrusive when it comes to readability. Any chance we could lighten them (a la the current icon set) and then revert to a heavier/darker version hover and onfocus? That might also sidestep the accessibility issues of using red as a highlight color. The Post and Appearance icons look rather similar to me at first glance. Perhaps the Post icon could be swapped out for the more stylised pin in https://core.trac.wordpress.org/attachment/ticket/23333/icons-18-24-32.png

      • Chip Bennett 1:35 pm on February 16, 2013 Permalink | Log in to Reply

        That\’s my biggest complaint thus far: Post, Appearance, and Plugin icons are all way too similar. Also: I don\’t get \”paintbrush\” = \”appearance\”. (I assume that\’s what the appearance icon is?) IMHO, a paintbrush implies \”format\” or \”color\”, not header/background/Theme options.

    • @mercime 5:23 pm on February 12, 2013 Permalink | Log in to Reply

      I’m all for the icon fonts by Ben Dunkle. Instead of making heavy/solid icon fonts, how about making it outlines instead for a cleaner look? Compare bbPress and BuddyPress outline icons with solid wp-admin icons https://mercime.files.wordpress.com/2013/02/wp-admin-buddypress-bbpress.png?w=145

    • Empireoflight 7:53 pm on February 12, 2013 Permalink | Log in to Reply

      @mercime, the outlined look doesn’t translate to an icon font very easily; hence the solid icons. However, it gives me an idea for an “open face” icon set, as a variation on the theme.
      As for the icons looking too large, the intention is for more padding to be added but we’re playing w/that. They do seem a bit dark, but the great thing is you can quickly change the color w/css.

    • Hugo Baeta 12:14 am on February 13, 2013 Permalink | Log in to Reply

      What if the icons were a very light embossed look? (it could still be an icon font, with text-shadow to create the effect).

      I am with the other comments I’ve seen, the icons look too bold there. One personal opinion about this style of simplified shape is that it really looks better if you keep simplifying, maybe even make them smaller?

      On a discussion with @koop he made a mockup of a super minimalist menu, removing the divider lines and adding more padding to the items. It felt so airy and light, I loved it! I’ll try to reproduce it and make a screenshot for y’all.

      • Hugo Baeta 7:23 am on February 13, 2013 Permalink | Log in to Reply

        ok, talked with @koopersmith before posting this here. One important thing to take note is that I don’t intend to distract from the discussion about the icons with the other changes showed in this screenshot. But it’s an interesting new way to look at the menu. Also keep in mind that the menu simplification is not my doing, but Koop’s and I love it so much I use it on my installations ๐Ÿ˜›

        This said, here’s what I did: ( http://cl.ly/image/0a3S0a2G053I )

        • reduced the opacity of the icons
        • increased the margin around them

        What do you think?

        • lessbloat 8:00 pm on February 14, 2013 Permalink | Log in to Reply

          Really loving this @hugobaeta. Nice work with that screenshot!

        • lessbloat 8:10 pm on February 14, 2013 Permalink | Log in to Reply

          Here’s a before and after comparison:

          There is so much less for your brain to process with the one on the right. Though I’d argue that we could probably go even smaller with the icons there.

          • Ipstenu (Mika Epstein) 8:36 pm on February 14, 2013 Permalink | Log in to Reply

            I think that size is really good. Smaller and you start running into readability issues with people who don’t have aces vision. (And telling me to +1 font size in my wp-admin is a crap answer, by the way.) We COULD go smaller, but I think this is a really nice balance between size and all-around readability.

            • lessbloat 2:38 pm on February 15, 2013 Permalink | Log in to Reply

              As a clarification, I said smaller icons, not smaller text. ๐Ÿ˜‰ Smaller icons would command less attention and actually improve readability for the text.

            • Ipstenu (Mika Epstein) 4:37 pm on February 15, 2013 Permalink | Log in to Reply

              I dunno, visual ‘readability’ of icons also suffers at smaller sizes. This icon size is really perfect. I feel like I’m not missing out on details and I can clearly see what everything is easily. If you made the images smaller, the thing lines in the images themselves would lose distinction.

            • Hugo Baeta 5:06 pm on February 15, 2013 Permalink | Log in to Reply

              My point with going smaller with the icons was also to go simpler, reduce detail. If you look at the old icons, they look “smaller” and more elegant comparing to these new ones, because the new ones are a solid block instead of gentle lines with highlights.

            • Ipstenu (Mika Epstein) 5:14 pm on February 15, 2013 Permalink | Log in to Reply

              Hugo, the current ones are so small for me I have a hard time noticing the visual diff between Feedback and Appearance today. Smaller images will lose pattern recognition ability (I don’t know if that’s the right term…) and make it harder to tell everything apart at a quick scan when you collapse the bar. A lot of people cannot collapse the sidebar now because they lose the ability to tell what’s what when they do.

              Since we’re already removing the detail and going with flatter images, which I like by the way, we have to make sure to keep them distinct. I feel smaller will lose that.

            • Hugo Baeta 5:18 pm on February 15, 2013 Permalink | Log in to Reply

              and, actually, the old ones ARE smaller! Here’s the evidence:

            • Hugo Baeta 5:28 pm on February 15, 2013 Permalink | Log in to Reply

              Fair argument @ipstenu. But if the icons are getting bigger, then the text also needs to follow that to keep proportion. Maybe that’s exactly what the menu needs… do you guys remember how clear the old (pre 2.7) menus were? yes, the horizontal blue bar at the top!

              quick mockup with inspector:

        • Mel Choyce 12:51 am on February 21, 2013 Permalink | Log in to Reply

          Late to the game on these, but just wanted to comment on how much I like this layout & grouping. I think we could play with spacing and division between content & settings a little more, but this feels like a much nicer fit for the new icons.

      • Drew Strojny 2:56 pm on February 14, 2013 Permalink | Log in to Reply

        One personal opinion about this style of simplified shape is that it really looks better if you keep simplifying, maybe even make them smaller?

        I haven’t read through much of the discussion to date, but this is the first thing that jumped out at me when I updated and saw the current flat icons. While I love them, they look disproportionately large and out of place to me in the current menu. +1 for making them smaller and/or re-evaluating the proportions of the surrounding elements. I think Hugo / Koop are on the right track with the screenshot.

        I also think @lessbloat echoed similar comments in the Trac ticket and provided a screenshot of a non-gradient version with more spacing, which I also think is on the right track.

        I’m also not a big fan of the white hover on the current background. Not enough contrast. I’d say a subtle change to a lighter grey when hovering would work well.

    • Helen Hou-Sandi 6:22 am on February 13, 2013 Permalink | Log in to Reply

      Something that came up while I was talking to @koopersmith about something else entirely – the toolbar icons seem to really work well in terms of language and staying power, and maybe even personality, as minimal as they are. The admin menu icons in trunk clash somehow – perhaps it’s the roundness, perhaps it’s something else. That part I can’t quite quantify. What I’m trying to say is that I think the existing toolbar icons are an important starting influence ๐Ÿ™‚ The admin menu icons are less a cue and more a unique reference, so they do function a bit differently, but having two different styles of vector icons is going to give a disjointed experience.

    • Archetyped 8:37 pm on February 14, 2013 Permalink | Log in to Reply

      Thank you for starting this discussion @empireoflight and thanks to @helen for bringing the discussion out of Trac (is it okay to say it’s chaos in there?).

      I’m curious what the “official” goal for this potential icon reboot is? “Scalability and utility” (as put forth by @empireoflight) are good reasons, but are they a higher priority for WP than things like branding and personality?

      These icons feel rather “generic” to me. While the official icons have their flaws, they are unique and give WP a particular flaire that helps to identify WP as “different”.

      It’s not about flat vs shaded, it’s about identity. Sure, generic icons would definitely make it easier to implement WP as a white-label CMS for clients, but I for one would feel the loss of a certain amount of whimsy and fun that drew me to WP those many years ago.

    • Chip Bennett 1:41 pm on February 16, 2013 Permalink | Log in to Reply

      Are these icons being tested with the menu both expanded and collapsed?

      Most of the icons make sense, but in the collapsed state, the old \”Appearance\” icon is far more meaningful than the new one, IMHO.

    • lessbloat 4:32 pm on February 21, 2013 Permalink | Log in to Reply

      Was chatting with @joen about the icons, and he mocked up:

      As a riff on some of the icons styles. Posting it here to add to the existing discussion.

    • Empireoflight 12:40 pm on February 22, 2013 Permalink | Log in to Reply

      I did a ton of tweaking, both the images and css last night. Icons are a bit smaller still and include an orange hover state (it should be orange like the text, not white). It’s pretty much what we currently have in 3.5 with new icons. I used @melchoyce ‘s suggestions for the angled plug; Mel, let’s talk soon about the post format and other icon.s I added an active state into the menu sprite. I’ll submit it to trac today, but here’s the preview: http://cl.ly/image/2j0a3F2W271b (how do I insert images directly to this thread?)

      • Hugo Baeta 9:36 pm on February 25, 2013 Permalink | Log in to Reply

        Hey @empireoflight – I like what you did there, the size reduction makes them feel a bit more proportional. And the all gray treatment (including text) also makes the new icons fit better.

        To include an image inline, just write the html for it <img src="… ๐Ÿ˜‰

  • lessbloat 5:37 pm on October 2, 2012 Permalink
    Tags: ,   

    Ran another user through Discovery Cycle 1 this morning.

    Hereโ€™s the video, and my notes:

    Step two notes โ€“ Log in

    No problems.

    Step two notes โ€“ Explain what you see

    No problems.

    Step Three notes โ€“ Preview your blog

    No problems.

    Step Four notes โ€“ Change your background color

    • 3:36 – He had to play around a bit, but he figured out how to change the color to blue fairly quickly
    • 3:52 – He clicked the “default” button resetting the work he had done to choose a color.

    Step Five notes โ€“ Change your site title

    No problems.

    Step Six notes โ€“ Add your first post

    No problems.

    Step Seven notes โ€“ Preview your new post

    No problems.

    Step Eight notes โ€“ Publish an image

    • 7:20 – Cool, he clicks into new media workflow. But unfortunately he’s looking to paste a URL, which isn’t currently in the new media workflow just yet.
    • 9:05 – He discovers the “Upload/insert” link, and has no trouble adding the URL.


    • Overall, I’m super happy with this test. He completed everything in 10 min which is a great time (compared to where we started off at the beginning of the 3.5 cycle).
    • Happy to see the first user try the new media flow, even if it didn’t work out for him. We’ll continue to to test new users as that section fills out.
    • 7:30 – When he entered a URL into the media uploader, it appeared to succeed for a brief second, you saw a file upload happening briefly and then it disappeared (just a heads up @koopersmith).
    • Do we need to do anything about the “default” button in the color picker? Would be a shame if someone took a bunch of time to find just the right color, then lost it with a click.
  • lessbloat 3:52 am on August 30, 2012 Permalink  

    Ticket scrub notes 8/29

    Needs patch

    Ready to commit

    Has owner, needs patch

  • lessbloat 4:48 pm on August 27, 2012 Permalink
    Tags: ,   

    Now that we’ve got a couple of rough patches (welcome screen, color picker, “view” my site) it’s time go back and test a few users in our first discovery cycle with these patches applied, and see if we’ve made any progress.

    Here’s the video, and here are my notes:

    Step two notes – Log in

    No problems.

    Step two notes – Explain what you see

    No problems.

    Step Three notes – Preview your blog

    • 4:00 – She’s looking for a link
    • 4:14 – “Oh here it is” – She clicks “Visit my blog” in toolbar (Win for “view” my site patch).

    Step Four notes – Change your background color

    • 5:45 – When asked to change the background color, she immediately (instinctively) clicked the big blue “customize my site” button (woot!).
    • 5:55 – she easily found the BG color option in the customizer.
    • 6:00 – Oh noooes, she found a bug in Iris (so painful to watchโ€ฆ)! clicking the right column of Iris does’t change the color in the text-field (After a bit of testing, it looks like if you click the right column first, before clicking the left gradient box, nothing happens. If you click, if you click the left box first, then the right column, it works as expected.) cc// @mattwiebe
    • 8:07 – “Each time I view my blog it gives me a slightly different picture”.
    • 9:10 – still trying to figure out why BG color isn’t changing – “I’m so confused”
    • 10:30 – Moved on without being able to figure out how to change BG color. ๐Ÿ™

    Step Five notes – Change your site title

    • 10:50 – Looking in Appearance -> Header for a place to change her site title (which really makes sense, we need to add a link there).
    • 11:10 – didn’t find it in Appearance -> Header, no she’s checking all up and down the left nav
    • 12:20 – Found it in the customizer
    • 12:30 – What the? She couldn’t add spaces? That is weird. There is a bug in one of the patches? cc// koopersmith can you spot any reason why this would be happening in one of the patches listed above?
    • 13:20 – “I’m very confused – I don’t know how I would insert spaces”
    • 14:22 – gave up without being able to add spaces…

    Step Six notes – Add your first post

    No problems.

    Step Seven notes – Preview your new post

    No problems.

    Step Eight notes – Publish an image

    She found how to upload the image – not going to worry about anything after that for now, since media manager is being revamped. We’ll do plenty of user testing on the new media manager once it’s complete.


    • Bug in Iris prevented her from changing her background color
    • Can we please NOT have rotating header images in twenty twelve? None of the users we’ve tested have really comprehended what’s going on there.
    • We really should add a link on “Appearance -> Header” to “Settings -> General” to change their site title or tagline.
    • There was a bug in the customizer when she tried to update her site title which wouldn’t allow her to add spaces.

    I’d like to get the color picker bug fixed before I run another user through these changes, but overall, I’d say these patches have already really improved things for first-time users. Thoughts?

    • Amy Hendrix (sabreuse) 4:58 pm on August 27, 2012 Permalink | Log in to Reply

      I’m really excited about some of the improvements!

      (And Twenty Twelve doesn’t ship with any header image at all — if anything, we’ll be documenting that yes, you can add a header, and you don’t need to go to some scary code-snippet back alley to do so.)

    • Isaac Keyet 6:06 pm on August 27, 2012 Permalink | Log in to Reply

      Honestly it seemed like the main problem she had with changing colors was not the bug but that type of color picker altogether – a round color picker with the slider setting the black key (like the default apple picker) would probably be easier to comprehend for beginners. e.g.: http://cl.ly/image/061K1E1k2S2u

      • etoxin 7:42 am on August 28, 2012 Permalink | Log in to Reply

        It looks like the actual picker (in the square) is far too transparent. Maybe a small subtle animation on click could solve this or a darker colour.

        • etoxin 7:50 am on August 28, 2012 Permalink | Log in to Reply

          At 8:25 she gets the colour picker to work. Maybe simplify it to colour swatches and offer an advanced colour picker.

    • toscho 6:42 pm on August 27, 2012 Permalink | Log in to Reply

      What a pleasant voice. ๐Ÿ™‚

      It should be possible to change the site title in Appearance/Header without going to settings.

      And I think the pointer for media uploads is positioned a little bit too obtrusive. The Upload/Insert text is clear enough.

      • lessbloat 6:47 pm on August 27, 2012 Permalink | Log in to Reply

        The fact that she saw that is a bug. That pointer shouldn’t even be showing unless they click the “Add images/media” link under the right column “Learn how to” section. I’ll look into suppressing that pointer unless they click that link. This implementation is just a stop-gap until we figure out how we want to connect the two related pointers. I didn’t want that to stop me from starting to test users, so I made a quick work-around (which unfortunately was buggy). ๐Ÿ˜‰

    • Peter Chester 6:49 pm on August 27, 2012 Permalink | Log in to Reply

      I get so happy reading this! Rock on!!!

    • John Blackbourn (johnbillion) 7:07 pm on August 27, 2012 Permalink | Log in to Reply

      Where did the “Install a new theme” pointer that popped up on step 5 come from?

    • Diana 11:01 pm on September 9, 2012 Permalink | Log in to Reply

      Greate material! I would like to reinforce some aspects ๐Ÿ™‚ :
      This color picker is really confusing for most people, the tinyMCE text color is way more helpful providing some colors right on click .
      In Customizing panel, the itens should be separated by area such Header, Content, Background etc , though this is more a theme author approach?!
      Title and Description should stay within Header options, (not link to Settings).
      The “Insert into post” button should be blue.
      Most people access Dashboard instead using the left menu itens, then I think this panel should display icons/links for those panels with some short description. (People are afraid of going somewhere they can’t go back :D)

  • Helen Hou-Sandi 9:29 pm on August 15, 2012 Permalink

    Meeting summary for 8/14 

    Note: meeting on 8/7 did not really happen, as many were traveling or otherwise out of commission post-WCSF.

    Meeting was largely focused on status check of various items and really bearing down on assignments and breaking down tasks into what can be realistically accomplished within a given time period (the next week) so we can regularly check in. Setting the goal is not the maximum that can be achieved – only the minimum. Things finished early or with aplomb are highly encouraged ๐Ÿ™‚

    Reminder: devs should ideally be focused on one large item at any given moment. Working on your own pet projects and roaming around is always fine, but would prefer to stay away from overcommitment, especially for point people. This includes me ๐Ÿ™‚

    • Kurt Payne 6:51 am on August 16, 2012 Permalink | Log in to Reply

      @helenyhou I can help with #21391!

      • Helen Hou-Sandi 1:09 pm on August 16, 2012 Permalink | Log in to Reply

        YAY! I will hit you up soon, then. I’ve also got blobaugh, maybe jeremyfelt, maybe tw2113, and possibly tomauger (although I think he is on the ImageMagick stuff as well; trying to avoid doubling up).

    • Shane Pearlman 11:43 pm on August 16, 2012 Permalink | Log in to Reply

      Thanks Helen, stoked to participate in brainstorming. Will work on the document.

      Things that we often debate that would be fantastic to get guidance:

      • When do you combine content into a single meta panel in a post type vs create a new meta panel?
      • When do you create a new submenu vs combine into a submenu
      • What is the proper ux for condensing long settings / form content (tabs?)
      • Thoughts on advance form permutations > thinks like chosen and select 2 which are wonderful aids, but aren’t standardized
      • Inline documentation styles

      • Helen Hou-Sandi 12:38 am on August 17, 2012 Permalink | Log in to Reply

        To be honest, I don’t think it is possible to provide be-all-end-all documentation on the first four items. The documentation would amount to something like “do what feels right and makes sense for your situation” – we can’t possibly expect software-specific guidelines to actually teach what usability means and what creating usable interfaces entails. That’s the issue that I sense will be run into in the end: we can have guidelines for the WordPress community, and we can create awareness via guidelines, but they are not a proper medium for a crash course in human-computer interaction. However, I’d love to be proven wrong, so please do work on the document, and perhaps try to find a time to have an actual discussion beyond notes on said document.

        Inline documentation styles sounds like something that could be looked at, though, and current core usages documented and ideas proposed for extension cases those don’t cover. What we really need is to get bodies on http://dotorgstyleguide.wordpress.com/ (or move it somewhere we can put more people on) and work on items that fall under the current style guide umbrella directly.

  • Daryl Koopersmith 4:03 pm on July 30, 2012 Permalink
    Tags: ,   

    Media Wireframes 

    Over the past week or so, I’ve worked closely with @lessbloat (Dave), @nacin, and @markjaquith to create a set of media workflows that will hopefully serve as a foundation and guide for the improvements in this release. (This is the fifth version of these wireframes — you can see the first four on Dave’s site.)

    The usual disclaimers: None of this is final. These are wireframes, so please focus your feedback on the experience, not the aesthetics. As for scope, we are focusing our changes on improving the modal experience. This focuses on the overall picture; not all of this will necessarily make it into the final release.

    So, without further ado…

    Wireframes and workflows โ€”ย fullscreen recommended.

    The media library.

    The media library, while uploading three files.

    The attachment details screen.

    Relevant Trac tickets: #21390, #21391.

    • Scott Kingsley Clark 4:16 pm on July 30, 2012 Permalink | Log in to Reply

      Yes! WP 3.5 is easily the most anticipated release for me in a long while. This is beautiful!

    • Mel Choyce 4:18 pm on July 30, 2012 Permalink | Log in to Reply

      Looking good! I just noticed one thing missing — on the attachment details screen, there’s no longer an option for linking an image to a specific URL (like to another site).

      • Vitor Carvalho 4:20 pm on July 30, 2012 Permalink | Log in to Reply

        Maybe because you can do it in the editor, selecting the image and then click on “link button” which will give you more options than the ones you had before.

      • Andrew Nacin 4:22 pm on July 30, 2012 Permalink | Log in to Reply

        Not a deliberate omission โ€” thanks for pointing that out. We should definitely look into making that UI support a custom URL.

        • krogsgard 5:34 am on July 31, 2012 Permalink | Log in to Reply

          I’d love to see an option to link to the parent post as well (or current post if media won’t include a direct attachment relationship anymore). This isn’t included now, but it’s a great time to add the ability, or at least a hook, which I don’t think is there now.

          Absolutely incredible work y’all. This is really, really great.

      • Russell Heimlich 4:59 pm on July 30, 2012 Permalink | Log in to Reply

        +1 for this. We use this feature a lot. Uploading an image then copying the URL of the image for use in a widget or somewhere else. If it were easy to select an image from the media library and reference the URL in something like a widget, that would be great as well.

        • Daryl Koopersmith 5:14 pm on July 30, 2012 Permalink | Log in to Reply

          Ah, I think you and Mel are talking about two different things (using a custom url when linking the image to in the post, versus the showing the permalink to the image itself), but you also have a point.

      • bradyvercher 5:20 pm on July 30, 2012 Permalink | Log in to Reply

        +1 for me, too. I’d like to be able to save a custom URL for each image and have that available as an option when inserting a gallery. I’ve found it useful for linking thumbnails to PDFs or press photos to external websites.

      • Brady Vercher 5:39 pm on July 30, 2012 Permalink | Log in to Reply

        This is looking pretty sweet! Great job so far. I had a couple of thoughts that might be outside the scope of this refresh, but would be nice to consider:

        Embedding the media iframe directly on a CPT edit screen (or potentially the gallery post format) without having to open the media popup would be killer. Inserting a gallery into the post editor doesn’t always make sense.

        Allowing a target field for the “Insert” button would be quite helpful for inserting an image into a widget or option field. Being able to specify whether the image URL, ID, or maybe a JSON object is returned would be even better. And can the “Insert” label be filterable?

        I’ve found it fairly difficult to re-crop an automatically cropped thumbnail and have it link back to the original image.

        Anyways, I’m looking forward to seeing how this turns out!

    • Vitor Carvalho 4:19 pm on July 30, 2012 Permalink | Log in to Reply

      Fantastic concept! This new release will give us a good reason to not install any other gallery plugin. ๐Ÿ™‚

      • wlindley 12:42 pm on August 1, 2012 Permalink | Log in to Reply

        Unless you want to do something automatic, instead of manually. The AutoNav plugin, for example lets you resize thumbnails on-the-fly: [autonav display=”attached” size=”200×175″]… or sort by different fields (date, title), or automatically display the first few attachments, or display attachments from other posts according to their tags or category… things which are “reactive” as you change other things in the site, versus this UI which lets you manually control everything. Both can be useful.

    • Mert Yazicioglu 4:20 pm on July 30, 2012 Permalink | Log in to Reply

      I really like it, looks like the media management aspect of WordPress will finally get some love ๐Ÿ™‚

      One question though, what happens when an image is clicked seem to differ from one action to another. I personally prefer this method but would that confuse the new users is what is bugging me.

      • Andrew Nacin 5:16 pm on July 30, 2012 Permalink | Log in to Reply

        It does differ, for sure. But we also think this will be intuitive, depending on what the user is trying to do. The different actions are glaring in the slide deck, but I doubt it will be as obvious when you’re actually using it.

        There’s also a “Back” button, and we intend for these dialogs to be lightning-fast, not full page reloads, so it’s easy to return to where you left off.

        But that said, this will all get heavily user-tested. And so if we find that we need to make modifications to our hover/click/next workflow, we will adjust it for sure.

    • Ben Huson 4:20 pm on July 30, 2012 Permalink | Log in to Reply

      I think the wireframes look really good.

      I particularly like the status to indicate the current selection.

      Not 100% convinced on the infinite scrolling but that may just be because I am used to paging – I like having the option of being able to browse the image library but easily jump forward huge jumps, or to the last page etc.

      Noticed one thing missing – there is currently an advanced tab when you edit an image which allows you to change classes etc.

      Also, it wasn’t clear what “Create a Gallery” does and wether you can create multiple galleries?

    • Brian Richards 4:21 pm on July 30, 2012 Permalink | Log in to Reply

      This is AB-SO-LUTE-LY amazing! Great work to everyone involved so far!

      Flipping through these, I think you guys have covered the entirety of what I was hoping to see in the media upload enhancements. I’m very excited ๐Ÿ™‚

      As I was thinking about all the changes this weekend I pondered about the possibility of incorporating a drop-zone within the Featured Image metabox itself, so a user can drag-n-drop an image directly into the Featured Image metabox and it will upload and be set as featured. It’s likely this was already discussed somewhere and I missed it.

      If not, would you say that action falls in line with the rest of these changes?

      • Daryl Koopersmith 4:25 pm on July 30, 2012 Permalink | Log in to Reply

        Glad you like it! We’ve discussed integrating dropzones and other media bits outside the editor and decided that would be a bit too much for 3.5… but an easy first step will be to make the “choose a new x” buttons dropzones as well.

        As for featured images, depending on what we do with thumbnails, there’s a chance we’ll run them through the crop step as well.

        • Nick 9:17 am on August 10, 2012 Permalink | Log in to Reply

          If using a drop zone for the Featured Image metabox is too much for 3.5, might I suggest automatically setting the image as a featured image if the user opened the media window by clicking on the “Set featured image” link in the featured image metabox?

          The current workflow for setting a featured image (Click “set featured image”, upload the image in the media popover, scroll down and click “use as featured image” after it’s uploaded) is one that new users of WordPress seem to consistently trip up over, from my testing. (They forget the last step and wonder why the image isn’t listed as featured when they close the media window; they have already told WordPress that they’d like to set a featured image, after all.) Removing the need to click “set as featured image” would improve usability a great deal.

          Love the new changes, though. Great work!

    • Andrew Nacin 4:21 pm on July 30, 2012 Permalink | Log in to Reply

      I’ve had the opportunity to do in-person walkthroughs of this slide deck with a number of people who work with WordPress regularly, including @matt, a UX expert, a journalist, two developers, and a blogger. The feedback was overwhelmingly positive.

      It is great to have distinctive steps for the user, especially since they can jump into a specific dialog (such as jumping straight to the “Edit Media” screen from TinyMCE). However, when it comes to implementation, the screens are tightly coupled โ€”

      One question I was asked (@matt brought it up, in particular) is at what point does a caption save to the DB against the attachment, and at what point is it stored only in the post (and no longer syncs)? @markjaquith, @koopersmith, and I literally spent a number of hours discussing this issue, and how it relates to the usefulness of attachment pages, etc. I *do* think there is a way to implement this seamlessly and intuitively, without forcing users to make a decision on where, when, or how something gets saved. (It should “Just work.”)

      Ultimately, we’re just going to have to put our heads together to work this out. And so I intend to have a discussion and resolution on this at the WordCamp SF Hack Day on Sunday.

      You’ll note that “Title” and “Description” are now omitted from the Insert/Edit Media screen. That is intentional, given how ridiculous it is to have four fields here, when these two apply only to attachment pages. See #21391 on how we hope to improve this by separating the UIs.

      • Archetyped 6:00 am on August 6, 2012 Permalink | Log in to Reply

        Great wireframes and great discussion thus far! This is probably something that many have wanted to see get an overhaul (myself included). Here’s a suggestion for handling instance-based media properties (e.g. caption, etc):

        The main difference is that selected images are displayed at the top. This is done for a few reasons:

        • Images to be inserted are clearly defined – when selected images are inline with entire media library, they can easily get lost in the noise– especially with infinite scrolling.
        • Changing order of selected images is straightforward – it’s not immediate obvious to users how to change the order of the selected images when they are inline with the rest of the media library. Will I be able to drag them around? Will moving an image affect its position in the media library as a whole?
        • Instance-based properties are made available only for selected images – For example, caption property can set once the image is selected. There is no reason for it to be accessible prior to this and it is clear that the properties being set affect the current instance of the media to be inserted (i.e. not saved to the DB).
        • Enables multiple instances of the same media to be inserted – An edge case, yes, but it also removes an arbitrary limit on how a user can build their content.

        Again, great work all, I look forward to seeing this progress!

        • Archetyped 6:12 am on August 6, 2012 Permalink | Log in to Reply

          Just a quick note regarding handling large quantities of selected images in the top area. There are several potential solutions, a few of which are:

          Carousel/slider display – Horizontally scroll through images.

          • Pro: Maintains a fixed amount of vertical spaced used by selected images to allow for maximal area for browsing through media library
          • Con: Can take time to horizontally scroll through many images

          Expand-o button – Hide selected images until done selecting all desired images. Then hit button (e.g. placed near “3 images selected” element) and grid of selected images takes center stage.

          • Pro: Allows quick and easy management of large amounts of selected images and keeps selected images out of the way until needed
          • Con: Requires an additional click to manage selected images

          Horizontal Row + Expand-o button – A combo of the best of both worlds. Display a single row of selected images, but hide additional images when more items than can be displayed until the “show all” button is clicked.

          • Pro: Small amounts of selected images can be easily managed without any additional clicks
          • Con: Requires an additional click for large amounts of images
    • Isaac Keyet 4:23 pm on July 30, 2012 Permalink | Log in to Reply

      Amazing work here. Even without a complete overhaul, the main window for browsing existing media library content or uploading new, which also combines a “shortcut” to create a gallery would be enough of an improvement going into 3.5.

      Some things I noticed/wished for while viewing the slideshow:

      • Edit image modal should probably have a Delete button to keep it consistent with the zoomed out view and it’s options – if Edit image is the expanded options it should have the same functions as the thumbnail and then some.
      • Since every upload to WP adds the media to the Media Library, it would make more sense (and save space) to have the “drop area” be the first item in the list from the media library, it would also help make the transition to showing uploads in progress make more sense.
      • Love the insert media button from the post editor itself, that addition in itself is a huge step towards increased usability. I’d argue it should be a part of the formatting toolbar though – especially if we’re going to fork TinyMCE.

      More to come, will need to let this settle for a bit.

    • Devin Reams 4:27 pm on July 30, 2012 Permalink | Log in to Reply

      Cool stuff, great work everyone.

      One question I was asked (@matt brought it up, in particular) is at what point does a caption save to the DB against the attachment, and at what point is it stored only in the post (and no longer syncs)?

      We often have the same problem (training) when a ‘description’ or ‘caption’ is something dynamic (saved to db) and can be used consistently versus inline (when inserted)

      I also see a little bit of headache not being able to set the ‘Featured Image’ from the Insert/Upload screen as this is a pretty common workflow (again, training) that folks use: Upload > Set as Featured. Or Upload > Find image > Set as featured. Keeping in mind that some folks use multiple ‘Featured’ slots, too.

    • Scott Kingsley Clark 4:30 pm on July 30, 2012 Permalink | Log in to Reply

      Do we know yet how extensible this new UI will be from a plugin standpoint? Will the Media editor form be given proper hooks for adding additional fields? The current filters really stink and I bet we could do something much better during the dev of the new UI.

      • Andrew Nacin 4:35 pm on July 30, 2012 Permalink | Log in to Reply

        The priority is going to be keeping the current filters working, which isn’t going to be a cakewalk. But yes, this will be extensible.

        • Scott Kingsley Clark 4:36 pm on July 30, 2012 Permalink | Log in to Reply

          Excellent, that’s music to my ears, I’ve been working closely with these filters and know of their many failings, looking forward to seeing what we can put together that supports the old filters as well as improving upon them for the new UI’s needs.

    • Helen Hou-Sandi 4:39 pm on July 30, 2012 Permalink | Log in to Reply

      On the accessibility front (since I’ve promised to keep an eye on it):

      • We need to make sure that everything is accessible, both via keyboard and assistive tech. Not sure if we’ll be able to make it absolutely perfect, especially without more help and expertise, but we should definitely not be neglecting this during feature dev.
      • There needs to be an alternative (or a change) to important interactions/reveals that rely on hovering. Again for non-mouse users, and also including touch devices.
    • Sami Keijonen 4:57 pm on July 30, 2012 Permalink | Log in to Reply

      Looks great! I’ve been wondering can images be also filtered by author? I have magazine with students (authors) and they upload a lot of (unnecessary) images. It would help if they could filter they own images or admin could do it. This might be out of scope here.

      • Daryl Koopersmith 5:03 pm on July 30, 2012 Permalink | Log in to Reply

        Interesting thought. We hadn’t discussed adding filter by author, but depending on how the sort/filter/search UIs turn out, it might be feasible. If not, we should make this easy to do with a plugin.

    • RDall 4:57 pm on July 30, 2012 Permalink | Log in to Reply

      I would absolutely love to be able to type in the width and get the constrained proportion. So many times I have typed in 150 width only to see the height doesn’t change as wellโ€ฆ

    • DrewAPicture 5:12 pm on July 30, 2012 Permalink | Log in to Reply

      This is a really good iteration and I’m looking forward to seeing more.

      One inconsistency that kind of sticks out for me is the ‘Edit’ button vs the edit icon button. In some places you click the icon, in some places you get both the icon and ‘Edit’ but then you’re clicking ‘Edit’ and not the icon. Personally, I’d prefer we stick with one or the other. My vote’s on the icon ๐Ÿ™‚

      Per the ‘captions to DB’ discussion, why not just run some kind of ajax autosave?

    • Mark McWilliams 5:16 pm on July 30, 2012 Permalink | Log in to Reply

      It’ll be good to see the wireframes make their way into Core! ๐Ÿ™‚

    • DrewAPicture 5:17 pm on July 30, 2012 Permalink | Log in to Reply

      I’m curious about the thinking behind moving the drag-n-drop zone from right (Dave’s 4th iteration) to the left (this iteration). I kinda like it better on the right, myself.

      • Daryl Koopersmith 6:22 pm on July 30, 2012 Permalink | Log in to Reply

        We moved the dropzone to bring more balance to the UI. All of the primary actions are aligned in the top right of the selection UI so aligning them with the right edge and bringing them closer to the dialog close button makes them more prominent. Also, when uploading is involved, it usually is the first step a user takes, so it makes sense to align it on the left side of the screen, where a user will see it sooner.

        • Dominik Schilling (ocean90) 8:05 am on August 1, 2012 Permalink | Log in to Reply

          Maybe we could use the dialog itself as a dropzone, so that it’s not necessary to drop it specific to this small box on the left side.

          If you have a big screen the browser is normally on the left side and the file explorer or desktop on the right. Yet you have to drag your file from right to the far away left side, which isn’t the best usability I think.

    • Chris Jean 5:18 pm on July 30, 2012 Permalink | Log in to Reply

      This is eerie. Really, really eerie. I talked with my coworker last week about a better Media Library screen, and this has all the key elements I talked about. So very, very weird.

      I’m excited. Please oh please let it be easy for non-core developers to use the full functionality of it.

      From the mockup, it looks like we will finally be able to create galleries with media that is not directly attached to that content. If we can make this happen, it will be awesome. I tried to make a gallery site for an artist friend of mine, and that limitation made me use a plugin when 95% of everything else was built into core.

    • zekeweeks 5:26 pm on July 30, 2012 Permalink | Log in to Reply

      I love the seamless flow between upload/select, gallery and image details, and insertion. And the contextual reactions between “insert single” and “insert gallery” are a huge usability plus. Very excited about this.

      One worry I have is on slides 12 and 13: https://speakerdeck.com/u/koop/p/wordpress-3-dot-5-media-wireframes?slide=12 . When one image is selected, we have two “insert” buttons which do the same thing- one persistent one at the top, and one on the individual image. However, when we have more than one selected (slide 13), the top button contextually switches to provide “insert gallery” functionality, but we still have an “insert” button on each individual image.

      I worry that this will create two problems:

      1. When selecting a single image, users may not notice the “insert” button on the top, and therefore never notice that it switches to support a gallery when multiple images are selected
      2. Worse: when intending to select multiple images and create a gallery, clicking “insert” over an image will lose their selections and take them into details for the insertion of just one image without even realizing it.

      For these reasons, I’d lean toward getting rid of the “insert” buttons over individual images altogether, and make the button on the top right be a consistent, universal button that is the “next-step-here” button for all contexts. However, this issue could be addressed other ways (only showing “Insert” for single selections, making “Insert” react as a gallery when multiples are selected, etc.)

      • Andrew Nacin 8:58 pm on July 30, 2012 Permalink | Log in to Reply

        I was strongly for the individual Insert buttons for a few reasons. Without them, I think the ease in which you can select multiple images (particularly since you can scroll so a selection is outside the viewing area) could cause people to create galleries when they don’t want to. They would need to clear the selection and then look around again to select the single image they originally wanted to insert.

        Note that we deliberately chose two different verbs: The current “Insert” into post, versus “Create” a gallery. Now, maybe that isn’t enough. This is all testable โ€” we’ll find out during user testing. We can figure out what works and what doesn’t, and adjust the button placements, strings, and the like.

        We could also consider showing the selection status bar only once you have two images selected, and have individual insert buttons otherwise. I think this change could handle all of the issues we’ve both highlighted. Very good points, thanks for the feedback.

    • RDall 6:04 pm on July 30, 2012 Permalink | Log in to Reply

      Hey guys one thing. You know how you can show the amount of post to show in the screen via “Screen Options” Can we add that to the media library? Once I got a site that have 100 or so images scrolling through them wasn’t that easy and the search was only good if I remembered what I named it. (And some days my naming convention was better then othersโ€ฆย )

      • Andrew Nacin 6:09 pm on July 30, 2012 Permalink | Log in to Reply

        If you go to Media → Library, Screen Options currently does have the ability to change the amount of items shown. And in the dialog, it’ll be infinite scroll. What am I missing?

    • RDall 7:22 pm on July 30, 2012 Permalink | Log in to Reply

      You guys rock! That will be awesome!!!!!!!!!

    • MartyThornley 8:26 pm on July 30, 2012 Permalink | Log in to Reply

      This all looks awesome! One thing I noticed is that you either insert one image or insert a gallery. There are a lot of uses for inserting multiple images, yet not in a gallery, especially for photobloggers who write a few words then say, here are ten images… And they just show ten images one after the next. Adding that option to the “Insert” buttons would be great!

    • ChaseWiseman 10:44 pm on July 30, 2012 Permalink | Log in to Reply

      First of all, great work. I am very excited about this. One question: is there any reason the Featured Image dialog can’t get the same cropping features as the Custom Header dialog? Both the custom header and featured image sizes are defined in a similar fashion. It would be nice to choose which area of an image you want to use as the Featured Image.

      • Daryl Koopersmith 10:54 pm on July 30, 2012 Permalink | Log in to Reply

        We’ve discussed it and might do just that. It depends on how the image editor (discussed above) turns out.

        • DrewAPicture 4:31 pm on July 31, 2012 Permalink | Log in to Reply

          This would be a really ‘good-to-have’ feature. Most of the time we’re using resized thumbs on archives and cropping from center on vertical images or images where faces are near the top is frustrating when it’s forced from the center. Being able to manually crop would be fantastic.

    • nhuja 3:49 am on July 31, 2012 Permalink | Log in to Reply

      Great work. Having been solely into Photography themes, this is an awesome development. I always thought media management was the weakest part of WordPress. And I was planning to develop this on my own as well. ๐Ÿ™‚ I would love to know how these things are addressed or can be addressed:

      1. I see the Create New Gallery option which is great. So, will there be a link where we can manage those Galleries (Albums), list of galleries available? Like delete an image or add another image to the gallery ?

      2. Can one image be assigned to multiple galleries ? Currently it doesn’t allow unless we do shortcode cheat (I think). Also, if we are viewing the Media Library view (list of images), in the grid style, it might be great if there is a “belongs to X gallery”.

      3. Can we insert one gallery to multiple posts ? Now this is one prime feature I get requests from customers. ๐Ÿ™‚

      Thanks, I am really looking forward to this development. ๐Ÿ™‚


      • lessbloat 12:06 pm on July 31, 2012 Permalink | Log in to Reply

        1) Yep. The idea is that once you add a gallery to the editor, you can click the edit button on that gallery in the visual editor mode, and add/remove images from that gallery.

        2) Yep, any image will be able to be added to any gallery.

        3) Perhaps. I’m not certain this has been worked through at the stage, though I agree this would be nice. ๐Ÿ™‚

        • nhuja 2:10 am on August 1, 2012 Permalink | Log in to Reply

          Awesome. Thanks for confirmation. ๐Ÿ™‚ Is there anything I can help with? ๐Ÿ™‚

    • Konstantin Kovshenin 4:41 am on July 31, 2012 Permalink | Log in to Reply

      This is just awesome! I’m glad that media management is getting some serious love in this release. Great work everyone!

    • thenbrent 6:53 am on July 31, 2012 Permalink | Log in to Reply

      This looks fantastic, thanks for all the hard work you’re putting in to get media handling right.

      When opening the Insert Media dialogue, will it display *all* media, or just those attached to the post? I’ve had complaints from users in the past about different tabs for all media and media uploaded on the one post.

      The Insert Gallery looks identical to the Insert Media. This could lead to occasional disorientation. But that’s nothing a different shade of grey or some other bit of CSS wouldn’t fix.

      • Andrew Nacin 2:43 pm on July 31, 2012 Permalink | Log in to Reply

        It’ll display all media.

        The two screens do look similar, yes, but these are only wireframes, not designs. I too have noted that disorientation is possible here. We will make sure the screens are designed with that in mind.

    • andyadams 1:42 pm on July 31, 2012 Permalink | Log in to Reply

      For some reason, my last couple of comments never made it through, so I’ll try reposting the general idea:

      I like the improvements, but have you considered ditching the modal window for something less obtrusive? Perhaps something more like the Theme Customizer that pops out on the lefthand side?

      I say this because 2 major problems I have with modals are:

      • Loss of context of the content editor.
      • Difficulty in inserting multiple single images.

      Having a modal take over the whole screen makes inserting media feel like a completely different operation than writing your content, and I feel like the two tasks could potentially be toggled in a less jolting way. This would make writing your post with lots of media a much smoother process.

      • Andrew Nacin 2:42 pm on July 31, 2012 Permalink | Log in to Reply

        We’ve discussed ditching the modal window for years. Literally, here’s some sketches from @jane from October 2009.

        I used to be squarely in the I-want-my-media-inline camp, but I’ve adjusted that a bit. Certain actions should actually be blocking. Also, since we’re aiming for a super-fast dialog that remembers where you were, speed should not be a factor in repeated actions like inserting multiple images. As the dialog will likely be movable (like internal linking), context also becomes less of a problem.

        Perhaps over time, more things move inline. Uploading, for example, should not be a blocking action. But our goals for 3.5 include separating out the overlapping and confusing workflows, which means individual, contextual dialogs. Moving everything inline at once would be a huge challenge of balancing a desire to create distinct workflows with a small space to work with.

    • Dominik Schilling (ocean90) 2:03 pm on July 31, 2012 Permalink | Log in to Reply

      I really like this wireframes, great job.

      One question, is it planned to be able to adjust the image size (maybe via a slider) or to get a list view?

      • Andrew Nacin 2:24 pm on July 31, 2012 Permalink | Log in to Reply

        We did discuss the slider idea! We didn’t include it in the wireframes, but it would be a great enhancement to this.

        List view, I am not sure โ€” depends on whether it can be designed to be useful. I would think that the view area itself would be pluggable.

    • sanchothefat 2:06 pm on July 31, 2012 Permalink | Log in to Reply

      What considerations are there for other media types? In particular video and audio.

      I can understand the desire to leave creation of things like playlists to plugins but the above wireframes are purely image focused. Will non image files be treated in the same way visually?

      Also how will the above wireframes cope with how the media upload tabs can currently be extended by plugins? For example the ‘Upload’, ‘upload from URL’, ‘Gallery’ and ‘Media Library’ tabs that there are currently? That ability is crucial to some of my plugins.

      • Andrew Nacin 2:48 pm on July 31, 2012 Permalink | Log in to Reply

        This will be pluggable, which means a video could show a single frame, audio could have an embedded player, PDF documents could have an image thumbnail, etc. But by default, non-image files will likely be greeted with a generic icon/thumbnail โ€” images first, then everything else.

        I am not yet sure how we will handle tabs added by plugins. What are some examples you have seen or used?

        • sanchothefat 3:20 pm on July 31, 2012 Permalink | Log in to Reply

          That sounds fine re. the handling/display of different media types – it’s pretty much what happens now and I agree you’ve got to prioritise this stuff!

          A good example of using media upload tabs out there in the wild that’s widely used would be the JW Player plugin – it lets you create playlists in one of the tabs it adds. https://wordpress.org/extend/plugins/jw-player-plugin-for-wordpress/

          Also currently I’m working on a plugin that splits out media by type – it doesn’t make a whole lot of sense that all attachments regardless of type appear under ‘Gallery’. My plugin creates tabs for Audio, Video and Other and for audio and video it has a form at the bottom for inserting a playlist shortcode similar to the way galleries are inserted currently.

          I think the new wireframes are great and show a huge improvement to creating & embedding galleries but if possible it’d be good to have some way to see what attachments you’re looking at by source (post/media library) and then also to have them separated by type – Image / Video / Audio / Other.

          Say I’m looking at audio attachments only – the add to gallery button could become ‘Add to playlist’ (assuming it’s feasible to code the gallery functionality in a generic way rather than strictly coding for images). I’d at least like to be able to plug that in if possible.

          Sorry for rambling! Just getting my thoughts down – check out the JW Player plugin anyway

    • Anthony Hortin 2:22 pm on July 31, 2012 Permalink | Log in to Reply

      Wow. Great work guys! This is looking seriously sweet. Some really nice improvements to the workflow.

      One thing I’d love to see, as @bradyvercher touched on briefly up above, it would be great to be able to link each gallery thumbnail to a individual url. It’d make the gallery functionality much more versatile.

      Looking forward to seeing some or all of these improvements in the next release. Keep up the geat work!

      • Sheri Bigelow 1:59 pm on August 1, 2012 Permalink | Log in to Reply

        Linking gallery images to outside URLs is a fairly-common request on WordPress.com.

        • Ipstenu (Mika Epstein) 2:04 pm on August 1, 2012 Permalink | Log in to Reply

          But is that even really a good idea? Too many people don’t know about the dangers of hotlinking as is, and encouraging it …. Okay, I know a lot of that is my buggaboo, but it seems like a bad idea. If flickr etc allow it, then that’s a plugin use-case, so I can see making it pluggable/hookable so a plugin can grab onto it, but I really would hate to see external image inclusion overtly included in core.

          • Anthony Hortin 12:30 am on August 2, 2012 Permalink | Log in to Reply

            I wasn’t actually meaning the ability to include external images. I meant that it would be good to be able to link the thumbnail images to a specific URL (ie. other than just the larger version of the image or the attachment page). For example, It would be handy to have a gallery of 5 images that link to 5 different pages on your site.

    • Ryan Hellyer 7:48 pm on July 31, 2012 Permalink | Log in to Reply

      This looks really slick.

      I’m not sure it fits into this particular area of core, but some sort of system to allow us to move attachments between folders would be darned handy. It gets really messy handing large numbers of images if they’re just chucked into folders based on the date they were added.

    • Reji Thomas 8:52 am on August 1, 2012 Permalink | Log in to Reply

      This is excellent work!

      Some thoughts:

      • The Gallery workflow could have some extensions. At ‘Create/Edit’ Gallery, show Gallery Title and Description fields, above the Display Properties settings.
      • Bring Gallery Management under the Media > Library. Add an additional listing type ‘ Galleries’ and enable it to be searchable (based on the above). That way a user can quickly identify galleries attached to posts or post types
    • John Smith 9:10 am on August 1, 2012 Permalink | Log in to Reply

      Looking very, very nice.

      The only thing I had hoped was that the insert button would be moved down into the actual WYSIWYG toolbar. Any reason why we keep it at the top, it’s a little confusing for first-time users until it’s pointed out.

    • wycks 12:38 pm on August 1, 2012 Permalink | Log in to Reply

      Please consider adding some of the gallery options (https://codex.wordpress.org/Gallery_Shortcode) into the actual UI .Most end -users do not even know about them.

      Also please add as many filters as possible for developers, for example ‘image_size_names_choose’ for the size dropdown, which should work with add_image_size.

      Looks awesome can’t wait because this improves everyone’s experience with wp!

    • Sheri Bigelow 2:39 pm on August 1, 2012 Permalink | Log in to Reply

      The Edit Image dialogue seems to be missing, specifically: crop, rotate, flip, and scale.

      • Sheri Bigelow 2:41 pm on August 1, 2012 Permalink | Log in to Reply

        I just realized this is in the media library, not the Upload/Insert media workflow. Sorry!!

        • Andrew Nacin 2:44 pm on August 1, 2012 Permalink | Log in to Reply

          This screen is reachable from an “Edit Image” button, and buttons to this screen appear in a number of places. But no, we haven’t mocked up the screen yet.

          • Sheri Bigelow 2:50 pm on August 1, 2012 Permalink | Log in to Reply

            Aha, gotcha. It does seem like these are advanced image edit options and some of the things you were planning to cut (i.e. border, target, file URL) might make sense to keep here while removing duplicate edit fields (i.e. title, caption, description).

            • Andrew Nacin 3:16 pm on August 1, 2012 Permalink | Log in to Reply

              Well, they’re two different workflows. The fields we want to cut are glorified HTML controls that have to do with how an image is presented/displayed in a post. This screen is about modifying the image itself โ€” scaling, cropping, generating thumbnails, etc. Conflated fields and windows are what we’re trying to get away from as much as possible.

    • Jonathan Davis 3:13 pm on August 1, 2012 Permalink | Log in to Reply

      On the image dropzone positioned to the left, I realize it is likely a decision based on the most economical use of the space and allowing a clear visual prompt for the user to put it one side or the other. For usability, having it stretch across the bottom (or top) horizontally provides better drag access regardless of the user OS (regardless of whether the host OS keeps files on the left or right). I realize that the vertical screen realestate is at a premium. That makes it a decision of priorities. Is the drag access from left or right important enough to take up that vertical space? Is there a balance in height/size of the dropzone horizontally that won’t chew up too much space but is large enough for clumsy drags? Is left or right enough of a hindrance on usability to be worth taking up vertical simply for the sake of universal access from one side of the browser or the other?I’m not advocating one way or another, just bringing it up for the sake of discussion. Question everything and all that.

      Aside from the problem of the “prompt” (how you prompt the user) with the dropzone, it would be ideal if the entire modal were a dropzone, understanding that may not be possible with how pupload’s mecahnism works, or that it might interfere with the rest of the UI. Still I wonder (thinking out loud) if you could detect the mouse drag and setup the drop zone over top the entire modal area. Probably too divergent a thought to gain traction, but thought I’d share my musings anyhow.

      Good work team. It really is very well thought out. It will be very interesting to see how the user tests go.

      • Daryl Koopersmith 7:20 pm on August 1, 2012 Permalink | Log in to Reply

        …it would be ideal if the entire modal were a dropzone…

        It wasn’t shown in the mockups, but this will indeed be the case. It’s certainly possible, and just a matter of getting the UI right.

        • Jonathan Davis 6:42 pm on August 2, 2012 Permalink | Log in to Reply

          Well, there you go then. That makes most of my earlierr usability feedback moot. No need to take up precious vertical space on the prompt if the entire modal is a drop zone.

    • gabediaz 3:28 pm on August 1, 2012 Permalink | Log in to Reply

      This is fantastic, really great to see all these wireframes and can’t wait to see more.

      Just want to ask if there was any thought about providing a List View with Order Number option when editing/sorting a gallery?

      Starting with Slide 55 the only way to rearrange gallery images seems to be with a drag and drop. This works great for smaller galleries but with larger galleries you’ll find yourself dragging up/down through several slides of your infinite scroll. The currently Media Gallery Screen allows for sorting via order numbers which you can quickly tab through and manually sort with a number.

      Keep up the great work!

      • Daryl Koopersmith 7:27 pm on August 1, 2012 Permalink | Log in to Reply

        Just want to ask if there was any thought about providing a List View with Order Number option when editing/sorting a gallery?

        We will certainly have to hone the sorting UX. I’m not convinced that manually typing in order numbers is the best possible experience (or necessary). We also will support keyboard-based image organization (with arrow keys). That said, this should be possible in a plugin regardless.

    • Maor Chasen 8:13 pm on August 1, 2012 Permalink | Log in to Reply

      Wow, what a great work. Can’t describe in words how excited I am to see this great progress!

    • bakaburg1 1:25 am on August 2, 2012 Permalink | Log in to Reply

      Maybe this is more specific to mac users since stuff tend to pile up on the right side of the desktop, but when i drag and drop stuff I use to mouse in from the right of the window. I wouldn’t find it nice to drag all the way to the other side of the screen.

      I would then suggest to put the drop area, if not on the right which wuold be best for me, on the bottom center, large as much ad the panel, so that you don’t have a preferred dragging side, but this is left up to the users.

      HWR extremely nice work! especially being able to drag directly in the editor!

      One more thing I would is to be able to resize pictures directly in the editor, with text moving away during resizing. Pretty easy to achieve with javascript.

      Is still possible to use external images with URLs?

    • Maor Chasen 12:33 pm on August 3, 2012 Permalink | Log in to Reply

      Hi, just wanted to ask with what software did you guys create these wireframes? Looks amazing! Thanks!

    • MacItaly 4:28 pm on August 3, 2012 Permalink | Log in to Reply

      Hi, great work indeed, Media Library needs a deep remake.
      But nobody are interested to upload and organize files in folders/subfolders?
      WP isn’t anymore only a blog and many people use it as CMS and, in those cases, have media organized per year and month it’s useless and have all of them in one folder it’s confusing.
      Should be possible to have an option, on media settings, to enable a folders manager?
      Something that when I upload one or multiple files, I can choose in which folder will be.
      Does it make sense?

    • Dennis Whiteman 7:14 pm on August 3, 2012 Permalink | Log in to Reply

      Will it be possible when creating a new gallery or uploading files to manage the upload location in the file system in the upload UI? I have some sites with thousands of posts and thousands of images. If I use the built-in media uploader, I end up with thousands of files in a directory. It would be nice for end users to have the option of uploading images within the media upload directory to a new folder with a name of their choosing instead of being limited to segmenting out files only based on date as is currently the option. Another example is that I have a bunch of images that I’d want in a directory called ‘images’ and podcast audio files in a directory called audio, etc.

      This is particularly a problem when migrating from another CMS where the files have been manually uploaded for years. Without some choice in where files go, I usually end up having the client continue to use an ftp program to upload instead of getting the benefits of having an actual media library with meta data that’s provided in WordPress.

      I have conceptualized being able to choose a folder on upload within the existing uploader, but it would be so much better if it were just builtin.

    • lonchbox 11:37 pm on August 4, 2012 Permalink | Log in to Reply

      Hi!, finally! that part of the WP was too old, all my clients will love this new feature ๐Ÿ™‚ Good Job!

    • Ayman Aboulnasr 9:41 am on August 5, 2012 Permalink | Log in to Reply

      Wow, a very interesting new facelift to the WordPress Images and media handling! Well done guys.

    • Jan Fabry 1:25 pm on August 5, 2012 Permalink | Log in to Reply

      Have you considered making the individual edit dialog (alignment, caption, alt text, …) non-modal? I was thinking of a floating widget, that would only appear when you have selected an image in the post editor. This gives you instant feedback (alignment, size), and could be extensible (so plugin and theme authors could add or hide controls to suit their client).


      This could also solve the problem of “saved in the db/saved in the post”. Everything you edit here is just for this post.

    • hearvox 3:46 pm on August 6, 2012 Permalink | Log in to Reply

      This beautiful new Media rewrite might also be an opportunity to look at the way the attachment’s Title text is auto-used in two different ways.

      1. As the post_title of the attachment post, which then is used:
      a. in the Media Library’s column “Title”, and
      b. in many Themes, as HTML text for the H1 and head’s title elements, when displaying the attachment post.

      2. As the title-attribute of the img element when using the “Insert into Post” button.

      #1 is expected behavior, and makes sense-
      an attachment’s Title is meant to be the document title, like any other post..

      #2 is hidden to many users and can make little semantic sense.
      an img’s title attr should: “offer advisory information about the element” (w3c).
      this is often NOT the same as document title

      Perhaps WP might consider adding a field,
      so there’s one for each of the two different “titles”, like:

      Attachment Title * ___________
      Alternate Text __________
      Image Title Text _________

      (and like “alt”, the img “title” wouldn’t be written if this new last field was empty).

    • Bruno Costa 8:51 pm on August 6, 2012 Permalink | Log in to Reply

      I think you only forget the image link.

      The layout is very beautiful, I only think all this page changes won’t please a lot of people.

    • John 5:39 pm on August 8, 2012 Permalink | Log in to Reply

      Are these rewrites going to be adapted to the Media Library screen itself ( upload.php )?

    • fanderzzon 9:23 am on August 13, 2012 Permalink | Log in to Reply

      Great work, it’s looks amazing!

      How is the search function working? Are you adding AJAX search so the user automatically get a list of objects/images that matches their search query on the fly?

    • Peter Chester 3:37 pm on August 15, 2012 Permalink | Log in to Reply

      Great work Daryl!

    • hixen 12:49 pm on August 16, 2012 Permalink | Log in to Reply

      This is really awesome, great work.

      Just got one question, are you guys looking into adding more ways to structure your media library? (tags, categories?)

    • jamesmehorter 7:29 pm on August 22, 2012 Permalink | Log in to Reply

      I would LOVE it if galleries/albums did not need to be linked to a specific post.. but could be if wanted. Many times this is the only reason I will choose NextGen Gallery. PLEASE make NextGen obsolete!

    • Jesper van Engelen 4:36 pm on August 24, 2012 Permalink | Log in to Reply

      I am very pleased to see that some major changes are finally being made to the media UI, great work on that! I am wondering though: in what way will this affect the countless plugins that change the media interface currently. Many plugins add buttons to the media interface for allowing users to upload media for use in their plugins. This includes many popular plugins such as Advanced Custom Fields and Option Tree – to what extent will these plugins be affected by these changes?

    • kkalvaa 1:16 pm on August 25, 2012 Permalink | Log in to Reply

      Looks amazing, as people above has said, this alone makes 3.5 one of the key releases to look forward to.

      I think the drop zone should be on the right, in a RTL setting it feels like the second step should be to the right rather than the left.

    • deursmo 11:15 am on August 26, 2012 Permalink | Log in to Reply

      This looks great. Discussion here is too โ€˜technicalโ€™ for me but a question about using images in multiple posts. Will it be possible to see in which posts (and pages) one particular image is used? From the editorโ€™s point of view? I donโ€™t mean (nor use) galleries, but perhaps that is the answer. Thanks for all you people make, good whishes.

    • ms-studio 7:59 pm on August 26, 2012 Permalink | Log in to Reply

      I love that concept, it’s pretty much the best system I could imagine. But I have one big question: how is the default ordering of uploaded files being handled? To me, this is a weak point in the media management, and must be improved.

      Currently, the default is “by upload order”, which means that if you upload a bunch of pics from a photo camera, numbered from 00001 to 00020, the last one (00020) will be on top, the first one (00001) will be at the bottom (because the OS tends to send 00001 first).

      If you want a chronological gallery, you need to reorder them each time.

      Personally, I mostly want the files inside a batch upload to get ordered by filename – 00001 on top, 00020 at the bottom. But if I add a second batch of files, I want them to be added at the bottom of the list! So it’s a very tricky issue to solve …

      I just openend a thread on that topic in trac – https://core.trac.wordpress.org/ticket/21643 – but I believe it’s more appropriate to continue the discussion here.

    • ms-studio 8:31 pm on August 26, 2012 Permalink | Log in to Reply

      Just a few more words about the “default ordering” issue.

      The wireframes show the ordering option “Sort by upload date”, so I assume that could be the default.

      • Is this really the best default? How is that “upload date” determined if the user batch-uploads multiple files at once?
      • Do we have any stats about how people tend to order their images, in image galleries? Chronologically? By upload date? By file name?
      • “By upload date” doesn’t actually tell what direction is applied. Newest first, or oldest first?
      • If the user changes that setting (let’s imagine that she prefers alphabetic ordering), we must make sure that WP remembers that change and applies it for future uploads.

      To understand the problem I see with the current setting, have a look at that quick demonstration in WP 3.4:

      And see here the (much more intuitive) behavior in Facebook:

  • lessbloat 5:52 pm on June 27, 2012 Permalink
    Tags: ,   

    It’s summary time.


    We’ve run 3 users through the same set of scenarios (via usertesting.com). You can review the results here, here, and here.


    Now… What exactly are we trying to accomplish with all of this?

    It’s important to note that we have to think about these discoveries in the context of the typical WP user. But to be honest, I’m not entirely sure I know what the “typical WP user” looks like (but I hope to dig into that over the next couple of months ;-)). Sure, I have assumptions, as I’m sure you do, but my assumptions aren’t backed by any sort of data.

    The important thing to keep in mind here is that these 3 people were paid to perform a list of tasks. While we can benefit from watching their interactions (and looking for patterns of complexity/confusion), we need to recognize that the flow they follow is prescribed, and likely different in some ways from an actual user.

    Overview of discoveries

    Here’s an unfiltered list of observations across all of the tests:


    • Had trouble figuring out how the color selector worked (x3)


    • Unsure what “QuickPress” was
    • Unsure where “1 post”, “1 page” came from under “Right Now”
    • Had lots of trouble finding a link to view their site

    Media Upload

    • User clicked “Select files” when they actually had a URL to paste (and should have used the “From URL” tab). (x3)

    Post Add New

    • Lost all changes when she clicked a link taking her away from the new post page (after already making some changes)
    • Didn’t notice “Insert into post” button when adding an image in the media modal
    • Clicked “Preview” button, but didn’t realize a new tab had opened (causing confusion)
    • Doesn’t appear to be a clear path for users that just wish to post a photo


    • Had trouble knowing where to go to change her site title (x3)


    • User didn’t notice links in toolbar (x2)
    • User never noticed “+ new” dropdown (x2)
    • The blog dropdown menu is completely different when in the admin vs. on site (should it be?)

    Twenty Eleven

    • Confusion over why the header image was changing (x2)

    Next steps

    This is where I need your insight/input.

    1) First, is there anything that you noticed that’s not on this list?
    2) Next, which of these do you think we should attempt to address (are there any quick wins that would benefit all WP users)?
    3) If you had to prioritize your list, what would you tackle first?

    I’ll hold off for a day before I post my thoughts. Don’t be shy! ๐Ÿ˜‰ I’d love to hear what you think.

    • Drew Jaynes 12:53 am on June 28, 2012 Permalink | Log in to Reply

      1) Something I think that is starkly missing is mention if the seeming importance of the Welcome Screen and the way in which these 3 users relied so heavily on it. The users weren’t dismissing the screen and using the Dashboard so much as returning to it over and over for guidance.

      2) I think one quick win would be to revisit the “Add Media” button. I know I’ve seen some discussion on trace of a labeled button or a larger icon. Another option might be something like an idea suggested by @kovshenin for dragging media directly into the editor. On the topic of the ‘site title’ issues, it seems like we’re moving more and more toward consolidating settings and previews into the Customizer. Perhaps some clearer verbiage on the Welcome Screen about what the Customizer is for (and some pointers once you get there) would be more helpful.

      3) Not to rehash too much, but I’d say 1) Add Media, 2) Clearer connection between Welcome Screen & Customizer.

    • Helen Hou-Sandi 10:15 pm on June 28, 2012 Permalink | Log in to Reply

      1. Maybe I missed it, but I didn’t see any mention of the featured image/post thumbnail functionality – there are quite a few tickets already about how weird and difficult that workflow is.

      2. More prominence for the Customizer and a consolidation of all of those items into the same admin menu rather than spread out between Appearance and Settings seems like a relatively quick win. Or even duplicating menu items. Would also *love* to find a better color picker – Koop and I have discussed this in the past.

      3. Besides the featured image thing, which I’ve talked about several times, I’ve been contemplating a reworking of the dashboard to become more useful – I think I called it “more mission control, less info center”. Full editor + post formats (would help with quick posting photos, much like the iOS app does) for Quick Press, better/prettier information about basic site/post metrics (including all other public post types), etc. This would also hopefully roll in the nice things the welcome panel does – a guide to getting things done for first-timers, as well as quickly enabling power users to get where they usually need to go. For instance, I could see items like “Edit the home page” for a site that has a static front page assigned.

    • Chelsea 12:08 am on June 29, 2012 Permalink | Log in to Reply

      1) I think the “Settings” issue can be expanded to an overall organization/delineation between “Settings” and “Appearance” (as @lessbloat mentioned in an earlier user test writeup). It might be worth thinking about doing user tests specific to figuring out which part of the admin users generally look for things like “Site Title” “Header” “Language” etc. Its something I see a lot of people struggle with when setting up a new WordPress site.

      2) I second @helenyhou on making the Customiser more prominent. It could also go a long way with giving insight on how to address the problem I mentioned in #1.

      3) I would prioritize rehashing the media flow/making it easier to create media-heavy content above everything else. Its what we get criticised for the most and I think its the biggest thing other CMSs have over WordPress.

    • lessbloat 4:29 am on June 29, 2012 Permalink | Log in to Reply

      1) As I alluded to in my disclaimer, the area that I’m most interested in focusing (at the moment) is in gathering more data around who’s using WordPress, and what they’re doing with it. For example, I’d like to figure out the percentage of people who download WP that:

      • use it for business vs. a personal site
      • use it for a blog/website/blog & website/other
      • consider themselves designers/developers/both/neither
      • are first time users/repeat users
      • are building a site themselves/or for someone else
      • consider themselves novice/intermediate/pros

      I’m also very interested in figuring out a way to create a benchmark of sorts and a way to chart our peaks and valleys within the app (moments of joy/pain) over time. If we can figure out a way to do that, we can then prioritize the elimination of the biggest valleys, and work on flows that get users to moments of joy quicker and more frequently.

      2) A couple of things:

      • Welcome screen – I think we all agree that a second pass may be beneficial here
      • Media insert – Giving the “Insert into post” button a class of button-primary (would make it stand out a bit better)
      • Toolbar links – I may be opening up a can of worms here (not knowing any back story on the current design), but I’d love to see A) some visual indication that each of the 4 drop downs are in fact a drop downs, without having to hover over them, and B) some ideas around ways to make the “+ new” drop down stand out a bit more (it’s a really handy resource, and 2 of the 3 users never noticed it).
      • Color selector – I’m with @helenyhou, I’d love to see this get some attention (paging @koopersmith ;-))
      • Media upload – It might be nice to at least start brainstorming alternative flows here

      3) Honestly, these all sound exciting to me. I’ve tried to list them in order (based on impact/time) specifically with the goal of improving this discovery cycle. After we’ve got a few patches pulled together, I’ll apply them to my little testing environment, and rerun this scenario-set with 2 additional users.

      I’ll also be working towards getting my hands on some more data. I’ll post more about that to this P2 in the coming weeks.

    • Shane Pearlman 3:43 pm on June 29, 2012 Permalink | Log in to Reply

      For #1, I’m deeply fascinated with that question. While .com may have some success in beginning to build those analytics, I have no clue how to proceed on .org driven sites besides surveys. With such a vast ecosystem, how do you get strong data about user roles and behaviors. For example, I’m deeply curious how many users on average have admin level access (even if they don’t need it) vs people in editorial / authorship roles. It truly affects their experience on the back end.

      @lessbloat, how were you thinking of exploring?

      • lessbloat 4:23 pm on June 29, 2012 Permalink | Log in to Reply

        For the first part of #1, I’d love to start off by running a series of small (one-question) KissInsights polls after people click the download button on https://wordpress.org/download/. It would look something like this: http://cl.ly/0n0y1v3N3Y1m1L0D1X1S

        After we get some data, I’ll summarize the results on this P2.

        The second part (figuring out a way to measure peaks and valleys over time) is going to take some noodling. I’m all ears if you’ve got any ideas.

        • Shane Pearlman 6:43 pm on July 3, 2012 Permalink | Log in to Reply

          +1 for the kiss insight poll. That is a great idea.

          • lessbloat 7:34 pm on July 3, 2012 Permalink | Log in to Reply

            With that said, it’s still self-selecting. I have no idea at this point what percentage of users get their WP install from WP.org. I’d also venture to say that those users fall on the outskirts of WP’s 30 million users (on the more advanced side). But, it’s a start, and any data is better than no data IMO, as long as you acknowledge that it’s a bit tainted.

            Though @Jane did have a great idea about adding the UI Advisory signup form on the forums, maybe we could get a few KissInsignts tests in there?

  • Chelsea Otakan 8:10 pm on September 7, 2011 Permalink
    Tags: ,   

    Resurrecting these! This chat normally takes place on Tuesdays, but was postponed due to some storm difficulties.

    Reminder:ย Freeze is in two weeks. Responsive admin is our highest priority right now.

    Responsive Admin –ย #18198

    • Discussed some webkit bugs when styling the admin. @saracannon is looking onto resolving.
    • Newcomers hhsandi and sabreuse will be looking into styling list tables. Welcome!
    • @azaozz recommended a focus an tablet optimisation for 3.3. Still keeping an eye on mobile, but some editor issues may prevent full optimisation for 3.3.
    • Discussed the problem of TinyMCE compatibility.
      • Since iOS doesn’t support contentEditable, almost no WYSIWYG editors will work. iOS5 may be released before 3.3 and is slated to support contentEditable.
      • Will need to style tMCE buttons to be optimized for touch. Anyone on iOS5 welcome to help test :]

    Menu Flyouts – #18382

    • Currently in trunk. Yay @koopersmith. Any UI improvements/suggestions welcome.
    [New User] Experience


    View the IRC Logs for this chat.ย 


    • scribu 8:46 pm on September 7, 2011 Permalink | Log in to Reply

      That last item should really be called ” Experience”, to avoid confusion with “New “.

      • scribu 8:47 pm on September 7, 2011 Permalink | Log in to Reply

        One more time:

        That last item should really be called โ€[New User] Experienceโ€, to avoid confusion with โ€œNew [User Experience]โ€œ.

        • Chexee 9:15 pm on September 7, 2011 Permalink | Log in to Reply

          Haha, thanks! Edited the post te read correctly

        • Jane Wells 2:53 pm on September 10, 2011 Permalink | Log in to Reply

          Actually, no. The “feature” @koopersmith and I are working on there is actually three features. One is around new feature launches, one is around new wp users, and one is around new updates. So โ€œNew [User Experience]โ€œ would actually be pretty accurate.

    • Marko 12:32 am on September 9, 2011 Permalink | Log in to Reply

      I would love to help with iOS5 stuff. Did notice I can now scroll in the view.
      Did download the newest TineMCE and upload that to my WordPress trunk installation.
      Not sure how to get the TinyMCE view.

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
Skip to toolbar