Ready to get started?Download WordPress

Make WordPress UI

Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • Janneke 3:57 am on September 1, 2014 Permalink | Log in to leave a Comment

    The next Front-end Editor meeting will be September 2, 2014 17:00 UTC! Take a look at the project on GitHub to get a good idea of what current state is. There are quite a few big changes. It only works with WordPress 4.0 and the plugin in the .org repo is not up-to-date. If you’d like to get involved, make sure to attend. I’m not going to continue the Skype group, we’ll just use IRC, GitHub and these P2 posts. As soon as WordPress 4.0 is released, I’ll release a 1.0 beta and publish a post about all the changes.

    • Achin 8:16 am on September 1, 2014 Permalink | Log in to Reply

      Hi Janneke,

      I would like to add my Idea link here from WordPress.org: http://wordpress.org/ideas/topic/wordpress-pagesite-layout-builder?replies=3#post-27109

      Idea – How about having a default WordPress feature for layout customizations which could be integrated with Twitter Bootstrap to set the width of the sections

      Advantage –
      1) user friendly – No need to code page templates for defining layouts. This makes it user friendly, so users who are not good with PHP could also modify,edit layout
      2) Dynamic plugged content – Widgets could be used to place content dynamically without having to code for content
      3) Saves a lot of turn around time
      4) Enhances default WP page editor

      Basically integration of Bootstrap and its layout builder (column and row arrangement) with the WordPress admin page editor :)

      • Janneke Van Dorpe 3:48 pm on September 1, 2014 Permalink | Log in to Reply

        Hi Achin,

        Thanks for your interest. For now, I’d like to focus the project more on editing and creating posts rather than building a website, but we can certainly think and experiment with that in the future. A lot of people seem to want this, but I’m not sure how it would work. It looks like it’s the theme that would have to do most of the work to make it all work.

  • Siobhan 4:07 pm on August 29, 2014 Permalink | Log in to leave a Comment

    Image Flow Update 29th August 2014 

    Thanks everyone who came to the meeting. Here’s the link for anyone who wants to catch up.

    Goals and Objectives

    We discussed the goals and objectives of the project. We agreed that, rather than tinkering around the edges, the project should be focusing on a complete overhaul of image editing, with a focus on usability.

    @mor10 asked questions in the chat room which we discussed.

    What role does the Image Editor play in the regular process of adding images to posts and pages? And more specifically, what functionality should the user reasonably expect to be available from the image editor out of the box?

    We’re aiming for tighter integration of the image editing tools with the image upload workflow. At the minute they feel very separate. The user should expect limited functionality out of the box.

    Where is the Image Editor positioned in the user workflow? Does it belong in the modal itself? Does it belong in a separate modal like it does now?

    We envisage this being in the modal.

    What image editing functions belong under a separate “Edit Image” tab and what functions may be better placed elsewhere, either in the image modal or in the content editor itself?

    Basic image editing in the modal and advanced options elsewhere.

    Labels and Terminology

    Pablo created a labels and terminology document. If anyone wants to review it you can add to the list of the takeaways on the right of the spreadsheet.


    We’ve added some mockups to the folder. We’re spending another week working on these.

    Other stuff:

    • elham1388 6:22 am on August 30, 2014 Permalink | Log in to Reply

      This is great news…

    • elham naseri 7:06 am on August 30, 2014 Permalink | Log in to Reply

      Very excited about this!

    • designsimply 2:39 pm on September 2, 2014 Permalink | Log in to Reply

      We get feedback at WordPress.com about image handling from time to time. Here are a few selected snippets from one user in one recent live chat session. I think these concerns are representative of a lot more users:

      • Image search behaves unexpectedly (i.e. cannot search for filename)
      • Pagination would be better for grid mode because it takes way too long to scroll through media for someone who has uploaded thousands and thousands of images
      • The “Insert Media” screen has an option to see Unattached images but the “Create Gallery” screen doesn’t
      • Grid mode would be more helpful if it showed at least some information, like list mode (could screen options solve this? is it worth doing?)
      • Filtering by date would be mega useful to have in the Insert Media and Create Gallery screens (example)

      Note that I’ve paraphrased the feedback above to shorten it. Props @hafiz for the original post.

      Ideas based on this feedback:

      • Search and filtering are pain points and would be great areas to improve in regard to overall media handling
      • I wonder how common a use case it is for a user to have thousands of images in their media library

      Aside: I love photography, so this topic is close to my heart. :)

    • designsimply 3:58 pm on September 2, 2014 Permalink | Log in to Reply

      I watched the hangout. Thanks for posting it!

      You stated two goals at the beginning:

      Improve the image editing experience and refactor media handling.

      Those things seem separate but inextricably linked. I see media handling including things like how to search and filter for images from various locations, and I see the image editing experience as one smaller part of media handling. Are you planning a true media overhaul covering both?

      On the media replacement problem:

      Cannot swap out an image because each new image gets a new name

      Because of the way different plugins and themes have the ability to generate different image sizes (i.e. using add_image_size()), this area could get pretty sticky. There are also technical implications such as image CDNs like Jetpack’s Photon (and others) to consider. I’m just noting these as things to keep in mind. Aside: I’ve seen the media replacement pain point in regard to PDFs particularly, i.e. a restaurant wants to upload a new weekly menu each week with the same file name.

      On rotating images:

      Rotating images should be something you can do right after you upload, not something you need to go through a bunch of screens to get to

      Bulk image rotation could be mighty nice!

    • Matt McLaughlin 9:13 pm on September 2, 2014 Permalink | Log in to Reply

      Haven’t had time to make meetings (and probably won’t unfortunately) but was able to throw some mockups in the Drive. A few points:

      1) There are two functions that the modal needs to provide a) find the image and b) do something with it. A is essentially library functionality and B is Manipulation. I’d love to see the layout more fully embrace that with a clearer library navigation pane. And separate out the navigation functions from the manipulation functions.

      2) Uploading and inserting from URL are functionally similar in a way that isn’t being made obvious through the interface. In both cases you’re getting content and bringing it into the library. In one case it’s an upload, in the other you’re inserting a symbolic link but they’re clearly related concepts and should be brought together under “Upload/Import”

      3) Here’s a fundamental constraint: There isn’t enough space on the screen to both expose functionality to select images from a large library AND do all the required manipulations on them. So on some level you’re going to have to have a dynamic UI.

      If you’re going to have a dynamic UI within a modal you need to make transitions and state super clear. That means a clear distinction between “Hey User, you’re in select images mode” and “Hey user you’re in edit mode”.

      4) It’s not clear to me what the value of “Create Gallery” is over say repurposing the Insert Image button dynamically as “Insert ImageS”. We’ve created a sort of term of art around Galleries that wasn’t at all obvious to me as a new user of WordPress, and I’m not sure if it’s entirely necessary. I know this might be heretical, but do we need the term “Gallery”?

      5) For rotate which is probably the most common transformation, could we put it on a hover overlay right in the library itself?

      6) Lastly I’m begging everyone to show some love to .pdfs and .docs as media. Having to go to insert media to insert a word doc is powerfully unintuitive to most of my users. We either need to use more file type agnostic words like “Insert” (without the “Media”) or we need to bite the bullet and accept that users conceptualize .docs different than images and give them their own insert point and their own library. Yes this is above all of our pay grades.

  • Siobhan 4:23 pm on August 22, 2014 Permalink | Log in to leave a Comment

    Image Flow Update 22nd August 2014 

    Thanks everyone for coming to the meeting! If you missed it, you can catch up with all out lovely faces right here.

    Here’s what happened:

    User Interviews

    We discussed the user interview document. If anyone has any additional thoughts on it please leave a comment. These were the main takeaways:

    • users aren’t aware that the editing tools are available
    • The “link to” option is confusing to users. They don’t understand what the options do
    • The crop tool confused every user
    • labelling is confusing throughout
    • we could use better icons
    • it’s not obvious to users that the images they upload aren’t attached to a single post but are available throughout
    • the edit original text isn’t clear


    • need a volunteer to create a spreadsheet that lists all of the labels and terminology and looks at what other platforms do so we can start working on improving naming conventions
    • need someone to review the media grid user testing and come up with a list of things relevant to this project
    • @siobhan to talk to gcorn about decisions made about options in 3.9
    • everyone to review the UX workflow document to see how we can streamline things

    Next Step

    It’s time to start sketching out what you think the media modal should look like. That’s this screen right here:

    Screen Shot 2014-08-22 at 17.19.09

    If you haven’t yet, it’d be worth looking at the media grid in WordPress 4.0. We should aim for consistency across the UIs

    Use whatever tool you want. If you want access to the wp.org balsamiq account let me know and I’ll add you.

  • Siobhan 4:13 pm on August 22, 2014 Permalink | Log in to leave a Comment

    UX Flow for Image Uploading and Editing 

    @teamadesign has created a detailed workflow chart for uploading and editing images in WordPress.

    We can use this thread to interrogate the workflow and see how we can streamline it. If you’re interested please leave comments. We’re interested in the following:
    1. Which steps can we remove from the workflow?
    2. Can any steps be combined?
    3. Are there any paths that are confusing?
    4. Is their any functionality or options that we can remove completely?

    • berkun 4:24 pm on August 22, 2014 Permalink | Log in to Reply

      Is this flowchart supposed to be based on 3.92 or 4.0?

    • hearvox 6:32 pm on August 23, 2014 Permalink | Log in to Reply

      The (excellent) flowchart got me thinking of several possible impediments in the Media workflow. Perhaps it’s too far in the process for my $0.02, but here goes anyway. I’ve taught dozens of folk to use the WP image edit tools. Some use them regularly, others never touched them again. I occasionally use them (but much more often need Photoshop’s features — mainly the compression tools, 2 Up views, and file-size estimates.) Among the issues the WP image editor has — some for me, some for others — are:

      • 1. EDITED/ORIGINAL RELATIONS- The UI doesn’t make clear how the edited copy and the original relate. The edit gets an appended filename (ImageName-e123456.jpg). It’s easy enough to restore the original in the Edit Image screen. But outside of that all connection to the original is obscured, in both the Media Library and Add Media screens.

      The Attachment Details section still lists the original’s filename: ImageName.jpg, while the Link To: Media File refers to the edit (…/ImageName-e123456.jpg).

      A quite common use case would be to scale an image for display in the post but link to the larger original. That’s not simple unless you hand-edit the href (removing the added filename chars).

      Perhaps the Attachment info can always indicate you’re viewing an edited image, w/ some ref to the original displayed. Two possibilities (both in Attachment Display Details section): the “Link To:” pulldown could offer “Original File” as a selection for an edited image. And/or the “Size:” pulldown could offer “Original” as an option.

      • 2. PNG BLOAT- I have occasionally uploaded PNGs and found the post-upload processing created much larger than expected filesizes for thumb/medium/large version — larger than the originals. Haven’t tested further to find what parameters might have triggered this — can do so if it’ll help.
      • 3. MEDIA UPLOAD SUB-FOLDERS- I work on mid-sized journalism sites, w/ dozens of users and 100s or 1000s of attachments. Even non-tech users often go in via FTP: can be faster than Media Library to see what’s where and what’s named what. The ability to organize into year/month folders is quite helpful. But offering a, option to add/upload-to additional user-named sub-folders, w/in yr/month, would really enhance file management.
      • 4. SELECTABLE MULTIPLE IMAGE SIZE CREATION- Speaking of FTP views, would be enormously helpful if you could chose when to and when not to create multiple image sizes of an uploaded image. Our typical posts may have 10 images, but only the feat.img and maybe one other need multiple versions. But w/ end up w/ 40 imgs instead of the 10-12 we want; this makes it harder to find imgs via FTP (and causes storage bloat).

      I know the above, esp. the last two, are: if (wishes == horses) { beggers.ride };

      And there’s probably scripts out there that do what I propose (tho I’ve looked and haven’t found). But perhaps in the Media workflow process, there’s room to think about some these features. Be happy to help in any way.

    • szepe.viktor 3:53 pm on August 25, 2014 Permalink | Log in to Reply

      Good morning!
      Is there a mailing list (or something like that) for ideas?

    • szepe.viktor 4:32 pm on August 29, 2014 Permalink | Log in to Reply

      Could you help me about this idea? (solarized color scheme)

  • Siobhan 3:27 pm on August 15, 2014 Permalink | Log in to leave a Comment

    Image Flow Meeting 15th August 

    Thanks everyone who attended the meeting. You can watch it here: https://plus.google.com/events/cgp24dsgqid508vngn506ga8r20

    We discussed:

    User interviews

    We agreed that we want to move on from the user interviews next week. These all need to be written up, so we agreed that the following people would take responsibility for one each:

    @mor10 has created a document for the findings. @mor10 can you please add any sections/ questions you think ought to be looked at/answered by Sunday evening. Everyone else will be documenting the interviews from Monday.

    Everyone else – please have them written up by Thursday so that ppl have time to read them before the meeting.

    User workflow

    @teamAris has created a user workflow diagram that maps out the image upload/editing workflow to help us identify specific points where there are problems in the workflow.

    The aim for next week is to have the user interviews written up so we can move on to working out ideal workflows.

  • Siobhan 6:37 pm on August 8, 2014 Permalink | Log in to leave a Comment

    Image Flow Update 8th August 

    Thanks everyone who attended the meeting. Here’s what we discussed:

    Market Analysis

    We looked over the market analysis. The main findings are here, but in case you don’t want to read, the salient points were:

    • most blogging platforms don’t have any image editing tools other than sizing, alignment, and adding captions
    • platforms with heavy image editing use third party editors such as Aviary (Squarespace & Flickr) and Picasa (Blogger)
    • the platforms with the simplest UIs are the most effective, with Aviary providing the cleanest UI for actual editing

    User Interviews
    @mor10 has carried out 4 interviews and has some more planned. He’s looking to interview someone who uses WordPress professionally and someone who manages a multi-author blog. The interviews will be written up over the weekend. He’s going to connect with @sonjanyc to update the personas. We’ll review the personas and user interviews next week at the meeting.

    Meeting time
    We agreed to change the meeting time to Fridays at 15:00 UTC

  • Siobhan 6:53 pm on August 2, 2014 Permalink

    Image Flow Update 2nd August 

    Thanks to everyone who attended the image flow chat yesterday. If you weren’t able to attend, you can catch up on the meeting here.

    What was discussed

    • we agreed to work on the market analysis until next Thursday, after which point we’ll review what’s been done and what we can learn from each of them. I suggest that we do this by creating a collaborative document that we can use to come up with a list of things that we want to learn from each platform. We can discuss these at the Friday meeting.
    • the personas and user interviews aren’t complete yet. These should be complete by 15th August.

    @klosi asked in the chat room about changing the meeting time. We’ll need a time that will accommodate people in the following time zones.


    Anyone got a suggestion about a good time?

    If anyone wants to join in, you can join our gitter chat room here.

  • Jerry Bates (jerrysarcastic) 7:24 pm on July 22, 2014 Permalink
    Tags: ,   

    Media Grid – User testing round 1 

    We recently performed some quick user tests on the Media Grid (at Beta 2) to see how users fare when performing various tasks, and came out with some interesting results.

    TL;DR - The concept of the Media Grid was intuitive and easy for users to understand, especially navigation and editing metadata; however, uploading media and bulk selection tasks were still problematic for most. A lot of work could be done to make these more straightforward.  

    We also tested hiding all metadata (title, mime type, etc.) from the grid view, and saw no difference in performance, which hints at the possibility that metadata is not as important here as it is in the list view.

    Follow the jump to see more details about this round of user tests. (More …)

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

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

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

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

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

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

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

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

      I just fundamentally don’t get the “Select function from drop down, then hit this separate button for ‘activate function'” UI. Why would you not simply have a delete button? I’ve never really understood the way word press does bulk actions. And if you’re going to go with buttons, why would you put them at the bottom rather than the top?

      Isn’t the simplest solution here to just replace the bulk actions pull down + apply buttons with buttons for the actions themselves? If you have more actions than fit in the bar, make the rightmost a “More” pulldown for the least used actions.

      You should also separate out the “Changes the filters or views” functionality from the “Does something to the images I’ve selected” functionality. My suggestion would be to put View, Filters and Search on one bar and the “do something” buttons like delete on a second bar just below it.

    • Matt McLaughlin 8:56 pm on July 29, 2014 Permalink | Log in to Reply

      Sorry for the late replies, but a few more thoughts:

      1) Not only is the meta-data not necessary, but the check box thing isn’t necessary either. A much more visually elegant way to do this would be to use the bright blue border to indicate selected, and at the same time grayscale out the non-selected images. Use standard optional keystrokes for multi-select (shift selects everything in between and command does non-contiguous multi-select). If you’re worried about discoverability put a little tool tip somewhere.

      2) A “Deselect All” Button would be nice

      3) If you’re going to add a button bar with Edit, Delete, etc. then it makes sense to put the Upload/Add media button in that bar instead of weirdly floating by itself next to the title.

      4) It’s a little hokey, but if you’re worried about people not realizing they’re editing multiple photos you can have the buttons change names on multi select i.e. “delete” becomes “delete all”.

    • Paal Joachim Romdahl 6:37 am on August 17, 2014 Permalink | Log in to Reply

      White thumbnails with black text or low contrast color and the contrast between the background color of the media library. Having a way to perhaps also adjust the thumbnails seen in the media library.

    • Paal Joachim Romdahl 6:41 am on August 17, 2014 Permalink | Log in to Reply

      Sort media by alphabetical order in addition to by date and type.

  • Siobhan 7:15 pm on July 18, 2014 Permalink

    Image Flow Update 18th July 2014 

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

    Name: Our name is “Image Flow”

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


    The process will go in the following stages:

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

    Current Tasks

    Current tasks are as follows:

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

    Ongoing tasks

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

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


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

  • Siobhan 12:43 am on July 18, 2014 Permalink
    Tags: ,   

    Image Editing Meeting Agenda – 18th July 

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

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

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

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

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