Make WordPress Design

Recent Updates Page 2 Toggle Comment Threads | Keyboard Shortcuts

  • Siobhan 10:29 am on March 18, 2015 Permalink

    Image Flow Catchup 

    Now that we’re ready to start making a plugin, this post will catch you up on some of the important things to read before diving in.

    Wireframes and Flow Charts

    The interactive wireframes will give you a pretty accurate visual overview of where we’re going with the project. Note that the wireframes are based on a large amount of research into how different platforms and applications handle image storage, upload, and editing.

    There are also user flow charts which show the planned user flows through the interface. It’s worth comparing these with the current flows through the modal.


    The in-browser prototype is a skeleton representation of how we see the basics working. It isn’t perfect, but the basics are there. We’ve decided that at this point it’s best for us to move onto the plugin. However, @mor10 is doing some user testing on the prototype and we’ll use that feedback for refining the plugin.

    Prototype Resources

    Background Reading

    if you’re interested in some more background reading that should give you insight into various decisions, these are some things worth looking at (this is not essential to read before getting started):

    Next Steps

    The next step is to break the plugin down into discrete, achievable tasks. This should get things moving more quickly. we can use the Image Flow Github account. As soon as it’s in a usable state we’ll put the plugin in the repo so it’s easy to test and we can get feedback.

    The regular meeting is at 17:30 UTC on Thursday.

    • Ryan Boren 4:23 pm on March 18, 2015 Permalink | Log in to Reply

      My initial impressions from my first time running through the prototype a few days ago.

      I went in with the goal of publishing a single captioned image. After clicking add media, I’m greeted with a media lib type view. There’s no greyed out button bottom right to indicate the possible next step. When comparing the prototype flow to production flow, I realized I missed having a persistent button bottom right. That’s what I’m used to after years of using the media modal.

      I click an image, again with the goal in mind of creating a captioned image. I go from no buttons to three. That More button feels very in the way. I tend to like the primary action anchored right and aloof from other buttons. So, I have three buttons, three decisions lined up in a row now. I want to caption, so I shouldn’t insert yet. More is just something I’m going to have to develop blindness to, so I get started on that by ignoring it. I click View.

      Still no details. I have Insert and more bottom right and a ton of stuff at the top. Grid, Select Media, info, Edit, close. Plus two arrows. And a big checkbox. And image numbering (1 of 7). This is overwhelming. I came here looking to add a caption. I think someone looking to add a caption could very naturally try Edit, but that’s not it. Info is what you want.

      Once info shows, I put in a caption and make another decision. Am I ready to publish? The Insert button is active and ready, but what exactly am I publishing? The arrows and numbering make me wonder if I’m publishing a gallery. I’m here for one image and don’t want to do that. Do I need to back up a level? How do I do that? Where am I? When I get lost, I seek context and a way back. I look for a persistent context keeper and escape route. I don’t feel a nav anchor.

      I appreciate the power of all of this, but this attempt at a single captioned image has me doubting the image details flow. The non-persistent, top left escape route nav feels inadequate as a nav anchor. The latest customizer work uses a persistent header and stacked nav. The MT riff mock has a persistent bottom left escape route. I like the way those give a consistent escape route.

    • Andrew Ozz 5:56 pm on March 18, 2015 Permalink | Log in to Reply

      I also went through the different flows in the prototype. Did that before reading any feedback or looking at the conversations in Slack in an attempt to be as impartial as possible :)

      Was surprised by the “dynamic” buttons at the bottom a bit. Probably better to have at least the “Insert” there at all times, greyed out when nothing is selected? Wouldn’t mind if the other buttons were there and greyed out. Can probably get used to them being dynamic, just a bit surprising how the whole modal goes from being pretty plain/minimalistic to having many places to click/draw attention as soon as you click on an image. Also the width of the buttons should probably be constant/unchanged when showing more or hiding existing.

      Really dislike the horizontal list of selected images at the bottom left. It is pretty much unchanged from the current modal and has no good functionality. It is really hard to see what is on the super tiny thumbnails. Also the horizontal scrollbar that shows when more images are selected takes about 1/4 of the space and makes the whole thing look like something went wrong or something is buggy. This is hidden on smaller screens, IMHO best to remove it completely.

      After selecting several images another surprise was that clicking on “View” removed that button and shifted the name/label from the top/left (the opposite part of the modal). Then a “Grid” button appeared there. Had to click that small/different/far away button to go back. Also “Grid” being the opposite of “View” (as you have to click one to reverse the other) doesn’t feel right. Perhaps better if “View” was “Single view” and changes to “Grid” instead of being hidden after clicking on it.

      Having to click the smaller “Info” button in the top bar to get to the image properties was pretty hard to find/understand. The label “Info” doesn’t seem to correspond to “Edit Metadata”, “Image Details”, “Post Settings” (the names/labels of the sections that are shown). Maybe “Settings”? Generally I wouldn’t mind having a gear icon next to the checkmark icon for accessing the image properties/settings. Also I am (probably like most people) used to have “controls” at the top/right or top/left, having that big checkmark at the bottom/left feels somewhat out of place.

      All of the rest feels pretty good. Really like the ability to browse the selected images either as big “previews” or as image settings “boxes”. Starting to wonder why it is only for selected images, should probably be available for all the media library.

      Of course there are still places where behaviors can be improved. For example after selecting more than one image, the default should probably be “Create Gallery” instead of “Insert”. It is relatively very very rare for more than one image to be inserted in a post at the same time (frankly, not even sure we need to support that). In almost all cases a gallery is created.

    • Siobhan 6:30 pm on March 18, 2015 Permalink | Log in to Reply

      Thanks for your feedback! I’m not going to be at the meeting tomorrow but that’d be a great time for everyone to process it.

      Just a note on this:

      For example after selecting more than one image, the default should probably be “Create Gallery” instead of “Insert”. It is relatively very very rare for more than one image to be inserted in a post at the same time (frankly, not even sure we need to support that). In almost all cases a gallery is created.

      When I was doing a lot of longform article writing I used that -all- the time. It makes it easy for me to insert all of the images at once and then move them around within the content. What I used to have to do was:
      1. Insert all of the images in one go
      2. Go to Text View
      3. Copy and paste the html for the images into the right place

      That was fairly hacky. I can just drag the images into position now :)

      Anyway, I’m just saying that it’s something that I would really, really miss.

      • Andrew Ozz 9:04 pm on March 18, 2015 Permalink | Log in to Reply

        Yeah, that is an “advanced user” feature” :)

        Dragging images inside TinyMCE is somewhat problematic and not really recommended. Currently it is disabled if the images have a caption as you will drag them out of the caption elements. Also links are typically not dragged together with the images.

        So for most users that workflow will be quite harder than inserting 3-4 images separately :)

        This shouldn’t be the default IMHO.

    • Konstantin Obenland 10:24 pm on March 18, 2015 Permalink | Log in to Reply

      Some small observations from me:

      The first thing I notice after opening the modal is the big blue Add New icon. It reminds me of the one on the Appearance screen, but there it’s the last item. It probably makes sense to have it be the first item in the media modal, especially once there are more than ten media files. I’d expect the entire square to be clickable though.

      I click on the second picture to insert it and the action bar appears. Personally I’m not a fan of transitions, it makes the interaction feel very slow. The tiny thumbnail of the selected image is not really helpful, it makes the bar just feel more cluttered, in addition to the three action buttons. I also wish it would be more obvious that I selected that picture. A big blue border like in iPhoto or something. That check mark is small and not easy to see.

      I click on view. I don’t know why it’s there, I can view the image right now, but it must be important otherwise there wouldn’t be a button. I get a magnified view of the first available image, not the one that I selected. It also has a check mark even though I did not select it. I click the X on the top right to get back to the overview but that closes the modal.

    • teamadesign 4:54 pm on March 19, 2015 Permalink | Log in to Reply

      Thanks for the feedback folks, much appreciated! We’ll discuss these at our next meeting and iterate the prototype to incorporate these notes and get feedback.

  • designsimply 6:25 pm on March 15, 2015 Permalink
    Tags: accordion vs sliding panels, , theme switcher,   

    Usability Testing for WordPress Customizer Theme Switcher Improvements 

    I did five usability tests for theme switcher and sliding panels in the customizer.


    • Users found the customizer very user-friendly overall.
    • Expected clicking on a theme thumbnail to open a preview, not the details modal.
    • Difficulty navigating back using the current 4.2-alpha design (pre-31289.diff).
    • Expected clicking the “Save & Activate” button to not kick them to the front end.
    • “Save & Publish” is clicked a lot more often for sliding panels.
    • I asked two users (note small sample size) which navigation style they preferred, both picked accordion.

    Full Videos

    1. 1406491a-usertesting.mp4 (17m5s)
    2. 1408362a-usertesting.mp4 (8m53s)
    3. 1408760a-usertesting.mp4 (7m58s)
    4. 1408936a-usertesting.mp4 (11m15s)
    5. 1414874a-usertesting.mp4 (15m35s)

    (More …)

    • Weston Ruter 10:53 pm on March 15, 2015 Permalink | Log in to Reply

      People love widgets. :) cc @westonruter (because you do awesome work with widgets)

      Thanks for that feedback! I bet they would find the Customizer experience even better with the Customize Partial Refresh plugin active. When implemented, it eliminates the need to refresh the full preview when making a widget change; instead, it will just fetch the single widget’s contents and replace it inline, so it is much faster and less jarring. Reordering of widgets is done without any server round-trip at all.

      Widgets get stuck half way when first selected (#, #)

      Yes, this is a known issue. See #31014.

    • Davide 'Folletto' Casali 11:48 am on March 16, 2015 Permalink | Log in to Reply

      I’d back all your suggestions. Solid. :)
      I think the biggest one is probably “Save & Publish” that doesn’t close it. It wasn’t something we were testing for, but it’s the main issues that impacted all the tests a lot.

      I’d also add that currently the slider patch is not 1:1 with the latest design discussed in #31336, so worth re-doing it after it’s implemented. :)

    • designsimply 5:29 pm on March 16, 2015 Permalink | Log in to Reply

      I received some (good) critical feedback :) about the part of the tests where I asked users which option they preferred saying that part was flawed—I added some notes inline and would love to continue testing around this.

    • Nick Halsey 1:34 am on March 17, 2015 Permalink | Log in to Reply

      I haven’t had a chance to watch the last two tests, but based on the notes, I think we should look at the following changes:

      • Switch theme details/live preview (needs a ticket & patch for 4.2)
      • Commit the latest patch on #31289 (for 4.2)
      • Add the section-back arrow back to the header, over the close button, to address navigation confusion and the desire to constantly save & publish
      • Continue iterating on and testing the navigation changes, aiming to get that into 4.3 very early
  • Siobhan 7:36 am on March 11, 2015 Permalink

    Thanks everyone who attended the meeting last week… 

    Thanks everyone who attended the meeting last week (and apologies for my tardiness with the notes!).

    We had a serious discussion about the current process. After discussion of the prototype, we decided that in its current state it’s ready for testing the basic flow. There are a few bits of polishing that need to be done:

    • fixing the CSS on the back of the card
    • ensuring that full-width images remain selected when browsing through the images

    However, no more major development will be done on the prototype. We don’t think it is a good use of time to work on getting the editing features working. We’re going to start building the plugin and get the groundwork for that done while morten is testing.

    Therefore, next week’s meeting will be dedicated to scoping out the next steps for the plugin and getting that process going.


    • @mor10 to share his procedure for testing so that other members of the team can run tests too (complete
    • fix selection issues when in full-width (complete
    • fix styling issues on metadata screen (complete

    (great job on getting everything complete before I even write up the notes 😀 😀 :D)

  • Siobhan 6:48 pm on February 12, 2015 Permalink

    Image Flow Update 12th February 

    Thanks to everyone who attended the image editing meeting today. Here’s what we discussed:

    • prototype: the prototype is progressing. You can see the current version here.
    • @mor10 pointed out that the current version of the PT isn’t ready for testing. He has created a number of issues in the tracker to get the issues addressed
    • we discussed the ease with which people can get involved with the project. We agreed that it would be better to break the scenarios out into discrete issues for each screen


    • @siobhan to create a new list of issues for the devs to work on
    • @mor10 to add issues he’s come across to github
    • @mor10 to share his user testing process once it’s complete

    The dev meeting is on Friday at 17:30 UTC for anyone who wants to join.

  • Kelly Dwan 3:48 pm on February 6, 2015 Permalink

    Dashicons 2/5 Notes 

    Slack Archive

    We Discussed

    • SVG For Everybody was merged into github, the mockup can now be seen on IE9+
    • Debate over creating a core set of Dashicons, and leaving any icons not used by core in a downloadable pack.

    Dashicons “core set” Discussion

    Started from Michael’s comment about applying the core philosophies to dashicons. If we can narrow our focus on only the core icons, any improvements and changes only need to happen on this smaller subset of icons. For current dashicons users, creating your own icons in SVG should be simple- or they can download the SVG they want from somewhere.

    There was a lot of reluctance from the developers in attendance, I think because we use those icons :)

    We left off the discussion at this: for backwards compatibility it’ll be best to keep all dashicons in core. This may change as we move to implement this in core, it’ll depend how we handle backcompat.

    Since we haven’t made any final decision, any extra discussion should happen on the github issue for grouping icons.

    To Do

    • Note if/where icons are used on the google doc in this github issue.
    • Continue working on the mockup: refine the grunt tasks, browser test.

    We’ll meet again next week, February 12, 2015 18:00 UTC.

  • Siobhan 6:18 pm on February 5, 2015 Permalink

    Image Flow Update 5th February 

    Thanks everyone for attending the meeting today. Here’s what we discussed:

    1. Prototype

    • Scenarios 1 and 5 are complete, and scenario 2 is nearly complete
    • @pabloperea has nearly completed the full width screen. There’s an issue with swipe on mobile which Roy is going to look into
    • @mor10 is going to start user testing scenarios 1 and 5

    2. TinyMCE

    We had a brief discussion about what happens to the image outside of the flow. TinyMCE isn’t the most fun to use on a mobile device and it has some jarring behaviours when you’re dealing with the image. @iseulde suggested that we keep track of any issues. These should be reported on trac.

    3. Icons

    @teamadesign has created a list of icons, which @empireoflight is going to run by the dashicons team.


    • @mor10 to start user testing scenarios 1 & 5
    • @royboy789 to fix swipe issues in prototype
  • Kelly Dwan 8:00 pm on January 29, 2015 Permalink

    Dashicons 1/29 Notes 

    Slack Archive

    We discussed:

    • Merged the grunt task pull request.
    • Dropped in SVG For Everybody for IE support, works out-of-the-box for IE9+
    • IE7-8 will use PNG fallbacks, and we recommend just 2 color sets, a light and dark.
    • Subsetting Dashicons into groups based on use(?), ongoing discussion will take place on Github.
    • We also touched on creating new icons for 4.2, but new icons are not a priority

    To do:

    • @ryelle will update the repo to use SVG For Everybody.
    • @michael-arestad‘s going to work on the grunt tasks; and rename the pngs as needed.
    • Once those things are done, anyone can work on browser testing :)

    There’s also been work on the Dashicons style guide, so check that out & leave comments.

    We’ll meet again next week, February 5, 2015 18:00 UTC.

  • sonjanyc 10:36 pm on January 27, 2015 Permalink

    Meeting Notes and Discussion around Image Cropping 

    A sub set of the #feature-imageflow team met on Slack yesterday to discuss a few things, namely:

    1. Can we tackle to improve the image cropping experience in 4.2 ?
      Should we save versions of cropped images on a post level or crop and overwrite the original?
    2. We’re currently working on a prototype to prove out our UX strategy and to come up with an ideal solution before we go into development. However we wanted to look at features or improvements that could potentially be worked on already. Since the image cropping experience is so broken, we think this could be something we can work on separately and up front – and make a lot of people happy!

    I was meeting with several people in slack to discuss these questions yesterday: @dh-shredder, @ericlewis, @markoheijnen, @royboy789, and @antoniancu – after the official meeting was over we also had @boren, @mor10, @samuelsidler and a few others join in.


    I’ve created some flows for an ideal image cropping experience and shared those with the group: https://docs.google.com/file/d/0Byz0aohoFoOcUi02M1NHdTItVnM/edit

    The conclusion of the meeting in was that we agree that we should make iterative changes to improve the image cropping functionality and experience. We should come up with a full wish list of changes that need to be made to get to the ideal solution, and then decide which ones we can tackle now and which ones we’ll phase out. I will start working on this list and will get some help from the group refining it. Important will be to make this work on desktop as well as mobile!!

    @boren shared Vizrecs of three cropping flows, which helps identify pain points: https://make.wordpress.org/flow/2015/01/26/uploading-and-cropping-an-image-in-the-media-lib-grid-view-and-list-view-macnchrome/


    • No tool should be selected in initial state of editing mode, image cropping icon shouldn’t look “inactive”
    • When user clicks on cropping icon, full image should have a crop selection
    • User can change crop area with handles and reposition crop area by dragging (this should also work on mobile!)
    • Aspect ratio should have common pre-defined aspect ratios to choose from and an option to input a custom aspect ratio
    • Selecting an aspect ratio should lock selection of aspect ratio, so user can still drag corners to change image selection
    • Action buttons to apply/discart the crop should be “APPLY” or “DISCARD”
    • Should there be an option to crop the “original” vs. create new “post image version”?

    Please add anything in the comments I might have forgotten. Help us refine this list.


    When an image is being cropped it’s confusing to the end user whether it crops the original image or saves a new version. The discussion what would make most sense I’m sure came up internally many times already. So we talked about it as well. People have different opinions and ideas for this, but I soon realized that this discussion will need to be held in a much bigger circle. The overall consensus was that we do want to work towards what @dh-shredder calls “post image”. This means that if an image is being edited / cropped in a post context it will create and save a version of the image for that post and not effect the same image in different locations. If a user however edits an image within the Media Library, he/she edits the original image.
    This functionality would need to be worked out with a set of rules, there are obviously concerns about over-cluttering the media library… etc.

    • Mike Schinkel 2:17 am on January 29, 2015 Permalink | Log in to Reply

      I would really be great if the original image could *always* be maintained and never modified. In the media library modifying it could create a default image, but you should always be able to recover the original image. If the end user needs to think they are modifying the original image, let them, but still make sure to offer a “Recover original image” option.

    • teamadesign 8:26 am on January 29, 2015 Permalink | Log in to Reply

      Looking great, some really excellent points coming out of this conversation. The only element I would add (and it is present in both @sonjanyc‘s flows and her trac ticket) is that the pre-set crop ratios should be presented with a visual rep so that a user can quickly scan the icons and make a decision based on the look, rather than the completely abstract w x h formula.

      I like what @dh-shredder and @mikeschinkel have to say around a ‘post-image’ and an original image. It seems that having a canonical image that all others are iterative of would allow for a simpler organizational scheme in the media library…

    • Fabien Quatravaux 8:54 am on January 29, 2015 Permalink | Log in to Reply

      One feature I would really appreciate and that is buggy today is the ability to crop only the thumbnail version of an image. For example, I upload a picture of a friend in full-length, the cropped scare thumbnail would be centered on his chest instead of his face. I wish I could be able to correct that wrong thumbnail with the cropping tool.

      Today (in 4.1), the “Apply changes to:” settings with “Thumbnail” choice seams to have no effect, and I have no way to check the thumbnail version of the image after the crop. Instead, we could see a list of available picture sizes, with a preview for each, and a click on the thumbnail preview would load the thumbnail version into the cropping tool.

    • Graham Armfield 8:32 pm on February 3, 2015 Permalink | Log in to Reply

      Two points I’d like to add…

      Firstly, in the wishlist please can the list include a point that all functionality should be able to be used with keyboard only – from an accessibility perspective.

      Secondly re Discussing #2. I think a new image should be created from any cropping done. There may be situations when a site owner may wish to show both the cropped and original versions of an image on their site, or potentially show differeing crops of the same image to draw attention to specific elements within the image.

  • Mel Choyce 8:34 pm on January 26, 2015 Permalink
    Tags: community hub   

    Here’s a reminder for those who haven’t seen it. Please take a few minutes to fill in the Community Hub Poll as the poll closes Thursday at 00:00UTC.

    For more information on the Community Hub, please check out this post.

  • Kelly Dwan 6:57 pm on January 22, 2015 Permalink

    Dashicons 1/22 notes 

    Slack Archive

    We discussed:

    To do:

    • AnyoneCheck out the PR & leave any feedback.
    • @michael-arestad‘s going to keep tweaking the tasks – there are some things we don’t need, and can do in other ways. Also looking into alternatives that don’t generate a billion pngs.
    • Anyone: Leave any suggestions/resources/questions for the style guide as comments on that page.

    We’ll meet again next week, January 29, 2015 18:00 UTC .

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